/* ============================================================================
   Rundown theme tokens — light/dark.
   Loaded on every marketing page and the blog BEFORE each page's inline
   Tailwind config + <style> block, which reference these variables via
   rgb(var(--token) / <alpha>). Theme is selected by data-theme on <html>
   (set pre-paint by the inline snippet in each <head>; toggled by
   theme-toggle.js). Palette tokens are space-separated RGB channels so they
   compose with Tailwind opacity utilities (e.g. bg-bg-primary/95).
   ============================================================================ */

:root,
html[data-theme='dark'] {
  /* Surfaces */
  --bg-primary: 10 10 15;     /* #0A0A0F */
  --bg-secondary: 20 20 32;   /* #141420 */
  --bg-card: 26 26 46;        /* #1A1A2E */
  /* Text */
  --text-primary: 240 240 245;   /* #F0F0F5 */
  --text-secondary: 136 136 160; /* #8888A0 */
  --text-muted: 85 85 106;       /* #55556A */
  /* Hairlines / overlays — white on dark. Used as rgb(var(--line) / 0.06). */
  --line: 255 255 255;
  /* Long-form reading body color */
  --prose-body: 200 200 216;     /* #C8C8D8 */
  /* Link color inside prose */
  --link: 167 139 250;           /* #A78BFA */

  /* Component knobs (not channels — full values) */
  --glass-alpha: 0.6;            /* glass-card background opacity */
  --shadow-strength: 0.8;        /* big drop-shadow alpha */
  --glow-alpha: 0.2;             /* violet hero/section glow */
  --hero-mid: 30 27 75;          /* #1E1B4B — hero gradient midpoint */
  --shot-bg: 20 20 32;           /* device-frame background */
  --code-bg: 124 92 252;         /* code chip tint base (accent) */
}

html[data-theme='light'] {
  --bg-primary: 255 255 255;     /* #FFFFFF */
  --bg-secondary: 245 246 250;   /* #F5F6FA */
  --bg-card: 255 255 255;        /* #FFFFFF */
  --text-primary: 23 23 35;      /* #171723 */
  --text-secondary: 82 82 102;   /* #525266 */
  --text-muted: 104 104 122;     /* #68687A */
  --line: 17 17 34;              /* dark hairlines on light */
  --prose-body: 42 42 58;        /* #2A2A3A */
  --link: 91 51 224;             /* #5B33E0 — darker violet for contrast on white */

  --glass-alpha: 0.72;
  --shadow-strength: 0.12;
  --glow-alpha: 0.1;
  --hero-mid: 237 233 254;       /* #EDE9FE — soft violet */
  --shot-bg: 255 255 255;
  --code-bg: 124 92 252;
}

html {
  background-color: rgb(var(--bg-primary));
  color: rgb(var(--text-primary));
  /* Smooth the flip when toggling (not on first paint). */
}
html.theme-ready,
html.theme-ready body {
  transition: background-color 0.2s ease, color 0.2s ease;
}

::selection {
  background-color: rgba(124, 92, 252, 0.3);
  color: rgb(var(--text-primary));
}

/* Theme toggle button (shared look across nav variants) */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  color: rgb(var(--text-secondary));
  border: 1px solid rgb(var(--line) / 0.1);
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
.theme-toggle:hover {
  color: rgb(var(--text-primary));
  background-color: rgb(var(--line) / 0.06);
}
/* Show the correct glyph for the active theme (the other is hidden). */
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
html[data-theme='light'] .theme-toggle .icon-sun { display: block; }
html[data-theme='light'] .theme-toggle .icon-moon { display: none; }
