/* ==================== DESIGN TOKENS ==================== */
:root {
  color-scheme: dark;
  --color-brand: #10b981; --color-brand-emphasis: #34d399; --color-brand-soft: rgb(16 185 129 / 14%);
  --color-page: #09090b; --color-surface: #18181b; --color-surface-hover: #27272a;
  --color-card: rgb(24 24 27 / 70%); --color-card-hover: rgb(24 24 27 / 96%);
  --color-text: #f4f4f5; --color-text-muted: #a1a1aa; --color-text-subtle: #71717a;
  --color-border: #27272a; --color-border-strong: #3f3f46; --color-focus-ring: rgb(16 185 129 / 35%);
  --color-shadow: rgb(0 0 0 / 18%); --color-theme-browser: #09090b;
  --font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "Noto Sans Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --font-size-xs: .75rem; --font-size-sm: .875rem; --font-size-base: 1rem; --font-size-lg: 1.125rem; --font-size-xl: 1.25rem;
  --font-size-section: clamp(1.75rem, 3vw, 2.25rem); --font-size-heading: clamp(2.25rem, 6vw, 4.5rem);
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem;
  --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem;
  --radius-md: .75rem; --radius-lg: 1rem; --radius-xl: 1.25rem; --radius-pill: 999px;
  --content-width: 67.5rem; --reading-width: 52rem; --transition-fast: 180ms ease;
  --syntax-foreground: #cfcfcf; --syntax-comment: #6d966c; --syntax-keyword: #ef6363; --syntax-title: #da846b;
  --syntax-string: #e7ab65; --syntax-number: #afc563; --syntax-type: #268ac3; --syntax-meta: #94558d;
}
[data-theme="light"] {
  color-scheme: light;
  --color-brand-emphasis: #047857; --color-brand-soft: rgb(16 185 129 / 12%); --color-page: #fff;
  --color-surface: #fafafa; --color-surface-hover: #f4f4f5; --color-card: rgb(250 250 250 / 85%); --color-card-hover: #fff;
  --color-text: #18181b; --color-text-muted: #52525b; --color-text-subtle: #71717a; --color-border: #e4e4e7;
  --color-border-strong: #d4d4d8; --color-focus-ring: rgb(16 185 129 / 28%); --color-shadow: rgb(24 24 27 / 8%); --color-theme-browser: #fff;
  --syntax-foreground: #34383f; --syntax-comment: #557a55; --syntax-keyword: #b43c3f; --syntax-title: #a95138;
  --syntax-string: #965b22; --syntax-number: #657a26; --syntax-type: #176b9a; --syntax-meta: #764570;
}