:root {
  /* World / grid */
  --world-size: 200;
  --grid-cell-size: 1;
  --brick-height: 0.6;

  /* Scene colours */
  --color-sky: #8fd0f0;
  --color-ground: #5f8a4c;
  --color-grid-line: #ffffff;

  /* Grid targeting highlight */
  --color-highlight-valid: #4caf50;
  --color-highlight-invalid: #e5453e;

  /* Brick palette (index order = hotkeys 1-9, then 0 for the 10th) */
  --brick-color-1: #d5352e; /* red */
  --brick-color-2: #f2c230; /* yellow */
  --brick-color-3: #2f6fdd; /* blue */
  --brick-color-4: #3aa655; /* green */
  --brick-color-5: #f2f2f2; /* white */
  --brick-color-6: #2b2b2b; /* black */
  --brick-color-7: #e67e22; /* orange */
  --brick-color-8: #5fc4e0; /* azure */
  --brick-color-9: #7b3f9d; /* purple */
  --brick-color-10: #5a3825; /* brown */

  /* Type scale — font family & sizes */
  --font-hud: system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-size-sm: 11px;
  --font-size-swatch-key: 12px;
  --font-size-swatch-reset: 11px;
  --font-size-title: 26px;
  --font-size-subtitle: 13px;
  --font-size-label: 12px;
  --font-size-code: 28px;
  --font-size-code-sm: 20px;

  /* Type scale — letter spacing */
  --letter-spacing-title: 0.01em;
  --letter-spacing-code: 6px;
  --letter-spacing-code-sm: 4px;

  /* HUD chrome */
  --swatch-size: 40px;
  --color-swatch-key: #ffffff;
  --color-swatch-key-shadow: rgba(0, 0, 0, 0.85);
  --color-swatch-key-dark: #1a1a1a;
  --color-swatch-key-dark-shadow: rgba(255, 255, 255, 0.85);
  --swatch-reset-size: 16px;
  --color-swatch-reset-bg: rgba(20, 20, 22, 0.9);
  --color-swatch-reset-text: #f2f2f2;
  --color-swatch-reset-border: rgba(255, 255, 255, 0.4);
  --color-hud-bg: rgba(20, 20, 22, 0.72);
  --color-hud-border: rgba(255, 255, 255, 0.18);
  --color-hud-text: #f2f2f2;
  --color-hud-muted: rgba(242, 242, 242, 0.65);
  --color-error-bg: rgba(180, 40, 30, 0.85);
  --color-success-bg: rgba(40, 130, 60, 0.85);
  --color-warning-bg: rgba(170, 110, 20, 0.88);
  --spacing-hud: 12px;
  --radius-hud: 8px;
  --opacity-disabled: 0.45;

  /* Lobby connection status */
  --color-status-connected: #4caf50;
  --color-status-connecting: #e0a52c;
  --color-status-reconnecting: #e0a52c;
  --color-status-error: #e5453e;

  /* Settings panel (overlaid on the 3D scene mid-build) — dark HUD chrome */
  --color-accent: #d5352e;
  --color-accent-hover: #e5453e;
  --color-accent-text: #ffffff;
  --shadow-panel: 0 24px 60px rgba(0, 0, 0, 0.5);
  --color-overlay-dim: rgba(0, 0, 0, 0.6);
  --blur-overlay: 2px;

  /* Landing screen — paper/dot-grid "Brick Pop" look, locked in ui-preview.html. No 3D scene
     sits behind it, so it gets its own visual identity rather than the in-game HUD's dark chrome. */
  --font-landing: "Segoe UI Rounded", "Trebuchet MS", Verdana, sans-serif;
  --font-size-landing-title: 32px;
  --color-landing-paper: #f4e9d8;
  --color-landing-card: #ffffff;
  --color-landing-ink: #1b1b1f;
  --color-landing-ink-muted: #5b5546;
  --color-landing-dot: rgba(0, 0, 0, 0.06);
  --color-landing-divider-line: #e8ddc7;
  --color-landing-divider-text: #8a8270;
  --color-landing-shadow-panel: rgba(0, 0, 0, 0.12);
  --color-landing-shadow-card: rgba(0, 0, 0, 0.18);
  --color-landing-btn-new: var(--brick-color-4);
  --color-landing-btn-host: var(--brick-color-3);
  --color-landing-btn-join: var(--brick-color-2);
  --color-landing-btn-settings: #ece3d2;
  --radius-landing-panel: 24px;
  --radius-landing-card: 14px;
  --radius-landing-thumb: 10px;

  /* Hotkey chips (settings panel key labels) */
  --color-hotkey-chip-bg: rgba(255, 255, 255, 0.05);
  --color-hotkey-chip-active-bg: rgba(255, 255, 255, 0.08);
}