/*
 * tokens.css — the only file in this theme that names a colour.
 *
 * If you are changing how the site looks, you are changing this file and nothing else. It also owns
 * the spacing scale, the layout metrics and the focus metrics, so there is exactly one place with an
 * opinion about any of them and nothing to disagree with it.
 *
 * ⚠️ THE PALETTE IS DECLARED THREE TIMES ON PURPOSE (F-34).
 *
 *   1. :root                                   dark, the default (183)
 *   2. prefers-color-scheme: light, unforced    light for readers whose system says so
 *   3. [data-theme="light"] / [data-theme="dark"]   the manual toggle
 *
 * Block 3 must win in BOTH directions. Without it the toggle can only ever move a reader away from
 * their system preference and never back — which reads as "the button works once and then breaks".
 *
 * ⚠️ Nothing checks these three blocks against each other, so a tool has to: Appearance → Design
 * checks parses this file and asserts 4.5:1 for body text and 3:1 for large text and UI borders in
 * all three states. A foreground that passes on near-black and fails on white is the single most
 * likely mistake in a dual-palette theme, and it is invisible to anyone testing in one mode.
 */

/* ------------------------------------------------------------------ 1. Dark — the default. */
:root {
	--srt-bg: #0d141e;
	--srt-bg-elevated: #111a26;
	--srt-surface: #151e2b;
	--srt-surface-2: #1c2735;
	--srt-surface-hover: #22304180;
	--srt-border: #27344a;
	--srt-border-strong: #556a94;

	--srt-text: #e6edf6;
	--srt-text-muted: #9dadc2;
	--srt-text-faint: #7c8CA3;

	--srt-accent: #d9a441;
	--srt-accent-hover: #e6b558;
	--srt-accent-text: #e8b95c;
	--srt-on-accent: #1a1305;

	--srt-link: #8ab8ff;
	--srt-link-hover: #a9caff;

	--srt-danger: #c93a2e;
	--srt-on-danger: #ffffff;
	--srt-success: #3fae72;
	--srt-on-success: #05170d;
	--srt-info: #4a90d9;

	--srt-lawyer-bg: #1e2436;
	--srt-lawyer-border: #8a7233;

	--srt-focus: #8ab8ff;
	--srt-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.28);
	--srt-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
	--srt-overlay: rgba(4, 8, 14, 0.72);
}

/* -------------------------------------- 2. Light, for readers whose system asks for it. */
@media (prefers-color-scheme: light) {
	:root:not([data-theme="dark"]) {
		--srt-bg: #f4f6fa;
		--srt-bg-elevated: #ffffff;
		--srt-surface: #ffffff;
		--srt-surface-2: #eef2f8;
		--srt-surface-hover: #e6ecf5cc;
		--srt-border: #d5dde9;
		--srt-border-strong: #74869e;

		--srt-text: #111a26;
		--srt-text-muted: #52627a;
		--srt-text-faint: #64748b;

		--srt-accent: #b8862b;
		--srt-accent-hover: #a37623;
		--srt-accent-text: #7a5410;
		--srt-on-accent: #1a1305;

		--srt-link: #1b5fbd;
		--srt-link-hover: #14488f;

		--srt-danger: #c1352b;
		--srt-on-danger: #ffffff;
		--srt-success: #1f7a4c;
		--srt-on-success: #ffffff;
		--srt-info: #1b5fbd;

		--srt-lawyer-bg: #fbf6e9;
		--srt-lawyer-border: #957d3c;

		--srt-focus: #1b5fbd;
		--srt-shadow: 0 1px 2px rgba(16, 26, 40, 0.08), 0 8px 24px rgba(16, 26, 40, 0.08);
		--srt-shadow-sm: 0 1px 2px rgba(16, 26, 40, 0.1);
		--srt-overlay: rgba(16, 26, 40, 0.55);
	}
}

