/* tokens.css. The colors, sizes and spacing of the whole site, in one place.
   It is loaded AFTER each page's older stylesheets, so its values win over the older :root blocks until those are
   deleted. The older names (--surface-strong, --shadow, the radius names) are kept as aliases at the bottom, so
   pages that have not moved to the new components yet still look right with the new colors.

   Themes. data-theme on <html>: midnight (dark, default), light, forest, slate, ember. The saved values
   "midnight" and "light" from before keep working. The selectors are [data-theme=...] (not html[...]) so a small
   swatch in the theme menu can carry the attribute and show that theme's colors. Board colors are in board-themes.css.
   Contrast measured 2026-10-27, text on surface 14.4 to 17.8, muted on surface 6.6 to 7.4,
   accent text on surface 6.2 to 9.9, on-action on action 8.6 to 10.2. Good and danger on the
   light surface were measured too, --good was lightened from #1b8a5a (4.3:1) to #147a4c (5.4:1). */

:root,
[data-theme="midnight"] {
    color-scheme: dark;
    --bg: #0a0b18;
    --bg-alt: #0d1024;
    --surface: #14162b;
    --surface-2: #1c1f3a;
    --line: #2a2e52;
    --text: #eef0ff;
    --muted: #9aa0c8;
    --accent: #8f7dff;
    --accent-text: #a99bff;
    --accent-2: #2dd4bf;
    --action: #ffb02e;
    --on-action: #1b1200;
    --good: #3fd9a0;
    --danger: #ff6b7a;
    --glow-1: rgba(124, 92, 255, 0.22);
    --glow-2: rgba(45, 212, 191, 0.14);
    --overlay: rgba(5, 6, 15, 0.72);
    --shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

[data-theme="light"] {
    color-scheme: light;
    --bg: #f4f5fc;
    --bg-alt: #ffffff;
    --surface: #ffffff;
    --surface-2: #eceefa;
    --line: #d9dcf0;
    --text: #14162b;
    --muted: #555b82;
    --accent: #5b45e0;
    --accent-text: #5b45e0;
    --accent-2: #0ea5a3;
    --action: #f59e0b;
    --on-action: #1b1200;
    --good: #147a4c;
    --danger: #c62839;
    --glow-1: rgba(91, 69, 224, 0.1);
    --glow-2: rgba(14, 165, 163, 0.08);
    --overlay: rgba(20, 22, 43, 0.5);
    --shadow: 0 10px 28px rgba(20, 22, 43, 0.12);
}

[data-theme="forest"] {
    color-scheme: dark;
    --bg: #08130f;
    --bg-alt: #0b1a14;
    --surface: #112119;
    --surface-2: #172d22;
    --line: #24402f;
    --text: #ecf7f0;
    --muted: #8fb09c;
    --accent: #4cc38a;
    --accent-text: #6fdca6;
    --accent-2: #2dd4bf;
    --action: #ffb02e;
    --on-action: #1b1200;
    --good: #3fd9a0;
    --danger: #ff6b7a;
    --glow-1: rgba(76, 195, 138, 0.16);
    --glow-2: rgba(45, 212, 191, 0.1);
    --overlay: rgba(3, 10, 7, 0.72);
    --shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

[data-theme="slate"] {
    color-scheme: dark;
    --bg: #0e1218;
    --bg-alt: #121821;
    --surface: #171d27;
    --surface-2: #1f2733;
    --line: #2d3746;
    --text: #e8edf5;
    --muted: #98a6bb;
    --accent: #6ea8ff;
    --accent-text: #8fbcff;
    --accent-2: #2dd4bf;
    --action: #ffb02e;
    --on-action: #1b1200;
    --good: #3fd9a0;
    --danger: #ff6b7a;
    --glow-1: rgba(110, 168, 255, 0.14);
    --glow-2: rgba(45, 212, 191, 0.08);
    --overlay: rgba(5, 8, 12, 0.72);
    --shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

[data-theme="ember"] {
    color-scheme: dark;
    --bg: #140e0a;
    --bg-alt: #1b130d;
    --surface: #211710;
    --surface-2: #2c1f15;
    --line: #43301f;
    --text: #f6eee6;
    --muted: #b9a591;
    --accent: #e0904a;
    --accent-text: #f0a867;
    --accent-2: #2dd4bf;
    --action: #ffb02e;
    --on-action: #1b1200;
    --good: #3fd9a0;
    --danger: #ff6b7a;
    --glow-1: rgba(224, 144, 74, 0.16);
    --glow-2: rgba(45, 212, 191, 0.08);
    --overlay: rgba(12, 7, 4, 0.72);
    --shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

/* Sizes, spacing, type and motion. */
:root {
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --font-ui: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --font-display: "Unbounded", "Unbounded Fallback", "Inter", "Inter Fallback", system-ui, sans-serif;
    --text-xs: 0.78rem;
    --text-sm: 0.875rem;
    --text-md: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.375rem;
    --text-2xl: 1.75rem;
    --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --header-height: 56px;
    --content-width: 1200px;
}

@media (max-width: 700px) {
    :root { --header-height: 52px; }
}

/* Aliases for the names the older stylesheets use. Delete when the last page has moved. */
:root,
[data-theme] {
    --surface-strong: var(--surface);
    --surface-soft: var(--surface-2);
    --radius-xl: var(--radius-lg);
    --radius: var(--radius-md);
    --panel: var(--surface);
}