/* Frontier palette */
:root[data-visual-style="frontier"] {
  --bg: #eee7d8;
  --board: #ded2bb;
  --surface: #d3c5aa;
  --text: #382f26;
  --muted: #746655;
  --snake: #7b8f5d;
  --head: #55683d;
  --food: #c98924;
  --wall: #8c7a63;
  --enemy: #b36a49;
  --enemy-head: #84432a;
  --on-accent: #f8f1e3;
  --board-grid: rgba(76, 61, 43, 0.065);
  --board-vignette: 0.055;
  --depth-mid: #9b795a;
  --depth-deep: #755d68;
  --depth-abyss: #654654;
  --snake-eye: #f8f1e3;
}

@media (prefers-color-scheme: dark) {
  :root[data-visual-style="frontier"]:not([data-theme="light"]) {
    --bg: #1b1814;
    --board: #27221b;
    --surface: #332c23;
    --text: #ddd1bc;
    --muted: #9f907a;
    --snake: #72885f;
    --head: #b7cc93;
    --food: #d7a13a;
    --wall: #766956;
    --enemy: #ab654b;
    --enemy-head: #db9578;
    --on-accent: #1a2117;
    --board-grid: rgba(222, 209, 188, 0.055);
    --board-vignette: 0.11;
    --depth-mid: #594736;
    --depth-deep: #514252;
    --depth-abyss: #573b48;
    --snake-eye: #1a2117;
  }
}

:root[data-theme="dark"][data-visual-style="frontier"] {
  --bg: #1b1814;
  --board: #27221b;
  --surface: #332c23;
  --text: #ddd1bc;
  --muted: #9f907a;
  --snake: #72885f;
  --head: #b7cc93;
  --food: #d7a13a;
  --wall: #766956;
  --enemy: #ab654b;
  --enemy-head: #db9578;
  --on-accent: #1a2117;
  --board-grid: rgba(222, 209, 188, 0.055);
  --board-vignette: 0.11;
  --depth-mid: #594736;
  --depth-deep: #514252;
  --depth-abyss: #573b48;
  --snake-eye: #1a2117;
}

/* Amethyst palette and surface accents */
:root[data-visual-style="amethyst"] {
  --bg: #f5eefb;
  --board: #e7d9f4;
  --surface: #dacced;
  --text: #352044;
  --muted: #6c507b;
  --perk-rare: #34568b;
  --perk-epic: #843c8a;
  --snake: #9568b9;
  --head: #7345a3;
  --food: #9d6713;
  --wall: #897493;
  --enemy: #b4586c;
  --enemy-head: #82394e;
  --on-accent: #faf5ff;
  --board-grid: rgba(74, 42, 96, 0.065);
  --board-vignette: 0.055;
  --depth-mid: #b99cce;
  --depth-deep: #a784c1;
  --depth-abyss: #9866ae;
  --snake-eye: #faf5ff;
}

@media (prefers-color-scheme: dark) {
  :root[data-visual-style="amethyst"]:not([data-theme="light"]) {
    --bg: #171021;
    --board: #241a35;
    --surface: #342548;
    --text: #f2eafc;
    --muted: #b3a0c7;
    --perk-rare: #9ac7ff;
    --perk-epic: #e3a9f0;
    --snake: #936cc4;
    --head: #c2a0f1;
    --food: #efc364;
    --wall: #7e6c92;
    --enemy: #c57582;
    --enemy-head: #eda3ad;
    --on-accent: #20102f;
    --board-grid: rgba(226, 201, 255, 0.06);
    --board-vignette: 0.11;
    --depth-mid: #3e2855;
    --depth-deep: #4c2d62;
    --depth-abyss: #582a58;
    --snake-eye: #20102f;
  }
}

:root[data-theme="dark"][data-visual-style="amethyst"] {
  --bg: #171021;
  --board: #241a35;
  --surface: #342548;
  --text: #f2eafc;
  --muted: #b3a0c7;
  --perk-rare: #9ac7ff;
  --perk-epic: #e3a9f0;
  --snake: #936cc4;
  --head: #c2a0f1;
  --food: #efc364;
  --wall: #7e6c92;
  --enemy: #c57582;
  --enemy-head: #eda3ad;
  --on-accent: #20102f;
  --board-grid: rgba(226, 201, 255, 0.06);
  --board-vignette: 0.11;
  --depth-mid: #3e2855;
  --depth-deep: #4c2d62;
  --depth-abyss: #582a58;
  --snake-eye: #20102f;
}

:root[data-visual-style="amethyst"] .board {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--head) 22%, transparent),
    0 0 1.5rem color-mix(in srgb, var(--head) 6%, transparent);
}
:root[data-visual-style="amethyst"] .mobile-controls .btn {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--head) 18%, transparent),
    0 3px 0 color-mix(in srgb, var(--text) 12%, transparent);
}