/* Table Kit tokens (docs/UI_GUIDE.md, Tokens): colours, seats, type, space and corners, and the three
   self-hosted faces (SIL Open Font License 1.1; the licences are kit/fonts/OFL-*.txt). The shell's
   older names (--bg, --panel, --ink, --accent, ...) point at these in site.css while game pages still
   use them; new code uses the --gc-* names. */

@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("fonts/hanken-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("fonts/hanken-grotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Big Shoulders Display"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("fonts/big-shoulders-display-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Big Shoulders Display"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("fonts/big-shoulders-display-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-display: swap; font-weight: 100 800;
  src: url("fonts/jetbrains-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-display: swap; font-weight: 100 800;
  src: url("fonts/jetbrains-mono-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  /* The chrome: graphite with a faint green bias. Dark is the default (board art reads best on it). */
  --gc-bg: #101312;          /* the page */
  --gc-surface: #181c1b;     /* bar, panels, sheets */
  --gc-panel: #1d2220;       /* a card inside a surface */
  --gc-raised: #232826;      /* buttons, inputs, hovered rows */
  --gc-sunken: #0b0d0c;      /* the board well, fields */
  --gc-glass: rgba(24, 28, 27, .9); /* parts floating over the board (the surface, see-through) */
  --gc-rule: #2c3230;        /* dividers, quiet borders */
  --gc-rule-strong: #3d4542; /* borders that must show */
  --gc-text: #ece8de;
  --gc-text-2: #a6ada8;      /* secondary text */
  --gc-text-3: #6f7773;      /* labels, hints */
  /* Amber means you can act: legal targets, the primary button, the your-turn marker. Nothing else. */
  --gc-signal: #f2b640;
  --gc-signal-ink: #1c1405;  /* text on the signal colour */
  --gc-signal-soft: rgba(242, 182, 64, .16);
  --gc-good: #5cb87a;
  --gc-warn: #e08a3c;
  --gc-bad: #e5645a;
  --gc-bad-soft: rgba(229, 100, 90, .42); /* a glow around what a pick would lose (a discard, a gift) */
  --gc-bad-veil: rgba(150, 30, 24, .36);  /* the veil over such a card, under its ✕ */
  --gc-on-bad: #fff8f4;                   /* text and marks on --gc-bad */
  --gc-tint: #6e7b75;        /* the game's own colour (its cover, the table's glow); a game sets it */
  /* --gc-sheet (unset): the decision sheet's fill, for a game whose theme is light (default: dark glass) */
  --gc-shadow: 0 12px 32px rgba(0, 0, 0, .38);

  /* Seats: a colour and a glyph each (circle, square, triangle, diamond, pentagon, hexagon, cross, star). */
  --seat-1: #e0564b; --seat-2: #4a8fe0; --seat-3: #e8be3a; --seat-4: #45a86a;
  --seat-5: #9b72dd; --seat-6: #d9d5cb; --seat-7: #e48a3a; --seat-8: #59605d;

  /* Type: titles and the numbers read across the table / everything else / codes and seeds. */
  --gc-font-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --gc-font-ui: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --gc-font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;

  /* Space on a 4 px scale, and three corners: chips and cubes, controls and cards, panels and sheets. */
  --gc-s-1: 4px; --gc-s-2: 8px; --gc-s-3: 12px; --gc-s-4: 16px; --gc-s-5: 24px; --gc-s-6: 32px; --gc-s-7: 48px;
  --gc-r-s: 3px; --gc-r-m: 8px; --gc-r-l: 14px;

  /* Motion (web/motion.js): --gc-motion is the duration factor (the animation speed setting; reduced
     motion makes it nearly 0), so every duration written with it follows the setting. */
  --gc-motion: 1;
  --gc-dur-tap: calc(90ms * var(--gc-motion)); --gc-dur-quick: calc(.16s * var(--gc-motion));
  --gc-dur-base: calc(.26s * var(--gc-motion)); --gc-dur-slow: calc(.42s * var(--gc-motion));
  --gc-ease-out: cubic-bezier(.22, 1, .36, 1); --gc-ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --gc-ease-settle: cubic-bezier(.16, 1.12, .3, 1);
}
:root[data-motion="reduced"] { --gc-motion: .001; }

/* The light scheme: the same names (not switched on yet; a setting will set data-scheme). */
:root[data-scheme="light"] {
  --gc-bg: #e6e9e7; --gc-surface: #f6f7f5; --gc-panel: #eef0ee; --gc-raised: #ffffff; --gc-sunken: #d5dad7;
  --gc-glass: rgba(246, 247, 245, .92);
  --gc-rule: #cdd3cf; --gc-rule-strong: #b0b9b4;
  --gc-text: #151918; --gc-text-2: #4d5652; --gc-text-3: #7b847f;
  --gc-signal-soft: rgba(242, 182, 64, .22);
  --gc-bad-soft: rgba(204, 60, 50, .5); --gc-bad-veil: rgba(170, 36, 28, .42);
  --gc-shadow: 0 1px 2px rgba(20, 30, 25, .06), 0 10px 28px rgba(20, 30, 25, .10);
}