/* RAWDM design tokens — the single source of truth.
   Load FIRST on every site page and the /play shell. No selectors here:
   fonts + custom properties only. Components live in ziggurat.css.

   The language: broadcast graphite. Cool near-neutral darks in clear
   steps, hairline edges, sharp corners. Warmth lives ONLY in the red
   signal. Nothing rounded, nothing blurred, no glassmorphism. */

@font-face {
  font-family: "Oxanium";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/fonts/oxanium-500.woff2") format("woff2");
}
@font-face {
  font-family: "Oxanium";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/fonts/oxanium-600.woff2") format("woff2");
}
@font-face {
  font-family: "Oxanium";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/static/fonts/oxanium-700.woff2") format("woff2");
}
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/sora-400.woff2") format("woff2");
}
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/fonts/sora-600.woff2") format("woff2");
}
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/static/fonts/sora-700.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/ibm-plex-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/fonts/ibm-plex-mono-500.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/static/fonts/ibm-plex-mono-700.woff2") format("woff2");
}

:root {
  color-scheme: dark;
  --spread: 1;

  --font-display: "Oxanium", "Arial Narrow", sans-serif;
  --font-ui: "Sora", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Code", "SF Mono", Menlo, monospace;

  /* Level faces — broadcast graphite. Cool, near-neutral darks with
     clear step separation; the red signal is the only warm thing here. */
  --g0: #08090c; /* void — near-black */
  --g1: #0e1015; /* inset wells */
  --g2: #14161d; /* base platforms / nav */
  --g3: #1a1d26; /* raised content */
  --g4: #222633; /* high face / chips */
  --g5: #2d3242; /* peak face */
  --g5-hot: #39405a; /* peak hover */

  /* Hairline edges — flat surfaces only. */
  --edge: rgba(255, 255, 255, 0.09);
  --edge-soft: rgba(255, 255, 255, 0.05);
  --edge-hot: rgba(255, 255, 255, 0.16);
  --dot: rgba(255, 255, 255, 0.20);
  --line-flat: 1px solid var(--edge);
  --line-soft: 1px solid var(--edge-soft);
  /* Inset wells — a darker face behind a soft hairline. No dot texture. */
  --line-well: 1px solid var(--edge-soft);

  /* Control borders — a whisper of top-light relief, not a chunky bevel.
     hi/lo stay as token names so pressable markup keeps meaning. */
  --bv-sm: 1px;
  --bv: 1px;
  --bv-lg: 1px;
  --hi: rgba(255, 255, 255, 0.16);
  --lo: rgba(0, 0, 0, 0.55);

  /* Text roles */
  --signal: #f2f3f5;
  --prose: #b9bec7;
  --ui: #8a8f9a;
  --meta: #5d626c;

  /* Signals: RAWDM red (CTAs / self), live green, champion gold. */
  --red: #e8192c;
  --red-hot: #ff3b2f;
  --red-face: #b91c24;
  --red-face-hot: #e02430;
  --red-hi: rgba(255, 110, 100, 0.6);
  --red-lo: rgba(0, 0, 0, 0.55);
  --line-red: rgba(232, 25, 44, 0.55);
  --live: #5fd07a;
  --live-dim: #3d7a4c;
  --gold: #e8c15a;
  --gold-hot: #ffd15b;
  --warn: #d9a45b;

  /* Cool secondary — sparingly, for status / highlight accents. */
  --cyan: #6fd9c8;

  /* Twitch brand — the one third-party color exception. */
  --twitch: #9146ff;
  --twitch-face: #3b2a5e;
  --twitch-face-hot: #4d3880;
  --twitch-hi: rgba(155, 107, 255, 0.6);
  --twitch-lo: rgba(0, 0, 0, 0.55);

  /* Cosmetic rarity — three-way contract: items catalog JSON ↔ these
     tokens ↔ inventory.rs inline `style="--rarity:var(--{rarity})"`. */
  --common: #9ca3af;
  --rare: #38bdf8;
  --epic: #a78bfa;
  --legendary: #f59e0b;
  --mythic: #fb7185;
}