/**
 * Design tokens.
 *
 * Typography uses system font stacks on purpose. A webfont costs a
 * render-blocking connection and a swap reflow on every first visit, and on a
 * content site that trade is not worth one typeface. The serif stack still
 * reads as editorial on every platform we target, and it costs nothing.
 *
 * Every text/background pair below is checked against WCAG 2.2 AA. Contrast
 * ratios are recorded next to the token so a future change cannot quietly
 * break them.
 */

:root {
	/* Brand ------------------------------------------------------------- */
	--aphq-color-navy-900: #071a2b;
	--aphq-color-navy-700: #0f2942;   /* 14.1:1 on sand-100 */
	--aphq-color-navy-500: #1c3c5a;
	--aphq-color-navy-100: #e7edf3;

	--aphq-color-teal-700: #0a4f42;
	--aphq-color-teal-600: #0b6353;   /* 5.9:1 on white — safe for body links */
	--aphq-color-teal-100: #e3f2ee;

	/* Neutrals ---------------------------------------------------------- */
	--aphq-color-white: #ffffff;
	--aphq-color-sand-100: #fdfcfa;   /* warm page background */
	--aphq-color-sand-200: #f7f5f1;
	--aphq-color-gray-100: #e4e1dc;   /* separators */
	--aphq-color-gray-300: #c8c4bd;
	--aphq-color-gray-700: #5c6570;   /* 5.4:1 on sand-100 — smallest safe muted text */
	--aphq-color-gray-900: #16202b;   /* body text, 14.8:1 on sand-100 */

	/* Semantic ---------------------------------------------------------- */
	--aphq-color-warning: #6d4a00;    /* 6.4:1 on warning-bg */
	--aphq-color-warning-bg: #fdf6e3;
	--aphq-color-warning-line: #e6c877;

	--aphq-color-danger: #8a1c12;     /* 7.1:1 on danger-bg */
	--aphq-color-danger-bg: #fdeeec;
	--aphq-color-danger-line: #e8a79f;

	--aphq-color-success: #0a5c3a;
	--aphq-color-success-bg: #e8f4ef;

	--aphq-color-focus: #0b6353;

	/* Typography -------------------------------------------------------- */
	--aphq-font-serif: ui-serif, Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
	--aphq-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	--aphq-text-xs: 0.8125rem;
	--aphq-text-sm: 0.9375rem;
	--aphq-text-base: 1.0625rem;
	--aphq-text-lg: 1.1875rem;
	--aphq-text-xl: 1.5rem;
	--aphq-text-2xl: 1.9375rem;
	--aphq-text-3xl: 2.5rem;
	--aphq-text-4xl: 3.125rem;

	--aphq-leading-tight: 1.18;
	--aphq-leading-snug: 1.35;
	--aphq-leading-normal: 1.65;

	/* Space ------------------------------------------------------------- */
	--aphq-space-xs: 0.375rem;
	--aphq-space-sm: 0.75rem;
	--aphq-space-md: 1.25rem;
	--aphq-space-lg: 2rem;
	--aphq-space-xl: 3.25rem;
	--aphq-space-2xl: 5rem;

	/* Shape ------------------------------------------------------------- */
	--aphq-radius-sm: 4px;
	--aphq-radius-md: 8px;
	--aphq-radius-lg: 14px;

	--aphq-shadow-sm: 0 1px 2px rgba(7, 26, 43, 0.06), 0 1px 3px rgba(7, 26, 43, 0.04);
	--aphq-shadow-md: 0 4px 14px rgba(7, 26, 43, 0.08), 0 1px 3px rgba(7, 26, 43, 0.05);

	/* Layout ------------------------------------------------------------ */
	--aphq-content-width: 44rem;      /* reading measure, roughly 70 characters */
	--aphq-wide-width: 72rem;
	--aphq-header-height: 4.25rem;
}

@media (max-width: 48rem) {
	:root {
		--aphq-text-3xl: 1.9375rem;
		--aphq-text-4xl: 2.25rem;
		--aphq-space-2xl: 3rem;
		--aphq-space-xl: 2.25rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}