/*
 * styles/tokens.css — GENERATED FILE. Do not hand-edit.
 *
 * Produced by scripts/build-themes.mjs from styles/tokens.js.
 * To change a color, edit tokens.js and re-run:
 *   node scripts/build-themes.mjs
 *
 * ---------------------------------------------------------------------------
 * Brand-fallback pattern (read this before touching --accent anywhere)
 * ---------------------------------------------------------------------------
 * Each [data-theme][data-mode] block below sets a concrete
 * --accent-theme-default — the theme's own default accent color. It does
 * NOT set --accent directly.
 *
 * --accent itself is resolved exactly once, at the root (see the small rule
 * below), as:
 *
 *   --accent: var(--brand-accent, var(--accent-theme-default));
 *
 * --brand-accent is an org/tenant-specific override. It is injected at
 * runtime by the shell-builder stage (a later phase) via a generated
 * stylesheet rule scoped to the tenant — e.g. a <style> tag's textContent
 * setting ":root { --brand-accent: #... }" — never via an inline
 * documentElement.style.setProperty() write. (That inline-style pattern is
 * the confirmed root cause of "per-org brand permanently defeats dark mode"
 * in the legacy index.html applyBranding() — an inline style on :root beats
 * every CSS layer including prefers-color-scheme media rules. Do not repeat
 * it.) When no --brand-accent is set for a tenant, --accent transparently
 * falls back to that active theme's --accent-theme-default.
 *
 * The one-line resolution rule is included below (harmless with no
 * --brand-accent set, and saves the shell-builder stage from having to
 * remember to add it) — the shell-builder stage may set --brand-accent
 * anywhere with higher specificity/later cascade order without needing to
 * touch this file.
 * ---------------------------------------------------------------------------
 */

:root {
  --accent: var(--brand-accent, var(--accent-theme-default));
}

/* Slate — Cool neutral gray-blue — the default. Calm, clinical-but-warm, Notion-like. */

:root[data-theme="slate"][data-mode="light"] {
  --surface: #fbfbfc;
  --surface-2: #eeeff2;
  --text: #1f252d;
  --text-muted: #515e70;
  --line: #d4d8dd;
  --accent-theme-default: #274c86;
  --on-accent: #fcfcfd;
  --focus-ring: #0c47b6;
  --good: #22774d;
  --warn: #a56d0d;
  --crisis: #ad1f26;
}

:root[data-theme="slate"][data-mode="dark"] {
  --surface: #1e2124;
  --surface-2: #2d3034;
  --text: #f2f2f3;
  --text-muted: #a9adb1;
  --line: #484c51;
  --accent-theme-default: #6591d7;
  --on-accent: #0f1724;
  --focus-ring: #fadb42;
  --good: #6ecf9e;
  --warn: #f0ba4c;
  --crisis: #ef6c73;
}



/* Linen — Warm off-white/cream with a terracotta accent — human, welcoming, paper-like. */

:root[data-theme="linen"][data-mode="light"] {
  --surface: #fcfbfa;
  --surface-2: #f3f1ec;
  --text: #31291c;
  --text-muted: #76674c;
  --line: #e1dbd0;
  --accent-theme-default: #894324;
  --on-accent: #fdfcfc;
  --focus-ring: #0c47b6;
  --good: #22774d;
  --warn: #a56d0d;
  --crisis: #ad1f26;
}

:root[data-theme="linen"][data-mode="dark"] {
  --surface: #27231b;
  --surface-2: #393328;
  --text: #f4f3f1;
  --text-muted: #b9b0a2;
  --line: #595040;
  --accent-theme-default: #da8662;
  --on-accent: #24150f;
  --focus-ring: #fadb42;
  --good: #6ecf9e;
  --warn: #f0ba4c;
  --crisis: #ef6c73;
}



/* Sage — Muted green-gray — grounded, therapeutic, quiet confidence. */

:root[data-theme="sage"][data-mode="light"] {
  --surface: #fbfcfb;
  --surface-2: #eef1ef;
  --text: #202c24;
  --text-muted: #536e5c;
  --line: #d5ddd7;
  --accent-theme-default: #347959;
  --on-accent: #fcfdfc;
  --focus-ring: #0c47b6;
  --good: #22774d;
  --warn: #a56d0d;
  --crisis: #ad1f26;
}

:root[data-theme="sage"][data-mode="dark"] {
  --surface: #1e2420;
  --surface-2: #2d342f;
  --text: #f2f3f2;
  --text-muted: #a9b1ac;
  --line: #48514b;
  --accent-theme-default: #73c9a1;
  --on-accent: #0f241a;
  --focus-ring: #fadb42;
  --good: #6ecf9e;
  --warn: #f0ba4c;
  --crisis: #ef6c73;
}



/* Stone — Warm gray/taupe neutrals with a cool steel-blue accent for contrast. */

:root[data-theme="stone"][data-mode="light"] {
  --surface: #fcfbfb;
  --surface-2: #f1f0ee;
  --text: #2c2620;
  --text-muted: #6e6153;
  --line: #ddd9d5;
  --accent-theme-default: #305d7e;
  --on-accent: #fcfdfd;
  --focus-ring: #0c47b6;
  --good: #22774d;
  --warn: #a56d0d;
  --crisis: #ad1f26;
}

:root[data-theme="stone"][data-mode="dark"] {
  --surface: #24211e;
  --surface-2: #34302d;
  --text: #f3f2f2;
  --text-muted: #b1ada9;
  --line: #514d48;
  --accent-theme-default: #6fa6ce;
  --on-accent: #0f1b24;
  --focus-ring: #fadb42;
  --good: #6ecf9e;
  --warn: #f0ba4c;
  --crisis: #ef6c73;
}



/* Mist — Soft blue-gray with a gentle violet-blue accent — airy, unhurried. */

:root[data-theme="mist"][data-mode="light"] {
  --surface: #fbfbfc;
  --surface-2: #eef0f2;
  --text: #1f282e;
  --text-muted: #4f6472;
  --line: #d3dade;
  --accent-theme-default: #3e327b;
  --on-accent: #fcfcfd;
  --focus-ring: #0c47b6;
  --good: #22774d;
  --warn: #a56d0d;
  --crisis: #ad1f26;
}

:root[data-theme="mist"][data-mode="dark"] {
  --surface: #1e2224;
  --surface-2: #2c3135;
  --text: #f2f2f3;
  --text-muted: #a9aeb2;
  --line: #464e53;
  --accent-theme-default: #8072cb;
  --on-accent: #130f24;
  --focus-ring: #fadb42;
  --good: #6ecf9e;
  --warn: #f0ba4c;
  --crisis: #ef6c73;
}



/* Midnight — True dark theme — deep neutral charcoal (never pure black) with a teal-cyan accent for long sessions. */

:root[data-theme="midnight"][data-mode="light"] {
  --surface: #fbfbfc;
  --surface-2: #eeeff1;
  --text: #20242c;
  --text-muted: #535b6e;
  --line: #d5d7dd;
  --accent-theme-default: #277686;
  --on-accent: #fcfdfd;
  --focus-ring: #0c47b6;
  --good: #22774d;
  --warn: #a56d0d;
  --crisis: #ad1f26;
}

:root[data-theme="midnight"][data-mode="dark"] {
  --surface: #1e2024;
  --surface-2: #2d2f34;
  --text: #f2f2f3;
  --text-muted: #a9acb1;
  --line: #484b51;
  --accent-theme-default: #65c4d7;
  --on-accent: #0f2024;
  --focus-ring: #fadb42;
  --good: #6ecf9e;
  --warn: #f0ba4c;
  --crisis: #ef6c73;
}


