/* Hallmark · tokens · genre: playful · theme: Plume (Pang-tuned)
 * Source of truth — design.md.
 * Every page in this project consumes these by name only.
 */
:root {
  /* Colour ----------------------------------------------------------------- */
  --color-paper:        oklch(97% 0.012 80);
  --color-paper-2:      oklch(94% 0.018 80);
  --color-paper-3:      oklch(91% 0.022 80);
  --color-ink:          oklch(20% 0.008 50);
  --color-ink-2:        oklch(40% 0.018 60);
  --color-ink-3:        oklch(60% 0.022 70);
  --color-rule:         oklch(88% 0.025 80);
  --color-rule-2:       oklch(82% 0.030 80);
  --color-accent:       oklch(65% 0.13 40);
  --color-accent-2:     oklch(72% 0.11 45);
  --color-accent-ink:   oklch(98% 0.005 80);
  --color-accent-soft:  oklch(95% 0.020 50);
  --color-sage:         oklch(60% 0.06 145);
  --color-sage-soft:    oklch(95% 0.018 145);
  --color-focus:        oklch(58% 0.18 40);

  /* Typography ------------------------------------------------------------- */
  --font-display: 'Inter', -apple-system, system-ui, sans-serif;
  --font-serif:   'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --font-body:    'Inter', -apple-system, system-ui, sans-serif;

  --text-xs:      0.75rem;
  --text-sm:      0.875rem;
  --text-md:      1.0625rem;
  --text-lg:      1.25rem;
  --text-xl:      1.625rem;
  --text-2xl:     2.125rem;
  --text-3xl:     2.875rem;
  --text-4xl:     clamp(2.875rem, 5vw, 4.25rem);
  --text-display: clamp(3.5rem, 7vw, 6rem);

  --leading-tight:  1.1;
  --leading-snug:   1.25;
  --leading-normal: 1.5;
  --leading-loose:  1.65;

  /* Spacing — 4-pt named scale -------------------------------------------- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-2xl: 4.5rem;
  --space-3xl: 7rem;

  /* Motion ----------------------------------------------------------------- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-short:   180ms;
  --dur-med:     280ms;
  --dur-long:    420ms;

  /* Radii ------------------------------------------------------------------ */
  --radius-input: 8px;
  --radius-card:  12px;
  --radius-pill:  999px;

  /* Layout ---------------------------------------------------------------- */
  --measure:    66ch;
  --container:  1180px;
  --container-narrow: 680px;
  --rail-width: 220px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}