/* Single source of truth for UI colors/sizes — every other stylesheet reads
   these via var(), nothing here on its own. Mirrors the philosophy of
   server/src/config.ts for gameplay numbers: one place to retheme from. */
:root {
  /* Primary (red) / secondary (gray) — matches the in-canvas convention
     where your own player renders red and everyone else renders gray. */
  --color-primary: #d92626;
  --color-primary-dark: #931919;
  --color-secondary: #9a9a9a;
  --color-secondary-dark: #5c5c5c;

  /* Build-mode confirm state only (touch-shoot turns green + relabels to
     "Confirm" while active) — not part of the general red/gray theme. */
  --color-build: #2e9e44;
  --color-build-dark: #21772f;

  --color-bg: #111214;
  --color-text: #f2f2f2;
  --color-text-dim: #c9c9c9;
  --color-button-text: #161616;

  /* Full-screen overlays (lobby, game-over) vs. small panels behind HUD/
     touch elements sitting on top of the canvas — same black, different
     opacity so overlays read as a screen and panels read as a backing. */
  --color-overlay-bg: rgba(0, 0, 0, 0.85);
  --color-panel-bg: rgba(0, 0, 0, 0.7);

  --font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-weight-bold: 700;

  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 16px;

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;

  --touch-dpad-btn-size: 56px;
  --touch-shoot-size: 76px;

  --z-hud: 10;
  --z-overlay: 20;
}