/* Get In Line's look: a walnut board in a games parlor (docs/get-in-line.md,
   "Its look"). This file is the tokens (the house's, the room kit's, the
   card faces' and Get In Line's own) and the faces; it's loaded before the
   room's structure (games/room/room.css) and the card faces
   (games/cards/cards.css), and the board (board.css) after them. The Django
   pages (games/templates/get-in-line/page.html) wear just this.

   Faces: Fraunces 700 (the display: titles, banners, the team names on the
   result) and Figtree (everything else), both OFL and bundled in fonts/. */

@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/fraunces-latin-700.d99d78cac1e8.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("fonts/figtree-400-800-latin.392aed3eb142.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 parlor: espresso walls, a walnut board with a brass edge, and a
     deep blue baize under the cards */
  --walnut-hi: #7a5233; --walnut: #5c3b21; --walnut-lo: #3b2413;
  --brass: #d9b45f; --brass-lo: #9c7a32;
  --baize: #17304a; --baize-lo: #0f2236;

  /* the teams' chips: blue, orange and green, apart by lightness and hue
     for every kind of color vision (checked under protan, deutan and tritan
     simulation), and each with its own mark besides: a ring, a cross, a
     triangle. Their ink is for the mark on the chip. */
  --team-0: #2468d4; --team-0-ink: #eaf1ff; --team-0-edge: #10336e;
  --team-1: #f39a3a; --team-1-ink: #3b1d04; --team-1-edge: #8a4a0c;
  --team-2: #0e5f3c; --team-2-ink: #e3f5ea; --team-2-edge: #04301d;

  /* the room kit's (docs/design-system.md, "The room kit"), on the parlor */
  --room: #1b130e;
  --table: radial-gradient(ellipse at 50% 20%, #33231a, #261a12 55%, #1b130e);
  --rail: 0 solid transparent;
  --rail-radius: 0;
  --panel: rgba(0, 0, 0, .22);
  --panel-edge: 1.5px solid rgba(245, 236, 220, .16);
  --sheet: #2a1d14;
  --chip: rgba(0, 0, 0, .25);
  --chip-edge: 1.5px solid rgba(245, 236, 220, .3);
  --chip-radius: 999px;
  --ink: #f5ecdc;
  --soft: #c9b79e;
  --turn: #ffd34d;
  --good: #9fdc8f;
  --bad: #ff9a85;
  --focus: #f5ecdc;
  --btn: #f5ecdc;
  --btn-ink: #24170e;
  --btn-edge: 2px solid #f5ecdc;
  --btn2: transparent;
  --btn2-ink: #f5ecdc;
  --btn2-edge: 2px solid #f5ecdc;
  --btn-radius: 10px;
  --btn-weight: 700;
  --confirm: #ff9a85;
  --confirm-ink: #2a0d06;
  --turn-ink: #1b130e;
  --seat-ink: #111;
  --field-edge: 1.5px solid color-mix(in srgb, currentColor 50%, transparent);
  --ui-font: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --display-weight: 700;

  /* the card faces (games/cards/cards.css draws them from these) */
  --card: #fffdf8;
  --card-edge: 1px solid #e6dcc8;
  --card-radius: 6px;
  --card-font: var(--ui-font);
  --card-weight: 800;
  --card-shadow: 0 1px 0 rgba(0, 0, 0, .35);
  --suit-s: #171717;
  --suit-c: #171717;
  --suit-h: #c8232f;
  --suit-d: #c8232f;
  --joker: #2b59c3;
  --back: #7a2430;
  --back-edge: 3px solid #fffdf8;
  --back-pattern: repeating-linear-gradient(45deg, rgba(255, 253, 248, .14) 0 3px, transparent 3px 7px);
  --select: 4px 4px 0 #ffd34d;
  --lift: translate(-3px, -14px);

  color-scheme: dark;
}

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