:root {
  /* Background tiers: page → chrome → cards.
     --bg-input: inset surfaces (nested rows, form fields).
     --bg-hover: raised-on-interaction (dropdowns, neutral tags). */
  --bg-main:  #141414;
  --bg-panel: #1a1a1a;
  --bg-card:  #262626;
  --bg-input: #0a0a0a;
  --bg-hover: #333333;

  /* Terrain base colours (one per terrain). */
  --sq-plain:  #6d8c4a;
  --sq-hill:   #b89a5f;
  --sq-forest: #3f6b37;
  --sq-river:  #507ea3;
  --sq-desert: #c9ae6a;
  --sq-select: rgba(255, 255, 50, 0.5);

  /* Accents pass WCAG AA on bg AND with their own colour as bg.
     --accent-info: tech-blue for AI/bot tag (distinct from rated/private). */
  --accent-green: #81b64c;
  --accent-green-hover: #95c95e;
  --accent-gold: #f59e0b;
  --accent-red: #c94040;
  --accent-red-hover: #d95555;
  --accent-info: #3b82f6;
  /* Tyrian / imperial purple for admin signalling (user-chip avatar).
     Distinct from brand accents — admin-marking should not read as
     "another accent". Hi/shadow drive the avatar gradient. */
  --accent-imperial:        #5b1a4b;
  --accent-imperial-hi:     #7a2762;
  --accent-imperial-shadow: #2e0a26;

  /* primary > secondary > muted; all pass WCAG AA on every bg token. */
  --text-primary: #ece9e1;
  --text-secondary: #c4c0b8;
  --text-muted: #908b82;
  --text-dark: #000000;
  --text-light: #f0e2c8;

  --border: rgba(255,255,255,0.08);
  --border-color: rgba(255,255,255,0.1);
  --bg-secondary: #2a2826;
  --bg-dark: #312e2b;
  --card-bg: #2a2826;

  --p1-color: #1a8fbf;
  --p1-bg: rgba(22, 130, 180, 0.9);
  --p2-color: #e06050;
  --p2-bg: rgba(224, 96, 80, 0.9);

  --p1:   #2b5e8a;
  --p1-2: #4681b0;
  --p2:   #a34040;
  --p2-2: #c25656;
  --gold: #e8c14f;
  --ink:  #f3ead7;

  --cell-size: clamp(28px, 4.4vmin, 48px);
  --border-radius: 8px;
  --font: 'Inter', 'Segoe UI', system-ui, sans-serif;

  --tooltip-delay: 2000ms;
}

[data-theme="light"] {
  /* Cream palette (yellow-orange undertones, ~40-50 hue):
       Card  #fdf6e3 (Solarized-light cream, lifted)
       Page  #f6ecd2 (warm base)
       Chrome#ecdfba (recessed)
       Inset #e8d9ad (darker than chrome)
       Hover #d9c690 (first interactive lift). */
  --bg-main:  #f6ecd2;
  --bg-panel: #ecdfba;
  --bg-card:  #fdf6e3;
  --bg-input: #e8d9ad;
  --bg-hover: #d9c690;

  /* Warm dark-brown (NOT pure black; pure black on cream loses warmth). */
  --text-primary:   #2b1f0a;
  --text-secondary: #4a3a1c;
  --text-muted:     #7a6740;
  --text-dark:      #1a1408;
  --text-light:     #2b1f0a;

  --border:       rgba(80, 55, 10, 0.10);
  --border-color: rgba(80, 55, 10, 0.16);
  --bg-secondary: #ecdfba;
  --bg-dark:      #f6ecd2;
  --card-bg:      #fdf6e3;

  /* Accents darkened for AA on cream surfaces. */
  --accent-gold:        #c2691a;
  --accent-info:        #1d4ed8;
  --accent-green:       #4a7028;
  --accent-green-hover: #5e8a36;
  --accent-red:         #98221c;
  --accent-red-hover:   #b03030;
}

/* In light theme TWO things stay dark:
     1. .board-wrap — terrain reads against the backdrop players know.
     2. .play-board-header — opponent-turn uses var(--bg-card) +
        var(--text-muted), which would be cream-on-cream and disappear.
   Everything else inherits the cream palette automatically.
   Popup modal opts back to cream — see block below. */
[data-theme="light"] .board-wrap,
[data-theme="light"] .play-board-header {
  --bg-main:  #141414;
  --bg-panel: #1a1a1a;
  --bg-card:  #262626;
  --bg-input: #0a0a0a;
  --bg-hover: #333333;

  --text-primary:   #ece9e1;
  --text-secondary: #c4c0b8;
  --text-muted:     #908b82;
  --text-dark:      #000000;
  --text-light:     #f0e2c8;

  --border:       rgba(255, 255, 255, 0.08);
  --border-color: rgba(255, 255, 255, 0.10);
  --bg-secondary: #2a2826;
  --bg-dark:      #312e2b;
  --card-bg:      #2a2826;

  --accent-gold:        #f59e0b;
  --accent-info:        #3b82f6;
  --accent-green:       #81b64c;
  --accent-green-hover: #95c95e;
  --accent-red:         #c94040;
  --accent-red-hover:   #d95555;
}

html[data-board-style="classic"] {
  --sq-plain:  #78b254;
  --sq-hill:   #c4a265;
  --sq-forest: #3c7e3c;
  --sq-river:  #6db3e0;
  --sq-desert: #d4b96a;
}

/* Defend/retreat/chase popup lives inside .board-wrap for positioning but
   should follow ambient cream theme, not the dark board. */
[data-theme="light"] .board-wrap .popup-overlay,
[data-theme="light"] .board-wrap .popup-card {
  --bg-main:  #f6ecd2;
  --bg-panel: #ecdfba;
  --bg-card:  #fdf6e3;
  --bg-input: #e8d9ad;
  --bg-hover: #d9c690;

  --text-primary:   #2b1f0a;
  --text-secondary: #4a3a1c;
  --text-muted:     #7a6740;
  --text-dark:      #1a1408;
  --text-light:     #2b1f0a;

  --border:       rgba(80, 55, 10, 0.10);
  --border-color: rgba(80, 55, 10, 0.16);
  --bg-secondary: #ecdfba;
  --bg-dark:      #f6ecd2;
  --card-bg:      #fdf6e3;

  --accent-gold:        #c2691a;
  --accent-info:        #1d4ed8;
  --accent-green:       #4a7028;
  --accent-green-hover: #5e8a36;
  --accent-red:         #98221c;
  --accent-red-hover:   #b03030;
}