/**
 * Elementor 4 Compatibility Layer
 * 
 * Maps existing WB CSS variables to Elementor 4 Design Token naming convention.
 * This file provides bidirectional aliases for smooth migration.
 * 
 * @package Elementor_WB
 * @since 1.1.0
 */

:root {
    /* =========================================================================
     * GLOBAL COLOR MAPPINGS
     * Maps WB primitives to Elementor 4 Global Colors
     * ========================================================================= */
    
    /* Primary color - Main brand color (Razzmatazz) */
    --e-global-color-primary: var(--_primitives---colors--razzmatazz, #df006e);
    
    /* Secondary color - Neutral dark for secondary elements */
    --e-global-color-secondary: var(--_primitives---colors--neutral-dark, #544c50);
    
    /* Text color - Main body text color */
    --e-global-color-text: var(--_primitives---colors--neutral-darkest, #0b0006);
    
    /* Accent color - Lighter version for highlights */
    --e-global-color-accent: var(--_primitives---colors--razzmatazz-light, #e84c99);
    
    /* =========================================================================
     * BIDIRECTIONAL ALIASES
     * Use --wb-* in new code, falls back to Elementor globals
     * ========================================================================= */
    
    --wb-color-primary: var(--e-global-color-primary);
    --wb-color-secondary: var(--e-global-color-secondary);
    --wb-color-text: var(--e-global-color-text);
    --wb-color-accent: var(--e-global-color-accent);
    
    /* Extended color palette */
    --wb-color-background: var(--_primitives---colors--neutral-lightest, #f2f2f2);
    --wb-color-surface: var(--_primitives---colors--white, #fff);
    --wb-color-border: var(--_primitives---opacity--neutral-darkest-15, rgba(11, 0, 6, 0.15));
    
    /* =========================================================================
     * TYPOGRAPHY MAPPINGS
     * Maps WB typography to Elementor 4 Global Typography
     * ========================================================================= */
    
    /* Primary typography - For headings */
    --e-global-typography-primary-font-family: var(--_typography---font-styles--heading, Lato, sans-serif);
    
    /* Secondary typography - For subheadings */
    --e-global-typography-secondary-font-family: var(--_typography---font-styles--heading, Lato, sans-serif);
    
    /* Text typography - For body text */
    --e-global-typography-text-font-family: var(--_typography---font-styles--body, Lato, sans-serif);
    
    /* Accent typography - For special elements */
    --e-global-typography-accent-font-family: var(--_typography---font-styles--body, Lato, sans-serif);
    
    /* =========================================================================
     * SPACING TOKENS
     * Design tokens for consistent spacing
     * ========================================================================= */
    
    --wb-spacing-xs: 0.5rem;    /* 8px */
    --wb-spacing-sm: 1rem;      /* 16px */
    --wb-spacing-md: 1.5rem;    /* 24px */
    --wb-spacing-lg: 2rem;      /* 32px */
    --wb-spacing-xl: 3rem;      /* 48px */
    --wb-spacing-2xl: 4rem;     /* 64px */
    --wb-spacing-3xl: 6rem;     /* 96px */
    
    /* Section padding aliases */
    --wb-section-padding-sm: var(--padding-section-small, 3rem);
    --wb-section-padding-md: var(--padding-section-medium, 5rem);
    --wb-section-padding-lg: 7rem;
    
    /* =========================================================================
     * BORDER RADIUS TOKENS
     * ========================================================================= */
    
    --wb-radius-sm: var(--_ui-styles---radius--small, 8px);
    --wb-radius-md: var(--_ui-styles---radius--medium, 8px);
    --wb-radius-lg: var(--_ui-styles---radius--large, 8px);
    --wb-radius-xl: 16px;
    --wb-radius-full: 9999px;
    
    /* =========================================================================
     * SHADOW TOKENS
     * ========================================================================= */
    
    --wb-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --wb-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --wb-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --wb-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    
    /* =========================================================================
     * TRANSITION TOKENS
     * ========================================================================= */
    
    --wb-transition-fast: 150ms ease;
    --wb-transition-normal: 300ms ease;
    --wb-transition-slow: 500ms ease;
    --wb-transition-header: var(--wb-header-animation-transition, 0.4s);
    
    /* =========================================================================
     * Z-INDEX TOKENS
     * ========================================================================= */
    
    --wb-z-dropdown: 100;
    --wb-z-sticky: 200;
    --wb-z-modal: 300;
    --wb-z-popover: 400;
    --wb-z-tooltip: 500;
}

/* =========================================================================
 * RESPONSIVE ADJUSTMENTS
 * Mobile-specific token overrides
 * ========================================================================= */

@media (max-width: 768px) {
    :root {
        --wb-section-padding-sm: 2rem;
        --wb-section-padding-md: 3rem;
        --wb-section-padding-lg: 4rem;
    }
}

/* =========================================================================
 * DARK MODE SUPPORT (Future)
 * Prepared for potential dark mode implementation
 * ========================================================================= */

/*
@media (prefers-color-scheme: dark) {
    :root {
        --e-global-color-text: var(--_primitives---colors--white, #fff);
        --wb-color-background: var(--_primitives---colors--neutral-darkest, #0b0006);
        --wb-color-surface: var(--_primitives---colors--neutral-darker, #23191e);
    }
}
*/