/*
  Made New — design tokens
  Colors sourced from Bay Life's designer (confirmed 2026-08-28).
  Named roles per the campaign brand guide: Sunrise (~70% usage),
  Horizon (~20%), Atmosphere (~10%), Glow (celebration accent, sparse).
*/

:root {
  /* Color — campaign palette */
  --color-sunrise-deep: #F1782B;
  --color-sunrise-gold: #F7A224;
  --color-horizon-teal: #12C0C4;
  --color-horizon-pale: #BDFFFF;
  --color-atmosphere: #34346A;
  --color-glow: #B448D8;

  /* Color — neutrals */
  --color-ink: #1A1A1A;
  --color-ink-soft: #4A4A52;
  --color-paper: #FDFBF7;
  --color-white: #FFFFFF;
  --color-line: #E4E0D6;

  /* Color — semantic roles */
  --color-primary: var(--color-sunrise-deep);
  --color-primary-hover: #D96A22;
  --color-accent: var(--color-horizon-teal);
  --color-text: var(--color-ink);
  --color-text-muted: var(--color-ink-soft);
  --color-bg: var(--color-paper);
  --color-bg-alt: var(--color-white);
  --color-border: var(--color-line);
  --color-focus: var(--color-horizon-teal);

  /* Bay Life "chrome" — restrained, not campaign-colored */
  --color-chrome-bg: var(--color-white);
  --color-chrome-text: var(--color-ink);
  --color-chrome-border: var(--color-line);

  /* Type families */
  --font-display: "Gotham", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  /* Type scale — 16px base, 1.25 ratio */
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.25rem;
  --text-lg: 1.563rem;
  --text-xl: 1.953rem;
  --text-2xl: 2.441rem;
  --text-3xl: 3.052rem;
  --text-4xl: 3.815rem;

  /* Spacing — 8px base unit */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 2.5rem;
  --space-6: 3rem;
  --space-8: 4rem;
  --space-10: 5rem;
  --space-12: 6rem;

  /* Layout */
  --content-max: 72rem;
  --content-narrow: 48rem;
  --radius: 4px;
  --radius-lg: 8px;

  /* Motion */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
}

/* Breakpoint convention (used directly in media queries, not as custom
   properties, since custom properties can't be interpolated into
   @media conditions): tablet = 768px, desktop = 1024px. */