/* THEME: HIGH CONTRAST — maximum legibility.
   No transparency, no gradients, no blur. Aimed at low-vision users and at
   classroom projectors/whiteboards, where the glass themes wash out. */

body.theme-contrast {
  background: #000000;

  --text-main: #ffffff;   /* 21:1 on black */
  --text-muted: #e8e8e8;  /* still ~17:1 — no dim greys in this theme */
  --border-color: #ffffff;
  --bg-panel: #0d0d0d;
  --bg-card: #141414;
  --accent: #00e5ff;
  --accent-active: #00e5ff;
  --accent-ink: #000000;

  /* Grid surface */
  --board-bg: #000000;
  --cell-blank: #101010;
  --cell-line: #d0d0d0; /* bright ruling, distinct from the white cursor */

  /* Overlays */
  --axis: #ffdd00;
  --axis-halo: #000000;
  --nearmiss: #ff3b30;
  --cursor: #ffffff;
  --cursor-halo: #000000;
  /* No transparency in this theme — a bold cyan outline, no fill. */
  --ghost: #00e5ff;
  --ghost-fill: transparent;
  --lock: #ffffff;                         /* white padlock on the black board */
  --lock-halo: #000000;
  --focus: #ffdd00;

  color: var(--text-main);
}

body.theme-contrast .reading,
body.theme-contrast .panel-left,
body.theme-contrast .panel-right,
body.theme-contrast .top-bar {
  background: var(--bg-panel);
  border-color: var(--border-color);
  box-shadow: none;
}

body.theme-contrast .workspace { background: #000000; }

body.theme-contrast .board {
  background: var(--board-bg);
  border: 2px solid var(--border-color);
  box-shadow: none;
}

/* Thicker cell ruling so the grid reads from across a classroom */
body.theme-contrast .grid__cell { stroke-width: 1.6; }

body.theme-contrast .results-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
}

body.theme-contrast .select,
body.theme-contrast .btn {
  background: #141414;
  color: var(--text-main);
  border: 1px solid var(--border-color);
}

body.theme-contrast .btn-primary {
  background: var(--accent-active);
  color: var(--accent-ink);
  box-shadow: none;
}

body.theme-contrast .results__nearmiss {
  background: #2a0d0b;
  border-left-color: var(--nearmiss);
  color: var(--text-main);
}

body.theme-contrast .maths-corner summary,
body.theme-contrast .maths-corner p { color: var(--text-muted); }