/* ────────────────────────────────────────────────────────────
   00-tokens.css — source of truth for all design tokens
   ──────────────────────────────────────────────────────────── */

:root {

	/* ── Colors: Primary ──────────────────────────────────── */
	--color-blue-primary:   #0099CC;
	--color-blue-dark:      #002F6C; 
	--color-orange-primary: #E55D25;
	--color-green-primary:  #00843D;
	--color-red-primary:    #A33439;
	--color-gray-primary:   #F4F4F4;

	/* ── Colors: Neutral ──────────────────────────────────── */
	--color-gray-soft:   #EEEEEE; /* background fill; NOT body text */
	--color-gray-stroke: #C3C3C3;
	--color-black-soft:  #1A1C1C; /* headings, heading-context accents */
	--color-gray-medium: #374151; /* headings, heading-context accents */
	--color-white:       #FFFFFF;

	/* ── Colors: Overlays ─────────────────────────────────── */
	--color-overlay-dark-slight: rgba(0, 0, 0, 0.10);
	--color-overlay-dark-heavy:  rgba(0, 0, 0, 0.70);
	--color-overlay-light-heavy: rgba(255, 255, 255, 0.85);

	/* Hero gradient-overlay stops.
	   Dark variant uses pure black, not navy — the design reference shows
	   a nearly opaque black wash on the content side of the hero that
	   fades to clear across the image. Navy at 65% looked like a blue
	   tint; black at 90% reads as deliberate shade. */
	--color-overlay-light:      rgba(255, 255, 255, 0.55);
	--color-overlay-light-fade: rgba(255, 255, 255, 0.15);
	--color-overlay-dark:       rgba(0, 0, 0, 0.93);
	--color-overlay-dark-fade:  rgba(0, 0, 0, 0.46);

	/* Semantic text-color aliases — use these in component rules
	   instead of the literal neutral tokens so intent is explicit. */
	--color-text-body:         var(--color-black-soft);
	--color-text-body-inverse: var(--color-white);
	--color-text-heading:      var(--color-blue-dark);
	--color-text-heading-alt:  var(--color-gray-medium);	

	/* ── Typography: Families ─────────────────────────────── */
	--font-primary: 'NeueHaasGroteskDisplay', 'Helvetica Neue', Arial, sans-serif;
	--font-body:    'NeueHaasGroteskText', 'Helvetica Neue', Arial, sans-serif;

	/* ── Typography: Fluid sizes (clamp(min, preferred, max)) ── */
	--text-display-xl: clamp(40px, 5vw,    60px); /* H1 — caps at 36px per design */
	--text-display-lg: clamp(28px, 3.5vw,  40px); /* H2 — caps at 36px per design */
	--text-heading-xl: clamp(28px, 3.5vw,  40px);
	--text-heading-lg: clamp(24px, 2vw,    32px); /* H3 — caps at 24px per design */
	--text-heading-md: clamp(20px, 2vw,    24px);
	--text-heading-sm: clamp(18px, 1.75vw, 20px);
	--text-body-xl:    clamp(18px, 1.5vw,  20px);
	--text-body-lg:    clamp(16px, 1.5vw,  18px);
	--text-body-base:  16px;
	--text-body-sm:    14px;
	--text-label:      12px;	

	/* ── Typography: Weights ──────────────────────────────── */
	--font-weight-regular: 400;
	--font-weight-medium:  600;
	--font-weight-bold:    700;

	/* ── Typography: Line heights ─────────────────────────── */
	--line-height-tight:   1.1;
	--line-height-snug:    1.25;
	--line-height-normal:  1.5;
	--line-height-loose:   1.6;
	--line-height-relaxed: 1.75; /* prose body copy — gap-flagged */

	/* ── Spacing scale ────────────────────────────────────── */
	--spacing-xxs:  4px;
	--spacing-xs:  8px;
	--spacing-sm:  16px;
	--spacing-md:  24px;
	--spacing-lg:  32px;
	--spacing-xl:  48px;
	--spacing-2xl: 64px;
	--spacing-3xl: 80px;
	--spacing-4xl: 96px;
	--spacing-5xl: 120px;

	/* ── Border radius ────────────────────────────────────── */
	--radius-none: 0;
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 12px;
	--radius-xl: 16px;

	/* ── Shadows ──────────────────────────────────────────── */
	--shadow-stat-card: 0 10px 15px -3px rgba(0, 0, 0, 0.10);
	--shadow-card:      0 4px 12px -2px rgba(0, 0, 0, 0.08);

	/* ── Breakpoints (for reference in JS / @media) ───────── */
	--breakpoint-mobile:  375px;
	--breakpoint-tablet:  768px;
	--breakpoint-desktop: 1024px;
	--breakpoint-wide:    1280px;

	/* ── Containers & content widths ──────────────────────── */
	--container-wide:      1280px;
	--container-max-width: 1140px;
	--container-narrow:    960px;	
	--container-full:      100vw;
	--hero-min-height:     70vh;

	/* Content-width constraints for text-heavy sections */
	--content-max-cta:   520px;
	--content-max-prose: 960px;

}