/*
 * Shared design tokens — the theme engine for every site under A:\web.
 *
 * Which scheme applies, most specific first:
 *   1. data-theme="light" | "dark" on an element: scopes that element and everything inside it.
 *      Theme.mjs puts the visitor's choice on <html>; a page may also pin <html data-theme="dark">.
 *   2. Otherwise the operating system preference (prefers-color-scheme).
 *
 * Every scheme-dependent value is a colour written with light-dark(light, dark), so each token is defined once
 * and follows the `color-scheme` of whatever element uses it. Gradients and shadows are built from these colour
 * tokens, so they switch too. Sites keep their own look by overriding tokens in their own stylesheet, e.g.
 *   :root { --accent: light-dark(#c81e50, #ff3264); }
 *
 * Load order on a page: theme.css, then (optionally) base.css and components, then the site's own CSS.
 */

:root {
	color-scheme: light dark;
}
[data-theme="light"] { color-scheme: light; }
[data-theme="dark"] { color-scheme: dark; }

:root {
	/* Surfaces */
	--bg: light-dark(#f5f6f8, #0f1115);
	--bg-secondary: light-dark(#ffffff, #171a21);
	--bg-tertiary: light-dark(#eceef2, #1f232c);
	--bg-elevated: light-dark(#ffffff, #1b1f27);
	--bg-hover: light-dark(rgb(0 0 0 / 0.05), rgb(255 255 255 / 0.06));
	--bg-active: light-dark(rgb(0 0 0 / 0.09), rgb(255 255 255 / 0.1));
	--surface: light-dark(rgb(0 0 0 / 0.035), rgb(255 255 255 / 0.04));
	--surface-hover: light-dark(rgb(0 0 0 / 0.06), rgb(255 255 255 / 0.08));
	--overlay: light-dark(rgb(15 17 21 / 0.45), rgb(0 0 0 / 0.65));
	--input-bg: light-dark(#ffffff, rgb(0 0 0 / 0.3));

	/* Text */
	--text: light-dark(#16181d, #eceef2);
	--text-secondary: light-dark(#3d4350, #c3c8d2);
	--text-muted: light-dark(#6b7280, #8b93a1);
	--text-faint: light-dark(#9aa0aa, #5f6673);
	--text-on-accent: light-dark(#ffffff, #0b0d12);

	/* Lines */
	--border-subtle: light-dark(rgb(0 0 0 / 0.07), rgb(255 255 255 / 0.07));
	--border: light-dark(#d9dce3, #2a2f3a);
	--border-strong: light-dark(#b6bcc7, #3d4452);

	/* Accent */
	--accent: light-dark(#2563eb, #5b8cff);
	--accent-hover: light-dark(#1d4ed8, #7aa2ff);
	--accent-soft: light-dark(rgb(37 99 235 / 0.12), rgb(91 140 255 / 0.16));
	--accent-glow: light-dark(rgb(37 99 235 / 0.25), rgb(91 140 255 / 0.35));
	--accent-2: light-dark(#7c3aed, #a78bfa);

	/* Status */
	--success: light-dark(#15803d, #34d399);
	--warning: light-dark(#b45309, #fbbf24);
	--danger: light-dark(#c62828, #f87171);
	--info: light-dark(#0369a1, #38bdf8);

	/* Effects */
	--shadow-color: light-dark(rgb(16 24 40 / 0.12), rgb(0 0 0 / 0.55));
	--shadow-sm: 0 1px 2px var(--shadow-color);
	--shadow: 0 2px 6px var(--shadow-color), 0 8px 24px -8px var(--shadow-color);
	--shadow-lg: 0 12px 40px -12px var(--shadow-color), 0 0 0 1px var(--border-subtle);
	--focus-ring: 0 0 0 3px var(--accent-glow);
	--gradient-accent: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
	--scrollbar-track: light-dark(rgb(0 0 0 / 0.05), rgb(0 0 0 / 0.25));
	--scrollbar-thumb: light-dark(rgb(0 0 0 / 0.25), rgb(255 255 255 / 0.22));

	/* Page shell used by the older sites (page-shell.css / reset.css): grey backdrop with an inner shadow */
	--shell-bg: light-dark(rgb(232, 232, 232), rgb(50, 50, 50));
	--shell-text: light-dark(#111111, #ffffff);
	--shell-shadow: light-dark(rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.5));

	/* Shape, type, motion (not scheme-dependent) */
	--radius-sm: 6px;
	--radius: 10px;
	--radius-lg: 16px;
	--radius-xl: 24px;
	--font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-mono: ui-monospace, "Cascadia Code", "JetBrains Mono", "Fira Code", Consolas, monospace;
	--dur: 160ms;
	--ease: cubic-bezier(0.2, 0, 0, 1);

	/* Aliases for names used by older stylesheets on these sites */
	--bg-primary: var(--bg);
	--bg-base: var(--bg);
	--bg-panel: var(--bg-elevated);
	--modal-bg: var(--bg-elevated);
	--text-primary: var(--text);
	--text-color: var(--text);
	--muted: var(--text-muted);
	--error: var(--danger);
	--red: var(--danger);
	--green: var(--success);
	--radius-md: var(--radius);
	--font: var(--font-sans);
	--mono: var(--font-mono);
}