:root {
  color-scheme: light dark;

  --surface-page: #efe7d6;
  --surface-raised: #fffdf6;
  --surface-sunken: #e3d9c4;
  --ink: #1d1a16;
  --ink-soft: #6f6455;
  --line: #d8ccb4;
  --line-strong: #a89a80;
  --accent: #c8102e;
  --accent-ink: #fffdf6;
  --accent-soft: #f6d9dc;
  --ok: #2fbf71;
  --danger: #a3261a;
  --felt: #23875a;
  --felt-deep: #17603f;
  --rail: #6b3d1f;
  --rail-light: #8a5530;
  --gold: #e9b949;
  --card: #fffdf6;
  --card-ink: #1d1a16;
  --card-red: #c8102e;
  --chip-join: #1f4fb0;
  --on-felt: #fff;
  --you: #c8102e;
  --low: #2f6bff;
  --high: #ff3d2e;
  --on-flag: #fff;
  --confetti-1: #ff4f8b;
  --confetti-2: #3d7bff;
  --confetti-3: #22d39a;
  --confetti-4: #ffd166;
  --confetti-5: #ff6a4d;
  --confetti-6: #fff;
  --font-ui: system-ui, -apple-system, "Segoe UI", roboto, sans-serif;
  --font-card: ui-serif, "New York", georgia, serif;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.75rem;
  --text-2xl: 2.5rem;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2.5rem;
  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --target: 2.75rem;
  --page-narrow: 26rem;
  --page-default: 40rem;
  --page-wide: 64rem;
  --page-modal: 36rem;
  --page-modal-wide: 46.8rem;
  --page-card: 21rem;
  --measure: 60ch;
  --gutter: 1rem;

  /* The table: seat orbit, card widths, hand geometry. */

  /* What the room leaves for the table: the viewport less header and hand. */
  --head-height: 3.5rem;
  --board-height: calc(100dvh - var(--head-height) - var(--hand-height));

  /* How far outside the table's edge a seat's centre sits. */
  --seat-reach-x: calc(var(--seat-card) * 0.5 + 1.1rem);
  --seat-reach-y: calc(var(--seat-card) * 0.7 + 2.25rem);
  --seat-card: 42px;
  --hand-card: 60px;
  --hand-height: 150px;
  --hand-radius: 330px;
  --hand-sink: 200px;
  --hand-lift: 36px;

  /* The landing page's dealt hand. */
  --fan-card: 84px;
  --fan-radius: 1040px;
  --fan-sink: 900px;
  --fan-step: 4.2deg;
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface-page: #0d1411;
    --surface-raised: #18211d;
    --surface-sunken: #080d0b;
    --ink: #f3ecdc;
    --ink-soft: #a79f8e;
    --line: #2a352f;
    --line-strong: #4d5a52;
    --accent: #e0324d;
    --accent-ink: #fffdf6;
    --accent-soft: #4a1620;
    --danger: #ff8f7d;
    --felt: #17694a;
    --felt-deep: #0e4630;
    --rail: #3a2010;
    --rail-light: #56321a;
    --you: #e9b949;
  }
}