/* ======================================================================
   tokens.css — Single source of truth for the cc theme system.
   Authored 2026-05-04 per docs/specs/2026-05-04-theme-system-build-plan.md §6.

   Theme-independent tokens (radii, spacing, fonts, motion) live on :root.
   Theme-dependent tokens are scoped under [data-theme="dark"] / [data-theme="light"].
   Bootstrap 5.3 component variables are scoped under [data-bs-theme="..."]
   per Research #1 / D19 — never at :root, or they leak into dark mode.
   ====================================================================== */


/* ----------------------------------------------------------------------
   §6.1 — Theme-independent tokens (in :root, never overridden)
   ---------------------------------------------------------------------- */

:root {
  /* Type system — DM Sans body + JetBrains Mono accents + Fraunces optional (lead magnet) */
  --font-sans: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
  --font-display: 'Fraunces', 'DM Sans', serif;  /* lead magnet only */

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* Spacing — 8pt grid */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* Motion */
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
  --transition-slow: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}


/* ----------------------------------------------------------------------
   §6.2 — DARK theme (the existing baseline, consolidated)
   GitHub-dark-cinematic-gold lineage. Hex values locked in build plan.
   ---------------------------------------------------------------------- */

[data-theme="dark"] {
  color-scheme: dark;

  /* Surfaces */
  --bg-base:       #0d1117;
  --bg-panel:      #161b22;
  --bg-card:       #1c2128;
  --bg-elevated:   #21262d;
  --bg-input:      #0d1117;

  /* Text */
  --text-primary:  #e6edf3;
  --text-body:     #c9d1d9;
  --text-muted:    #8b949e;
  --text-faint:    #6e7681;
  --text-on-accent: #1d1d1f;   /* black-on-gold for buttons */

  /* Borders */
  --border-faint:  #21262d;
  --border-subtle: #30363d;
  --border-strong: #484f58;

  /* Accents — brand cinematic gold */
  --accent:           #d29922;
  --accent-bright:    #d4af37;
  --accent-glow:      rgba(210, 153, 34, 0.30);
  --accent-on-light:  #d29922;        /* dark mode: same as --accent */
  --secondary:        #58a6ff;        /* GitHub Primer link blue, dark variant */

  /* Status */
  --success:    #3fb950;
  --success-bg: rgba(63, 185, 80, 0.12);
  --warning:    #f0b429;
  --warning-bg: rgba(240, 180, 41, 0.12);
  --danger:     #f85149;
  --danger-bg:  rgba(248, 81, 73, 0.12);
  --info:       #58a6ff;
  --info-bg:    rgba(88, 166, 255, 0.12);

  /* Effects */
  --shadow-card:     0 0 0 1px #30363d, 0 1px 0 rgba(255, 255, 255, 0.03) inset;
  --shadow-elevated: 0 0 0 1px #30363d, 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 40px rgba(210, 153, 34, 0.08);
  --shadow-focus:    0 0 0 3px rgba(210, 153, 34, 0.30), 0 0 30px rgba(210, 153, 34, 0.50);
  --grain-opacity:   0.035;
  --grain-blend:     overlay;
  --vignette-opacity: 0.40;
  --atmosphere-orb-opacity: 0.15;
  --atmosphere-grid-opacity: 0.02;
}


/* ----------------------------------------------------------------------
   §6.3 — LIGHT theme (Apple-like premium, NEW)
   Cool off-white surfaces, near-black text, hairline rgba borders,
   stacked neutral drop shadows. Gold as accent moments, not body.
   ---------------------------------------------------------------------- */

[data-theme="light"] {
  color-scheme: light;

  /* Surfaces (Apple cool off-white stack) */
  --bg-base:       #fbfbfd;
  --bg-panel:      #f5f5f7;
  --bg-card:       #ffffff;
  --bg-elevated:   #ffffff;        /* same fill as card; differentiated by shadow */
  --bg-input:      #ffffff;

  /* Text */
  --text-primary:  #1d1d1f;        /* Apple body text — NOT pure #000 */
  --text-body:     #2c2c2e;
  --text-muted:    #6e6e73;        /* Apple secondaryLabel */
  --text-faint:    #8e8e93;        /* Apple tertiaryLabel — placeholder only */
  --text-on-accent: #1d1d1f;       /* black-on-gold = luxury */

  /* Borders — rgba blacks, NOT gray hex (so they layer correctly) */
  --border-faint:  rgba(0, 0, 0, 0.06);
  --border-subtle: rgba(0, 0, 0, 0.10);
  --border-strong: rgba(0, 0, 0, 0.18);

  /* Accents */
  --accent:           #d29922;        /* SAME — brand stays for button BACKGROUNDS */
  --accent-bright:    #b8821a;        /* darker on light (saturating, not lightening) */
  --accent-glow:      rgba(210, 153, 34, 0.10);
  --accent-on-light:  #9a6700;        /* light-mode foreground gold (4.74:1 AA on #fbfbfd) */
  --secondary:        #0969da;        /* GitHub Primer link blue, light variant */

  /* Status */
  --success:    #1a7f37;
  --success-bg: #dcffe4;
  --warning:    #9a6700;              /* collapses onto accent-on-light — warm urgency */
  --warning-bg: #fff8c5;
  --danger:     #cf222e;
  --danger-bg:  #ffebe9;
  --info:       #0969da;
  --info-bg:    #ddf4ff;

  /* Effects — neutral drops, NOT gold glows */
  --shadow-card:     0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 8px rgba(15, 23, 42, 0.06);
  --shadow-elevated: 0 4px 8px rgba(15, 23, 42, 0.06), 0 12px 32px rgba(15, 23, 42, 0.12);
  --shadow-focus:    0 0 0 3px rgba(210, 153, 34, 0.20), 0 1px 2px rgba(15, 23, 42, 0.06);
  --grain-opacity:   0.012;
  --grain-blend:     multiply;        /* NOT overlay — overlay grunges on light (G16) */
  --vignette-opacity: 0;
  --atmosphere-orb-opacity: 0;        /* dim ambient orbs replaced by radial gradient washes */
  --atmosphere-grid-opacity: 0;
}


