:root {
  --font: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --cell: clamp(26px, 4.1vmin, 46px);
  --radius: 12px;
  --focus: 4px solid var(--focus-ring);
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  --btn-border: 3px;
  --chrome-border: 0px;
}

/* Dark + Standard — full chrome, not just the board */
body[data-theme="dark"] {
  --bg: #2a4aa8;
  --bg-deep: #1c3480;
  --glow: rgba(255, 255, 255, 0.16);
  --surface: #23409a;
  --well: #1d3788;
  --board-face: #2b4aa6;
  --board-lip: #162868;
  --empty: #1f3a86;
  --stroke: #ffffff;
  --text: #ffffff;
  --muted: #e4ecff;
  --gold: #ffe566;
  --combo: #ffe566;
  --fit: #1ad67a;
  --nofit: #ff4d4d;
  --clear: #3defff;
  --focus-ring: #ffe566;
  --btn: #17307a;
  --btn-primary-bg: #001a4d;
  --btn-primary-fg: #ffe566;
  --btn-primary-border: #ffe566;
  --btn-primary-shadow: #0b1433;
  --btn-secondary-bg: #17307a;
  --btn-secondary-fg: #ffffff;
  --btn-secondary-border: #ffffff;
  --icon-bg: #17307a;
  --icon-fg: #ffffff;
  --diff-easy: #ffe14d;
  --diff-normal: #ff8a14;
  --diff-hard: #ff2d2d;
  --diff-super: #c56bff;
  --diff-relax: #e4ecff;
}

/* Normal (light) + Standard */
body[data-theme="normal"] {
  --bg: #d7e2f0;
  --bg-deep: #c3d1e4;
  --glow: rgba(20, 40, 80, 0.08);
  --surface: #eef3f8;
  --well: #c5d3e4;
  --board-face: #d4deea;
  --board-lip: #5d7188;
  --empty: #9aafc6;
  --stroke: #1a2433;
  --text: #121820;
  --muted: #2a3648;
  --gold: #7a5a00;
  --combo: #7a5a00;
  --fit: #0a6b3c;
  --nofit: #b00010;
  --clear: #005f73;
  --focus-ring: #0033aa;
  --btn: #e6edf4;
  --btn-primary-bg: #121820;
  --btn-primary-fg: #ffffff;
  --btn-primary-border: #121820;
  --btn-primary-shadow: #000000;
  --btn-secondary-bg: #ffffff;
  --btn-secondary-fg: #121820;
  --btn-secondary-border: #121820;
  --icon-bg: #ffffff;
  --icon-fg: #121820;
  --diff-easy: #b8860b;
  --diff-normal: #c24e00;
  --diff-hard: #c00014;
  --diff-super: #6b21a8;
  --diff-relax: #2a3648;
}

/* High Contrast — distinct from Standard on every surface */
body[data-theme="dark"][data-contrast="high"] {
  --bg: #000000;
  --bg-deep: #000000;
  --glow: transparent;
  --surface: #000000;
  --well: #000000;
  --board-face: #000000;
  --board-lip: #ffe600;
  --empty: #3a3a3a;
  --stroke: #ffe600;
  --text: #ffffff;
  --muted: #ffe600;
  --gold: #ffe600;
  --combo: #ffe600;
  --fit: #00ff6a;
  --nofit: #ff3355;
  --clear: #00f0ff;
  --focus-ring: #ffe600;
  --btn: #000000;
  --btn-primary-bg: #ffe600;
  --btn-primary-fg: #000000;
  --btn-primary-border: #ffffff;
  --btn-primary-shadow: #ffffff;
  --btn-secondary-bg: #000000;
  --btn-secondary-fg: #ffe600;
  --btn-secondary-border: #ffe600;
  --icon-bg: #000000;
  --icon-fg: #ffe600;
  --diff-easy: #ffe600;
  --diff-normal: #ff8800;
  --diff-hard: #ff2244;
  --diff-super: #d070ff;
  --diff-relax: #ffe600;
  --chrome-border: 4px;
  --btn-border: 4px;
}

