/* Design tokens — the one file to tweak between design drafts.

   Draft 1 (2026-09-24): the Master series language (Chess Master → Go Master → here): white ground,
   near-black ink, Helvetica Neue, small uppercase letter-spaced labels, hairline borders, square corners.
   The accent is deep navy — the siblings' tone rotated to blue, the one cool accent of the three, chosen
   so the Poker tile reads as distinct beside Chess's green and Go's red in the family bubble.

   Draft 2 (2026-09-24, owner's comment: bring the table and cards towards a soft flat illustration look,
   to sit with the seat portraits): the SHELL is untouched — same ground, type, hairlines and square
   corners as Draft 1, and the same --radius: 0 — and only the felt and the cards soften. Casino green
   becomes a dusty sage, the rail a thick warm cream, cards gain rounded corners and a warm face, and the
   suits drop from pillar-box red and near-black to a muted coral and a soft charcoal. Bet pills go from a
   black wash to cream with dark ink. Rounding lives in the --*-radius tokens below rather than in
   --radius, so the table can be soft while the shell stays square. Draft 1's table values are kept in
   comments beside each line so reverting is a one-line edit.

   Draft 3 (2026-09-26, owner's comment: the bet/bb number is not in position relative to the table shape
   or to the player — "maybe not an oval box but just underline with bold"): the pill is removed. A wager
   is now bold cream text with a hairline rule under it, and — the actual fix — it sits on an ellipse
   inset a CONSTANT distance from the felt at the seat's own angle, so every seat's bet is the same depth
   from the rail. The old straight-line placement put two bets at the same table at 0.71 and 0.99 of the
   way out, which is what the comment was seeing.

   Draft 4 (2026-09-26, owner's comment: "look carefully with sizing and positioning … also text around,
   spacing between row"): the table is laid out in RENDERED PIXELS for the width it has (the --tb-size-*
   tokens below) instead of in SVG units scaled to fit. Measured before: the same name rendered from
   19.5px down to 7.8px depending on seat count and screen, bets at 6.4px, and the old fixed seat ellipse
   put cards 27px into the rail at three-handed. Seats are now placed by pushing each one out until it
   clears the rail; a table too wide for its column goes upright instead of shrinking; the dealer button
   rides on its owner's name line with SB and BB; and every row in a seat is spaced from its type size.

   Draft 5 (2026-09-27, owner's comment: "desktop a normal table, and mobile a circle"): the shape follows
   the device, not the fit. Wide oval on a desktop, a circle on a phone (the app's 760px switch). The
   desktop tables had gone upright because they were capped at --board-max, 660px, against the 815 nine
   seats need; the table now has --table-max, and a drill puts its question under a table that will not
   fit beside it.

   Comment on any line here and it becomes a small diff. */
