:root {
  /* palette: one ground, one ink, one accent */
  --ground:      #0e1210;  /* lacquer green-black */
  --surface-1:   #161c19;  /* cards, panels */
  --surface-2:   #1f2723;  /* raised, inputs */
  --line:        #34413b;  /* hairlines, 3.0:1 on ground for UI edges */
  --ink:         #f2eee4;  /* silk; 16.5:1 on ground */
  --ink-2:       #b4bdb2;  /* secondary text; 9.3:1 on surface-1 */
  --accent:      #dba945;  /* bronze; 8.9:1 on ground */
  --accent-ink:  #14100a;  /* text on accent; 9.1:1 */
  --ok:          #62d2a6;  /* jade; 11:1 */
  --warn:        #f0b44c;  /* 9.5:1 (also state by icon + word) */
  --danger:      #ff7a69;  /* cinnabar; 7.6:1 on surface-1 */
  --scrim:       rgb(8 11 9 / .78);

  /* ambient (set per focused game by JS, section 6) */
  --amb-1: #1d2a24;
  --amb-2: #0e1210;

  /* type: system / self-hostable only */
  --font-ui:      system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Noto Serif", Georgia, serif;
  /* five sizes. root scales for TV (below) so rem = comfortable at 3 m */
  --t-1: 1rem;      /* small, hints, captions: 16px base */
  --t-2: 1.25rem;   /* body, labels, buttons */
  --t-3: 1.75rem;   /* card title, dialog title */
  --t-4: 2.5rem;    /* screen heading */
  --t-5: 4rem;      /* game title on detail, wordmark on connect */
  --lh-body: 1.5;   --lh-head: 1.15;

  /* spacing: 4px scale only */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
  --safe: clamp(24px, 4vw, 64px);       /* outer margin; TV overscan-safe 5% min */

  /* radii: one scale */
  --r-1: 8px;    /* inputs, chips */
  --r-2: 16px;   /* cards, covers, buttons */
  --r-3: 24px;   /* dialogs, sheets */
  --r-full: 999px;

  /* focus ring: two-tone so it reads on any cover colour */
  --ring: 0 0 0 3px var(--ground), 0 0 0 7px var(--accent);

  /* motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --d-fast: 120ms; --d-med: 220ms; --d-slow: 420ms;

  --touch-min: 44px;   /* every touch target */
}
html { font-size: 16px; }
@media (min-width: 1600px) { html { font-size: 20px; } }   /* 1080p+ TV / large monitor */
@media (min-width: 2400px) { html { font-size: 28px; } }   /* 4K at 100% */
html { background: var(--ground); color: var(--ink); font: var(--t-2)/var(--lh-body) var(--font-ui); color-scheme: dark; }

@media (prefers-reduced-motion: reduce) {
  :root { --d-fast: 0ms; --d-med: 0ms; --d-slow: 0ms; }
  * { animation-duration: 0ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}