/* ==========================================================================
   tokens.css — design tokens for the "Crimson Tide" identity
   Red + white. Waves and circles. Deliberately distinct from any prior build.
   ========================================================================== */

:root {
  /* --- Crimson palette ---------------------------------------------------- */
  --red-900: #5c0a1a;
  --red-800: #800f24;
  --red-700: #9e1228;
  --red-600: #c81e3a;   /* primary accent */
  --red-500: #e22d49;
  --red-400: #ef5a72;
  --red-300: #f78c9c;
  --red-200: #fcc0c9;
  --red-100: #ffe1e6;
  --red-050: #fff4f6;

  /* --- Pure mono (kept for the mandatory black-on-white NCPF plate) ------- */
  --paper:    #ffffff;

  /* --- Dark surfaces (warm, crimson-leaning) ----------------------------- */
  --ink:      #160b0f;   /* footer / rg-bar / racecard head / hero harm */
  --bg:        #0e0608;  /* page background, darkest */
  --bg-alt:    #150a0e;  /* alternating sections */
  --surface:   #1d1016;  /* cards, panels, drawers */
  --surface-2: #28161e;  /* raised: inputs, table head, odds chips */
  --line:        #38242e;
  --line-strong: #4c3039;

  /* --- Semantic ----------------------------------------------------------- */
  --text:          #f6ebee;  /* near-white */
  --text-soft:     #d8c4ca;
  --text-mute:     #a78a91;
  --accent:        #f15c74;   /* bright crimson, reads on dark */
  --accent-strong: #e22d49;
  --accent-soft:   #2c131c;   /* dark crimson wash for icon/circle fills */
  --focus:         #74a9ff;   /* high-contrast focus ring, not red, for AA */

  /* --- Typography --------------------------------------------------------- */
  --font-display: "Cambria", "Constantia", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --font-body:    "Trebuchet MS", "Segoe UI", system-ui, "Helvetica Neue", sans-serif;
  --font-mono:    "Cascadia Code", "Consolas", "SFMono-Regular", ui-monospace, monospace;

  --fs-300: 0.8125rem;
  --fs-400: 1rem;
  --fs-500: 1.1875rem;
  --fs-600: 1.5rem;
  --fs-700: 2.0625rem;
  --fs-800: 2.875rem;
  --fs-900: 4rem;

  --lh-tight: 1.12;
  --lh-snug:  1.32;
  --lh-body:  1.62;

  /* --- Space -------------------------------------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4.5rem;
  --sp-9: 6.5rem;

  /* --- Radius (circular language) ---------------------------------------- */
  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 28px;
  --r-pill: 999px;

  /* --- Elevation (black-based for dark theme) ----------------------------- */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-2: 0 8px 28px rgba(0, 0, 0, 0.45);
  --shadow-3: 0 18px 50px rgba(0, 0, 0, 0.6);

  /* --- Layout ------------------------------------------------------------- */
  --header-h: 54px;       /* === .rg-bar top offset; keep in sync */
  --wrap: 1180px;
  --wrap-narrow: 760px;

  /* --- Motion ------------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 0.7s;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0.001s; }
}