/*
 * Design tokens — single source of truth (docs/DESIGN_SYSTEM.md).
 * No hex values outside this file.
 */

:root {
	/* Colors */
	--color-canvas: #f7f6f1;
	--color-surface: #ffffff;
	--color-text: #182019;
	--color-text-muted: #5c665d;
	/* Brighter brand green (AA with white text); overridable from manager settings. */
	--color-primary: #0e7c43;
	--color-primary-hover: #0a6335;
	--color-primary-deep: #274636; /* Footer / dark bands keep the deep identity green. */
	--color-secondary: #8d9d8a;
	--color-secondary-soft: #edf1ec; /* 4.6:1 under --color-primary text (WCAG AA). */
	--color-accent: #8c7433;
	--color-accent-bright: #d9b45a; /* 8:1 under --color-text — for filled gold buttons/badges. */
	--color-border: #e3e6e1;
	--color-danger: #a43d3d;
	--color-success: #2f6b46;
	--color-whatsapp: #0e7c43; /* 4.6:1 with white text (WCAG AA) */

	/* Spacing — 4/8 rhythm */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 20px;
	--space-6: 24px;
	--space-7: 32px;
	--space-8: 40px;
	--space-9: 48px;
	--space-10: 64px;
	--space-11: 80px;
	--space-12: 96px;

	/* Radius */
	--radius-control: 10px;
	--radius-card: 16px;
	--radius-media: 18px;
	--radius-sheet: 22px;
	--radius-pill: 999px;

	/* Shadow */
	--shadow-soft: 0 8px 28px rgba(24, 32, 25, 0.07);
	--shadow-card: 0 2px 8px rgba(24, 32, 25, 0.05), 0 12px 32px rgba(24, 32, 25, 0.08);
	--shadow-lift: 0 6px 16px rgba(24, 32, 25, 0.1), 0 24px 48px rgba(24, 32, 25, 0.14);
	--shadow-glass: 0 8px 32px rgba(24, 32, 25, 0.12);

	/* Glass */
	--glass-bg: rgba(255, 255, 255, 0.72);
	--glass-border: rgba(255, 255, 255, 0.55);
	--glass-blur: blur(18px) saturate(1.5);

	/* Typography */
	/* System-font fallbacks only: a downloadable fallback face makes first
	   visits fetch two font systems while the Google faces swap in. */
	--font-ar: 'Tajawal', 'Noto Sans Arabic', 'Segoe UI', system-ui, sans-serif;
	--font-head: 'Cairo', 'Tajawal', 'Noto Sans Arabic', 'Segoe UI', system-ui, sans-serif;
	--font-en: 'Segoe UI', system-ui, sans-serif;
	--text-display: clamp(2.25rem, 5vw, 4.75rem);
	--text-h1: clamp(2rem, 4vw, 3.75rem);
	--text-h2: clamp(1.65rem, 3vw, 2.75rem);
	--text-h3: clamp(1.3rem, 2vw, 1.75rem);
	--text-body-lg: 1.125rem;
	--text-body: 1rem;
	--text-small: 0.875rem;
	--text-micro: 0.75rem;
	--leading-body: 1.75;
	--leading-heading: 1.3;

	/* Layout */
	--container-max: 1280px;
	--container-pad: 20px;

	/* Motion */
	--ease: cubic-bezier(0.2, 0, 0.2, 1);
	--dur-control: 150ms;
	--dur-card: 220ms;
}

html[lang='en'] {
	--leading-body: 1.6;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--dur-control: 0ms;
		--dur-card: 0ms;
	}
}