/*
 * Design tokens — single source of truth for color, type, and spacing.
 * Constitution II: only tokens from this file may be used for color/type/
 * spacing across the site. No raw hex values or arbitrary sizes elsewhere.
 */
:root {
  /* Approved palette (constitution — do not add colors without an amendment) */
  --color-off-white: #FAF9F6;
  --color-natural: #E5D3BF;
  --color-bone-white: #F9F6EE;
  --color-dark-heather-grey: #484848;
  --color-forest-green: #304529;
  --color-navy: #000080;
  --color-charcoal: #191919;
  --color-sand: #CBBD93;
  --color-washed-black: #353433;

  /* Semantic aliases — pre-verified AA contrast pairings only */
  --bg-page: var(--color-off-white);
  --bg-surface: var(--color-bone-white);
  --text-body: var(--color-washed-black);
  --text-heading: var(--color-charcoal);
  --text-on-dark: var(--color-off-white);

  --bg-hero: var(--color-bone-white);
  --bg-act-da: var(--color-natural);
  --bg-act-nu: var(--color-charcoal);
  --text-act-nu: var(--color-off-white);
  --bg-act-hopp: var(--color-forest-green);
  --text-act-hopp: var(--color-off-white);
  --bg-cta: var(--color-navy);
  --text-cta: var(--color-off-white);
  --bg-layer: var(--color-off-white);
  --bg-footer: var(--color-charcoal);
  --text-footer: var(--color-off-white);
  --border-subtle: var(--color-sand);
  --focus-ring: var(--color-navy);

  /* Typography */
  --font-body: "Aktiv Grotesk", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Aktiv Grotesk XBold", "Aktiv Grotesk", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  --fs-100: 0.875rem;
  --fs-200: 1rem;
  --fs-300: 1.125rem;
  --fs-400: 1.375rem;
  --fs-500: 1.75rem;
  --fs-600: 2.25rem;
  --fs-700: 3rem;
  --fs-800: 3.75rem;

  --lh-tight: 1.1;
  --lh-normal: 1.5;
  --lh-relaxed: 1.7;

  /* Spacing scale */
  --space-100: 0.5rem;
  --space-200: 0.75rem;
  --space-300: 1rem;
  --space-400: 1.5rem;
  --space-500: 2rem;
  --space-600: 3rem;
  --space-700: 4.5rem;
  --space-800: 6.5rem;
  --space-900: 9rem;

  --content-max-width: 72rem;
  --measure: 38rem;
  --measure-narrow: 28rem;
  --measure-wide: 40rem;

  --radius-small: 0.25rem;
  --focus-ring-width: 3px;

  /*
   * Motion choreography tokens — only consumed inside
   * @media (prefers-reduced-motion: no-preference). Durations are story beats,
   * not generic UI “fast/medium/slow” for their own sake.
   */
  --ease-story: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-heavy: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-open: cubic-bezier(0.16, 1, 0.3, 1);

  --motion-hero-duration: 0.75s;
  --motion-hero-chrome-delay: 2.5s;
  --motion-hero-subtitle-delay: 2.5s;
  --motion-da-duration: 0.7s;
  --motion-nu-duration: 0.45s;
  --motion-hopp-duration: 0.8s;
  --motion-cta-duration: 0.5s;
  --motion-layer-duration: 0.55s;
  --motion-collage-duration: 0.6s;

  --motion-da-distance: 1.25rem;
  --motion-nu-distance: 0.4rem;
  --motion-hopp-distance: 1rem;
  --motion-cta-distance: 0.75rem;
  --motion-layer-distance: 0.75rem;
  --motion-collage-distance: 0.65rem;
}