/**
 * Design tokens — foundation only.
 *
 * Values extracted from the live site. These --etqan-* variables are NOT
 * wired to existing selectors yet; footer/theme styles still use WP Custom CSS.
 * Do not rename or override --ef-* variables until migration is intentional.
 */

:root {
	/* Brand — sage green (production header) */
	--etqan-color-primary: #81956B;
	--etqan-color-primary-dark: #749342;
	--etqan-color-primary-rgb: 129, 149, 107;

	/* Deep sage — homepage sections, toolbar, logo harmony */
	--etqan-color-sage: #3f5b2d;
	--etqan-color-sage-dark: #354d26;
	--etqan-color-sage-muted: #4a6638;

	/* Footer palette (from Additional CSS post) */
	--etqan-color-footer-dark: var(--etqan-color-sage-dark);
	--etqan-color-footer-mid: var(--etqan-color-sage);

	/* Accent — gold (footer only) */
	--etqan-color-accent: #c8a96e;
	--etqan-color-accent-light: #d4b97e;
	--etqan-color-logo: #b69d74;

	/* Header tokens */
	--etqan-header-toolbar-bg: var(--etqan-color-sage);
	--etqan-header-toolbar-text: rgba(255, 255, 255, 0.92);
	--etqan-header-toolbar-muted: rgba(255, 255, 255, 0.72);
	--etqan-header-nav-text: #444444;
	--etqan-header-nav-active: var(--etqan-color-primary);
	--etqan-header-cta-bg: var(--etqan-color-primary);
	--etqan-header-cta-hover: var(--etqan-color-primary-dark);

	/* Surfaces */
	--etqan-color-surface-dark: #1C2231;
	--etqan-color-white: #ffffff;
	--etqan-color-text: #333333;
	--etqan-color-text-muted: #666666;

	/* Typography */
	--etqan-font-ar: "Tajawal", sans-serif;
	--etqan-font-en-display: "Playfair Display", serif;
	--etqan-font-body: var(--etqan-font-ar);

	/* Layout */
	--etqan-container-max: 1400px;
	--etqan-footer-grid-max: 1240px;

	/* Spacing scale (for future use) */
	--etqan-space-xs: 0.25rem;
	--etqan-space-sm: 0.5rem;
	--etqan-space-md: 1rem;
	--etqan-space-lg: 1.5rem;
	--etqan-space-xl: 2rem;
	--etqan-space-2xl: 3rem;

	/* Radius & shadows (for future use) */
	--etqan-radius-sm: 4px;
	--etqan-radius-md: 8px;
	--etqan-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);

	/* Motion — header animations */
	--etqan-ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
	--etqan-ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);
	--etqan-ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
	--etqan-duration-fast: 0.28s;
	--etqan-duration-normal: 0.55s;
	--etqan-duration-slow: 0.72s;
}