/* Theme definitions. Each theme sets the same custom properties;
   styles.css only reads these variables and never hardcodes a color.

   With no saved choice there is no data-theme attribute, and the page
   follows the system: light, dark, or high contrast. That also covers
   visitors without JavaScript. tools/check_contrast.py tests every theme. */

:root,
[data-theme="light"] {
  --bg: #f5f5f2;
  --bg-alt: #ffffff;
  --card-bg: #ffffff;
  --text: #1a1a1a;
  --text-muted: #55554f;
  --accent: #0a5f38;
  --accent-strong: #06432a;
  --on-accent: #ffffff;
  --focus: #b3541e;
  --error: #b3261e;
  --input-border: #6e6e68;
  --border: #d8d8d2;
  --overlay: rgba(20, 20, 15, 0.6);
  --border-width: 1px;
  color-scheme: light;
}

[data-theme="dark"] {
  --bg: #12141a;
  --bg-alt: #1b1e26;
  --card-bg: #1b1e26;
  --text: #e8e8ea;
  --text-muted: #a4aab4;
  --accent: #7dd3fc;
  --accent-strong: #bae6fd;
  --on-accent: #12141a;
  --focus: #f0a868;
  --error: #ff8a80;
  --input-border: #7b8190;
  --border: #2f3440;
  --overlay: rgba(0, 0, 0, 0.7);
  --border-width: 1px;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #12141a;
    --bg-alt: #1b1e26;
    --card-bg: #1b1e26;
    --text: #e8e8ea;
    --text-muted: #a4aab4;
    --accent: #7dd3fc;
    --accent-strong: #bae6fd;
    --on-accent: #12141a;
    --focus: #f0a868;
    --error: #ff8a80;
    --input-border: #7b8190;
    --border: #2f3440;
    --overlay: rgba(0, 0, 0, 0.7);
    --border-width: 1px;
    color-scheme: dark;
  }
}

[data-theme="monokai"] {
  --bg: #272822;
  --bg-alt: #2f3129;
  --card-bg: #2f3129;
  --text: #f8f8f2;
  --text-muted: #b5b5ad;
  --accent: #a6e22e;
  --accent-strong: #c6f36a;
  --on-accent: #272822;
  --focus: #fd971f;
  --error: #ff6188;
  --input-border: #8f8b75;
  --border: #49483e;
  --overlay: rgba(0, 0, 0, 0.75);
  --border-width: 1px;
  color-scheme: dark;
}

[data-theme="high-contrast"] {
  --bg: #000000;
  --bg-alt: #000000;
  --card-bg: #000000;
  --text: #ffffff;
  --text-muted: #ffffff;
  --accent: #ffff00;
  --accent-strong: #ffffff;
  --on-accent: #000000;
  --focus: #00ffff;
  --error: #ff8080;
  --input-border: #ffffff;
  --border: #ffffff;
  --overlay: rgba(0, 0, 0, 0.9);
  --border-width: 2px;
  color-scheme: dark;
}

@media (prefers-contrast: more) {
  :root:not([data-theme]) {
    --bg: #000000;
    --bg-alt: #000000;
    --card-bg: #000000;
    --text: #ffffff;
    --text-muted: #ffffff;
    --accent: #ffff00;
    --accent-strong: #ffffff;
    --on-accent: #000000;
    --focus: #00ffff;
    --error: #ff8080;
    --input-border: #ffffff;
    --border: #ffffff;
    --overlay: rgba(0, 0, 0, 0.9);
    --border-width: 2px;
    color-scheme: dark;
  }
}

[data-theme="pizza"] {
  --bg: #fff4dd;
  --bg-alt: #fff9ec;
  --card-bg: #fff9ec;
  --text: #4a2c14;
  --text-muted: #7a4c22;
  --accent: #a8321f;
  --accent-strong: #7f2517;
  --on-accent: #fff9ec;
  --focus: #2e7d32;
  --error: #8f1d12;
  --input-border: #8a5a2b;
  --border: #e0b56b;
  --overlay: rgba(74, 44, 20, 0.6);
  --border-width: 1px;
  color-scheme: light;
}

/* Pizza gets a repeating tomato-sauce line drawing of a slice as the page
   background (scoped to the theme; other themes keep a flat --bg). */
[data-theme="pizza"] body {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E %3Cg fill='none' stroke='%23c0392b' stroke-opacity='.28' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E %3Cg transform='translate(14 10) rotate(14 30 34)'%3E %3Cpath d='M30 58 L11 17 A24 24 0 0 1 49 17 Z'/%3E %3Cpath d='M14 23 A20 20 0 0 1 46 23'/%3E %3Ccircle cx='25' cy='31' r='3.5'/%3E %3Ccircle cx='36' cy='36' r='3.5'/%3E %3Ccircle cx='29' cy='45' r='2.5'/%3E %3C/g%3E %3Cg transform='translate(92 86) rotate(-158 30 34)'%3E %3Cpath d='M30 58 L11 17 A24 24 0 0 1 49 17 Z'/%3E %3Cpath d='M14 23 A20 20 0 0 1 46 23'/%3E %3Ccircle cx='25' cy='31' r='3.5'/%3E %3Ccircle cx='36' cy='36' r='3.5'/%3E %3Ccircle cx='29' cy='45' r='2.5'/%3E %3C/g%3E %3C/g%3E %3C/svg%3E");
  background-size: 160px 160px;
}