/*
 * Design tokens from the Figma file (Color collection, Light + Dark modes).
 * Light is the base. Dark applies when the visitor's device asks for it and
 * they have not chosen light, or when they choose dark with the toggle.
 */
:root {
	color-scheme: light;
	--px-page: #f6f7f5;
	--px-surface: #ffffff;
	--px-subtle: #e3eeeb;
	--px-footer: #1f2a2b;
	--px-text: #232b2c;
	--px-text-2: #5e6b6a;
	--px-text-2-sand: #4f5b5a; /* secondary text on sand surfaces: 5.6:1 (text-2 is 4.4:1 there) */
	--px-on-accent: #ffffff;
	--px-on-footer: #dce5e2;
	--px-accent: #2c6a69;
	--px-accent-hover: #235857;
	--px-border: #dce3e0;
	--px-border-strong: #6f8380;
	--px-focus: #2c6a69;
	--px-status-open: #2e7d4f;
	--px-error: #b42318;
	--px-sand-soft: #efe3d0;
	--px-sand: #d9b48f;
	--px-mark-stem: #b08a63; /* logo mark: the stem stroke */
	--px-sea-soft: #dcedea;
	--px-coral-soft: #f6ded3;
	--px-radius-sm: 6px;
	--px-radius-md: 10px;
	--px-radius-lg: 16px;
	--px-radius-xl: 24px;
	--px-radius-2xl: 32px;
	--px-content: 1120px;
	--px-gutter: clamp(20px, 6.7vw, 96px);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		color-scheme: dark;
		--px-page: #131b1c;
		--px-surface: #1a2426;
		--px-subtle: #1f3432;
		--px-footer: #0d1314;
		--px-text: #e3ebe8;
		--px-text-2: #9fb0ad;
		--px-text-2-sand: #9fb0ad;
		--px-on-accent: #0f1a1a;
		--px-on-footer: #a9b8b5;
		--px-accent: #7ec0b7;
		--px-accent-hover: #9bd0c9;
		--px-border: #2a3a3b;
		--px-border-strong: #6c8384;
		--px-focus: #7ec0b7;
		--px-status-open: #4cb27a;
		--px-error: #f28b80;
		--px-sand-soft: #302a23;
		--px-sand: #b89470;
		--px-mark-stem: #d9b48f;
		--px-sea-soft: #1f3432;
		--px-coral-soft: #2b2626;
	}
}

:root[data-theme="dark"] {
	color-scheme: dark;
	--px-page: #131b1c;
	--px-surface: #1a2426;
	--px-subtle: #1f3432;
	--px-footer: #0d1314;
	--px-text: #e3ebe8;
	--px-text-2: #9fb0ad;
	--px-text-2-sand: #9fb0ad;
	--px-on-accent: #0f1a1a;
	--px-on-footer: #a9b8b5;
	--px-accent: #7ec0b7;
	--px-accent-hover: #9bd0c9;
	--px-border: #2a3a3b;
	--px-border-strong: #6c8384;
	--px-focus: #7ec0b7;
	--px-status-open: #4cb27a;
	--px-error: #f28b80;
	--px-sand-soft: #302a23;
	--px-sand: #b89470;
	--px-mark-stem: #d9b48f;
	--px-sea-soft: #1f3432;
	--px-coral-soft: #2b2626;
}