/**
 * NPHI design tokens.
 *
 * Visual language aligned to the approved NPHI homepage design (teal +
 * ember accent, Inter/Jakarta type). Single source of truth: components
 * reference these variables, never raw values.
 *
 * Font strategy: Inter + Plus Jakarta Sans via Google Fonts (enqueued in
 * inc/enqueue.php), system fallbacks when offline.
 *
 * Breakpoints (documented here; CSS variables cannot drive @media):
 *   --bp-sm: 36rem (576px)   --bp-md: 48rem (768px)
 *   --bp-lg: 64rem (1024px)  --bp-xl: 80rem (1280px)
 */

:root {
	/* Typography. */
	--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-display: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--font-serif: "Charter", "Bitstream Charter", "Sitka Text", Cambria, Georgia, "Times New Roman", serif;
	--font-mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, "Liberation Mono", monospace;

	/* Type scale. Body-first; display sizes are fluid via clamp. */
	--text-xs: 0.75rem;
	--text-sm: 0.875rem;
	--text-base: 1rem;
	--text-lg: 1.125rem;
	--text-xl: 1.25rem;
	--text-2xl: clamp(1.375rem, 1.2rem + 0.8vw, 1.625rem);
	--text-3xl: clamp(1.625rem, 1.35rem + 1.4vw, 2.125rem);
	--text-4xl: clamp(2rem, 1.6rem + 2.2vw, 2.75rem);

	--leading-tight: 1.15;
	--leading-snug: 1.3;
	--leading-normal: 1.6;
	--leading-loose: 1.75;

	/* Color. Deep-teal primary scale, ember accent, cool neutrals. */
	--color-paper: #ffffff;
	--color-surface: #ffffff;
	--color-surface-tint: #f3f4f6;
	--color-ink: #1f2937;
	--color-muted: #4b5563;
	--color-faint: #9ca3af;
	--color-line: #e5e7eb;
	--color-line-strong: #d1d5db;

	--color-primary: #1a6b6b;
	--color-primary-deep: #0a2e2e;
	--color-primary-tint: #eef8f8;
	--color-on-primary: #ffffff;

	--color-accent: #e8652a;
	--color-accent-tint: #fdeee4;

	--color-success: #16a34a;
	--color-success-bg: #dcfce7;
	--color-warning: #d97706;
	--color-warning-bg: #fef3c7;
	--color-danger: #b3261e;
	--color-danger-bg: #f9e8e6;
	--color-info: #2563eb;
	--color-info-bg: #dbeafe;

	/* Borders, radius, shadows. Restrained by policy: thin borders carry
	   the structure; shadows appear only on raised/hover states. */
	--border-width: 1px;
	--radius-sm: 6px;
	--radius-md: 10px;
	--radius-lg: 14px;
	--radius-full: 999px;

	--shadow-sm: 0 1px 2px rgba(28, 35, 33, 0.06);
	--shadow-md: 0 2px 8px rgba(28, 35, 33, 0.08);

	/* Focus ring, shared by links, buttons, and form fields. */
	--focus-ring: 0 0 0 3px rgba(26, 107, 107, 0.3);

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

	/* Containers and measure. */
	--container-narrow: 44rem;
	--container-content: 62rem;
	--container-wide: 80rem;
	--measure: 68ch;
	--gutter: clamp(1rem, 4vw, 1.5rem);
}