/* ═══════════════════════════════════════════
   DESIGN TOKENS — shared across all pages
   ═══════════════════════════════════════════ */
:root {
  --accent-hue: 20;
  --accent: hsl(var(--accent-hue), 80%, 50%);
  --accent-light: hsl(var(--accent-hue), 80%, 62%);
  --accent-glow: hsl(var(--accent-hue), 80%, 50%, 0.15);
  --accent-glow-03: hsl(var(--accent-hue), 80%, 50%, 0.03);
  --accent-glow-06: hsl(var(--accent-hue), 80%, 50%, 0.06);
  --accent-glow-08: hsl(var(--accent-hue), 80%, 50%, 0.08);
  --accent-glow-12: hsl(var(--accent-hue), 80%, 50%, 0.12);
  --accent-glow-15: hsl(var(--accent-hue), 80%, 50%, 0.15);
  --accent-glow-20: hsl(var(--accent-hue), 80%, 50%, 0.20);
  --accent-glow-25: hsl(var(--accent-hue), 80%, 50%, 0.25);
  --accent-glow-30: hsl(var(--accent-hue), 80%, 50%, 0.30);
  --accent-glow-35: hsl(var(--accent-hue), 80%, 50%, 0.35);
  --accent-glow-50: hsl(var(--accent-hue), 80%, 50%, 0.50);
  --noise-url: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  --bg: hsl(var(--accent-hue), 8%, 94%);
  --bg-dark: #141413;
  --surface: #fcfbfa;
  --fg: #141413;
  --fg-light: #f3f0ee;
  --fg-2: #262627;
  --muted: #696969;
  --muted-light: #a8a29e;
  --border: #d1cdc7;
  --border-dark: #2a2928;
  --font-display: "Sofia Sans", Arial, sans-serif;
  --font-body: "Sofia Sans", Arial, sans-serif;
  --font-mono: ui-monospace, Menlo, monospace;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ─── CUSTOM SCROLLBAR ─── */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg);
}
::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--accent);
}