/*
 * Design tokens. Every colour, space, radius and type step the site uses lives here, so a screen
 * never invents its own value and the whole thing stays one system.
 *
 * The spacing scale is a 4px grid. Density is deliberate — this is an operations tool and the
 * reader compares many rows at once — but every block gets real breathing room around it.
 */
:root {
	color-scheme: dark;

	/* surfaces, from the page floor up */
	--bg: #0e1116;
	--surface: #151a21;
	--surface-2: #1b212a;
	--surface-3: #222a34;
	--line: #28313c;
	--line-strong: #35404e;

	/* text */
	--text: #e9eef4;
	--text-2: #b4c0cd;
	--muted: #7f8c9b;
	--faint: #5d6874;

	/* semantics */
	--accent: #6ea8fe;
	--accent-hover: #85b6ff;
	--on-accent: #0d1420;
	--accent-dim: #2d4a7a;
	--accent-weak: rgba(110, 168, 254, .14);
	--good: #4ad295;
	--good-weak: rgba(74, 210, 149, .14);
	--warn: #e8b457;
	--warn-weak: rgba(232, 180, 87, .14);
	--bad: #f2777f;
	--bad-weak: rgba(242, 119, 127, .14);
	--draft: #93a1b1;
	--focus: #8ebbff;

	/* chart series, in the order a chart assigns them */
	--series-1: #6ea8fe;
	--series-2: #e8b457;
	--series-3: #4ad295;
	--series-4: #c99bf5;
	--series-5: #f2777f;
	--series-6: #5fd0d8;
	--series-7: #f0a06a;
	--series-8: #9fb0c2;

	/* spacing — 4px grid */
	--s1: 4px;
	--s2: 8px;
	--s3: 12px;
	--s4: 16px;
	--s5: 20px;
	--s6: 24px;
	--s7: 32px;
	--s8: 40px;
	--s9: 56px;

	/* radii */
	--r1: 4px;
	--r2: 6px;
	--r3: 10px;
	--r4: 14px;
	--r-pill: 999px;

	/* elevation */
	--shadow-1: 0 1px 2px rgba(0, 0, 0, .28);
	--shadow-2: 0 4px 16px rgba(0, 0, 0, .34);
	--shadow-3: 0 18px 48px rgba(0, 0, 0, .48);

	/* type scale */
	--font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
	--t-display: 20px;
	--t-title: 15px;
	--t-section: 13px;
	--t-body: 13px;
	--t-label: 11px;
	--t-caption: 11px;
	--t-metric: 24px;
	--t-metric-sm: 18px;
	--lh-tight: 1.25;
	--lh-body: 1.55;

	/* layout */
	--page-max: 1680px;
	--page-pad: var(--s6);
	--topbar-h: 48px;

	--z-dialog: 100;
	--z-tooltip: 200;
}

@media (max-width: 1100px) {
	:root { --page-pad: var(--s4); }
}