/**
 * SaveTheWeb — Samizdat brand tokens (#26).
 *
 * Source of truth: the two locked identity artifacts (Identity v2 + The Mark,
 * 2026-07-27). These are the BRAND PRIMITIVES only — the semantic shadcn vars
 * (`--background`, `--primary`, …) are mapped onto them in `app.css`, so every
 * shadcn component inherits the brand without per-component edits.
 *
 * ⛔ Do not use these primitives directly in components. Reach for the semantic
 * token or a `brand/` kit component, so a palette change stays a one-file change.
 *
 * ⚠️ The electric blue is #3D57FF, not #1E38FF. The two artifacts disagree: the
 * `m-weave` mark symbol and the lock record both say #3D57FF, while Identity v2's
 * palette swatch says #1E38FF. The mark is the thing people actually see, and it
 * agrees with the lock, so #3D57FF wins. See #26.
 */

:root {
	/* riso ink set — constant across modes; the MODE picks which pair is used */
	--stw-paper: #ece6d8;
	--stw-ink: #16130f;
	--stw-ink-deep: #141210;
	--stw-red: #f5432c;
	--stw-blue: #3d57ff;
	--stw-red-hi: #ff5a40;
	--stw-blue-hi: #5468ff;
	--stw-coral: #ff8a6e;

	/* mode-resolved roles — light (daylight / paper) */
	--stw-bg: var(--stw-paper);
	--stw-fg: var(--stw-ink);
	--stw-accent: var(--stw-red);
	--stw-accent-2: var(--stw-blue);
	/* Panels sit slightly ABOVE the paper rather than below it: on a warm ground a
	   darker card reads as a stain, a lighter one as a fresh sheet. */
	--stw-panel: #fbf9f3;
	--stw-muted: #6c665b;
	--stw-faint: #938c7f;
	--stw-line: rgb(28 26 34 / 0.14);

	/* Text that sits ON a filled accent, and the danger colour. These exist as
	   tokens purely so `app.css` needs ONE semantic block instead of a light one
	   and a near-identical dark one — the duplication that drifts. */
	/*
	 * Text that sits ON a filled accent. TWO tokens, not one, because the best
	 * foreground differs PER ACCENT — measured contrast (PR #27 review):
	 *
	 *            light                      dark
	 *   red      ink   5.04 ✅ (paper 2.95)  ink-deep 6.04 ✅ (paper 2.49)
	 *   blue     paper 4.21    (ink   3.53)  ink-deep 4.27    (paper 3.52)
	 *
	 * ⇒ Red PASSES WCAG AA once it is ink. ⚠️ Blue CANNOT reach 4.5:1 at badge text
	 * size with either foreground; 4.2–4.3 is the ceiling this locked palette
	 * allows. Kept as the best available and flagged for a design decision (darken
	 * the blue, or accept the exception) rather than silently shipping 2.5:1.
	 * The meaning is never carried by colour alone — every chip has an icon and a
	 * text label — so WCAG 1.4.1 holds; this is 1.4.3 only.
	 */
	--stw-on-accent: var(--stw-ink);
	--stw-on-accent-2: var(--stw-paper);
	--stw-destructive: oklch(0.505 0.19 25);
	/* How far `--muted` is pulled off the ground. Ink needs a touch more contrast
	   than paper for the same apparent step. */
	--stw-muted-mix: 88%;

	/* the −3° tilt the identity board specifies for display type + stamps */
	--stw-tilt: -3deg;
	/* the mark's own misregistration angle (it is -6°, NOT the type tilt) */
	--stw-mark-tilt: -6deg;
}

/*
 * Dark — "after dark / ink".
 *
 * ⚠️ The declarations are stated TWICE on purpose, and must stay in sync:
 *   1. `.dark` — an explicit choice, for when a toggle exists.
 *   2. the media query — so the dark half of the identity is reachable TODAY.
 *      Without it `.dark` was dead code: nothing in this app ever adds that
 *      class, so half a two-mode brand could never render (#26).
 *
 * `:not(.light)` leaves room for an explicit light override to win later.
 * CSS has no mixin, and the alternative — a style-query indirection — is harder
 * to read than eleven duplicated lines. If you edit one block, edit the other.
 */
.dark {
	--stw-bg: var(--stw-ink-deep);
	--stw-fg: var(--stw-paper);
	--stw-accent: var(--stw-red-hi);
	--stw-accent-2: var(--stw-blue-hi);
	--stw-panel: #1e1a16;
	--stw-muted: #a79f90;
	--stw-faint: #726a5c;
	--stw-line: rgb(236 230 216 / 0.14);
	--stw-on-accent: var(--stw-ink-deep);
	--stw-on-accent-2: var(--stw-ink-deep);
	--stw-destructive: oklch(0.68 0.2 25);
	--stw-muted-mix: 86%;
}

@media (prefers-color-scheme: dark) {
	:root:not(.light) {
		--stw-bg: var(--stw-ink-deep);
		--stw-fg: var(--stw-paper);
		--stw-accent: var(--stw-red-hi);
		--stw-accent-2: var(--stw-blue-hi);
		--stw-panel: #1e1a16;
		--stw-muted: #a79f90;
		--stw-faint: #726a5c;
		--stw-line: rgb(236 230 216 / 0.14);
		--stw-on-accent: var(--stw-ink-deep);
		--stw-on-accent-2: var(--stw-ink-deep);
		--stw-destructive: oklch(0.68 0.2 25);
		--stw-muted-mix: 86%;
	}
}