/* Shared by the page and the enemy editor. */
/* ---------- Themes: every colour the page and the pixel field use ---------- */
/* Derived for every theme: a quieter text colour and a deeper section background. */
:root {
  --text-muted: color-mix(in srgb, var(--text-2) 62%, var(--bg));
  --bg-deep: color-mix(in srgb, var(--bg) 55%, var(--field-bg));
}
:root, [data-theme="gruvbox"] {
  --bg: #282828; --field-bg: #161616;
  --text: #d4be98; --text-2: #c5b18d; --hdr-text: #ead4ae;
  --brand: #7daea3; --primary-fg: #0c0e10;
  --surface: #32302f; --surface-2: #3c3836;
  --border-strong: #665c54; --border-subtle: #32302f;
  --field-dim: #354440; --field-mid: #56746d; --field-lit: #7daea3;
  --field-hover: #a4c6bf; --field-crest: #cee0dc;
}
[data-theme="tokyo-night"] {
  --bg: #1a1b26; --field-bg: #0e0e14;
  --text: #c0caf5; --text-2: #a9b1d6; --hdr-text: #c0caf5;
  --brand: #9ece6a; --primary-fg: #1a1b26;
  --surface: #24283b; --surface-2: #2f3549;
  --border-strong: #414868; --border-subtle: #24283b;
  --field-dim: #39482e; --field-mid: #678549; --field-lit: #9ece6a;
  --field-hover: #bbdd97; --field-crest: #daecc6;
}
[data-theme="rose"] {
  --bg: #1f1a24; --field-bg: #141018;
  --text: #e0def4; --text-2: #b8b4cc; --hdr-text: #e0def4;
  --brand: #eb6f92; --primary-fg: #191724;
  --surface: #26233a; --surface-2: #2f2b45;
  --border-strong: #524f67; --border-subtle: #26233a;
  --field-dim: #4a2735; --field-mid: #84405a; --field-lit: #eb6f92;
  --field-hover: #f29bb3; --field-crest: #f8d3de;
}