/* ==========================================================================
   True Aid — Design tokens
   The single source of truth for the visual system. Every value used
   anywhere else in the theme resolves back to a token declared here.
   Derived directly from the True Aid Brand Identity Guidelines and the
   Website Design Blueprint v1.0 (Phase 9, Design tokens).
   ========================================================================== */

:root {
	/* ---- Brand colour ---------------------------------------------- */
	--ta-blue: #134E9C;              /* Primary. Structure, trust, headings. */
	--ta-teal: #20A2B3;              /* Primary accent. Fills, graphics, large text. */

	/* Accessible derivatives.
	   #20A2B3 on white is 3.05:1 and white on #20A2B3 is 3.05:1 — both fail
	   WCAG AA for normal-size text. These darker variants keep the teal
	   character while passing 4.5:1. #20A2B3 remains in use for fills,
	   large text (24px+ / 19px bold), icons, motifs and branding. */
	--ta-teal-text: #12707C;         /* 5.8:1 on white. Teal text at body size. */
	--ta-teal-deep: #147F8C;         /* 4.7:1 with white. Solid button fill. */
	--ta-teal-deeper: #106874;       /* Button hover / active. */
	--ta-blue-deep: #0F3F80;         /* Blue hover / active. */
	--ta-blue-dark: #0C2F5F;         /* Deep sections, footer base. */

	/* ---- Surfaces --------------------------------------------------- */
	--ta-white: #FFFFFF;
	--ta-off-white: #FAFCFD;
	--ta-pale-blue: #EAF3FA;
	--ta-pale-teal: #E6F6F7;
	--ta-pale-blue-soft: #F4F8FC;

	/* ---- Text ------------------------------------------------------- */
	--ta-charcoal: #1F2933;          /* 14.7:1 on white. */
	--ta-muted: #5E6B76;             /* 5.7:1 on white. Verified for body size. */
	--ta-muted-light: #8695A2;       /* Captions on white only at 14px+ semibold. */
	--ta-on-dark: #FFFFFF;
	--ta-on-dark-muted: #C6D7EC;     /* 8.1:1 on --ta-blue. */

	/* ---- Lines and states ------------------------------------------- */
	--ta-border: #D6DEE6;
	--ta-border-strong: #B9C6D3;
	--ta-border-dark: rgba(255, 255, 255, .22);
	--ta-success: #2E7D5B;
	--ta-success-bg: #EAF6F0;
	--ta-error: #C43D3D;
	--ta-error-bg: #FCEDED;
	--ta-warning: #9A6608;
	--ta-warning-bg: #FDF4E3;
	--ta-info-bg: var(--ta-pale-blue);

	/* ---- Typography -------------------------------------------------- */
	--ta-font-display: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--ta-font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	--ta-fw-regular: 400;
	--ta-fw-medium: 500;
	--ta-fw-semibold: 600;
	--ta-fw-bold: 700;
	--ta-fw-extrabold: 800;

	/* Responsive scale. Lower bound = mobile, upper = large desktop. */
	--ta-fs-hero: clamp(2.625rem, 1.55rem + 3.6vw, 4.5rem);      /* 42 → 72 */
	--ta-fs-h1: clamp(2.25rem, 1.5rem + 2.6vw, 3.5rem);          /* 36 → 56 */
	--ta-fs-h2: clamp(2rem, 1.45rem + 1.9vw, 3rem);              /* 32 → 48 */
	--ta-fs-h3: clamp(1.5rem, 1.28rem + .78vw, 2.0625rem);       /* 24 → 33 */
	--ta-fs-h4: clamp(1.125rem, 1.05rem + .3vw, 1.375rem);       /* 18 → 22 */
	--ta-fs-stat: clamp(2.5rem, 1.6rem + 3vw, 4rem);             /* 40 → 64 */
	--ta-fs-lede: clamp(1.0625rem, 1rem + .3vw, 1.25rem);        /* 17 → 20 */
	--ta-fs-body: 1rem;
	--ta-fs-body-lg: 1.0625rem;
	--ta-fs-small: .875rem;
	--ta-fs-caption: .8125rem;
	--ta-fs-eyebrow: .8125rem;
	--ta-fs-button: .9375rem;
	--ta-fs-nav: .9375rem;

	--ta-lh-tight: 1.05;
	--ta-lh-heading: 1.14;
	--ta-lh-snug: 1.3;
	--ta-lh-body: 1.65;
	--ta-lh-relaxed: 1.75;

	--ta-ls-tight: -.022em;
	--ta-ls-heading: -.015em;
	--ta-ls-normal: 0;
	--ta-ls-eyebrow: .14em;

	/* ---- Spacing scale (blueprint: 4…144) ---------------------------- */
	--ta-space-1: .25rem;   /* 4  */
	--ta-space-2: .5rem;    /* 8  */
	--ta-space-3: .75rem;   /* 12 */
	--ta-space-4: 1rem;     /* 16 */
	--ta-space-5: 1.5rem;   /* 24 */
	--ta-space-6: 2rem;     /* 32 */
	--ta-space-7: 3rem;     /* 48 */
	--ta-space-8: 4rem;     /* 64 */
	--ta-space-9: 5rem;     /* 80 */
	--ta-space-10: 6.5rem;  /* 104 */
	--ta-space-11: 8rem;    /* 128 */
	--ta-space-12: 9rem;    /* 144 */

	/* Section rhythm scales with viewport rather than stepping at
	   breakpoints, which keeps the vertical composition continuous. */
	--ta-section-y: clamp(3.5rem, 2rem + 6vw, 9rem);
	--ta-section-y-sm: clamp(2.5rem, 1.6rem + 4vw, 5.5rem);
	--ta-gap-card: clamp(1rem, .6rem + 1.2vw, 1.5rem);
	--ta-gutter: clamp(1.25rem, .4rem + 3vw, 5rem);

	/* ---- Radius ------------------------------------------------------ */
	--ta-radius-sm: 8px;    /* Compact controls. */
	--ta-radius-md: 12px;   /* Cards and forms. */
	--ta-radius-lg: 18px;   /* Large media panels. */
	--ta-radius-xl: 24px;
	--ta-radius-pill: 999px;
	--ta-radius-card: 22px; /* v2 card surface. */

	/* v2 dark-emphasis surface: white text ≈ 9.5:1, brand teal labels ≈ 4.6:1. */
	--ta-ink-teal: #0C4E59;
	--ta-ink-teal-deep: #093B44;

	/* ---- Elevation --------------------------------------------------- */
	--ta-shadow-1: 0 4px 16px rgba(31, 41, 51, .06);
	--ta-shadow-2: 0 12px 32px rgba(31, 41, 51, .10);
	--ta-shadow-3: 0 24px 60px rgba(12, 47, 95, .16);
	--ta-shadow-header: 0 1px 0 var(--ta-border), 0 8px 24px rgba(31, 41, 51, .06);

	/* ---- Layout ------------------------------------------------------ */
	--ta-container: 1280px;
	--ta-container-wide: 1440px;
	--ta-container-narrow: 960px;
	--ta-measure: 68ch;         /* 55–75 characters. */
	--ta-reading: 720px;        /* Long-form article column. */

	/* ---- Header ------------------------------------------------------ */
	--ta-header-h: 84px;
	--ta-header-h-scrolled: 70px;
	--ta-header-h-mobile: 68px;

	/* ---- Motion ------------------------------------------------------ */
	--ta-motion-fast: 160ms;
	--ta-motion-base: 240ms;
	--ta-motion-slow: 420ms;
	--ta-ease: cubic-bezier(.22, .61, .36, 1);
	--ta-ease-out: cubic-bezier(.16, 1, .3, 1);

	/* ---- Focus ------------------------------------------------------- */
	--ta-focus-width: 3px;
	--ta-focus-offset: 3px;
	--ta-focus-color: var(--ta-blue);
	--ta-focus-halo: rgba(19, 78, 156, .25);

	/* ---- Icons ------------------------------------------------------- */
	--ta-icon-xs: 16px;
	--ta-icon-sm: 20px;
	--ta-icon-md: 24px;
	--ta-icon-lg: 32px;
	--ta-icon-xl: 40px;
	--ta-icon-2xl: 48px;
	--ta-icon-stroke: 1.8;

	/* ---- Controls ---------------------------------------------------- */
	--ta-control-h: 48px;
	--ta-control-h-sm: 40px;
	--ta-tap-target: 44px;

	/* ---- Layers ------------------------------------------------------ */
	--ta-z-base: 1;
	--ta-z-motif: 0;
	--ta-z-sticky: 40;
	--ta-z-header: 50;
	--ta-z-dropdown: 60;
	--ta-z-overlay: 80;
	--ta-z-modal: 90;
	--ta-z-skip: 100;
}

/* Dark-band context. Any section can opt in and every component inside it
   inherits the correct on-dark colours instead of re-declaring them. */
.ta-on-dark {
	--ta-text: var(--ta-on-dark);
	--ta-text-muted: var(--ta-on-dark-muted);
	--ta-border: var(--ta-border-dark);
	--ta-surface: var(--ta-blue);
	color: var(--ta-on-dark);
}