/**
 * Design tokens extracted from the revamped "2026 -" Elementor pages
 * (Homepage 7411, About 7436, Programs Impact 7359, Join The Movement 7803,
 * District & Nations 7660, Events 7673, News & Stories 8234) and the
 * Elementor footer template (7432), since no Elementor Global Kit exists yet.
 *
 * Source of truth until a Global Kit is set up in Elementor. If the Kit is
 * configured later, sync these values to match it (or vice versa) so both
 * systems draw from one palette.
 */

:root {
	/* Brand color
	 * NOTE: the Elementor header template (7429) uses #013976 for its toggle/
	 * hover/button colors, but every revamped page body uses #153871 (61
	 * occurrences vs 5). Treating #153871 as the real brand blue and #013976
	 * as an outlier that should be corrected in the header template. */
	--color-primary: #153871;
	--color-primary-tint-05: #1538710D; /* ~5% - soft section backgrounds */
	--color-primary-tint-08: #15387114; /* ~8% - soft section backgrounds, alt */

	/* Accent colors */
	--color-accent-orange: #F97316; /* badges, highlights, CTA accents */
	--color-accent-teal: #1EBEA6;   /* secondary accent, overlays/category badges */

	/* Neutrals - dark */
	--color-ink: #0F1115;      /* near-black, dark section backgrounds */
	--color-text: #000000;
	--color-text-secondary: rgba(0, 0, 0, 0.6);  /* #00000099 - most common body/title tone */
	--color-text-tertiary: rgba(0, 0, 0, 0.7);   /* #000000B2 */
	--color-text-muted: rgba(0, 0, 0, 0.8);      /* #000000CC */
	--color-border: rgba(0, 0, 0, 0.1);          /* #0000001A */
	--color-border-soft: rgba(0, 0, 0, 0.06);    /* #0000000F */

	/* Neutrals - light / on-dark */
	--color-surface: #FFFFFF;
	--color-surface-alt: #FAFBFC;   /* off-white section background */
	--color-surface-muted: #F5F5F5;
	--color-on-dark: #FFFFFF;
	--color-on-dark-secondary: rgba(255, 255, 255, 0.8); /* #FFFFFFCC */
	--color-on-dark-tertiary: rgba(255, 255, 255, 0.6);  /* #FFFFFF99 */
	--color-line-on-dark: rgba(255, 255, 255, 0.2);      /* #FFFFFF33 */

	/* Grays */
	--color-gray-700: #4A4A4A;
	--color-gray-600: #6D6D6D;
	--color-gray-300: #E0E0E0;
	--color-gray-200: #CFCFCF;

	/* Typography */
	--font-body: 'Inter', sans-serif;
	--font-display: 'Source Serif Pro', serif; /* editorial headings */
	--font-alt: 'Sora', sans-serif;            /* secondary heading treatment */

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

	/* Font size scale - rationalized from observed values (sizes were not
	 * consistently applied across pages; these are the dominant/nearest
	 * values, not an exhaustive list of every one-off size found). */
	--fs-eyebrow: 12px;
	--fs-small: 14px;
	--fs-body: 16px;
	--fs-body-lg: 18px;
	--fs-h6: 20px;
	--fs-h5: 24px;
	--fs-h4: 30px;
	--fs-h3: 42px;
	--fs-h2: 48px;
	--fs-h1: 64px;
	--fs-display: 80px;
	--fs-display-lg: 120px;

	/* Border radius */
	--radius-sm: 8px;
	--radius-card: 16px;
	--radius-md: 24px;   /* buttons */
	--radius-lg: 32px;   /* large cards/images */
	--radius-pill: 9999px;
}