/* Quiz Whiz's look: a 1980s TV quiz-show studio, plum-black under a
   magenta spotlight up to the left and a teal one low to the right; the
   board a lit stage in a chrome rim of marquee bulbs (docs/quiz-whiz.md,
   "Its look"; docs/guide/games/quiz-whiz.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/quiz-whiz/page.html) wear just this.

   Faces, both OFL and bundled in fonts/: Bungee (the display: titles,
   headings, the marquee, "Right!": a game-show sign) and Lexend (everything
   you read: wide, plain, made for reading). */

@font-face { font-family: "Bungee"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/bungee-400-latin.1472b4fcf031.woff2") format("woff2"); }
@font-face { font-family: "Lexend"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("fonts/lexend-400-800-latin.7e692144d823.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 studio: plum-black, a magenta spot up to the left, a teal one low right */
  --studio: #110828;
  --studio-hi: #1d1040;
  --studio-lo: #08031a;
  --marquee: #ffd23f;
  --magenta: #f0459b;
  --chrome-hi: #f7f4ff; --chrome: #b9b2cf; --chrome-lo: #6c6487;
  --bulb: #fff6d8;
  /* the six categories, slot by slot (blue circle, magenta square, yellow
     triangle, violet diamond, lime star, orange plus): never only the color */
  --cat-0: #4b8dff; --cat-1: #f0459b; --cat-2: #ffd23f; --cat-3: #9b6cff; --cat-4: #7bd84a; --cat-5: #ff8a3d;

  /* the room kit's (docs/guide/design/tokens.md, "Color jobs"): the
     studio is the whole screen, no rim (FRAME: the page is the room edge to edge) */
  --room: #110828;
  --table: radial-gradient(ellipse 62% 70% at 18% 8%, rgba(240, 69, 155, .20), transparent 62%), radial-gradient(ellipse 50% 60% at 92% 96%, rgba(45, 226, 200, .10), transparent 70%), radial-gradient(ellipse 120% 90% at 50% 45%, #1d1040, #110828 60%, #08031a);
  --rail: 0 solid transparent;
  --rail-radius: 0;
  --panel: rgba(6, 2, 18, .42);
  --panel-edge: 1.5px solid rgba(244, 240, 255, .14);
  --panel-radius: 12px;
  --sheet: #1f1242;
  --chip: rgba(244, 240, 255, .07);
  --chip-edge: 1.5px solid rgba(244, 240, 255, .3);
  --chip-radius: 999px;
  --ink: #f4f0ff;
  --soft: #c3bbe0;
  --turn: #2de2c8;
  --good: #a9e689;
  --bad: #ff9bb3;
  --focus: #8ff3e4;
  --btn: #2de2c8;
  --btn-ink: #06211d;
  --btn-edge: 2px solid #2de2c8;
  --btn2: transparent;
  --btn2-ink: #f4f0ff;
  --btn2-edge: 2px solid #f4f0ff;
  --btn-radius: 10px;
  --btn-weight: 700;
  --confirm: #ff9bb3;
  --confirm-ink: #2a0614;
  --turn-ink: #06211d;
  --seat-ink: #111;
  --field-edge: 1.5px solid color-mix(in srgb, currentColor 50%, transparent);
  --ui-font: "Lexend", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --display: "Bungee", "Lexend", "Arial Black", sans-serif;
  --display-weight: 400;

  color-scheme: dark;
}

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