@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Manrope:wght@400;500;600;700;800&display=swap');

@font-face {
  font-family: 'OpenDyslexic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://cdn.jsdelivr.net/fontsource/fonts/opendyslexic@latest/latin-400-normal.woff2) format('woff2'),
       url(https://cdn.jsdelivr.net/fontsource/fonts/opendyslexic@latest/latin-400-normal.woff) format('woff');
}

/* ── ACCESSIBILITY: dyslexia-friendly font ── */
html.dyslexic-font body,
html.dyslexic-font body * {
  font-family: 'OpenDyslexic', sans-serif !important;
  letter-spacing: normal !important;
}

:root {
  --bg: #12121a;
  --surface: #1b1b26;
  --surface-2: #23232f;
  --border: #33333f;
  --ink: #eceef2;
  --ink-dim: #9598a8;
  --accent: #ef4b7a;
  --gold: #f0b429;
  --blue: #5b7cfa;
  --white-piece: #e8dfc0;
  --black-piece: #9966ff;
  --board-rgb: 91, 124, 250; /* board/UI accent, as r,g,b so alpha can vary */

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 3px rgba(0,0,0,.35);
  --shadow-md: 0 6px 20px rgba(0,0,0,.35);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  font-family: 'Manrope', sans-serif;
  color: var(--ink);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 8px 32px;
  gap: 10px;
  overflow-x: hidden;
}

/* generic linear icon */
.icon {
  width: 1em;
  height: 1em;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  vertical-align: -0.15em;
}

/* ── ACCESSIBILITY / COLOR THEMES ── */

/* Theme 1: High Contrast Yellow vs Cyan (Great for Protanopia/Deuteranopia) */
[data-theme="yellow-cyan"] {
  --white-piece: #ffff00;
  --black-piece: #00ffff;
  --blue: #00b8b8;
  --board-rgb: 0, 184, 184;
}

/* Theme 2: High Contrast White vs Bright Orange (High Luminance Difference) */
[data-theme="white-orange"] {
  --white-piece: #ffffff;
  --black-piece: #ff6600;
  --blue: #e05e00;
  --board-rgb: 224, 94, 0;
}