/* ----------------------------------------------------------------------
   §6.4 — Bootstrap --bs-* overrides (ALWAYS scoped, NEVER at :root)
   Per D19 / Research #1 G1: putting these at :root makes them leak into
   dark mode because both selectors have specificity (0,0,1,0) and our
   CSS loads after Bootstrap's. They MUST be scoped under [data-bs-theme].
   ---------------------------------------------------------------------- */

[data-bs-theme="light"] {
  --bs-body-bg: var(--bg-base);
  --bs-body-color: var(--text-primary);
  --bs-secondary-bg: var(--bg-panel);
  --bs-tertiary-bg: var(--bg-panel);
  --bs-emphasis-color: var(--text-primary);
  --bs-secondary-color: var(--text-muted);
  --bs-tertiary-color: var(--text-faint);
  --bs-border-color: var(--border-subtle);
  --bs-link-color-rgb: 154, 103, 0;        /* #9a6700 */
  --bs-link-hover-color-rgb: 184, 130, 26; /* #b8821a */
  --bs-heading-color: var(--text-primary);
}

[data-bs-theme="dark"] {
  --bs-body-bg: var(--bg-base);
  --bs-body-color: var(--text-primary);
  --bs-secondary-bg: var(--bg-panel);
  --bs-tertiary-bg: var(--bg-panel);
  --bs-emphasis-color: var(--text-primary);
  --bs-secondary-color: var(--text-muted);
  --bs-tertiary-color: var(--text-faint);
  --bs-border-color: var(--border-subtle);
  --bs-link-color-rgb: 210, 153, 34;
  --bs-link-hover-color-rgb: 212, 175, 55;
  --bs-heading-color: var(--text-primary);
}


/* ----------------------------------------------------------------------
   §6.5 — Transition suppression class
   Applied by theme.js to <html> during a theme swap, then removed after
   reflow. Pattern from Paco Coursey 2020 / next-themes (D18).
   ---------------------------------------------------------------------- */

.cc-no-transition,
.cc-no-transition *,
.cc-no-transition *::before,
.cc-no-transition *::after {
  transition: none !important;
  -webkit-transition: none !important;
}


/* ----------------------------------------------------------------------
   §6.6 — Selection / focus / link
   ---------------------------------------------------------------------- */

/* Native ::selection — brand accent at alpha (gold reads correctly when text overlays it) */
[data-theme="dark"] ::selection  { background: rgba(210, 153, 34, 0.30); color: #ffffff; }
[data-theme="light"] ::selection { background: rgba(210, 153, 34, 0.25); color: #1d1d1f; }

/* Focus ring — brand-gold halo, theme-correct ring stroke */
[data-theme="dark"] :focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(210, 153, 34, 0.25);
}
[data-theme="light"] :focus-visible {
  outline: 2px solid var(--accent-on-light);     /* #9a6700 — visible 3:1+ on white */
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(210, 153, 34, 0.20);
}

/* Forced-colors mode (Windows High Contrast) */
@media (forced-colors: active) {
  :focus-visible { outline: 2px solid CanvasText; outline-offset: 2px; }
}

/* Links — always underlined, accent-colored, hover-brightens */
a {
  color: var(--accent-on-light);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
a:hover { color: var(--accent-bright); }
a:visited { color: var(--accent-on-light); filter: brightness(0.85); }


/* ----------------------------------------------------------------------
   §6.7 — Body smooth swap
   Transition only on body — descendants suppressed by .cc-no-transition
   during the swap so we don't pay 1000-element transition cost.
   ---------------------------------------------------------------------- */

body {
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-sans);
  transition: background-color 0.15s ease, color 0.15s ease;
}


/* ----------------------------------------------------------------------
   §9.3 — Toggle component CSS (system-level, lives here not in surface CSS)
   ---------------------------------------------------------------------- */

.cc-theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: var(--bg-panel);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
}

.cc-theme-toggle__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.cc-theme-toggle__btn:hover { color: var(--text-primary); }
.cc-theme-toggle__btn.active {
  background: var(--bg-card);
  color: var(--accent-on-light);
  box-shadow: var(--shadow-card);
}
.cc-theme-toggle__btn:focus-visible {
  outline: 2px solid var(--accent-on-light);
  outline-offset: 2px;
}