/* ------------------------------------------------------------------- themes
   Every color in the UI (including the CodeMirror syntax colors) derives from
   the palette variables below. Kept apart from style.css so the guide (docs/)
   wears the same theme as the app. To add a theme: copy one of the
   :root[data-theme="…"] blocks, rename it, and add the name to THEMES in
   client.js - that's the whole job. The picker in the header persists the
   choice in localStorage. */

:root {
  /* poptart (default) - dark, pink accent */
  --bg: #0e0f13;
  --bg-raised: #15171d;
  --bg-panel: #191c23;
  --border: #262a34;
  --text: #d7dbe4;
  --text-dim: #8189a0;
  --accent: #ff7a9c;
  --ok: #7ed896;
  --solo: #82aaff; /* a soloed stem's gate (cmd+click) */
  --err: #ff8080;
  --warn: #ffcb6b;
  --selection: #2a2f3d;
  --linenumber: #3a4050;
  --shadow: rgba(0, 0, 0, 0.5);
  --syn-string: #a5d98a;
  --syn-number: #f78c6c;
  --syn-keyword: #c792ea;
  --syn-variable: #82aaff;
  --syn-property: #ffcb6b;
  --syn-comment: #5a6274;
}

:root[data-theme='blueberry'] {
  /* cool indigo/blue, Tokyo Night-ish */
  --bg: #0b0e17;
  --bg-raised: #111527;
  --bg-panel: #151a30;
  --border: #232a45;
  --text: #d6dcf0;
  --text-dim: #7e88ab;
  --accent: #7aa2ff;
  --ok: #9ece6a;
  --solo: #7dcfff; /* a soloed stem's gate (cmd+click) */
  --err: #f7768e;
  --warn: #e0af68;
  --selection: #283457;
  --linenumber: #3b4261;
  --shadow: rgba(0, 0, 0, 0.5);
  --syn-string: #9ece6a;
  --syn-number: #ff9e64;
  --syn-keyword: #bb9af7;
  --syn-variable: #7dcfff;
  --syn-property: #e0af68;
  --syn-comment: #565f89;
}

:root[data-theme='matcha'] {
  /* earthy greens, Everforest-ish */
  --bg: #101410;
  --bg-raised: #161c16;
  --bg-panel: #1a221a;
  --border: #2a352a;
  --text: #d8e2d4;
  --text-dim: #869686;
  --accent: #a7c080;
  --ok: #a7c080;
  --solo: #7fbbb3; /* a soloed stem's gate (cmd+click) */
  --err: #e67e80;
  --warn: #dbbc7f;
  --selection: #2d3b2d;
  --linenumber: #465446;
  --shadow: rgba(0, 0, 0, 0.5);
  --syn-string: #a7c080;
  --syn-number: #e69875;
  --syn-keyword: #d699b6;
  --syn-variable: #7fbbb3;
  --syn-property: #dbbc7f;
  --syn-comment: #59695c;
}

:root[data-theme='paper'] {
  /* light */
  --bg: #faf9f6;
  --bg-raised: #f1efe9;
  --bg-panel: #ffffff;
  --border: #ddd8cc;
  --text: #33322e;
  --text-dim: #8a867a;
  --accent: #c04c6e;
  --ok: #2f855a;
  --solo: #2563eb; /* a soloed stem's gate (cmd+click) */
  --err: #c53030;
  --warn: #b7791f;
  --selection: #d8e4f5;
  --linenumber: #c0bcb0;
  --shadow: rgba(60, 50, 30, 0.18);
  --syn-string: #448c27;
  --syn-number: #c76b29;
  --syn-keyword: #8b3fb5;
  --syn-variable: #2563eb;
  --syn-property: #b7791f;
  --syn-comment: #9b9689;
}

:root[data-theme='glossing'] {
  /* evil red - near-black, faintly blue-tinted background with bright, vibrant
     villain-console red. Deliberately low syntax variation: code is just bright
     red + clean white, with only labels (properties) and comments pulled aside
     enough to read. No pinks - reds stay saturated, whites stay cool. */
  --bg: #090a0d;
  --bg-raised: #0d0f14;
  --bg-panel: #11141b;
  --border: #242a36;
  --text: #f2f4f7;
  --text-dim: #838a97;
  --accent: #ff3040;
  --ok: #45b98f;
  --solo: #4c8dff; /* a soloed stem's gate (cmd+click) */
  --err: #ff4b56;
  --warn: #d8a24a;
  --selection: #1b2540;
  --linenumber: #3c4452;
  --shadow: rgba(0, 0, 0, 0.7);
  --syn-string: #e6e9f0;
  --syn-number: #ff3040;
  --syn-keyword: #ff3040;
  --syn-variable: #ff3040;
  --syn-property: #c53640;
  --syn-comment: #5b636f;
}

/* derived - shared by all themes, computed from the palette */
:root,
:root[data-theme] {
  --accent-soft: color-mix(in srgb, var(--accent) 15%, transparent);
  --accent-strong: color-mix(in srgb, var(--accent) 28%, transparent);
  --hover-bg: color-mix(in srgb, var(--text) 7%, var(--bg-panel));
  --border-strong: color-mix(in srgb, var(--text) 20%, var(--border));
  --ok-border: color-mix(in srgb, var(--ok) 45%, transparent);
  --err-border: color-mix(in srgb, var(--err) 45%, transparent);
  --ok-soft: color-mix(in srgb, var(--ok) 12%, transparent);
  --err-soft: color-mix(in srgb, var(--err) 12%, transparent);
  --warn-soft: color-mix(in srgb, var(--warn) 14%, transparent);
  --mono: 'SF Mono', ui-monospace, Menlo, monospace;
}