/* Alphabet Roulette's look: game night on the coffee table, in the 1980s
   (docs/alphabet-roulette.md, "Its look"). A deep blue table; the answer
   pad in pale yellow, ruled in blue with a red margin; the die a coral
   icosahedron with cream letters, in a dark tray. 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/alphabet-roulette/page.html) wear just this.

   Faces, all OFL and bundled in fonts/: Big Shoulders Display (the letter,
   the clock and the titles: a game-show marquee), Rubik (everything you
   read: round and plain) and Caveat (the answers, written on the pad). */

@font-face { font-family: "Big Shoulders Display"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/big-shoulders-display-100-900-latin.b5152247f4c0.woff2") format("woff2"); }
@font-face { font-family: "Rubik"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("fonts/rubik-400-800-latin.94df5f5371c1.woff2") format("woff2"); }
@font-face { font-family: "Caveat"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/caveat-700-latin.21a75b3669b7.woff2") format("woff2"); }

:root {
  /* the house's (docs/design-system.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 table: deep game-night blue */
  --navy: #16274d; --navy-hi: #22386b; --navy-lo: #0d1834;

  /* the pad: pale yellow stock, blue rules, a red margin, written in a
     dark blue ballpoint. Ink on the pad reads at 12:1, its soft ink at 6:1,
     the red at 5.6:1. */
  --pad: #fff6c4; --pad-lo: #f6e9a6; --pad-edge: #d9c777;
  --pad-ink: #1b2a52; --pad-soft: #55607e;
  --pad-rule: #9ec1e4; --pad-margin: #e0636b; --pad-red: #b3262f;
  --pad-good: #1f6b3a;
  --hand: "Caveat", "Segoe Print", "Bradley Hand", cursive;

  /* the die: coral faces lit by a lamp up to the left, cream letters */
  --die-hue: 9; --die-sat: 76%; --die-light: 62%;
  --die-edge: #7a2414; --die-letter: #fff4dc;
  --tray: radial-gradient(ellipse at 50% 38%, #233f78, #13234a 70%, #0b1530);
  --tray-edge: #3a5a9a;

  /* the room kit's (docs/design-system.md, "The room kit"), on the table */
  --room: #0d1834;
  --table: radial-gradient(ellipse at 50% 0%, #2a4683, #1a2e5c 55%, #10204a);
  --rail: 1.5px solid #3a5a9a;
  --rail-radius: 18px;
  --panel: rgba(4, 12, 34, .32);
  --panel-edge: 1.5px solid rgba(255, 246, 220, .16);
  --panel-radius: 14px;
  --sheet: #182c58;
  --chip: rgba(4, 12, 34, .3);
  --chip-edge: 1.5px solid rgba(255, 246, 220, .3);
  --chip-radius: 999px;
  --ink: #fff6e0;
  --soft: #c3cbe4;
  --turn: #ffd34d;
  --good: #8fe0a6;
  --bad: #ff9a8e;
  --focus: #fff6e0;
  --btn: #ffd34d;
  --btn-ink: #14204a;
  --btn-edge: 2px solid #ffd34d;
  --btn2: transparent;
  --btn2-ink: #fff6e0;
  --btn2-edge: 2px solid #fff6e0;
  --btn-radius: 12px;
  --btn-weight: 700;
  --confirm: #ff9a8e;
  --confirm-ink: #2a0d06;
  --turn-ink: #14204a;
  --seat-ink: #111;
  --field-edge: 1.5px solid color-mix(in srgb, currentColor 50%, transparent);
  --ui-font: "Rubik", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --display: "Big Shoulders Display", "Arial Narrow", "Helvetica Neue", sans-serif;
  --display-weight: 800;

  color-scheme: dark;
}

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