/*
 * Design tokens — the single source of truth for colour, type and spacing.
 * Palette: deep red from the Tunisian flag, institutional navy, light neutrals.
 */

:root {
	/* --- Brand --- */
	--c-primary: #b71c1c;
	--c-primary-dark: #8e1414;
	--c-primary-light: #e53935;
	--c-primary-tint: #fdeced;

	--c-navy: #1a237e;
	--c-navy-dark: #11185c;
	--c-navy-light: #3949ab;
	--c-navy-tint: #eceffb;

	/* --- Neutrals --- */
	--c-white: #ffffff;
	--c-surface: #f7f8fa;
	--c-surface-alt: #eef0f4;
	--c-border: #dfe3ea;
	--c-border-strong: #c3c9d4;
	--c-text: #1c2230;
	--c-text-muted: #5a6273;
	--c-text-invert: #ffffff;

	/* --- Feedback --- */
	--c-success: #1b6b3a;
	--c-success-tint: #e7f4ec;
	--c-error: #b3261e;
	--c-error-tint: #fdecea;
	--c-focus: #1a237e;

	/* --- Typography --- */
	--font-body: "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;
	--font-heading: "Playfair Display", Georgia, "Times New Roman", serif;

	--fs-xs: 0.8125rem;   /* 13px */
	--fs-sm: 0.9375rem;   /* 15px */
	--fs-base: 1.0625rem; /* 17px — body, above the 16px floor */
	--fs-md: 1.1875rem;   /* 19px */
	--fs-lg: 1.375rem;    /* 22px */
	--fs-xl: 1.75rem;     /* 28px */
	--fs-2xl: 2.125rem;   /* 34px */
	--fs-3xl: 2.75rem;    /* 44px */

	--lh-tight: 1.2;
	--lh-snug: 1.35;
	--lh-base: 1.65;

	/* --- Spacing scale (4px base) --- */
	--sp-1: 0.25rem;
	--sp-2: 0.5rem;
	--sp-3: 0.75rem;
	--sp-4: 1rem;
	--sp-5: 1.5rem;
	--sp-6: 2rem;
	--sp-7: 3rem;
	--sp-8: 4rem;
	--sp-9: 6rem;

	/* --- Layout --- */
	--container: 1180px;
	--container-narrow: 780px;
	--gutter: var(--sp-4);

	/* --- Radii, shadows, motion --- */
	--radius-sm: 4px;
	--radius: 8px;
	--radius-lg: 14px;
	--radius-pill: 999px;

	--shadow-sm: 0 1px 2px rgba(28, 34, 48, 0.06), 0 1px 3px rgba(28, 34, 48, 0.08);
	--shadow: 0 2px 6px rgba(28, 34, 48, 0.07), 0 8px 24px rgba(28, 34, 48, 0.08);
	--shadow-lg: 0 12px 40px rgba(28, 34, 48, 0.14);

	--transition: 180ms ease;

	--header-height: 90px;

	/* --- Animation --- */
	--anim-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--anim-delay-step: 80ms;
}

@media (max-width: 479px) {
	:root {
		--fs-3xl: 2.25rem; /* 36px — stat numbers and page titles on small phones */
	}
}

@media (min-width: 768px) {
	:root {
		--gutter: var(--sp-5);
	}
}

@media (min-width: 1024px) {
	:root {
		--fs-3xl: 3.25rem;
		--gutter: var(--sp-6);
	}
}