/* Design tokens — single source of truth.
   Change values here; everything else inherits. */

:root {
  /* ---------- Color ---------- */
  --paper:        oklch(97% 0.012 85);
  --paper-deep:   oklch(94% 0.018 85);
  --ink:          oklch(20% 0.012 280);
  --ink-soft:     oklch(40% 0.015 280);
  --ink-faint:    oklch(60% 0.012 280);

  --saffron:      oklch(72% 0.16 65);
  --saffron-deep: oklch(55% 0.18 50);
  --saffron-tint: oklch(94% 0.04 75);

  --teal-bn:      oklch(55% 0.08 200);
  --teal-bn-tint: oklch(94% 0.025 200);

  --red-stop:     oklch(50% 0.18 25);
  --red-tint:     oklch(94% 0.03 25);

  --green-go:     oklch(48% 0.12 145);
  --green-tint:   oklch(94% 0.03 145);

  --rule:         oklch(88% 0.005 85);
  --rule-strong:  oklch(78% 0.008 85);

  /* ---------- Type scale (large by design) ---------- */
  --font-scale: 1;  /* user-controlled via A− / A+ */

  /* Small sizes stay fixed (already small enough on phones) */
  --text-xs:   calc(15px * var(--font-scale));
  --text-sm:   calc(17px * var(--font-scale));
  --text-base: calc(19px * var(--font-scale));
  --text-lg:   calc(22px * var(--font-scale));

  /* Fluid clamps shrink gracefully on phones, hit fixed targets on desktop */
  --text-xl:   calc(clamp(22px, 1.2vw + 18px, 28px) * var(--font-scale));
  --text-2xl:  calc(clamp(26px, 2.5vw + 16px, 36px) * var(--font-scale));
  --text-3xl:  calc(clamp(34px, 3.5vw + 18px, 48px) * var(--font-scale));
  --text-4xl:  calc(clamp(34px, 4vw + 20px, 56px) * var(--font-scale));
  --text-step: calc(clamp(48px, 6vw + 24px, 80px) * var(--font-scale));

  --leading-tight: 1.05;
  --leading-snug:  1.15;
  --leading-body:  1.6;

  /* ---------- Spacing ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;

  /* ---------- Layout ---------- */
  --content-width: 720px;
  --slide-width:   880px;
  --hub-width:     1080px;

  /* ---------- Radius ---------- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* ---------- Shadows (subtle — paper not slick tech) ---------- */
  --shadow-soft: 0 1px 2px oklch(20% 0.012 280 / 0.04),
                 0 4px 12px oklch(20% 0.012 280 / 0.06);
  --shadow-card: 0 2px 4px oklch(20% 0.012 280 / 0.06),
                 0 12px 32px oklch(20% 0.012 280 / 0.08);

  /* ---------- Motion ---------- */
  --duration-fast:   140ms;
  --duration-normal: 280ms;
  --ease-out-expo:   cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast:   0ms;
    --duration-normal: 0ms;
  }
}