/* Canonical runtime tokens. Semantics and approval status are documented in ../DESIGN.md. */
:root {
  /* Source brand colors */
  --color-brand-500: #5CC1D6;
  --color-flavor-grape-500: #B980D0;
  --color-flavor-peach-500: #F39671;
  --color-flavor-strawberry-500: #EC6089;
  --color-flavor-neutral-500: #8BC4C0;
  --color-flavor-grape-700: #9A67A9;
  --color-flavor-peach-700: #EF7850;
  --color-flavor-strawberry-700: #E83A73;
  --color-flavor-neutral-700: #68BFB1;
  --color-flavor-grape-100: #EAD7F0;
  --color-flavor-peach-100: #FDE2D4;
  --color-flavor-strawberry-100: color-mix(in srgb, var(--color-flavor-strawberry-500) 12%, white);
  --color-flavor-neutral-100: #CEEBE5;
  --color-graphic-yellow: #FFED00;
  --color-graphic-sage: #BEDBC5;
  --color-graphic-gray: #B4B6B7;
  --color-on-brand: #123E46;
  --color-on-flavor-grape: #372844;
  --color-on-flavor-peach: #4B2A20;
  --color-on-flavor-strawberry: #3D1522;
  --color-on-flavor-neutral: #233C3A;

  /* Accessible interface roles; distinct from the source palette */
  --color-ink-900: #23343A;
  --color-ink-700: #53666C;
  --color-ink-500: #73858A;
  --color-surface-0: #FFFFFF;
  --color-surface-1: #F6FAFA;
  --color-surface-brand: #EAF8FA;
  --color-border: #DDE9EB;
  --color-action: #236F7B;
  --color-action-hover: #1B5F6A;
  --color-focus: #1E6F7C;
  --color-success-700: #2F795E;
  --color-warning-800: #8A691C;
  --color-error-700: #B33A43;

  /* Typography */
  --font-display: Nunito, Arial, sans-serif;
  --font-ui: Nunito, Arial, sans-serif;
  --text-label: 0.75rem;
  --text-caption: 0.875rem;
  --text-body: 1rem;
  --text-lead: 1.25rem;
  --text-h3: 1.75rem;
  --text-h2: 2.5rem;
  --text-h1: 3.625rem;
  --text-display: 5.125rem;

  /* Spacing: 4px base */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Shape, elevation and motion */
  --radius-sm: 0.625rem;
  --radius-control: 0.875rem;
  --radius-card: 1.5rem;
  --radius-panel: 2rem;
  --radius-pill: 999px;
  --radius: var(--radius-card);
  --shadow-card: 0 12px 32px rgba(35, 52, 58, 0.08);
  --shadow-float: 0 20px 48px rgba(35, 52, 58, 0.12);
  --motion-fast: 150ms;
  --motion-standard: 200ms;
  --motion-ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* Backwards-compatible names used by this guide's existing component styles */
  --brand: var(--color-brand-500);
  --brand-dark: var(--color-action);
  --brand-pale: var(--color-surface-brand);
  --ink: var(--color-ink-900);
  --muted: var(--color-ink-700);
  --paper: var(--color-surface-0);
  --mist: var(--color-surface-1);
  --line: var(--color-border);
  --yellow: var(--color-graphic-yellow);
  --grape: var(--color-flavor-grape-500);
  --peach: var(--color-flavor-peach-500);
  --strawberry: var(--color-flavor-strawberry-500);
  --neutral: var(--color-flavor-neutral-500);
  --shadow: var(--shadow-card);
  --display: var(--font-display);
  --sans: var(--font-ui);
}