/* ============================================================
   KILOX — brand tokens (locked)
   Single source of truth for color, type, spacing, motion.
   Do not hardcode any of these values elsewhere.
   ============================================================ */

/* ---- Fonts (self-hosted) ---- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/inter-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/inter-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/inter-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/jetbrains-mono-latin-700-normal.woff2") format("woff2");
}

:root {
  /* ---- Palette (locked) ---- */
  --void:     #0B0E14;  /* base background */
  --panel:    #121722;  /* cards / surfaces */
  --hairline: #232B3B;  /* borders / dividers */
  --long:     #00E676;  /* UP / wins / the X */
  --short:    #FF3D5A;  /* DOWN / busts */
  --gold:     #F2C94C;  /* RESERVED: 1000x badge, wins, streaks only */
  --ice:      #F2F4F8;  /* primary text */
  --muted:    #6B7385;  /* secondary text */

  /* ---- Type ---- */
  --font-ui:   "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;
  /* ALL numbers (prices, stakes, multipliers, PnL) use --font-mono. */

  /* ---- Radii ---- */
  --r-tile: 12px;   /* monogram tile, cards */
  --r-ctl:  10px;   /* buttons, inputs */
  --r-pill: 999px;

  /* ---- Spacing scale ---- */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;

  /* ---- Motion (sub-200ms interactions everywhere) ---- */
  --t-fast: 120ms;
  --t-base: 180ms;
  --ease:   cubic-bezier(0.2, 0.8, 0.2, 1);
}