:root {
  color-scheme: light;
  --bg-1: #f2eee6;
  --bg-2: #e7dcc8;
  --panel: #fffcf6;
  --line: #d9ccb6;
  --ink: #252119;
  --muted: #6f6657;
  --accent: #146a4b;
  --accent-soft: #e5f2ed;
  --danger: #b0492a;
  --surface: #ffffff;
  --surface-soft: #fffdf8;
  --row-hover: #fdf4e7;
  --row-active: #edf8f3;
  --shadow: rgba(41, 29, 11, 0.08);
  --you: #1a7a56;
  --enemy: #bf5b33;
  --snake-1: #bf5b33;
  --snake-2: #2f6fdd;
  --snake-3: #8d4ad6;
  --snake-4: #cc7a11;
  --snake-5: #0f8f84;
  --snake-6: #be3f70;
  --snake-7: #6b8a12;
  --snake-8: #9a4a2f;
  --snake-9: #2e8698;
  --snake-10: #7f5fdd;
  --food: #cca100;
  --hazard: #6a5a9b;
  --grid: #e6dbc8;
  --cell: #ffffff;
  --head-ring: #111111;
  --mono-bg: #1d1b18;
  --mono-ink: #ecdfcb;
  --mono-vh-offset: 430px;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg-1: #151819;
    --bg-2: #1b2022;
    --panel: #1f2527;
    --line: #374144;
    --ink: #e6e8e9;
    --muted: #a8b1b3;
    --accent: #4ec894;
    --accent-soft: #233e35;
    --danger: #d1734f;
    --surface: #232b2e;
    --surface-soft: #273134;
    --row-hover: #2b3538;
    --row-active: #224338;
    --shadow: rgba(0, 0, 0, 0.35);
    --you: #4ec894;
    --enemy: #e2815a;
    --snake-1: #e2815a;
    --snake-2: #7ea8ff;
    --snake-3: #c198ff;
    --snake-4: #f2b857;
    --snake-5: #67d2c8;
    --snake-6: #ea86ad;
    --snake-7: #b8d86b;
    --snake-8: #e29d83;
    --snake-9: #75c9da;
    --snake-10: #b7a0ff;
    --food: #ebc14b;
    --hazard: #9b86d8;
    --grid: #3b464a;
    --cell: #1a2022;
    --head-ring: #f3f5f6;
    --mono-bg: #101416;
    --mono-ink: #dce7e9;
  }
}