/* Light/dark theme tokens, shared by every page.
   The inline <head> snippet sets <html data-theme="light|dark"> before first paint (saved choice,
   else the OS setting); theme.js wires the nav toggle. Each page's Tailwind config maps
   white / page / neutral-* / accent-* / red-700 onto these variables, so one class list serves
   both themes. Values are "R G B" triplets so Tailwind's /opacity modifiers keep working. */
:root {
  color-scheme: light;
  --page: 255 255 255;
  --white: 255 255 255;
  --n-50: 250 250 250;
  --n-100: 245 245 245;
  --n-200: 229 229 229;
  --n-300: 212 212 212;
  --n-400: 163 163 163;
  --n-500: 115 115 115;
  --n-600: 82 82 82;
  --n-700: 64 64 64;
  --n-800: 38 38 38;
  --n-900: 23 23 23;
  --n-950: 10 10 10;
  --accent: 29 78 216;
  --accent-hover: 30 64 175;
  --danger: 185 28 28;
  /* system-design diagrams */
  --flow-node: 255 255 255;
  --flow-ext: 245 245 245;
  --flow-group: 250 250 250;
  --flow-border: 212 212 212;
  --flow-line: 163 163 163;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --page: 10 10 10;           /* #0a0a0a page */
  --white: 18 18 18;          /* #121212 cards, form, figures */
  --n-50: 24 24 24;           /* #181818 pills, inset surfaces */
  --n-100: 31 31 31;          /* #1f1f1f */
  --n-200: 40 40 40;          /* #282828 borders */
  --n-300: 58 58 58;          /* #3a3a3a strong borders */
  --n-400: 115 115 115;       /* #737373 decorative bullets */
  --n-500: 163 163 163;       /* #a3a3a3 secondary text */
  --n-600: 184 184 184;       /* #b8b8b8 */
  --n-700: 212 212 212;       /* #d4d4d4 body text */
  --n-800: 229 229 229;
  --n-900: 240 240 240;
  --n-950: 250 250 250;       /* #fafafa headings; primary buttons invert */
  --accent: 96 165 250;       /* #60a5fa */
  --accent-hover: 147 197 253;/* #93c5fd */
  --danger: 248 113 113;      /* #f87171 */
  --flow-node: 24 24 24;
  --flow-ext: 38 38 38;
  --flow-group: 22 22 22;
  --flow-border: 82 82 82;
  --flow-line: 128 128 128;
}

/* Diagram paint (projects.html): f-* = fill, s-* = stroke. */
.f-ink { fill: rgb(var(--n-950)); }
.f-muted { fill: rgb(var(--n-600)); }
.f-subtle { fill: rgb(var(--n-500)); }
.f-line { fill: rgb(var(--flow-line)); }
.f-node { fill: rgb(var(--flow-node)); }
.f-ext { fill: rgb(var(--flow-ext)); }
.f-group { fill: rgb(var(--flow-group)); }
.f-accent { fill: rgb(var(--accent)); }
.s-ink { stroke: rgb(var(--n-950)); }
.s-border { stroke: rgb(var(--flow-border)); }
.s-line { stroke: rgb(var(--flow-line)); }
.s-hair { stroke: rgb(var(--n-200)); }
.s-accent { stroke: rgb(var(--accent)); }

/* Nav toggle: moon in light (switch to dark), sun in dark (switch to light). */
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 0.5rem; color: rgb(var(--n-600)); transition: color 0.2s ease, background-color 0.2s ease; }
.theme-toggle:hover { color: rgb(var(--n-950)); background-color: rgb(var(--n-100)); }
.theme-toggle svg { width: 1.125rem; height: 1.125rem; }
:root[data-theme="dark"] .theme-toggle .icon-moon,
:root:not([data-theme="dark"]) .theme-toggle .icon-sun { display: none; }

/* The selected tile's near-white ring glares on black; a softer gray reads the same. */
:root[data-theme="dark"] .tile[aria-pressed="true"] { border-color: rgb(var(--n-600)); box-shadow: 0 0 0 1px rgb(var(--n-600)); }

/* Swap themes in one frame instead of letting each element's colour transition lag behind. */
.theme-switching, .theme-switching *, .theme-switching *::before, .theme-switching *::after { transition: none !important; }