/*
 * MergeReady design tokens.
 * World: public wayfinding. Porcelain ground, sign-black bands, one yellow for people,
 * signal green for verified, signal red for refused. Every pair below is checked for
 * WCAG 2.2 AA contrast; the numbers in the comments are against the ground they sit on.
 */
:root {
	color-scheme: light;

	/* Ground and ink */
	--ground: #f4f4f2; /* porcelain: the page */
	--panel: #ffffff; /* enamel: raised surfaces, the pack */
	--sunk: #e8e8e4; /* platform grey: one step down */
	--quiet: #e8e8e4; /* a quiet control's fill: platform grey on a light surface */
	--ink: #121212; /* sign black: 17.0:1 on ground */
	--muted: #5c5c56; /* 6.1:1 on ground, 5.5:1 on sunk */
	--rule: #d9d9d5; /* app screens only: rows and panels */
	--rule-strong: #c6c6c0; /* dividers between controls; not a control's edge */
	--control-edge: #808079; /* the edge of a field or an off switch: 3.2:1 or more on every light surface */
	--focus-in: #f4f4f2; /* focus ring, inner band: the same in both themes */
	--focus-out: #121212; /* focus ring, outer band: one of the two always shows */
	--band: #121212; /* the signage band */
	--band-ink: #f4f4f2;
	--band-muted: #a8a8a0; /* 7.8:1 on band */

	/* Signal colours. Each one means one thing, everywhere. */
	--yellow: #ffcc00; /* people: a decision only a person makes. Text on it is --ink (12.4:1) */
	--yellow-ink: #121212;
	--green: #00703f; /* verified: the full suite ran in a clean sandbox. 5.6:1 on ground */
	--green-fill: #00703f;
	--green-on: #ffffff; /* 6.2:1 */
	--red: #c4161c; /* refused, protected, handed back, stop. 5.5:1 on ground */
	--red-on: #ffffff; /* 6.0:1 */
	--grey: #6b6b66; /* paused, inactive marks (not for text on --sunk) */

	/* Person tints: identity, not data. Pale, out of charts. */
	--tint-priya: #e6eefc;
	--tint-amit: #fdeedd;
	--tint-jonas: #e3f3ea;
	--tint-mei: #f6e6f1;
	--tint-grace: #e9f1f3;
	--tint-tomas: #f3efdc;

	/* Type */
	--font-sign: "Barlow Condensed", "Barlow", "Arial Narrow", system-ui, sans-serif;
	--font-text: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-code: "Overpass Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

	--step-display: clamp(3.25rem, 1.6rem + 6.6vw, 8.5rem); /* hero, posters, the figure */
	--step-h2: clamp(2.25rem, 1.55rem + 2.6vw, 3.75rem);
	--step-lead: clamp(1.25rem, 1.12rem + 0.45vw, 1.5rem);
	--step-body: 1.125rem; /* 18px */
	--step-small: 0.875rem; /* 14px; nothing below 13px */

	/* App-screen scale (Operate surfaces) */
	--app-title: 1.5rem; /* 24px noun title */
	--app-body: 0.9375rem; /* 15px */
	--app-meta: 0.8125rem; /* 13px */
	--app-figure: 1.75rem; /* 28px */

	/* Space: 4px base */
	--s1: 0.25rem;
	--s2: 0.5rem;
	--s3: 0.75rem;
	--s4: 1rem;
	--s5: 1.5rem;
	--s6: 2rem;
	--s7: 3rem;
	--s8: 4rem;
	--s9: 6rem;
	--s10: 9rem;
	--margin: clamp(1rem, 0.6rem + 1.8vw, 2rem); /* one pair of outer margins, everywhere */
	--section-gap: clamp(6rem, 3rem + 9vw, 12rem);

	/* Shape: signs have square corners; route bullets are circles. Nothing in between. */
	--radius: 2px;
	--pill: 999px;
	--line: 0.375rem; /* route line weight at text size (6px) */

	/* Motion */
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
	--t-fast: 140ms;
	--t-mid: 260ms;
	--t-slow: 600ms;

	/* Focus */
	--focus: 0 0 0 3px var(--ground), 0 0 0 6px var(--ink);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		color-scheme: dark;
		--ground: #121212;
		--panel: #1c1c1a;
		--sunk: #0a0a0a;
		--quiet: #2c2c29; /* a step up from a dark panel: a dark control must not read as a hole */
		--ink: #f4f4f2;
		--muted: #a8a8a0; /* 7.8:1 */
		--rule: #2e2e2b;
		--rule-strong: #46463f;
		--control-edge: #76766f;
		--band: #000000;
		--band-ink: #f4f4f2;
		--band-muted: #a8a8a0;
		--green: #3fbf7f; /* 8.0:1 */
		--green-fill: #1f8a54;
		--green-on: #ffffff;
		--red: #ff7a6e; /* 7.4:1 */
		--red-on: #121212;
		--grey: #8c8c85;
		--tint-priya: #1f2a3d;
		--tint-amit: #3a2a17;
		--tint-jonas: #183022;
		--tint-mei: #33202d;
		--tint-grace: #1b2b2f;
		--tint-tomas: #302a14;
	}
}

:root[data-theme="dark"] {
	color-scheme: dark;
	--ground: #121212;
	--panel: #1c1c1a;
	--sunk: #0a0a0a;
	--quiet: #2c2c29; /* a step up from a dark panel: a dark control must not read as a hole */
	--ink: #f4f4f2;
	--muted: #a8a8a0;
	--rule: #2e2e2b;
	--rule-strong: #46463f;
	--control-edge: #76766f;
	--band: #000000;
	--band-ink: #f4f4f2;
	--band-muted: #a8a8a0;
	--green: #3fbf7f;
	--green-fill: #1f8a54;
	--green-on: #ffffff;
	--red: #ff7a6e;
	--red-on: #121212;
	--grey: #8c8c85;
	--tint-priya: #1f2a3d;
	--tint-amit: #3a2a17;
	--tint-jonas: #183022;
	--tint-mei: #33202d;
	--tint-grace: #1b2b2f;
	--tint-tomas: #302a14;
}