/**
 * Fallback design tokens. The authoritative values are generated from
 * the Customizer (see inc/enqueue.php: luxefashion_generate_css_variables())
 * and injected as an inline <style> right after this file, overriding
 * these defaults. Keeping fallbacks here means the site never renders
 * unstyled if that inline block fails to output for any reason.
 */
:root {
	--lf-primary: #E4573D;
	--lf-primary-dark: #C8462F;
	--lf-secondary: #1A1A1A;
	--lf-accent: #F7D9CF;
	--lf-text: #241F1D;
	--lf-muted: #7A716C;
	--lf-background: #FDF8F3;
	--lf-card-background: #FFFFFF;
	--lf-border: #ECE2D9;

	--lf-radius: 16px;
	--lf-radius-sm: 10px;
	--lf-radius-pill: 999px;

	--lf-shadow-sm: 0 2px 8px rgba(26, 20, 16, 0.06);
	--lf-shadow-md: 0 10px 30px rgba(26, 20, 16, 0.08);
	--lf-shadow-lg: 0 20px 50px rgba(26, 20, 16, 0.12);

	--lf-container: 1280px;
	--lf-gutter: clamp(1rem, 4vw, 2.5rem);
	--lf-section-gap: clamp(2.5rem, 6vw, 5rem);

	--lf-font-heading: 'Poppins', 'Segoe UI', sans-serif;
	--lf-font-body: 'Inter', 'Segoe UI', sans-serif;

	--lf-fs-h1: clamp(2.25rem, 5vw, 3.5rem);
	--lf-fs-h2: clamp(1.75rem, 3.5vw, 2.5rem);
	--lf-fs-h3: clamp(1.25rem, 2.5vw, 1.75rem);
	--lf-fs-body: 1rem;
	--lf-fs-sm: 0.875rem;

	--lf-transition: 220ms ease;
}

@media (prefers-color-scheme: dark) {
	/* Dark-mode variables are intentionally not activated automatically —
	   architecture is ready via [data-theme="dark"] on <html>, controlled
	   by a future opt-in toggle, per the "no forced dark mode" requirement. */
}

html[data-theme="dark"] {
	--lf-text: #F4EFE9;
	--lf-background: #17130F;
	--lf-card-background: #221C17;
	--lf-border: #352C25;
	--lf-muted: #B7ACA3;
}
