/* ------------------------------------------------------------------------------------------
   One family, two grounds.

   The desk and the public site read from this file, so a colour is decided once. The values
   are Hibir's: the red primary as the one accent — hsl(0 72.2% 50.6%) light, hsl(346 87% 55%)
   dark — a scale of cool greys, Poppins. Light is the default —
   a public site read on phones in daylight — and dark is one attribute away: `data-theme="dark"`
   on <html>, or the visitor's own system preference when no choice has been stored.

   Every colour here was measured: accent text clears 4.5:1 on its ground, white on the solid
   button clears 4.5:1, and the muted tone stays above 4.5:1 on both the page and the card.
   ------------------------------------------------------------------------------------------ */

:root {
	color-scheme: light;
	--cr-font: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
	/* the one curve things settle on: quick off the mark, a long soft arrival */
	--cr-ease: cubic-bezier(.2, .7, .3, 1);

	/* grounds */
	--cr-page: #f5f5f8;
	--cr-card: #ffffff;
	--cr-card-2: #ededf2;
	--cr-line: #e1e2e9;
	--cr-line-soft: #ebecf1;

	/* ink */
	--cr-ink: #1a1b22;
	--cr-ink-2: #3a3b46;
	--cr-muted: #5c5e6b;
	--cr-faint: #62646f;

	/* red: text takes the deeper step so it reads on white; the solid button the brighter.
	   --primary itself is the button ground; as text it measures 4.44:1 on the page, just under
	   the 4.5:1 a link has to clear, so links and eyebrows take one step down. */
	--cr-accent: #b91c1c;
	--cr-accent-text: #b91c1c;   /* links and eyebrows: 6.5:1 on white, 5.9:1 on the page */
	--cr-accent-solid: #dc2626;  /* --primary, hsl(0 72.2% 50.6%): white on it clears 4.8:1 */
	--cr-accent-hover: #b91c1c;
	--cr-accent-active: #991b1b;
	--cr-accent-soft: #fee2e2;
	--cr-accent-ink: #ffffff;
	--cr-on-accent: #ffffff;

	/* status, reserved */
	--cr-good: #1e7d4f;
	--cr-good-text: #17693f;    /* 5:1 on its own soft tint */
	--cr-good-soft: #e2f2e9;
	--cr-warn: #e39a00;          /* a button ground: dark ink on it clears 6:1 */
	--cr-warn-text: #8a5a00;
	--cr-warn-soft: #f6ecd8;
	--cr-danger: #b3261e;
	--cr-danger-soft: #fbe9e7;

	/* the footer is always dark: the one place both grounds agree */
	--cr-footer-bg: #1a1b22;
	--cr-footer-fg: #c9cad2;
	--cr-footer-muted: #9a9ba6;
	--cr-footer-line: #33343d;

	/* a field is recessed into its card and edged */
	--cr-field: #ffffff;
	--cr-field-border: #c6c8d1;
	--cr-field-ring: rgba(220, 38, 38, .25);

	--cr-rail-w: 56px;
	--cr-rail-w-open: 192px;
}

/* the dark ground, twice: once for the stored choice, once for the system preference */
:root[data-theme="dark"] {
	color-scheme: dark;
	--cr-page: #2a2d37;
	--cr-card: #363845;
	--cr-card-2: #3d3f4d;
	--cr-line: #424248;
	--cr-line-soft: #3b3c44;
	--cr-ink: #f2f2f2;
	--cr-ink-2: #d5d5db;
	--cr-muted: #adadb6;
	--cr-faint: #a1a1aa;
	--cr-accent: #f02857;        /* --primary, hsl(346 87% 55%) */
	--cr-accent-text: #ff8fa8;   /* 4.6:1 on the card, 5.3:1 on the page */
	--cr-accent-solid: #e11d48;  /* the button keeps --ring's value: white on --primary is 4.1:1 */
	--cr-accent-hover: #f02857;
	--cr-accent-active: #be123c;
	--cr-accent-soft: rgba(240, 40, 87, .14);
	--cr-good: #25a244;
	--cr-good-text: #7bd88f;
	--cr-good-soft: rgba(37, 162, 68, .18);
	--cr-warn: #fab219;
	--cr-warn-text: #fab219;
	--cr-warn-soft: rgba(250, 178, 25, .16);
	--cr-danger: #f57f7f;
	--cr-danger-soft: rgba(245, 127, 127, .16);
	--cr-footer-bg: #202229;
	--cr-footer-fg: #c9cad2;
	--cr-footer-muted: #9a9ba6;
	--cr-footer-line: #33343d;
	--cr-field: #24262f;
	--cr-field-border: #5a5c6c;
	--cr-field-ring: rgba(240, 40, 87, .3);
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		color-scheme: dark;
		--cr-page: #2a2d37;
		--cr-card: #363845;
		--cr-card-2: #3d3f4d;
		--cr-line: #424248;
		--cr-line-soft: #3b3c44;
		--cr-ink: #f2f2f2;
		--cr-ink-2: #d5d5db;
		--cr-muted: #adadb6;
		--cr-faint: #a1a1aa;
		--cr-accent: #f02857;        /* --primary, hsl(346 87% 55%) */
		--cr-accent-text: #ff8fa8;
		--cr-accent-solid: #e11d48;  /* the button keeps --ring's value: white on --primary is 4.1:1 */
		--cr-accent-hover: #f02857;
		--cr-accent-active: #be123c;
		--cr-accent-soft: rgba(240, 40, 87, .14);
		--cr-good: #25a244;
		--cr-good-text: #7bd88f;
		--cr-good-soft: rgba(37, 162, 68, .18);
		--cr-warn: #fab219;
		--cr-warn-text: #fab219;
		--cr-warn-soft: rgba(250, 178, 25, .16);
		--cr-danger: #f57f7f;
		--cr-danger-soft: rgba(245, 127, 127, .16);
		--cr-footer-bg: #202229;
		--cr-footer-fg: #c9cad2;
		--cr-footer-muted: #9a9ba6;
		--cr-footer-line: #33343d;
		--cr-field: #24262f;
		--cr-field-border: #5a5c6c;
		--cr-field-ring: rgba(240, 40, 87, .3);
	}
}