/* ============================================================
   THEME — Light / Dark mode
   Overrides the existing --token system only. No component CSS
   needs to change; everything already consumes these variables.
   Accent hue is kept consistent across themes (brand identity);
   only lightness/contrast is tuned so it passes WCAG on white.
   ============================================================ */

:root, [data-theme="dark"] {
  --theme-dot: rgba(255,255,255,0.18);
  --theme-vignette: rgba(7,8,12,0.6);
}

[data-theme="light"] {
  --bg:        #FAFAF8;
  --bg-2:      #FFFFFF;
  --bg-3:      #F1F0EC;
  --border:    rgba(10,10,10,0.08);
  --border-hi: rgba(10,10,10,0.14);

  --t1: #16151A;
  --t2: #55535E;
  --t3: #8B8894;

  --gold:      #B8860B;
  --gold-dim:  rgba(184,134,11,0.08);
  --gold-line: rgba(184,134,11,0.26);
  --blue:      #3D5FDB;
  --blue-dim:  rgba(61,95,219,0.08);
  --red:       #D14424;
  --green:     #1C9A5C;

  --theme-dot: rgba(10,10,10,0.10);
  --theme-vignette: rgba(250,250,248,0.55);
}

/* Dot-grid + vignette use hardcoded colors in base CSS — repoint to theme vars */
body {
  background-image: radial-gradient(circle, var(--theme-dot) 1px, transparent 1px) !important;
}
body::after {
  background: radial-gradient(ellipse 80% 80% at 50% 50%, transparent 40%, var(--theme-vignette) 100%) !important;
}

/* ── Smooth theme transitions — scoped, not blanket * ── */
body, #nav, .section-nav, .nav-mob-cs,
.screen-frame, .meta-item, .hero-meta, .callout, .decision-deep,
.insight-card, .kd-card, .learning-card, .qual-card, .principle-card,
.hp-card, .evo-card, .findings-table, .findings-table thead th,
.findings-table tbody td, .impact-3col, .journey-map, .divider,
.next-project, footer {
  transition: background-color .3s var(--ease), color .3s var(--ease),
              border-color .3s var(--ease), box-shadow .3s var(--ease);
}

/* ── Theme toggle button ── */
.theme-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--border-hi);
  background: var(--bg-2);
  color: var(--t2);
  cursor: pointer;
  flex-shrink: 0;
  transition: color .2s, border-color .2s, background .2s, transform .2s;
}
.theme-toggle:hover { color: var(--t1); border-color: var(--gold-line); }
.theme-toggle:active { transform: scale(0.92); }
.theme-toggle svg { width: 16px; height: 16px; }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="light"] .theme-toggle .icon-sun { display: block; }
[data-theme="light"] .theme-toggle .icon-moon { display: none; }

@media (prefers-reduced-motion: reduce) {
  body, #nav, .section-nav, .nav-mob-cs, .screen-frame, .meta-item, .hero-meta,
  .callout, .decision-deep, .insight-card, .kd-card, .learning-card, .qual-card,
  .principle-card, .hp-card, .evo-card, .findings-table, .impact-3col,
  .journey-map, .divider, .next-project, footer, .theme-toggle {
    transition: none;
  }
}