/* =========================================================================
   TOKENS — "Concrete Cobra" design system
   Poured-concrete graphite surfaces · single hazard-yellow accent ·
   steel-blue counterweight. All design decisions live here.
   ========================================================================= */
:root {
  /* ---- Surface stack: darkest page bg → raised surfaces → borders ---- */
  --bg-000:#15171a;   /* page background — graphite */
  --bg-050:#1b1e22;   /* app shell / sunken */
  --bg-100:#22262b;   /* raised surface (cards) */
  --bg-150:#2b3036;   /* surface hover / inputs */
  --bg-300:#3c434b;   /* borders / thick dividers */

  /* ---- Foreground ramp ---- */
  --fg-000:#eceef0;   /* primary text */
  --fg-100:#c4c9cf;   /* secondary text */
  --fg-300:#878d94;   /* muted / meta */
  --fg-500:#5a6068;   /* disabled / faint */

  /* ---- Accents ---- */
  --accent:#cda434;        /* muted hazard yellow — primary CTA / Bet / links */
  --accent-hi:#e0b94a;     /* yellow hover */
  --accent-lo:#a8861f;     /* yellow active/pressed */
  --accent-2:#4d6f93;      /* steel blue — emphasis / badges / secondary */
  --accent-2-hi:#5f86ad;
  --status:#5f93b3;        /* lighter steel — live / status-ok */
  --up:#6fae54;            /* odds drift up / positive */
  --down:#cf6a3c;          /* odds drift down / negative */
  --accent-ink:#15171a;    /* graphite text on yellow fills */

  /* ---- Compliance plates ---- */
  --plate-bg:#ffffff;      /* NCPF plate — mandated black-on-white */
  --plate-fg:#000000;

  /* ---- Type families ---- */
  --font-display:"Archivo Black","Oswald","Arial Narrow Bold",Impact,
                 "Helvetica Neue",sans-serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular","Cascadia Code",
              "Consolas",monospace;

  /* ---- Type scale (1.25 major-third) ---- */
  --fs-300:clamp(.72rem,.69rem + .15vw,.8rem);   /* micro / meta */
  --fs-400:clamp(.85rem,.82rem + .18vw,.95rem);  /* body */
  --fs-500:clamp(1rem,.95rem + .3vw,1.18rem);    /* lead */
  --fs-600:clamp(1.2rem,1.1rem + .6vw,1.5rem);   /* h3 */
  --fs-700:clamp(1.5rem,1.3rem + 1.1vw,2.1rem);  /* h2 */
  --fs-800:clamp(2rem,1.6rem + 2.2vw,3.4rem);    /* h1 */
  --fs-900:clamp(2.6rem,1.9rem + 3.6vw,5rem);    /* hero */

  /* ---- Spacing (4px grid) ---- */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px;
  --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px;

  /* ---- Radii: near-square, hard corners ---- */
  --r-0:0;   --r-1:2px; --r-2:4px; --r-pill:999px;

  /* ---- Borders ---- */
  --bd:1px solid var(--bg-300);
  --bd-thick:3px solid var(--bg-300);
  --bd-hazard:3px solid var(--accent);

  /* ---- Elevation (3 levels, flat & honest) ---- */
  --sh-1:0 1px 0 rgba(0,0,0,.4);
  --sh-2:0 4px 14px rgba(0,0,0,.45);
  --sh-3:0 14px 40px rgba(0,0,0,.55);

  /* ---- Motion: snappy, mechanical, no bounce ---- */
  --ease:cubic-bezier(.2,0,0,1);
  --t-fast:120ms;
  --t-base:160ms;
  --t-slow:180ms;

  /* ---- Layout ---- */
  --rail-w:232px;
  --slip-w:332px;
  --maxw:1440px;
  --header-h:64px;
  --rgbar-h:34px;
}

/* Concrete grain — a faint repeating noise applied to the page shell. */
:root {
  --concrete-grain:
    repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.05) 0 1px, transparent 1px 4px);
  /* Hazard-stripe edge used as section focal markers. */
  --hazard-stripe:repeating-linear-gradient(
    -45deg, var(--accent) 0 10px, var(--accent-ink) 10px 20px);
}