/* Design tokens — the single source of truth for color, type, and spacing.
   Change a value here and it updates everywhere it's referenced. Components
   (components.css) must never hardcode a color, font-size, or spacing value
   that has a token below — use the token. See ../../DESIGN_SYSTEM.md. */

:root {
  /* Color */
  --basalt: #1C1F1B;
  --bone: #F4F1EA;
  --stone: #E9E5DB;
  --brass: #B4884B;
  --line: #D8D4CA;
  --white: #FFFFFF;
  --gray-1: #3A3F3A;
  --gray-2: #6E736C;
  --gray-3: #8A8F86;
  --gray-4: #C3C7BE;
  --shadow-hairline: 0 0 0 1px var(--line);

  /* Type: fixed sizes (roles that don't change across breakpoints) */
  --text-2xs: 10px;
  --text-xs: 11px;
  --text-sm: 12px;
  --text-base: 14px;
  --text-md: 16px;
  --text-2xl: 28px;

  /* Type: responsive sizes — redefined inside the breakpoints below, so a
     component using var(--text-hero) automatically resizes. Never give a
     component its own per-breakpoint font-size override; add or adjust a
     responsive token here instead. */
  --text-hero: 32px;
  --text-heading: 26px;
  --text-lede: 16px;

  /* Space: fixed */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 20px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 44px;

  /* Space: responsive */
  --space-page: 20px;
  --space-section: 44px;
}

/* Breakpoints: 640px (tablet), 960px (desktop). Keep every responsive
   token's tablet/desktop step here, in one place, rather than scattering
   media queries through components.css. */
@media (min-width: 640px) {
  :root {
    --text-hero: 46px;
    --text-heading: 32px;
    --text-lede: 18px;
    --space-page: 32px;
    --space-section: 64px;
  }
}

@media (min-width: 960px) {
  :root {
    --text-hero: 58px;
    --space-section: 88px;
  }
}