/* Portal X design tokens.
 *
 * THE RULE: pages and components reference these variables only. No hex codes
 * outside this file. If a page needs a colour that is not here, that is a
 * signal to add a token, not to inline a value.
 *
 * Each concrete theme redefines the same names below. "system" is never a
 * theme here - it is resolved to light or dark before paint by theme.js, so
 * CSS only ever sees a real theme and nothing is duplicated.
 *
 * To add a theme: copy a block, change the values, add it to Theme and
 * CONCRETE_THEMES in accounts/models.py. Nothing else changes.
 */

:root {
  --page-max: 64rem;
  --radius: 10px;
  --radius-sm: 6px;
  --font: system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "Consolas", monospace;
}

/* ---------- Light (default) ---------- */
:root,
:root[data-theme="light"] {
  color-scheme: light;

  --bg: #f6f7f9;
  --surface: #ffffff;
  --surface-2: #f0f2f5;
  --line: #dfe3e8;
  --line-strong: #c4ccd5;

  --ink: #16191d;
  --ink-muted: #5c6672;
  --ink-subtle: #8892a0;
  --ink-inverse: #ffffff;

  --accent: #b4530a;
  --accent-hover: #934307;
  --accent-ink: #ffffff;
  --accent-soft: #fdf0e4;

  --ok: #1f7a44;
  --ok-soft: #e4f4ea;
  --warn: #9a6800;
  --warn-soft: #fbf1d8;
  --danger: #b3261e;
  --danger-soft: #fbe6e5;
  --info: #1d5fa8;
  --info-soft: #e4eefa;

  --field-bg: #ffffff;
  --field-line: #c4ccd5;
  --focus-ring: #b4530a;

  --shadow-1: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
}

/* ---------- Dark ---------- */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #14171a;
  --surface: #1c2024;
  --surface-2: #23282d;
  --line: #2c3238;
  --line-strong: #3d454d;

  --ink: #e8eaed;
  --ink-muted: #9aa4b0;
  --ink-subtle: #6f7a86;
  --ink-inverse: #14171a;

  --accent: #f0873c;
  --accent-hover: #f79c5b;
  --accent-ink: #1a1207;
  --accent-soft: #33231650;

  --ok: #5bc98a;
  --ok-soft: #14301f;
  --warn: #e0b355;
  --warn-soft: #332a13;
  --danger: #f08a83;
  --danger-soft: #3a1b19;
  --info: #7ab5f0;
  --info-soft: #152738;

  --field-bg: #14171a;
  --field-line: #3d454d;
  --focus-ring: #f0873c;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4), 0 1px 3px rgba(0, 0, 0, .3);
}

/* ---------- Orchid ---------- */
:root[data-theme="orchid"] {
  color-scheme: light;

  --bg: #faf6fc;
  --surface: #ffffff;
  --surface-2: #f5edf9;
  --line: #ebdcf2;
  --line-strong: #d6bde2;

  --ink: #2b1f33;
  --ink-muted: #6d5c7b;
  --ink-subtle: #937fa3;
  --ink-inverse: #ffffff;

  --accent: #9333a8;
  --accent-hover: #7a268c;
  --accent-ink: #ffffff;
  --accent-soft: #f7e9fb;

  --ok: #1f7a5c;
  --ok-soft: #e2f3ee;
  --warn: #9a6800;
  --warn-soft: #fbf1d8;
  --danger: #bb2a5e;
  --danger-soft: #fce7ef;
  --info: #5b46b8;
  --info-soft: #ece9fa;

  --field-bg: #ffffff;
  --field-line: #d6bde2;
  --focus-ring: #9333a8;

  --shadow-1: 0 1px 2px rgba(80, 40, 100, .07), 0 1px 3px rgba(80, 40, 100, .09);
}

/* ---------- Clay ----------
 * Light with the orange turned down: the same surfaces and text as Light,
 * a muted terracotta where Light has burnt orange. For anyone who found the
 * default a little loud. (Toby, 2026-09-16.) */
:root[data-theme="clay"] {
  color-scheme: light;

  --bg: #f6f7f9;
  --surface: #ffffff;
  --surface-2: #f0f2f5;
  --line: #dfe3e8;
  --line-strong: #c4ccd5;

  --ink: #16191d;
  --ink-muted: #5c6672;
  --ink-subtle: #8892a0;
  --ink-inverse: #ffffff;

  --accent: #9a5b36;
  --accent-hover: #7d4929;
  --accent-ink: #ffffff;
  --accent-soft: #f6ece5;

  --ok: #1f7a44;
  --ok-soft: #e4f4ea;
  --warn: #9a6800;
  --warn-soft: #fbf1d8;
  --danger: #b3261e;
  --danger-soft: #fbe6e5;
  --info: #1d5fa8;
  --info-soft: #e4eefa;

  --field-bg: #ffffff;
  --field-line: #c4ccd5;
  --focus-ring: #9a5b36;

  --shadow-1: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
}

/* ---------- Dark orchid ----------
 * The dark feminine theme: dark grey surfaces (neutral, not Dark's cool
 * blue-grey), warm off-white text, orchid pink where Dark has orange,
 * lavender for info. Toby tried plum cards first and asked for grey.
 * (2026-09-16.) */
:root[data-theme="orchid-dark"] {
  color-scheme: dark;

  --bg: #141416;
  --surface: #1e1e21;
  --surface-2: #27272b;
  --line: #323236;
  --line-strong: #46464c;

  --ink: #eeeaee;
  --ink-muted: #aaa2ab;
  --ink-subtle: #7c757d;
  --ink-inverse: #141416;

  --accent: #e792d4;
  --accent-hover: #efaae0;
  --accent-ink: #2b1026;
  --accent-soft: #5a2f5150;

  --ok: #6dcf9c;
  --ok-soft: #143324;
  --warn: #e6be62;
  --warn-soft: #3a2d14;
  --danger: #ff8b95;
  --danger-soft: #3f1a22;
  --info: #b8a6f0;
  --info-soft: #272040;

  --field-bg: #141416;
  --field-line: #46464c;
  --focus-ring: #e792d4;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .45), 0 1px 3px rgba(0, 0, 0, .35);
}