:root {
  /* ground & ink */
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f5f5f5;
  --ink: #111111;
  --ink-2: #555555;
  --ink-3: #aaaaaa;
  --line: #e6e6e6;
  --line-2: #cccccc;

  /* theme: deep navy, a card-room blue at the same darkness as the siblings' accents.
     Used for everything selected, done, or primary. */
  --accent: #0f2d57;
  --accent-ink: #ffffff;
  --accent-soft: #e1e6ef;
  --accent-deep: #0a1f3d;

  /* the family bubble on the logo (Apple-style glass, the one rounded, translucent element of the shell) */
  --bubble-radius: 22px;
  --bubble-row-radius: 14px;
  --bubble-tile-radius: 12px;
  --bubble-bg: rgba(255, 255, 255, 0.38);
  --bubble-blur: 28px;
  --bubble-saturate: 200%;
  --bubble-rim: rgba(255, 255, 255, 0.85);
  --bubble-edge: rgba(0, 0, 0, 0.08);
  --bubble-sheen: linear-gradient(135deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.12) 45%, rgba(255, 255, 255, 0) 70%);
  --bubble-shadow: 0 2px 6px rgba(0, 0, 0, 0.06), 0 24px 48px rgba(0, 0, 0, 0.16);
  --bubble-fallback: #ffffff;
  --bubble-gap: 8px;
  --bubble-anim: 180ms;

  /* semantic (used only on the table and drill states) — green/red mean right/wrong, not theme */
  --good: #0f4c3a;
  --bad: #c00000;
  --warn: #7a5c00;

  /* table — Draft 2: a dusty sage felt and a thick warm rail, so the green stops reading as a casino
     and starts reading as a drawn surface. Still clearly darker than the seat plates sitting on it. */
  --tb-felt: #789b82;          /* Draft 1: #35654d */
  --tb-felt-2: #6b8d75;        /* Draft 1: #2c5442 */
  --tb-rail: #efe7da;          /* Draft 1: #d8d8d2 */
  --tb-rail-w: 5px;            /* Draft 1: 2px — a thicker rail is most of the softening */
  --tb-seat: #fdfaf4;          /* Draft 1: #f5f5f5 */
  --tb-seat-hero: #e6edf6;     /* Draft 1: var(--accent-soft) */
  --tb-dealer: #fffdf8;        /* Draft 1: #ffffff */
  --tb-bet-bg: #fdfaf4;        /* Draft 1: rgba(0,0,0,0.34). Draft 3: the bet pill is gone; still used by the blind chip */
  --tb-bet-ink: #fffdf7;       /* Draft 3: cream, reading with the pot. Draft 2: #3d4348 on a cream pill */
  --tb-bet-rule: rgba(255, 253, 247, 0.8);    /* the rule under a wager — the same cream, held back */
  --tb-pot-ink: #fdfaf4;
  --plate-radius: 10px;        /* Draft 1: 0 (square, via --radius) */
  --pill-radius: 13px;

  /* cards — Draft 2: warm face, rounded corners, and suits at illustration weight rather than print
     weight. The red is a muted coral and the black a soft charcoal; both still pass against the face. */
  --card-face: #fffdf7;        /* Draft 1: #fdfdfb */
  --card-edge: #ded7c9;        /* Draft 1: #c9c9c2 */
  --card-back: #3f5f87;        /* Draft 1: var(--accent) — the accent at full strength was too severe */
  --card-back-edge: #345072;
  --card-shadow: rgba(60, 50, 40, 0.18);
  --card-radius: 8px;          /* Draft 1: 4px */
  --card-kicker: 0.4;          /* how pale a kicker is in the hand rankings chart */
  --suit-red: #d1615b;         /* Draft 1: #b3141a */
  --suit-black: #3d4348;       /* Draft 1: #161616 */

  /* chips, by the usual tournament denominations */
  --chip-25: #2f8f4e;
  --chip-100: #16181a;
  --chip-500: #6b2d8f;
  --chip-1000: #b38b1a;
  --chip-edge: rgba(0, 0, 0, 0.35);

  /* seat portraits: nine muted tints at roughly one value, so seats are told apart without any of
     them shouting. The built-in figure uses these; a supplied image overrides them entirely. */
  --av-0: #2b4a6f;
  --av-1: #5e6b52;
  --av-2: #7a5a4e;
  --av-3: #4a4a6b;
  --av-4: #6b5470;
  --av-5: #3f6360;
  --av-6: #7a6a3f;
  --av-7: #6b4550;
  --av-8: #4f5a66;
  --av-disc: #efe9dd;          /* Draft 1: #e8e8e4 */
  --av-ring: rgba(60, 50, 40, 0.16);

  /* range grid (the 169-hand matrix): raise / call / fold, plus mixed frequencies */
  --rg-raise: #0f2d57;
  --rg-call: #7d94b5;
  --rg-fold: #eeeeee;
  --rg-line: #ffffff;
  --rg-hero: #b3141a;
  --rg-mix: #b3141a;           /* a hand the solver plays both ways — outlined, never filled in */
  /* the lesson grid (```grid): the three shapes, and the "as dealt" shading */
  --gr-pair: #0f2d57;          /* the accent: the diagonal reads as one line */
  --gr-suited: #b9c7dc;
  --gr-offsuit: #ece8e0;       /* warm and quiet — the most squares, so the least ink */
  --gr-dealt: #0f2d57;         /* as dealt, every square is this, at 6/12, 4/12 or 12/12 strength */
  --gr-open: #0f2d57;          /* the opening chart: a raise */
  --gr-fold: #eeeeee;          /* and a fold — the trainers' fold grey */

  /* table sizes, in RENDERED PIXELS (Draft 4). The table is laid out at one unit per pixel for the width
     it has, so these come out the same at every seat count and on every screen — they used to be SVG
     units, and a nine-handed table on a phone rendered a 17-unit name at 7.8px. js/table.js reads these;
     its fallbacks match. */
  --tb-size-name: 13;
  --tb-size-stack: 12;
  --tb-size-bet: 12.5;
  --tb-size-pot: 14;
  --tb-size-street: 11;
  --tb-size-tag: 9.5;
  --tb-size-dealer: 11;
  --tb-size-card: 42;          /* hole-card height; width is 0.72 of it */
  --tb-size-board: 48;         /* board-card height */
  --tb-size-figure: 58;        /* an opponent's figure slot */
  --tb-size-hero: 70;          /* yours — the main character is drawn bigger */

  /* the cat in the box — hints and tips (js/mascot.js). Draft 2 (owner's comment): always in the
     corner and small; it meows and waits to be clicked; smaller bubble with a thinner, lighter line. */
  --mascot-cat-w: 76px;
  --mascot-cat-w-phone: 62px;
  --mascot-stroke: 1.3;                     /* Draft 1: 2.2, full black */
  --mascot-line: rgba(0, 0, 0, 0.42);       /* Draft 1: #000000 */
  --mascot-ink: #000000;                    /* the meow and the hearts' outline — the artwork's black */
  --mascot-paper: rgba(255, 255, 255, 0.97);
  --mascot-tail: 9;
  --mascot-hint: #9a4a1e;      /* the label on a hint — warm, not alarm red: you are being helped */
  --mascot-tip: var(--accent);
  --mascot-heart: #ff8ca0;

  --board-anim: 160ms;
  --board-max: 660px;   /* was 560px — a table needs room to be read */
  --table-max: 820px;   /* the poker table's own cap: nine seats round the wide oval need 815px at full size.
                           It was --board-max, and 660px is what stood desktop tables upright */

  /* type */
  --font-sans: -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-serif: var(--font-sans);
  --font-mono: "Courier New", Courier, monospace;
  --fs-0: 11px;
  --fs-1: 13px;
  --fs-2: 15px;   /* body */
  --fs-3: 18px;
  --fs-4: 22px;
  --fs-5: 28px;
  --lh: 1.6;
  --measure: 640px;
  --track: 0.1em;   /* letter-spacing for uppercase labels */

  /* space & shape */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --radius: 0;
  --radius-lg: 0;
  --sidebar-w: 260px;
  --page-w: 900px;

  /* activity grid levels: paper to theme navy */
  --act-0: #eeeeee;
  --act-1: #d3dae5;
  --act-2: #93a7c2;
  --act-3: #47648e;
  --act-4: #0f2d57;
}