/* =================================================================
 * ZA Framework — Design Tokens
 * ================================================================= */
:root {
  /* * 1. BRAND TOKENS (The "Bridge")
   * ---------------------------------------------------------------
   * We use the CSS variable fallback pattern: var(--target, fallback).
   * This ensures that if Elementor is disabled or the global color 
   * is deleted, your framework doesn't "go invisible."
   */
  --za-accent: var(--e-global-color-accent, #FBB040);
  --za-primary: var(--e-global-color-primary, #111111);
  /* * 2. SYSTEM TOKENS (The "Missing Links")
   * ---------------------------------------------------------------
   * Elementor handles typography well, but it is poor at managing 
   * consistent interaction states. We define these here once.
   */
  
  /* Animation Timing */
  --za-transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --za-transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  /* Elevation (Shadows) - Using transparent blacks for layering */
  --za-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --za-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --za-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  /* Border Radii - Matches your za-btn utility */
  --za-radius-sm: 4px;
  --za-radius-md: 8px;
  --za-radius-lg: 12px;
  --za-radius-full: 9999px;
  /* * 3. LAYOUT TOKENS
   * ---------------------------------------------------------------
   * Default gap variable used by za-layout.css
   */
  --za-gap: clamp(1rem, 3vw, 2rem);
}
/* * ACCESSIBILITY OVERRIDE
 * Respects users who prefer reduced motion by killing transitions
 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --za-transition-fast: 0s;
    --za-transition-base: 0s;
  }
}