/* ------------------------- 3. The manual toggle. ⚠️ Must win in both directions. */
:root[data-theme="light"] {
	--srt-bg: #f4f6fa;
	--srt-bg-elevated: #ffffff;
	--srt-surface: #ffffff;
	--srt-surface-2: #eef2f8;
	--srt-surface-hover: #e6ecf5cc;
	--srt-border: #d5dde9;
	--srt-border-strong: #74869e;

	--srt-text: #111a26;
	--srt-text-muted: #52627a;
	--srt-text-faint: #64748b;

	--srt-accent: #b8862b;
	--srt-accent-hover: #a37623;
	--srt-accent-text: #7a5410;
	--srt-on-accent: #1a1305;

	--srt-link: #1b5fbd;
	--srt-link-hover: #14488f;

	--srt-danger: #c1352b;
	--srt-on-danger: #ffffff;
	--srt-success: #1f7a4c;
	--srt-on-success: #ffffff;
	--srt-info: #1b5fbd;

	--srt-lawyer-bg: #fbf6e9;
	--srt-lawyer-border: #957d3c;

	--srt-focus: #1b5fbd;
	--srt-shadow: 0 1px 2px rgba(16, 26, 40, 0.08), 0 8px 24px rgba(16, 26, 40, 0.08);
	--srt-shadow-sm: 0 1px 2px rgba(16, 26, 40, 0.1);
	--srt-overlay: rgba(16, 26, 40, 0.55);
}

:root[data-theme="dark"] {
	--srt-bg: #0d141e;
	--srt-bg-elevated: #111a26;
	--srt-surface: #151e2b;
	--srt-surface-2: #1c2735;
	--srt-surface-hover: #22304180;
	--srt-border: #27344a;
	--srt-border-strong: #556a94;

	--srt-text: #e6edf6;
	--srt-text-muted: #9dadc2;
	--srt-text-faint: #7c8ca3;

	--srt-accent: #d9a441;
	--srt-accent-hover: #e6b558;
	--srt-accent-text: #e8b95c;
	--srt-on-accent: #1a1305;

	--srt-link: #8ab8ff;
	--srt-link-hover: #a9caff;

	--srt-danger: #c93a2e;
	--srt-on-danger: #ffffff;
	--srt-success: #3fae72;
	--srt-on-success: #05170d;
	--srt-info: #4a90d9;

	--srt-lawyer-bg: #1e2436;
	--srt-lawyer-border: #8a7233;

	--srt-focus: #8ab8ff;
	--srt-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.28);
	--srt-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
	--srt-overlay: rgba(4, 8, 14, 0.72);
}

/* --------------------------------------------------------- Scales, shared by every palette. */
:root {
	--srt-space-3xs: 0.25rem;
	--srt-space-2xs: 0.375rem;
	--srt-space-xs: 0.5rem;
	--srt-space-sm: 0.75rem;
	--srt-space-md: 1rem;
	--srt-space-lg: 1.5rem;
	--srt-space-xl: 2rem;
	--srt-space-2xl: 3rem;

	--srt-radius-sm: 6px;
	--srt-radius: 10px;
	--srt-radius-lg: 16px;
	--srt-radius-pill: 999px;

	--srt-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--srt-font-size: 1rem;
	--srt-line-height: 1.6;

	/* Layout metrics. theme.json used to claim a share of these; now there is one place. */
	--srt-wide: 1400px;
	--srt-content: 46rem;
	--srt-rail-width: 250px;
	--srt-utility-width: 310px;
	--srt-header-height: 64px;

	/*
	 * ⚠️ --srt-bar-height and the 640px breakpoint in layout.css are one decision. The bar hides at
	 * 640px and the body padding that clears it stops at 639px. Hiding the bar at a larger
	 * breakpoint leaves a band where a fixed bar sits on top of the footer with nothing making room
	 * for it.
	 */
	--srt-bar-height: 60px;

	--srt-thread-indent: 1.25rem;

	/* Focus. NF-06 232 wants this visible, not tasteful. */
	--srt-focus-width: 3px;
	--srt-focus-offset: 2px;
}