/* Vibe Check's look: a 1970s hi-fi tuner in a walnut cabinet, on a warm
   dark den table under one amber lamp (docs/vibe-check.md, "Its look";
   docs/guide/games/vibe-check.md, "Its look"). This file is the tokens (the
   house's, the room kit's and the game's own) and the faces; it's loaded
   before the room's structure (games/room/room.css), and the table
   (table.css) after it. The Django pages (games/templates/vibe-check/page.html)
   wear just this.

   Faces, all OFL and bundled in fonts/: Righteous (the display: titles,
   headings, the dial's numbers: a 70s record sleeve), Outfit (everything
   you read: round and plain) and Michroma (the faceplate's engraving only,
   never under 12px). */

@font-face { font-family: "Righteous"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/righteous-400-latin.3944041858dc.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("fonts/outfit-400-800-latin.98ccc2b7f189.woff2") format("woff2"); }
@font-face { font-family: "Michroma"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/michroma-400-latin.f546c3cb7fa5.woff2") format("woff2"); }

:root {
  /* the house's (docs/guide/design/tokens.md) */
  --t-display: clamp(32px, 7vw, 44px); --t-heading: 20px; --t-body: 16px; --t-label: 16px; --t-note: 14px;
  --s1: 4px; --s2: 8px; --s3: 16px; --s4: 24px; --s5: 40px;
  --pick-tint: color-mix(in srgb, currentColor 16%, transparent);
  --pick-ring: inset 0 0 0 2px currentColor;
  --pick-weight: 700;

  /* the den: warm dark brown under an amber lamp up to the left */
  --den: #20140c;
  --lamp: rgba(255, 176, 90, .16);

  /* the cabinet and the faceplate */
  --walnut-hi: #5a3519; --walnut: #3d220f; --walnut-lo: #2c180a;
  --alu-hi: #eeebe4; --alu: #d4d0c7; --alu-lo: #c3beb3;
  --engrave: #4d463c;
  /* the clue display: amber LEDs behind smoked glass (8.9:1 on it) */
  --led-bg: #0b0703; --led: #ffd08a; --led-dim: #c98a3a;
  /* the dial's cream face and its chocolate needle */
  --cream: #fff8e8; --cream-lo: #ecd2a3; --needle: #3b2414; --tip: #ff5a1f;
  --card-ink: #23140a;

  /* the teams: Sunset (a sun) and Tide (a wave); never only the color */
  --team-0: #ff7a45; --team-1: #38b2ac; --team-ink: #20140c;

  /* the room kit's (docs/guide/design/tokens.md, "Color jobs"): the felt is
     the whole screen, no rim (FRAME: the page is the den edge to edge) */
  --room: #20140c;
  --table: radial-gradient(ellipse 60% 55% at 24% 30%, rgba(255, 176, 90, .16), transparent 65%), radial-gradient(ellipse 120% 100% at 50% 50%, transparent 55%, rgba(0, 0, 0, .45)), #20140c;
  --rail: 0 solid transparent;
  --rail-radius: 0;
  --panel: rgba(10, 5, 2, .28);
  --panel-edge: 1.5px solid rgba(247, 234, 214, .14);
  --panel-radius: 12px;
  --sheet: #2e1d11;
  --chip: rgba(247, 234, 214, .06);
  --chip-edge: 1.5px solid rgba(247, 234, 214, .3);
  --chip-radius: 999px;
  --ink: #f7ead6;
  --soft: #cdb99b;
  --turn: #ffd166;
  --good: #9fe3a8;
  --bad: #ff9a8a;
  --focus: #fff3dc;
  --btn: #ffb547;
  --btn-ink: #241405;
  --btn-edge: 2px solid #ffb547;
  --btn2: transparent;
  --btn2-ink: #f7ead6;
  --btn2-edge: 2px solid #f7ead6;
  --btn-radius: 10px;
  --btn-weight: 700;
  --confirm: #ff9a8a;
  --confirm-ink: #2a0d06;
  --turn-ink: #20140c;
  --seat-ink: #111;
  --field-edge: 1.5px solid color-mix(in srgb, currentColor 50%, transparent);
  --ui-font: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --display: "Righteous", "Outfit", "Trebuchet MS", sans-serif;
  --display-weight: 400;
  --engraving: "Michroma", "Eurostile", "Arial", sans-serif;

  color-scheme: dark;
}

body { background: var(--room); }

/* the teams' marks (table.js teamMark) */
.tmark .tdisc { fill: var(--team-0); }
.tmark-1 .tdisc { fill: var(--team-1); }
.tmark .tink { fill: var(--team-ink); }
.tmark .tray { stroke: var(--team-ink); stroke-width: 1.6; stroke-linecap: round; }
.tmark .twave { fill: none; stroke: var(--team-ink); stroke-width: 2; stroke-linecap: round; }