/* ==========================================================================
   Design tokens
   Palette: petrol ink + brick signal + amber marker on cool paper.
   Nothing below should be duplicated as a literal value elsewhere.
   ========================================================================== */

:root {
	/* Brand */
	--hp-color-primary: #17555f;
	--hp-color-primary-dark: #0e3b43;
	--hp-color-primary-soft: #e3edee;
	--hp-color-secondary: #24343d;
	--hp-color-accent: #a8433c;
	--hp-color-accent-dark: #82302b;
	--hp-color-signal: #d99a24;
	--hp-color-signal-soft: #fbf1dc;

	/* Text */
	--hp-color-text: #16242b;
	--hp-color-text-muted: #56666e;
	--hp-color-text-invert: #f4f7f7;

	/* Surfaces */
	--hp-color-background: #ffffff;
	--hp-color-canvas: #f1f4f4;
	--hp-color-surface: #ffffff;
	--hp-color-surface-alt: #e9eeee;
	--hp-color-border: #d6dedf;
	--hp-color-border-strong: #b3c0c2;

	/* State */
	--hp-color-success: #1e6b53;
	--hp-color-warning: #9a6410;
	--hp-color-error: #96302b;
	--hp-color-focus: #0f7d94;

	/* Type */
	--hp-font-display: "Iowan Old Style", "Palatino Linotype", "URW Palladio L", P052, Palatino, Georgia, "Times New Roman", serif;
	--hp-font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--hp-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	--hp-text-3xs: 0.6875rem;
	--hp-text-2xs: 0.75rem;
	--hp-text-xs: 0.8125rem;
	--hp-text-sm: 0.9375rem;
	--hp-text-base: 1.0625rem;
	--hp-text-md: 1.1875rem;
	--hp-text-lg: 1.375rem;
	--hp-text-xl: 1.625rem;
	--hp-text-2xl: 2rem;
	--hp-text-3xl: 2.5rem;
	--hp-text-4xl: 3.125rem;

	--hp-leading-tight: 1.15;
	--hp-leading-snug: 1.3;
	--hp-leading-normal: 1.55;
	--hp-leading-relaxed: 1.72;

	/* Space */
	--hp-space-3xs: 0.25rem;
	--hp-space-2xs: 0.5rem;
	--hp-space-xs: 0.75rem;
	--hp-space-sm: 1rem;
	--hp-space-md: 1.5rem;
	--hp-space-lg: 2.25rem;
	--hp-space-xl: 3.25rem;
	--hp-space-2xl: 4.5rem;
	--hp-space-3xl: 6rem;

	/* Radius: restrained, hierarchical - large surfaces stay squarer */
	--hp-radius-sm: 2px;
	--hp-radius-md: 4px;
	--hp-radius-lg: 8px;
	--hp-radius-pill: 999px;

	/* Elevation: used sparingly, only for things that genuinely float */
	--hp-shadow-sm: 0 1px 2px rgba(22, 36, 43, 0.08);
	--hp-shadow-md: 0 6px 18px -8px rgba(22, 36, 43, 0.28);
	--hp-shadow-lg: 0 20px 44px -22px rgba(22, 36, 43, 0.45);

	/* Layout */
	--hp-container: 1240px;
	--hp-container-narrow: 760px;
	--hp-container-wide: 1440px;
	--hp-gutter: 1.25rem;
	--hp-header-height: 68px;
	--hp-rule: 1px solid var(--hp-color-border);

	--hp-transition: 160ms ease;
}

@media (min-width: 768px) {
	:root {
		--hp-gutter: 2rem;
		--hp-header-height: 76px;
	}
}

/* Opt-in dark mode. Never forced: the toggle sets data-hp-scheme. */
@media (prefers-color-scheme: dark) {
	:root:not([data-hp-scheme="light"]) {
		--hp-color-text: #e6edee;
		--hp-color-text-muted: #a5b4b7;
		--hp-color-background: #101a1e;
		--hp-color-canvas: #162327;
		--hp-color-surface: #18272c;
		--hp-color-surface-alt: #1e3037;
		--hp-color-border: #2c4149;
		--hp-color-border-strong: #3d565f;
		--hp-color-primary: #6fb3bd;
		--hp-color-primary-dark: #97cdd5;
		--hp-color-primary-soft: #1c3238;
		--hp-color-accent: #e08079;
		--hp-color-accent-dark: #f0a49e;
		--hp-color-signal: #e8b957;
		--hp-color-signal-soft: #2d2513;
	}
}

:root[data-hp-scheme="dark"] {
	--hp-color-text: #e6edee;
	--hp-color-text-muted: #a5b4b7;
	--hp-color-background: #101a1e;
	--hp-color-canvas: #162327;
	--hp-color-surface: #18272c;
	--hp-color-surface-alt: #1e3037;
	--hp-color-border: #2c4149;
	--hp-color-border-strong: #3d565f;
	--hp-color-primary: #6fb3bd;
	--hp-color-primary-dark: #97cdd5;
	--hp-color-primary-soft: #1c3238;
	--hp-color-accent: #e08079;
	--hp-color-accent-dark: #f0a49e;
	--hp-color-signal: #e8b957;
	--hp-color-signal-soft: #2d2513;
}