/* Tokens of design/app-prototype.html and design/web-prototype.html in one place. */
:root {
  --bg: oklch(97.5% 0.012 80);
  --surface: oklch(99.6% 0.004 80);
  --surface-sunken: oklch(95.2% 0.014 78);
  --surface-taken: oklch(94.6% 0.006 80);
  --fg: oklch(24% 0.025 35);
  --fg-2: oklch(40% 0.022 35);
  --muted: oklch(50% 0.02 45);
  --border: oklch(88.5% 0.018 72);
  --border-strong: oklch(78% 0.02 60);
  /* Field borders need 3:1 against the page (WCAG 1.4.11): 3.4 on --bg, 3.6 on --surface. */
  --border-input: oklch(62% 0.02 60);
  --accent: oklch(53% 0.17 27);
  --accent-hover: oklch(46% 0.16 27);
  --on-accent: oklch(99% 0.005 80);
  --accent-soft: oklch(94% 0.03 25);
  --secondary: oklch(45% 0.06 150);
  --secondary-soft: oklch(93.5% 0.03 150);
  --scrim: oklch(22% 0.02 35 / 0.5);
  --tint-butter: oklch(93% 0.045 88);
  --tint-butter-ink: oklch(46% 0.08 75);
  --tint-plum: oklch(92.5% 0.028 340);
  --tint-plum-ink: oklch(44% 0.08 340);
  --tint-rose: oklch(92.5% 0.035 20);
  --tint-rose-ink: oklch(46% 0.1 22);
  --tint-sage: oklch(92.5% 0.035 150);
  --tint-sage-ink: oklch(42% 0.06 150);
  --focus: var(--fg);

  /* @font-face lives in fonts.css; system fallbacks cover the swap period. */
  --font-display: "Bricolage Grotesque", "Nunito", ui-rounded, system-ui, sans-serif;
  --font-body: "Nunito", ui-rounded, "Segoe UI", system-ui, sans-serif;
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-base: 16px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: 28px;
  --fs-3xl: 38px;
  --fs-h2: clamp(28px, 2.2vw + 18px, 40px);
  --fs-hero: clamp(38px, 4.4vw + 16px, 68px);
  --fs-article-h1: clamp(32px, 2.8vw + 18px, 52px);
  --lh-body: 1.5;
  --lh-read: 1.65;
  /* The app prototype uses 1.08, the web prototype 1.06; this is the app's file. */
  --lh-tight: 1.08;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --section-y: clamp(64px, 8vw, 120px);
  --container: 1180px;
  --gutter: clamp(20px, 4vw, 40px);
  --measure: 68ch;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-sheet: 28px;
  --radius-xl: 32px;
  --radius-pill: 999px;
  --tap: 48px;

  --shadow-card: 0 1px 2px oklch(30% 0.03 40 / 0.06);
  --shadow-sheet: 0 -8px 32px oklch(25% 0.03 40 / 0.18);
  --shadow-float: 0 30px 70px oklch(25% 0.03 40 / 0.18);
  --shadow-dropdown: 0 16px 30px oklch(25% 0.03 40 / 0.1);

  --motion-fast: 150ms;
  --motion-base: 240ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  color-scheme: light dark;
}

/* The choice of assets/app/theme.js; no choice leaves the system in charge. */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* Dark values exist twice (system dark without a choice, and a manual choice); tests/tokens-check.cjs keeps the copies identical. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: oklch(19% 0.012 45);
    --surface: oklch(24% 0.014 45);
    --surface-sunken: oklch(21.5% 0.012 45);
    --surface-taken: oklch(21% 0.008 45);
    --fg: oklch(95% 0.01 80);
    --fg-2: oklch(84% 0.012 70);
    --muted: oklch(74% 0.015 60);
    --border: oklch(34% 0.014 45);
    --border-strong: oklch(46% 0.016 45);
    /* 3.8 on --bg, 3.4 on --surface */
    --border-input: oklch(55% 0.016 45);
    --accent: oklch(72% 0.14 30);
    --accent-hover: oklch(79% 0.12 30);
    --on-accent: oklch(20% 0.03 30);
    --accent-soft: oklch(30% 0.05 28);
    --secondary: oklch(80% 0.07 150);
    --secondary-soft: oklch(29% 0.035 150);
    --tint-butter: oklch(32% 0.04 85);
    --tint-butter-ink: oklch(86% 0.07 85);
    --tint-plum: oklch(31% 0.035 340);
    --tint-plum-ink: oklch(85% 0.06 340);
    --tint-rose: oklch(31% 0.04 22);
    --tint-rose-ink: oklch(86% 0.06 22);
    --tint-sage: oklch(31% 0.035 150);
    --tint-sage-ink: oklch(85% 0.06 150);
    --shadow-card: none;
    --shadow-dropdown: 0 16px 30px oklch(0% 0 0 / 0.55);
  }
}

:root[data-theme="dark"] {
  --bg: oklch(19% 0.012 45);
  --surface: oklch(24% 0.014 45);
  --surface-sunken: oklch(21.5% 0.012 45);
  --surface-taken: oklch(21% 0.008 45);
  --fg: oklch(95% 0.01 80);
  --fg-2: oklch(84% 0.012 70);
  --muted: oklch(74% 0.015 60);
  --border: oklch(34% 0.014 45);
  --border-strong: oklch(46% 0.016 45);
  /* 3.8 on --bg, 3.4 on --surface */
  --border-input: oklch(55% 0.016 45);
  --accent: oklch(72% 0.14 30);
  --accent-hover: oklch(79% 0.12 30);
  --on-accent: oklch(20% 0.03 30);
  --accent-soft: oklch(30% 0.05 28);
  --secondary: oklch(80% 0.07 150);
  --secondary-soft: oklch(29% 0.035 150);
  --tint-butter: oklch(32% 0.04 85);
  --tint-butter-ink: oklch(86% 0.07 85);
  --tint-plum: oklch(31% 0.035 340);
  --tint-plum-ink: oklch(85% 0.06 340);
  --tint-rose: oklch(31% 0.04 22);
  --tint-rose-ink: oklch(86% 0.06 22);
  --tint-sage: oklch(31% 0.035 150);
  --tint-sage-ink: oklch(85% 0.06 150);
  --shadow-card: none;
  --shadow-dropdown: 0 16px 30px oklch(0% 0 0 / 0.55);
}