/* 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="osaka-jade"] {
  --bg: #111c18; --field-bg: #090f0d;
  --text: #c1c497; --text-2: #d6d5bc; --hdr-text: #f7e8b2;
  --brand: #509475; --primary-fg: #090f0d;
  --surface: #23372b; --surface-2: #32473b;
  --border-strong: #53685b; --border-subtle: #23372b;
  --field-dim: #1e372c; --field-mid: #35614d; --field-lit: #509475;
  --field-hover: #85b49e; --field-crest: #bdd6cb;
}
[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="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;
}
[data-theme="matte-black"] {
  --bg: #121212; --field-bg: #090909;
  --text: #bebebe; --text-2: #8a8a8d; --hdr-text: #eaeaea;
  --brand: #e68e0d; --primary-fg: #121212;
  --surface: #1e1e1e; --surface-2: #2a2a2a;
  --border-strong: #333333; --border-subtle: #1e1e1e;
  --field-dim: #4b310a; --field-mid: #925b0b; --field-lit: #e68e0d;
  --field-hover: #eeb056; --field-crest: #f6d4a3;
}
[data-theme="retro-82"] {
  --bg: #05182e; --field-bg: #020c17;
  --text: #f6dcac; --text-2: #a7c9c6; --hdr-text: #f6dcac;
  --brand: #faa968; --primary-fg: #05182e;
  --surface: #0a2540; --surface-2: #134e5a;
  --border-strong: #2a6b78; --border-subtle: #0a2540;
  --field-dim: #4c3b2f; --field-mid: #9c6d49; --field-lit: #faa968;
  --field-hover: #fcc395; --field-crest: #fddec6;
}