/**
 * Aisthetic Elements: Core Design Tokens & CSS Variables
 * Seamlessly inherits from Elementor Global Styles with resilient fallback tokens.
 */

:root {
	/* 1. Brand Colors */
	--aisth-color-primary: var(--e-global-color-primary, #6366f1);
	--aisth-color-secondary: var(--e-global-color-secondary, #ec4899);
	--aisth-color-accent: var(--e-global-color-accent, #3b82f6);
	--aisth-color-text: var(--e-global-color-text, #1e293b);
	--aisth-color-text-muted: #64748b;
	--aisth-color-heading: #0f172a;
	--aisth-color-surface: #ffffff;
	--aisth-color-surface-subtle: #f8fafc;
	--aisth-color-border: #e2e8f0;

	/* 2. Constrained Border Radii (Scale of 3 + Pill) */
	--aisth-radius-sm: 6px;
	--aisth-radius-md: 12px;
	--aisth-radius-lg: 20px;
	--aisth-radius-full: 9999px;

	/* 3. Elevation & Shadows (Scale of 3) */
	--aisth-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.04);
	--aisth-shadow-md: 0 4px 14px -2px rgba(0, 0, 0, 0.08), 0 2px 6px -1px rgba(0, 0, 0, 0.04);
	--aisth-shadow-lg: 0 16px 32px -6px rgba(0, 0, 0, 0.12), 0 6px 12px -3px rgba(0, 0, 0, 0.06);

	/* 4. Micro-Motion Timing & Easing */
	--aisth-duration-fast: 150ms;
	--aisth-duration-base: 250ms;
	--aisth-duration-slow: 400ms;
	--aisth-ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
	--aisth-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

	/* 5. Accessibility */
	--aisth-focus-ring: 0 0 0 3px rgba(99, 102, 241, 0.35);
	--aisth-touch-min: 44px;
}

/* Accessibility: Accessible Visually Hidden text */
.aisth-sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* Accessibility: Focus Visible styles */
.aisthetic-widget-wrapper button:focus-visible,
.aisthetic-widget-wrapper a:focus-visible,
.aisthetic-widget-wrapper [tabindex]:focus-visible {
	outline: none;
	box-shadow: var(--aisth-focus-ring);
}

/* Accessibility: Reduced Motion Override */
@media (prefers-reduced-motion: reduce) {
	:root {
		--aisth-duration-fast: 0ms !important;
		--aisth-duration-base: 0ms !important;
		--aisth-duration-slow: 0ms !important;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}