/* Ewan Art design tokens — mirrors the Figma "Ewan Art Design System" variables. */

:root {
	/* Primitives */
	--ea-beige-50: #f7f5ef;
	--ea-beige-100: #f0ece2;
	--ea-beige-200: #e6e1d2;
	--ea-beige-300: #d6cfbc;
	--ea-beige-500: #a9a08a;
	--ea-burgundy-400: #7a3a3f;
	--ea-burgundy-500: #5a1c20;
	--ea-burgundy-700: #3f1316;
	--ea-teal-500: #213d43;
	--ea-teal-700: #172b2f;
	--ea-neutral-900: #161616;
	--ea-neutral-700: #3a3835;
	--ea-neutral-500: #6b675f;
	--ea-neutral-0: #ffffff;
	--ea-red-600: #b42318;
	--ea-green-600: #2e7d4f;
	--ea-whatsapp-500: #25d366;

	/* Semantic — Light mode */
	--ea-bg-page: var(--ea-beige-50);
	--ea-bg-surface: var(--ea-neutral-0);
	--ea-bg-muted: var(--ea-beige-200);
	--ea-bg-brand: var(--ea-burgundy-500);
	--ea-bg-brand-hover: var(--ea-burgundy-700);
	--ea-bg-accent: var(--ea-teal-500);
	--ea-bg-inverse: var(--ea-neutral-900);
	--ea-text-primary: var(--ea-neutral-900);
	--ea-text-secondary: var(--ea-neutral-500);
	--ea-text-brand: var(--ea-burgundy-500);
	--ea-text-accent: var(--ea-teal-500);
	--ea-text-on-dark: var(--ea-beige-50);
	--ea-text-on-dark-muted: var(--ea-beige-300);
	--ea-text-on-light: var(--ea-burgundy-500);
	--ea-text-error: var(--ea-red-600);
	--ea-border-default: var(--ea-beige-300);
	--ea-border-strong: var(--ea-burgundy-500);
	--ea-border-on-dark: var(--ea-burgundy-400);
	--ea-border-error: var(--ea-red-600);
	--ea-icon-brand: var(--ea-burgundy-500);
	--ea-icon-success: var(--ea-green-600);

	/* Typography */
	--ea-font-ar: "Readex Pro", system-ui, sans-serif;
	--ea-font-latin-caps: "Cormorant SC", Georgia, serif;
	--ea-font-script: "Allura", cursive;

	--ea-fs-display: clamp(2.75rem, 1.6rem + 3.3vw, 4rem);
	--ea-fs-h1: clamp(2rem, 1.4rem + 1.9vw, 3rem);
	--ea-fs-h2: clamp(1.75rem, 1.4rem + 1.1vw, 2.25rem);
	--ea-fs-h3: clamp(1.375rem, 1.2rem + 0.5vw, 1.625rem);
	--ea-fs-h4: clamp(1.0625rem, 1rem + 0.25vw, 1.25rem);
	--ea-fs-body-lg: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
	--ea-fs-body: 1rem;
	--ea-fs-small: 0.875rem;
	--ea-fs-script: clamp(1.75rem, 1.3rem + 1.4vw, 2.75rem);

	/* Arabic glyphs in Readex Pro sit low: keep line-heights >= 1.6 (verified in Figma). */
	--ea-lh-display: 1.68;
	--ea-lh-heading: 1.6;
	--ea-lh-h3: 1.65;
	--ea-lh-h4: 1.7;
	--ea-lh-body: 1.8;
	--ea-lh-label: 1.6;

	/* Spacing & radius */
	--ea-space-xs: 4px;
	--ea-space-sm: 8px;
	--ea-space-md: 16px;
	--ea-space-lg: 24px;
	--ea-space-xl: 32px;
	--ea-space-2xl: 48px;
	--ea-space-3xl: 64px;
	--ea-space-4xl: 96px;
	--ea-space-5xl: 128px;
	--ea-radius-none: 0;
	--ea-radius-sm: 2px;
	--ea-radius-md: 4px;
	--ea-radius-full: 999px;

	/* Layout */
	--ea-container: 1280px;
	--ea-gutter: 80px;
	--ea-section-y: var(--ea-space-5xl);
	--ea-header-h: 96px;
	--ea-header-sticky-h: 76px;
	--ea-shadow-sm: 0 4px 20px rgba(22, 22, 22, 0.08);
	--ea-shadow-fab: 0 6px 16px rgba(22, 22, 22, 0.18);
	--ea-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (max-width: 1024px) {
	:root {
		--ea-gutter: 40px;
		--ea-section-y: var(--ea-space-4xl);
	}
}

@media (max-width: 767px) {
	:root {
		--ea-gutter: 20px;
		--ea-section-y: var(--ea-space-3xl);
		--ea-header-h: 72px;
		--ea-header-sticky-h: 64px;
	}
}

/*
 * "On Dark" mode — same as the Figma variable mode. Any teal/burgundy/black
 * section gets .ea-on-dark and every component inside adapts automatically.
 */
.ea-on-dark {
	--ea-text-primary: var(--ea-beige-50);
	--ea-text-secondary: var(--ea-beige-300);
	--ea-text-brand: var(--ea-beige-200);
	--ea-text-accent: var(--ea-beige-200);
	--ea-border-default: var(--ea-beige-500);
	--ea-border-strong: var(--ea-beige-200);
	--ea-icon-brand: var(--ea-beige-200);
	--ea-bg-surface: var(--ea-neutral-900);
	color: var(--ea-text-primary);
}

/* Back to light values inside a dark section (e.g. a form card on burgundy). */
.ea-on-light {
	--ea-text-primary: var(--ea-neutral-900);
	--ea-text-secondary: var(--ea-neutral-500);
	--ea-text-brand: var(--ea-burgundy-500);
	--ea-text-accent: var(--ea-teal-500);
	--ea-border-default: var(--ea-beige-300);
	--ea-border-strong: var(--ea-burgundy-500);
	--ea-icon-brand: var(--ea-burgundy-500);
	--ea-bg-surface: var(--ea-beige-50);
	color: var(--ea-text-primary);
}