/* ============================================================
   VR SPORTS - design tokens ("broadcast meets arcade")
   60-30-10: Circuit White #F2F6FB / Track Blue #1B3A6B /
   Grid Red #FF3D2E (keyed to the approved Speed Freak livery).
   ============================================================ */

:root {
  /* -- canvas & surfaces ------------------------------------ */
  --bg:          #F2F6FB;   /* Circuit White */
  --surface:     #FFFFFF;
  --bg-tint:     #E3EBF6;   /* blue-tinted band */
  --bg-cream:    #FFF5F3;   /* faint red wash for warm cards */

  /* -- ink ---------------------------------------------------- */
  --ink:         #12233F;   /* deep track ink, never pure black */
  --ink-soft:    #46536B;
  --ink-faint:   #7E8BA3;
  --line:        #D8E1EE;

  /* -- brand -------------------------------------------------- */
  --track-blue:      #1B3A6B;   /* 30 - bands, hero, footer */
  --track-blue-deep: #122A52;
  --track-ink:       #0D1E3C;
  --grid-red:        #FF3D2E;   /* 10 - the accent */
  --grid-red-deep:   #D92818;
  --grid-red-ink:    #B31F12;   /* AA-safe fill for white text */
  --grid-red-soft:   #FF8A80;   /* soft red for dark panels */

  /* -- type --------------------------------------------------- */
  --font-display: "Chakra Petch", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* -- shape -------------------------------------------------- */
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   18px;
  --r-xl:   26px;
  --r-pill: 999px;

  /* -- lean (the house skew) ---------------------------------- */
  --lean: -6deg;

  /* -- elevation ---------------------------------------------- */
  --shadow-card: 0 10px 30px -14px rgba(18, 42, 78, .25);
  --shadow-pop:  0 30px 60px -22px rgba(18, 42, 78, .38);
  --shadow-red:  0 16px 36px -14px rgba(255, 61, 46, .45);

  /* -- layout ------------------------------------------------- */
  --wrap:   1180px;
  --gutter: clamp(20px, 4vw, 36px);
}