/* Bowl's look: a family kitchen table, the bowl in the middle (docs/bowl.md,
   "Its look"). This file is the tokens (the house's, the room kit's and
   Bowl'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/bowl/page.html) wear just this.

   Faces, all OFL and bundled in fonts/: Young Serif (the display: titles,
   the clock, the team names), Nunito (everything else: round and easy to
   read across a room) and Caveat (the hand the slips are written in). */

@font-face { font-family: "Young Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/young-serif-400-latin.2e465c2f5f89.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("fonts/nunito-400-900-latin.acfce21e9f6e.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 14%, transparent);
  --pick-ring: inset 0 0 0 2px currentColor;
  --pick-weight: 800;

  /* the kitchen: a linen cloth, a red gingham runner, the cane bowl glazed
     white inside, and slips of paper in a few colors */
  --linen: #f4ead6; --linen-lo: #e6d6b9;
  --gingham: #c8473a;
  --cane-hi: #ecc283; --cane: #d39a55; --cane-lo: #a8692f;
  --glaze: #fffaf1; --glaze-mid: #f6eedf; --glaze-lo: #ddcdb0;
  --bowl-shadow: rgba(59, 42, 28, .2);
  --slip-1: #fffdf6; --slip-2: #fff4c4; --slip-3: #e6f0f7; --slip-4: #fbe3dc;
  --slip-edge: #d6c6a2; --slip-ink: #2b2a33;
  --slip-font: "Caveat", "Segoe Print", "Bradley Hand", cursive;

  /* the teams: Red in tomato red, Blue in blue (their names are the host's
     to change), apart by lightness as well as hue, each with its own shape
     for a mark (a triangle, a square) */
  --team-0: #b8432b; --team-0-ink: #fffaf1; --team-0-tint: #f6ded6;
  --team-1: #2c62a8; --team-1-ink: #fffaf1; --team-1-tint: #dfe8f4;

  /* the room kit's (docs/design-system.md, "The room kit"), on the cloth */
  --room: #efe4cf;
  --table: radial-gradient(ellipse at 50% 18%, #f8f1e3, #efe4cf 60%, #e8dbc2);
  --rail: 0 solid transparent;
  --rail-radius: 0;
  --panel: rgba(255, 251, 242, .78);
  --panel-edge: 1.5px solid rgba(59, 42, 28, .14);
  --panel-radius: 16px;
  --sheet: #fffaf1;
  --chip: rgba(59, 42, 28, .06);
  --chip-edge: 1.5px solid rgba(59, 42, 28, .22);
  --chip-radius: 999px;
  --ink: #3b2a1c;
  --soft: #6a523d;
  --turn: #ffd34d;
  --good: #2f6f37;
  --bad: #a8301f;
  --focus: #3b2a1c;
  --btn: #3b2a1c;
  --btn-ink: #fffaf1;
  --btn-edge: 2px solid #3b2a1c;
  --btn2: transparent;
  --btn2-ink: #3b2a1c;
  --btn2-edge: 2px solid #3b2a1c;
  --btn-radius: 12px;
  --btn-weight: 800;
  --confirm: #a8301f;
  --confirm-ink: #fffaf1;
  --turn-ink: #3b2a1c;
  --seat-ink: #111;
  --field-edge: 1.5px solid rgba(59, 42, 28, .5);
  --ui-font: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --display: "Young Serif", Georgia, "Times New Roman", serif;
  --display-weight: 400;

  color-scheme: light;
}

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