/* ============================================================
   Roasted Run 5k — design tokens
   As of 2026-07-10. Direction LOCKED by Brandyn: the live site's
   vibrant kit "in motion" (serif-sunrise + 3D Brewster rejected).
   CANONICAL colors = live V1 site. Note: the V2 re-skin drifted
   (orange #F2621B, teal #2FB8C5) — reconcile to these tokens
   during the V2 rework. See brand.md.
   ============================================================ */

/* 2026-09-29: values re-measured from Michael's live site (roasted-run-sd.mikey319.chatgpt.site): Barlow + Anton, black/cream/hot orange/cyan/hot pink. Older V1 values in brand.md. */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Barlow:ital,wght@0,400;0,600;0,700;0,800;1,700;1,800;1,900&family=Barlow+Condensed:ital,wght@1,700;1,800;1,900&family=Caveat:wght@500;600&display=swap');

:root{
  --brand-name:'Roasted Run 5k';

  /* ---- color: dark roast + orange/teal/cream ------------------ */
  --color-bg:#111313;              /* black (live 2026-09-29) */
  --color-surface:#1A1D1D;         /* panels, cards */
  --color-ink:#FFFFFF;             /* headlines */
  --color-body:#F4E9D4;            /* cream (live) */
  --color-line:rgba(255,255,255,.10);

  --color-primary:#FF761A;         /* hot orange (live 2026-09-29) */
  --color-primary-strong:#FF8A3D;  /* hover / glow */
  --color-on-primary:#FFFFFF;

  --color-accent:#10B9CD;          /* cyan (live 2026-09-29) */
  --color-pink:#ED3E87;            /* hot pink (live 2026-09-29) — whole sections, poster */
  --color-muted:#B1B5B1;           /* secondary copy on dark */
  --color-accent-strong:#2FB8C5;   /* bright teal — hover / glow */

  /* ---- type ---------------------------------------------------- */
  --font-display:'Barlow Condensed','Barlow', Impact, sans-serif; /* heavy ITALIC ALL-CAPS headlines (live) */
  --font-display-2:'Anton', Impact, sans-serif;  /* secondary display */
  --font-body:'Barlow', system-ui, sans-serif;   /* body / UI (live) */
  --font-accent:'Caveat', cursive;               /* handwritten asides */

  /* ---- shape + depth ------------------------------------------- */
  --radius:12px;
  --radius-pill:999px;
  --shadow:0 14px 40px rgba(0,0,0,.55);

  /* ---- spacing -------------------------------------------------- */
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px;
}