/* =============================================================================
 * NVO Health  -  css/tokens.css
 * Design tokens: the single source of truth for color, type, spacing, radius,
 * and shadow. Pulled straight from the brand brief (sections 9-10, 37).
 * All component CSS in nvo.css references these variables.
 * ===========================================================================*/
:root {
	/* --- Brand color ------------------------------------------------------ */
	--navy:        #102A43;  /* header, footer, headings, dark panels */
	--navy-900:    #0B1E30;  /* deepest panel / hover */
	--teal:        #0F8B8D;  /* primary CTA, links, icons, active states */
	--teal-600:    #0C7476;  /* teal hover */
	--teal-050:    #E6F2F2;  /* teal tint backgrounds */
	--gold:        #D4AF37;  /* sparing accent: Get Started, highlights */
	--gold-600:    #B9962B;

	/* --- Neutrals --------------------------------------------------------- */
	--bg:          #F3F5F7;  /* off-white page background */
	--white:       #FFFFFF;
	--text:        #172B3A;  /* dark body text */
	--slate:       #5C6B78;  /* medium/secondary text */
	--border:      #DCE3E8;  /* light borders */

	/* --- Status ----------------------------------------------------------- */
	--success:     #2E8B70;
	--warning:     #B7791F;
	--error:       #B94A48;

	/* --- Typography ------------------------------------------------------- */
	--font-head: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	--fs-eyebrow: 0.75rem;   /* small uppercase section labels */
	--fs-body:    1rem;
	--fs-lead:    1.125rem;
	--fs-h3:      1.375rem;
	--fs-h2:      2rem;
	--fs-h1:      3.25rem;

	--lh-tight:   1.15;
	--lh-body:    1.65;

	/* --- Spacing scale (8px base) ---------------------------------------- */
	--s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
	--s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;

	/* --- Radius ----------------------------------------------------------- */
	--r-sm: 6px;  --r-md: 10px; --r-lg: 16px; --r-pill: 999px;

	/* --- Shadow (soft, per visual direction) ----------------------------- */
	--shadow-sm: 0 1px 2px rgba(16,42,67,.06);
	--shadow-md: 0 6px 20px rgba(16,42,67,.08);
	--shadow-lg: 0 18px 48px rgba(16,42,67,.14);

	/* --- Layout ----------------------------------------------------------- */
	--container: 1400px;
	--header-h:  86px;
}