/* ==========================================================================
   Sporometrics design tokens — single source of truth.
   From "Sporometrics Design Guide" §13, with two client overrides:
     --r-nav = 9px  (nav bar uses tight corners, not a full pill)
     --grad-card = subtle gradient (white card is not flat white)
   ========================================================================== */
:root {
  /* --- Brand --- */
  --orange-hi:#F89E16; --orange-base:#FB910E; --orange-lo:#FE820D;
  --orange-shade:#C85E12; --orange-rim:#D9611A;
  --green-hi:#B7E05A; --green-base:#8CC63E; --green-lo:#6FA32C; --green-marker:#A6CE39;

  /* --- Neutrals --- */
  --white:#FFFFFF; --n-50:#F2F2F2; --n-100:#E4E4E4; --n-300:#C9C9C9;
  --n-600:#4D4D4D; --n-900:#1C1C1C;

  /* --- Text / bg --- */
  --text-body:#2B2B2B; --text-muted:#9B9B9B; --text-onbrand:#FFFFFF;
  --bg-desk:#EAEAEA; --bg-card:#FFFFFF;

  /* --- Heading / link / chevron --- */
  --heading-grey:#4D4D4D; --heading-orange:#F5821F;
  --link:#F5821F; --link-hover:#C85E12; --link-inline:#8CC63E;
  --chevron:#8CC63E; --chevron-hover:#F5821F;

  /* --- Gradients (CSS reproductions of the old sliced-PNG bezels) --- */
  --grad-orange:linear-gradient(180deg,#F89E16 0%,#FB910E 50%,#FE820D 100%);
  --grad-silver:linear-gradient(180deg,#D0D0D0 0%,#BEBEBE 50%,#ACACAD 100%);
  --grad-card:linear-gradient(180deg,#FBFBFB 0%,#EDEEEE 55%,#E4E4E4 100%);
  --grad-nav:linear-gradient(to bottom,#4a4a4a 0%,#3A3A3A 50%,#000 100%);

  /* --- Type --- */
  --font-body:'Trebuchet MS',Verdana,sans-serif;
  --font-display:'Breuer Text',system-ui,sans-serif;
  --fs-xs:12px; --fs-sm:13px; --fs-base:16px; --fs-lg:19px;
  --fs-xl:22px; --fs-2xl:26px; --fs-display:46px;
  --fw-regular:400; --fw-medium:500; --fw-bold:700;
  --lh-tight:1.15; --lh-body:1.6;
  --tr-label:0.06em; --tr-display:-0.02em;

  /* --- Spacing --- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px;

  /* --- Radius --- */
  --r-input:6px; --r-tab:10px; --r-banner:14px; --r-card:20px;
  --r-nav:9px;      /* override: nav bar corners */
  --r-pill:9999px;  /* true pill buttons */

  /* --- Borders --- */
  --border-rim:1px solid rgba(0,0,0,.08);
  --border-banner:1px solid #D9611A;
  --border-divider:1px solid #EAEAEA;

  /* --- Shadows / elevation --- */
  --sh-sm:0 4px 10px -6px rgba(0,0,0,.20);
  --sh-md:0 12px 24px -12px rgba(0,0,0,.28);
  --sh-lg:0 18px 30px -14px rgba(0,0,0,.30);
  --sh-brand:0 14px 26px -12px rgba(214,96,20,.55);
  --sh-gloss-top:inset 0 1px 0 rgba(255,255,255,.9);
  --sh-inset-field:inset 0 2px 4px rgba(0,0,0,.6);

  /* --- Motion --- */
  --mo-hover:150ms ease-out; --mo-press:100ms ease;
  --mo-reveal:300ms cubic-bezier(.22,.61,.36,1); --mo-accordion:240ms ease-in-out;
}