/* Design tokens -- Hold'em Broadcast HUD.
 *
 * Transcribed from the UE5 handoff (`spec/tokens.md` in the poker-hud export).
 * That document is the source of truth for colour and geometry; this file is
 * its web expression. If a value changes there, change it here -- the two
 * builds are meant to look identical.
 *
 * Every px below is at the 1920x1080 design canvas. Nothing scales itself:
 * `.hud-stage` is scaled as a whole (see scale.js), exactly like UE's DPI
 * curve, so these stay literal and comparable with the UMG values.
 */

@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/Inter-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-display: block;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../assets/fonts/JetBrainsMono-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: block;
}

:root {
  color-scheme: dark;

  /* ---- palette -------------------------------------------------------- */
  --paper: #f2ede1;         /* card face */
  --paper-top: #fbf8f1;     /* optional lighter top stop */
  --paper-edge: #d8d0bd;    /* card face edge / gradient bottom */
  --ink: #171a1f;           /* black suits + rank text */
  --red: #c22f27;           /* red suits */
  --gold: #e8b64a;          /* win %, pot amount, POT tab, BB fill */
  --gold-deep: #b98a26;     /* gradient partner for gold */
  --text: #eef1f4;
  --text-dim: #9aa4ad;
  --text-faint: #5d666e;
  --ground: #0b0d10;

  /* glass panel (Seat / Street) -- a vertical gradient, not a flat fill */
  --panel-top: rgba(22, 26, 31, 0.92);
  --panel-bottom: rgba(14, 17, 21, 0.90);
  --panel-stroke: rgba(255, 255, 255, 0.09);
  --panel-shadow: 0 12px 26px -10px rgba(0, 0, 0, 0.75);
  --pot-plate: #14171a;

  /* ---- action semantics (kept deliberately clear of the gold accent) --- */
  --act-check: #8b959d;
  --act-call: #3f82d6;
  --act-raise: #e0932e;
  --act-allin: #d43b30;
  --act-fold: #5a6068;

  /* ---- model chip ------------------------------------------------------
   * NOT in the UE handoff -- added for the web build, because on this product
   * the model IS the competitor and naming it is the whole point. Cool/teal so
   * it never reads as an action chip or as the gold accent.
   */
  --model: #8fd2de;
  --model-dot: #4ea8de;
  --model-bg: rgba(96, 178, 196, 0.14);

  /* ---- state ----------------------------------------------------------
   * A folded seat is dimmed rather than hidden: the broadcast still shows the
   * muck, but a viewer must be able to see at a glance who is live. Tune the
   * whole fold treatment with these two numbers.
   */
  --folded-opacity: 0.6;
  --folded-saturate: 0.6;
  --acting-ring: rgba(232, 182, 74, 0.35);

  /* When the hand is decided, the non-winning seats fade back to just visible so
   * the winner reads clearly -- especially in the wide shot, where a winner on
   * the far side would otherwise sit behind other seats' panels. */
  --muted-opacity: 0.22;

  /* ---- stack change feedback ------------------------------------------
   * A stack number flashes when it moves so blinds -- which have no chip or
   * character animation on the felt -- still register. Gain green, loss a soft
   * red (kept off the suit red and the raise amber so it never reads as an
   * action). See hud.js _renderStack / hud.css .seat__stack.is-gain/.is-loss. */
  --stack-gain: #46c17d;
  --stack-loss: #d8564c;

  /* ---- type ------------------------------------------------------------ */
  --sans: "Inter", "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
}