/**
 * Design Tokens - Synchronized with theme.json
 * Modern CSS Architecture for Conversion-Focused Design
 * Mobile-first, scalable, client-brandable
 */

:root {
	/* ========================================
	   WordPress Theme.json Integration
	   ======================================== */

	/* Colors - Sync with theme.json presets */
	--primary: var(--wp--preset--color--primary, #2563eb);
	--secondary: var(--wp--preset--color--secondary, #7c3aed);
	--accent: var(--wp--preset--color--accent, #f59e0b);
	--neutral-50: var(--wp--preset--color--neutral-50, #fafafa);
	--neutral-100: var(--wp--preset--color--neutral-100, #f5f5f5);
	--neutral-200: var(--wp--preset--color--neutral-200, #e5e5e5);
	--neutral-300: var(--wp--preset--color--neutral-300, #d4d4d4);
	--neutral-400: var(--wp--preset--color--neutral-400, #a3a3a3);
	--neutral-500: var(--wp--preset--color--neutral-500, #737373);
	--neutral-600: var(--wp--preset--color--neutral-600, #525252);
	--neutral-700: var(--wp--preset--color--neutral-700, #404040);
	--neutral-800: var(--wp--preset--color--neutral-800, #262626);
	--neutral-900: var(--wp--preset--color--neutral-900, #171717);

	/* Typography - Sync with theme.json font families */
	--font-heading: var(--wp--preset--font-family--heading, system-ui, sans-serif);
	--font-body: var(--wp--preset--font-family--body, system-ui, sans-serif);

	/* Spacing - Use WordPress spacing scale */
	--space-xs: var(--wp--preset--spacing--20, 0.5rem);
	--space-sm: var(--wp--preset--spacing--30, 0.75rem);
	--space-md: var(--wp--preset--spacing--40, 1rem);
	--space-lg: var(--wp--preset--spacing--50, 1.5rem);
	--space-xl: var(--wp--preset--spacing--60, 2rem);
	--space-2xl: var(--wp--preset--spacing--70, 3rem);
	--space-3xl: var(--wp--preset--spacing--80, 4rem);

	/* ========================================
	   Conversion-Focused Custom Tokens
	   ======================================== */

	/* CTA & Conversion Colors */
	--cta-primary: #dc2626;
	--cta-primary-hover: #b91c1c;
	--cta-primary-active: #991b1b;
	--success: #059669;
	--success-light: #d1fae5;
	--warning: #f59e0b;
	--warning-light: #fef3c7;
	--error: #dc2626;
	--error-light: #fee2e2;

	/* Typography Scale - Optimized for readability & hierarchy */
	--text-xs: clamp(0.75rem, 0.69rem + 0.25vw, 0.875rem);
	--text-sm: clamp(0.875rem, 0.81rem + 0.31vw, 1rem);
	--text-base: clamp(1rem, 0.93rem + 0.38vw, 1.125rem);
	--text-lg: clamp(1.125rem, 1.05rem + 0.38vw, 1.25rem);
	--text-xl: clamp(1.25rem, 1.16rem + 0.44vw, 1.5rem);
	--text-2xl: clamp(1.5rem, 1.39rem + 0.56vw, 1.875rem);
	--text-3xl: clamp(1.875rem, 1.74rem + 0.69vw, 2.25rem);
	--text-4xl: clamp(2.25rem, 2.09rem + 0.81vw, 2.75rem);
	--text-5xl: clamp(2.75rem, 2.55rem + 1vw, 3.5rem);

	/* Line Heights - Optimized for readability */
	--leading-tight: 1.25;
	--leading-snug: 1.375;
	--leading-normal: 1.5;
	--leading-relaxed: 1.625;
	--leading-loose: 2;

	/* Border Radius - Consistent scaling */
	--radius-xs: 0.125rem;
	--radius-sm: 0.25rem;
	--radius-md: 0.375rem;
	--radius-lg: 0.5rem;
	--radius-xl: 0.75rem;
	--radius-2xl: 1rem;
	--radius-3xl: 1.5rem;
	--radius-full: 9999px;

	/* Shadows - Depth & elevation system */
	--shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
	--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
	--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
	--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
	--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

	/* Focus States - Accessibility & conversion */
	--focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.1);
	--focus-ring-error: 0 0 0 3px rgba(220, 38, 38, 0.1);
	--focus-ring-success: 0 0 0 3px rgba(5, 150, 105, 0.1);

	/* Transitions - Performance optimized */
	--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
	--transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
	--transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
	--transition-bounce: 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

	/* Container Sizes - Responsive breakpoints */
	--container-sm: 640px;
	--container-md: 768px;
	--container-lg: 1024px;
	--container-xl: 1280px;
	--container-2xl: 1536px;

	/* Z-index Scale - Predictable layering */
	--z-dropdown: 1000;
	--z-sticky: 1020;
	--z-modal-backdrop: 1040;
	--z-modal: 1050;
	--z-popover: 1060;
	--z-tooltip: 1070;

	/* Form Specific - Conversion optimized */
	--form-height-sm: 2.25rem;
	--form-height-base: 2.75rem;
	--form-height-lg: 3.5rem;
	--form-padding-x: 0.875rem;
	--form-padding-y: 0.625rem;

	/* CTA Sizing - Conversion tested */
	--cta-height-sm: 2.5rem;
	--cta-height-base: 3rem;
	--cta-height-lg: 3.5rem;
	--cta-padding-x: 1.5rem;
	--cta-padding-y: 0.75rem;

	/* Content Width - Reading optimization */
	--content-width: 65ch;
	--content-width-narrow: 45ch;
	--content-width-wide: 85ch;

	/* Animation Delays - Staggered reveals */
	--delay-xs: 0ms;
	--delay-sm: 100ms;
	--delay-md: 200ms;
	--delay-lg: 300ms;
	--delay-xl: 400ms;
}

/* ========================================
   Dark Mode Support
   ======================================== */

@media (prefers-color-scheme: dark) {
	:root {
		--neutral-50: #171717;
		--neutral-100: #262626;
		--neutral-200: #404040;
		--neutral-300: #525252;
		--neutral-400: #737373;
		--neutral-500: #a3a3a3;
		--neutral-600: #d4d4d4;
		--neutral-700: #e5e5e5;
		--neutral-800: #f5f5f5;
		--neutral-900: #fafafa;

		/* Adjust shadows for dark mode */
		--shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
		--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.4);
		--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
		--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
		--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.4);
		--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
	}
}

/* ========================================
   Client Brand Override System
   ======================================== */

/* Custom property overrides for client branding
   These can be overridden in client-specific CSS files */
.brand-override {
	/* Example client overrides */
	--primary: #custom-brand-primary;
	--font-heading: 'Custom Brand Font', var(--font-heading);
	--radius-md: 0; /* Square buttons for specific brand */
}

/* ========================================
   Reduced Motion Support
   ======================================== */

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