/* Design tokens. Heritage-archive palette: warm paper, deep ink, royal indigo,
   gold for the sultan's line, lagoon teal for the maternal cohort. */
:root {
  color-scheme: light;

  --font-display: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --paper: oklch(97.5% 0.012 85);
  --paper-2: oklch(95.2% 0.016 85);
  --paper-3: oklch(91.5% 0.02 85);
  --paper-raise: oklch(99% 0.006 85);
  --ink: oklch(21% 0.025 60);
  --ink-2: oklch(38% 0.022 60);
  --muted: oklch(52% 0.02 70);
  --rule: oklch(86% 0.018 80);
  --rule-strong: oklch(72% 0.03 80);

  --royal: oklch(40% 0.13 285);
  --royal-ink: oklch(32% 0.12 285);
  --royal-soft: oklch(93% 0.035 285);
  --gold: oklch(68% 0.13 80);
  --gold-ink: oklch(52% 0.12 75);
  --gold-soft: oklch(93.5% 0.06 88);
  --lagoon: oklch(50% 0.11 205);
  --lagoon-ink: oklch(40% 0.1 205);
  --lagoon-soft: oklch(92.5% 0.045 205);
  --coral: oklch(60% 0.16 35);
  --coral-soft: oklch(93% 0.05 35);
  --focus: oklch(58% 0.18 250);

  --grain-opacity: 0.35;

  --text-xs: 0.72rem;
  --text-sm: 0.84rem;
  --text-base: clamp(0.98rem, 0.92rem + 0.25vw, 1.08rem);
  --text-lg: 1.2rem;
  --text-xl: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  --text-2xl: clamp(2rem, 1.4rem + 2.2vw, 3.2rem);
  --text-hero: clamp(2.8rem, 1.2rem + 6vw, 6.8rem);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-section: clamp(3.5rem, 2rem + 4vw, 7rem);
  --gutter: clamp(16px, 4vw, 48px);
  --measure: 62ch;
  --header-h: 64px;

  --radius-s: 6px;
  --radius-m: 12px;
  --radius-l: 22px;
  --radius-pill: 999px;

  --shadow-1: 0 1px 2px oklch(20% 0.03 60 / 0.06), 0 10px 30px -18px oklch(20% 0.03 60 / 0.35);
  --shadow-2: 0 2px 6px oklch(20% 0.03 60 / 0.08), 0 24px 60px -24px oklch(20% 0.03 60 / 0.45);

  --duration-fast: 150ms;
  --duration: 300ms;
  --duration-slow: 560ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --paper: oklch(17% 0.018 265);
    --paper-2: oklch(21% 0.02 265);
    --paper-3: oklch(26.5% 0.022 265);
    --paper-raise: oklch(23% 0.022 265);
    --ink: oklch(94% 0.012 85);
    --ink-2: oklch(80% 0.014 85);
    --muted: oklch(66% 0.02 80);
    --rule: oklch(30% 0.02 265);
    --rule-strong: oklch(44% 0.025 265);
    --royal: oklch(78% 0.1 285);
    --royal-ink: oklch(86% 0.08 285);
    --royal-soft: oklch(29% 0.06 285);
    --gold: oklch(80% 0.12 85);
    --gold-ink: oklch(86% 0.11 88);
    --gold-soft: oklch(30% 0.06 85);
    --lagoon: oklch(74% 0.1 205);
    --lagoon-ink: oklch(84% 0.08 205);
    --lagoon-soft: oklch(27% 0.05 205);
    --coral: oklch(74% 0.14 35);
    --coral-soft: oklch(30% 0.06 35);
    --focus: oklch(78% 0.14 250);
    --grain-opacity: 0.22;
    --shadow-1: 0 1px 2px oklch(0% 0 0 / 0.4), 0 10px 30px -18px oklch(0% 0 0 / 0.8);
    --shadow-2: 0 2px 6px oklch(0% 0 0 / 0.5), 0 24px 60px -24px oklch(0% 0 0 / 0.9);
  }
}

:root[data-theme='dark'] {
  color-scheme: dark;
  --paper: oklch(17% 0.018 265);
  --paper-2: oklch(21% 0.02 265);
  --paper-3: oklch(26.5% 0.022 265);
  --paper-raise: oklch(23% 0.022 265);
  --ink: oklch(94% 0.012 85);
  --ink-2: oklch(80% 0.014 85);
  --muted: oklch(66% 0.02 80);
  --rule: oklch(30% 0.02 265);
  --rule-strong: oklch(44% 0.025 265);
  --royal: oklch(78% 0.1 285);
  --royal-ink: oklch(86% 0.08 285);
  --royal-soft: oklch(29% 0.06 285);
  --gold: oklch(80% 0.12 85);
  --gold-ink: oklch(86% 0.11 88);
  --gold-soft: oklch(30% 0.06 85);
  --lagoon: oklch(74% 0.1 205);
  --lagoon-ink: oklch(84% 0.08 205);
  --lagoon-soft: oklch(27% 0.05 205);
  --coral: oklch(74% 0.14 35);
  --coral-soft: oklch(30% 0.06 35);
  --focus: oklch(78% 0.14 250);
  --grain-opacity: 0.22;
  --shadow-1: 0 1px 2px oklch(0% 0 0 / 0.4), 0 10px 30px -18px oklch(0% 0 0 / 0.8);
  --shadow-2: 0 2px 6px oklch(0% 0 0 / 0.5), 0 24px 60px -24px oklch(0% 0 0 / 0.9);
}