/* Design tokens. Everything else in the cascade references these — no raw colour
   or spacing values anywhere below this file.

   Contrast is deliberately high throughout: the field screens are read on a phone
   held at arm's length, outdoors, in snow glare, often through sunglasses. Every
   text/background pair here clears WCAG AA at its intended size. */

:root {
	/* --- Palette ------------------------------------------------------- */
	--c-bg: #f4f6f8;
	--c-surface: #ffffff;
	--c-surface-sunken: #eceff2;

	--c-text: #14181c;
	--c-text-muted: #55606b;
	--c-text-inverse: #ffffff;

	--c-border: #c8d0d8;
	--c-border-strong: #94a1ae;

	/* Alpine blue. Dark enough that white text on it clears AA. */
	--c-primary: #17578a;
	--c-primary-hover: #10405f;
	--c-primary-subtle: #e4eef6;

	--c-focus: #b8500a;

	/* --- Semantic ------------------------------------------------------ */
	--c-success: #1f6b3a;
	--c-success-subtle: #e2f2e8;
	--c-warning: #8a5a00;
	--c-warning-subtle: #fbf0d9;
	--c-danger: #a3221f;
	--c-danger-subtle: #fbe6e5;
	--c-info: var(--c-primary);
	--c-info-subtle: var(--c-primary-subtle);

	/* --- Position status (ARCHITECTURE §9.2) --------------------------- */
	--c-status-open: #55606b;
	--c-status-done: var(--c-success);
	--c-status-moved: var(--c-warning);
	--c-status-problem: var(--c-danger);
	--c-status-cancelled: #7a828b;

	/* --- Spacing: 4px base --------------------------------------------- */
	--s-1: 0.25rem;
	--s-2: 0.5rem;
	--s-3: 0.75rem;
	--s-4: 1rem;
	--s-5: 1.5rem;
	--s-6: 2rem;
	--s-7: 3rem;
	--s-8: 4rem;

	/* --- Typography ---------------------------------------------------- */
	/* System stack: no web font to download, and nothing for CSP to block. */
	--font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
		Arial, sans-serif;
	--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

	--fs-sm: 0.875rem;
	--fs-base: 1rem;
	--fs-lg: 1.125rem;
	--fs-xl: 1.375rem;
	--fs-2xl: 1.75rem;

	--lh-tight: 1.25;
	--lh-base: 1.55;

	/* --- Shape --------------------------------------------------------- */
	--radius: 0.375rem;
	--radius-lg: 0.625rem;

	--shadow: 0 1px 2px rgb(20 24 28 / 0.08), 0 2px 8px rgb(20 24 28 / 0.06);
	--shadow-lg: 0 4px 12px rgb(20 24 28 / 0.12);

	/* --- Layout -------------------------------------------------------- */
	--width-content: 44rem;
	--width-wide: 78rem;

	/* Minimum tap target. Gloves, cold hands, a moving chairlift. */
	--tap-min: 2.75rem;
}