/* ==========================================================================
   Design tokens
   Shared by the lab and (once finalized) the website. Every color resolves
   through light-dark(), so the active theme is decided by `color-scheme`:
   - default: follows the OS
   - [data-theme="light"|"dark"] on <html>: user override
   ========================================================================== */

:root {
  color-scheme: light dark;

  /* Accent hue is a lever in the lab (0 to 360, OKLCH hue). */
  --accent-h: 262;

  /* Neutrals: warm paper in light, cool ink in dark. */
  --bg:        light-dark(oklch(98.4% 0.004 85),  oklch(15.5% 0.008 265));
  --bg-2:      light-dark(oklch(95.8% 0.006 85),  oklch(19% 0.01 265));
  --surface:   light-dark(oklch(100% 0 0),        oklch(21.5% 0.011 265));
  --surface-2: light-dark(oklch(97% 0.005 85),    oklch(25% 0.012 265));
  --line:      light-dark(oklch(90.5% 0.006 85),  oklch(31% 0.012 265));
  --line-2:    light-dark(oklch(84% 0.008 85),    oklch(38% 0.014 265));

  /* Text: all three pass WCAG AA on --bg and --surface. */
  --text:   light-dark(oklch(21% 0.012 265), oklch(96% 0.004 85));
  --text-2: light-dark(oklch(42% 0.012 265), oklch(78% 0.008 265));
  --text-3: light-dark(oklch(51% 0.01 265),  oklch(68% 0.01 265));

  --accent:      light-dark(oklch(54% 0.2 var(--accent-h)),  oklch(76% 0.14 var(--accent-h)));
  --accent-ink:  light-dark(oklch(99% 0 0),                  oklch(17% 0.03 var(--accent-h)));
  --accent-soft: light-dark(oklch(94% 0.04 var(--accent-h)), oklch(29% 0.07 var(--accent-h)));
  --accent-text: light-dark(oklch(45% 0.2 var(--accent-h)),  oklch(82% 0.11 var(--accent-h)));

  --ok: light-dark(oklch(58% 0.16 150), oklch(78% 0.16 150));

  /* Fixed "physical" colors (stickers, notes). Same in both themes on purpose. */
  --pop-yellow: oklch(91% 0.16 98);
  --pop-pink:   oklch(80% 0.13 0);
  --pop-mint:   oklch(87% 0.11 165);
  --pop-blue:   oklch(76% 0.12 245);
  --pop-orange: oklch(76% 0.16 55);
  --pop-ink:    oklch(20% 0.02 265);

  /* Type */
  --font-sans:  "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:  "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-serif: "Instrument Serif", ui-serif, Georgia, serif;
  --font-flex:  "Recursive", var(--font-sans);

  --step--1: 0.8125rem;
  --step-0:  1rem;
  --step-1:  1.1875rem;
  --step-2:  1.5rem;
  --step-3:  2rem;

  /* Space and shape */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 28px;

  --shadow-1: 0 1px 2px light-dark(oklch(0% 0 0 / 0.06), oklch(0% 0 0 / 0.4));
  --shadow-2: 0 2px 6px light-dark(oklch(0% 0 0 / 0.06), oklch(0% 0 0 / 0.35)),
              0 12px 32px -8px light-dark(oklch(0% 0 0 / 0.14), oklch(0% 0 0 / 0.55));
  --shadow-3: 0 4px 10px light-dark(oklch(0% 0 0 / 0.08), oklch(0% 0 0 / 0.4)),
              0 28px 60px -12px light-dark(oklch(0% 0 0 / 0.22), oklch(0% 0 0 / 0.7));

  /* Motion. These are rewritten live by the lab levers.
     --m    intensity, 0 (still) to 1 (full). Multiply distances by it.
     --dur  duration multiplier (1 / speed). Multiply durations by it.
     --ease the active easing curve. */
  --m: 0.7;
  --dur: 1;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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