/* ==========================================================================
   wc26 — Flip World Cup 2026 Prediction Game
   Mirrors cskit's tokens for a consistent app shell.
   ========================================================================== */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Clash Grotesk";
  src: url("../fonts/ClashGrotesk-Variable.woff2") format("woff2-variations");
  font-weight: 200 700;
  font-display: swap;
}
@font-face {
  font-family: "Clash Grotesk";
  src: url("../fonts/ClashGrotesk-Light.woff2") format("woff2");
  font-weight: 300; font-display: swap;
}
@font-face {
  font-family: "Clash Grotesk";
  src: url("../fonts/ClashGrotesk-Regular.woff2") format("woff2");
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "Clash Grotesk";
  src: url("../fonts/ClashGrotesk-Medium.woff2") format("woff2");
  font-weight: 500; font-display: swap;
}
@font-face {
  font-family: "Clash Grotesk";
  src: url("../fonts/ClashGrotesk-Semibold.woff2") format("woff2");
  font-weight: 600; font-display: swap;
}
@font-face {
  font-family: "Clash Grotesk";
  src: url("../fonts/ClashGrotesk-Bold.woff2") format("woff2");
  font-weight: 700; font-display: swap;
}

:root {
  /* ---------- Brand palette (source: cskit / Figma) ---------- */
  --flip-blue:        #1D79FF;
  --swirl:            #2151F5;
  --sky:              #5FCDFD;
  --black:            #000000;
  --white:            #FFFFFF;

  /* ---------- Light app shell ---------- */
  --panel:            #FFFFFF;
  --panel-alt:        #FAFAF9;
  --stage:            #EFEEEA;
  --ink:              #141010;
  --ink-2:            #545454;
  --ink-3:            #7A7A74;
  --ink-4:            #A0A09A;
  --hair:             #EAEAEA;
  --hair-strong:      #D9D9D6;
  --gray-50:          #F7F7F5;
  --gray-100:         #F0F0EE;
  --gray-200:         #E5E5E2;

  /* ---------- Typography ---------- */
  --font-body:    "Clash Grotesk", system-ui, -apple-system, sans-serif;
  --font-display: "Clash Grotesk", system-ui, -apple-system, sans-serif;

  /* ---------- Spacing & radii ---------- */
  --s-4:  4px;  --s-8:  8px;  --s-12: 12px;
  --s-16: 16px; --s-24: 24px; --s-32: 32px;
  --r-s:  6px;  --r-m:  10px; --r-l:  14px;  --r-xl: 20px;
}