body[data-theme="normal"][data-contrast="high"] {
  --bg: #ffffff;
  --bg-deep: #ffffff;
  --glow: transparent;
  --surface: #ffffff;
  --well: #e6e6e6;
  --board-face: #ffffff;
  --board-lip: #000000;
  --empty: #b0b0b0;
  --stroke: #000000;
  --text: #000000;
  --muted: #000000;
  --gold: #000000;
  --combo: #000000;
  --fit: #006400;
  --nofit: #9b0000;
  --clear: #0033aa;
  --focus-ring: #000000;
  --btn: #ffffff;
  --btn-primary-bg: #000000;
  --btn-primary-fg: #ffffff;
  --btn-primary-border: #000000;
  --btn-primary-shadow: #000000;
  --btn-secondary-bg: #ffffff;
  --btn-secondary-fg: #000000;
  --btn-secondary-border: #000000;
  --icon-bg: #ffffff;
  --icon-fg: #000000;
  --diff-easy: #8a6d00;
  --diff-normal: #9a3d00;
  --diff-hard: #9b0000;
  --diff-super: #4a0080;
  --diff-relax: #000000;
  --chrome-border: 4px;
  --btn-border: 4px;
}

/* Extra Contrast — maximum separation */
body[data-contrast="extra"][data-theme="dark"] {
  --bg: #000000;
  --bg-deep: #000000;
  --glow: transparent;
  --surface: #000000;
  --well: #000000;
  --board-face: #000000;
  --board-lip: #ffffff;
  --empty: #1a1a1a;
  --stroke: #ffe600;
  --text: #ffffff;
  --muted: #ffe600;
  --gold: #ffe600;
  --combo: #ffe600;
  --fit: #00ff6a;
  --nofit: #ff3355;
  --clear: #00f0ff;
  --focus-ring: #ffe600;
  --btn: #000000;
  --btn-primary-bg: #ffe600;
  --btn-primary-fg: #000000;
  --btn-primary-border: #ffffff;
  --btn-primary-shadow: #ffffff;
  --btn-secondary-bg: #000000;
  --btn-secondary-fg: #ffffff;
  --btn-secondary-border: #ffffff;
  --icon-bg: #000000;
  --icon-fg: #ffffff;
  --diff-easy: #ffe600;
  --diff-normal: #ff8800;
  --diff-hard: #ff2244;
  --diff-super: #e080ff;
  --diff-relax: #ffffff;
  --chrome-border: 5px;
  --btn-border: 5px;
}

body[data-contrast="extra"][data-theme="normal"] {
  --bg: #ffffff;
  --bg-deep: #ffffff;
  --glow: transparent;
  --surface: #ffffff;
  --well: #e8e8e8;
  --board-face: #ffffff;
  --board-lip: #000000;
  --empty: #c8c8c8;
  --stroke: #000000;
  --text: #000000;
  --muted: #000000;
  --gold: #000000;
  --combo: #000000;
  --fit: #006400;
  --nofit: #9b0000;
  --clear: #0033aa;
  --focus-ring: #000000;
  --btn: #ffffff;
  --btn-primary-bg: #000000;
  --btn-primary-fg: #ffff00;
  --btn-primary-border: #000000;
  --btn-primary-shadow: #000000;
  --btn-secondary-bg: #ffffff;
  --btn-secondary-fg: #000000;
  --btn-secondary-border: #000000;
  --icon-bg: #ffffff;
  --icon-fg: #000000;
  --diff-easy: #705800;
  --diff-normal: #8a3000;
  --diff-hard: #8a0000;
  --diff-super: #3b0066;
  --diff-relax: #000000;
  --chrome-border: 5px;
  --btn-border: 5px;
}

body[data-large="on"] {
  --cell: clamp(34px, 5.6vmin, 60px);
  font-size: 125%;
}

body[data-large="xl"] {
  --cell: clamp(38px, 6.2vmin, 66px);
  font-size: 150%;
}