/* Dark-mode refinements beyond CSS variables */

[data-theme='dark'] .mobile-menu {
  background: var(--color-surface);
}

[data-theme='dark'] .count-control {
  background: var(--color-surface);
}

[data-theme='dark'] .tool-output__actions {
  background: var(--color-surface-alt);
}

[data-theme='dark'] .deco-panel {
  opacity: 1;
}

[data-theme='dark'] .pull-quote {
  color: var(--color-text-muted);
}

[data-theme='dark'] .btn--outline:hover {
  color: var(--color-primary);
}

[data-theme='dark'] .hero {
  background: linear-gradient(
    155deg,
    color-mix(in srgb, var(--color-surface-alt) 88%, transparent) 0%,
    var(--color-bg) 42%,
    color-mix(in srgb, var(--color-surface) 94%, #000) 100%
  );
}

[data-theme='dark'] body.page-body {
  background-image:
    radial-gradient(ellipse 130% 85% at 100% -18%, color-mix(in srgb, var(--color-primary) 11%, transparent), transparent 55%),
    radial-gradient(ellipse 95% 65% at -8% 72%, color-mix(in srgb, var(--color-accent) 8%, transparent), transparent 50%);
}

[data-theme='dark'] .tool-controls {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-surface) 94%, var(--color-primary)) 0%,
    var(--color-surface) 35%
  );
  box-shadow: 0 12px 40px var(--color-shadow-deep);
}

[data-theme='dark'] .page-hero {
  background: linear-gradient(
    175deg,
    var(--color-surface-alt) 0%,
    color-mix(in srgb, var(--color-bg) 92%, var(--color-primary)) 100%
  );
}

[data-theme='dark'] .hero__watermark {
  opacity: 0.045;
}

[data-theme='dark'] .tool-output__text {
  color: var(--color-text-muted);
  scrollbar-color: var(--color-border) var(--color-surface-alt);
}

[data-theme='dark'] .tool-output__text::-webkit-scrollbar {
  width: 10px;
}

[data-theme='dark'] .tool-output__text::-webkit-scrollbar-track {
  background: var(--color-surface-alt);
  border-radius: var(--radius-pill);
}

[data-theme='dark'] .tool-output__text::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: var(--radius-pill);
}

[data-theme='dark'] .faq-item {
  border-color: var(--color-border);
  background: var(--color-surface);
}

[data-theme='dark'] .faq-question:hover {
  background: var(--color-surface-alt);
}

[data-theme='dark'] .stats-bar {
  background: linear-gradient(
    160deg,
    var(--color-surface-alt),
    color-mix(in srgb, var(--color-surface) 78%, var(--color-primary))
  );
}

[data-theme='dark'] ::selection {
  background: rgba(76, 175, 80, 0.38);
}