/**
 * Universal Elementor Engine - Central Design System Tokens
 *
 * Single source of truth for design tokens across all components and widgets.
 * Standardized with the --uee-sys-* prefix and Elementor Global Site Settings bridge.
 */

:root {
	/* ==========================================================================
	   1. Color Tokens
	   ========================================================================== */
	--uee-sys-color-primary: #3b82f6;
	--uee-sys-color-primary-hover: #2563eb;
	--uee-sys-color-secondary: #64748b;
	--uee-sys-color-accent: #06b6d4;
	--uee-sys-color-bg: #f8fafc;
	--uee-sys-color-surface: #ffffff;
	--uee-sys-color-border: #e2e8f0;
	--uee-sys-color-text: #0f172a;
	--uee-sys-color-muted: #64748b;

	/* Semantic states */
	--uee-sys-color-success: #10b981;
	--uee-sys-color-warning: #f59e0b;
	--uee-sys-color-danger: #ef4444;

	/* ==========================================================================
	   2. Typography Tokens
	   ========================================================================== */
	/* Heading */
	--uee-sys-font-heading: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
	--uee-sys-font-weight-heading: 600;
	--uee-sys-line-height-heading: 1.25;

	/* Body */
	--uee-sys-font-body: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
	--uee-sys-font-size-body: 1rem;
	--uee-sys-line-height-body: 1.5;

	/* Label */
	--uee-sys-font-label: var(--uee-sys-font-body);
	--uee-sys-font-size-label: 0.875rem;
	--uee-sys-font-weight-label: 500;
	--uee-sys-line-height-label: 1.2;

	/* ==========================================================================
	   3. Spacing Scale
	   ========================================================================== */
	--uee-sys-space-xs: 4px;
	--uee-sys-space-sm: 8px;
	--uee-sys-space-md: 16px;
	--uee-sys-space-lg: 24px;
	--uee-sys-space-xl: 32px;

	/* ==========================================================================
	   4. Border Radius Scale
	   ========================================================================== */
	--uee-sys-radius-sm: 4px;
	--uee-sys-radius-md: 8px;
	--uee-sys-radius-lg: 16px;
	--uee-sys-radius-pill: 9999px;
	--uee-sys-radius-full: 9999px; /* Alias for backwards compatibility */

	/* ==========================================================================
	   5. Elevation & Box Shadows
	   ========================================================================== */
	--uee-sys-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
	--uee-sys-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
	--uee-sys-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

	/* ==========================================================================
	   6. Micro-Transitions
	   ========================================================================== */
	--uee-sys-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
	--uee-sys-transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
	--uee-sys-transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   Elementor Global Site Settings Bridge
   ========================================================================== */
body.elementor-default,
body.elementor-page {
	--uee-sys-color-primary: var(--e-global-color-primary, #3b82f6);
	--uee-sys-color-secondary: var(--e-global-color-secondary, #64748b);
	--uee-sys-color-text: var(--e-global-color-text, #0f172a);
	--uee-sys-color-accent: var(--e-global-color-accent, #06b6d4);

	/* Inherit Global Typography where available */
	--uee-sys-font-heading: var(--e-global-typography-primary-font-family, var(--uee-sys-font-heading));
	--uee-sys-font-body: var(--e-global-typography-text-font-family, var(--uee-sys-font-body));
}

/* ==========================================================================
   Optional Dark Mode Theme Overrides
   ========================================================================== */
[data-uee-theme="dark"],
.uwe-theme--dark {
	--uee-sys-color-bg: #0b0f19;
	--uee-sys-color-surface: #111827;
	--uee-sys-color-border: #1f2937;
	--uee-sys-color-text: #f9fafb;
	--uee-sys-color-muted: #9ca3af;
	--uee-sys-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
	--uee-sys-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4);
	--uee-sys-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5);
}

/* ==========================================================================
   7. Responsive Baseline & Overflow Prevention Safeguards
   ========================================================================== */
.uwe-widget,
.uwe-widget *,
.uwe-widget *::before,
.uwe-widget *::after {
	box-sizing: border-box;
}

.uwe-widget {
	max-width: 100%;
	overflow-wrap: break-word;
	word-break: break-word;
}

.uwe-widget img,
.uwe-widget video,
.uwe-widget svg {
	max-width: 100%;
	height: auto;
}

/* Fluid Layout Utilities */
.uwe-grid-fluid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--uee-grid-min-item, 280px)), 1fr));
	gap: var(--uee-sys-space-md);
}

.uwe-flex-wrap {
	display: flex;
	flex-wrap: wrap;
	gap: var(--uee-sys-space-md);
}

/* ==========================================================================
   8. Responsive Visibility & Stacking Utilities
   (Matches Elementor default breakpoints: Desktop >= 1025px, Tablet 768-1024px, Mobile <= 767px)
   ========================================================================== */
@media (min-width: 1025px) {
	.uwe-hide-desktop {
		display: none !important;
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	.uwe-hide-tablet {
		display: none !important;
	}
}

@media (max-width: 767px) {
	.uwe-hide-mobile {
		display: none !important;
	}
	.uwe-stack-mobile {
		flex-direction: column !important;
	}
	.uwe-w-full-mobile {
		width: 100% !important;
	}
}

/* ==========================================================================
   9. Accessibility Conventions & Visible Focus States (WCAG 2.1 AA)
   ========================================================================== */

/* Visually Hidden / Screen-Reader-Only Text */
.uwe-sr-only,
.screen-reader-text {
	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;
}

/* High-Contrast Visible Focus States */
:root {
	--uee-sys-focus-ring: 2px solid var(--uee-sys-color-primary, #3b82f6);
	--uee-sys-focus-offset: 2px;
}

.uwe-widget a:focus-visible,
.uwe-widget button:focus-visible,
.uwe-widget input:focus-visible,
.uwe-widget select:focus-visible,
.uwe-widget textarea:focus-visible,
.uwe-widget [tabindex]:focus-visible {
	outline: var(--uee-sys-focus-ring) !important;
	outline-offset: var(--uee-sys-focus-offset) !important;
}

/* Non-Color-Only Status Indicators (WCAG SC 1.4.1) */
.uwe-status {
	display: inline-flex;
	align-items: center;
	gap: var(--uee-sys-space-xs, 4px);
	font-size: var(--uee-sys-font-size-label, 0.875rem);
	font-weight: var(--uee-sys-font-weight-label, 500);
}

.uwe-status__indicator {
	display: inline-block;
	font-size: 0.875em;
	line-height: 1;
}

.uwe-status--success { color: var(--uee-sys-color-success, #10b981); }
.uwe-status--warning { color: var(--uee-sys-color-warning, #f59e0b); }
.uwe-status--danger  { color: var(--uee-sys-color-danger, #ef4444); }
.uwe-status--info    { color: var(--uee-sys-color-primary, #3b82f6); }