/* ==========================================================================
   Design tokens — single source of truth for color, type, spacing, radii,
   shadows, and transitions. See DESIGN-SYSTEM.md for rationale. Every other
   stylesheet in this theme reads from these custom properties; none of them
   should hardcode a raw color or spacing value.
   ========================================================================== */

@font-face {
	font-family: 'Alexandria';
	src: url('../fonts/alexandria-arabic-variable.woff2') format('woff2-variations'),
	     url('../fonts/alexandria-arabic-variable.woff2') format('woff2');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFC, U+0020-007E;
}

:root {
	/* ---- Color: Deep Navy / Graphite / Warm Ivory / Amber / Teal ---- */
	--c-navy-950: #141B20;
	--c-navy-800: #1C262D;
	--c-graphite-900: #241F1A;
	--c-ivory-50: #F6EFE2;
	--c-ivory-100: #FBF8F0;
	--c-white: #FFFFFF;
	--c-amber-500: #C8763A;
	--c-amber-600: #AD6530;
	--c-amber-100: #F3DCC6;
	--c-teal-500: #1F7A72;
	--c-teal-600: #185F59;
	--c-ink-900: #211C17;
	--c-ink-on-dark: #F3ECDD;
	--c-ink-muted: #5C534A;
	--c-ink-muted-on-dark: #B9C3C7;
	--c-border-light: #E8DFCB;
	--c-border-dark: #2C363C;
	--c-success-600: #1E9E5A;
	--c-danger-600: #C0392B;

	/* Semantic aliases used by components */
	--c-bg-page: var(--c-ivory-100);
	--c-bg-section-light: var(--c-ivory-50);
	--c-bg-section-dark: var(--c-navy-950);
	--c-text-on-light: var(--c-ink-900);
	--c-text-on-dark: var(--c-ink-on-dark);
	--c-cta-primary: var(--c-amber-500);
	--c-cta-primary-hover: var(--c-amber-600);
	--c-cta-secondary: var(--c-teal-500);
	--c-cta-secondary-hover: var(--c-teal-600);

	/* ---- Typography ---- */
	--font-base: 'Alexandria', 'Segoe UI', Tahoma, sans-serif;
	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 700;
	--fw-black: 800;

	--fs-display: clamp(2.5rem, 1.6rem + 3.6vw, 4.25rem);
	--fs-h1: clamp(2.25rem, 1.5rem + 3vw, 3.5rem);
	--fs-h2: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);
	--fs-h3: clamp(1.25rem, 1.05rem + 0.8vw, 1.625rem);
	--fs-h4: clamp(1.125rem, 1rem + 0.5vw, 1.25rem);
	--fs-body-lg: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
	--fs-body: 1rem;
	--fs-small: 0.875rem;
	--fs-eyebrow: 0.8125rem;

	--lh-tight: 1.15;
	--lh-snug: 1.35;
	--lh-body: 1.7;

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

	/* ---- Layout ---- */
	--container-max: 1280px;
	--container-pad: clamp(16px, 4vw, 48px);
	--header-height: 84px;
	--header-height-shrunk: 64px;

	/* ---- Radii ---- */
	--radius-sm: 8px;
	--radius-md: 16px;
	--radius-lg: 28px;
	--radius-pill: 999px;

	/* ---- Shadows ---- */
	--shadow-soft: 0 2px 10px rgba(20, 27, 32, 0.08);
	--shadow-lift: 0 16px 40px rgba(20, 27, 32, 0.18);
	--shadow-amber-glow: 0 8px 24px rgba(200, 118, 58, 0.35);

	/* ---- Motion ---- */
	--ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
	--dur-fast: 150ms;
	--dur-base: 240ms;
	--dur-slow: 420ms;

	/* ---- Z-index layers ---- */
	--z-header: 100;
	--z-mobile-nav: 110;
	--z-mobile-bar: 90;
	--z-modal: 200;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--dur-fast: 0ms;
		--dur-base: 0ms;
		--dur-slow: 0ms;
	}
}