/**
 * Waita Market Add-on - Theme Variable System
 * This file establishes a color system that inherits from the active WordPress theme
 * Prioritizes Elementor global colors, then WordPress preset colors
 * All other CSS files should use these variables instead of hardcoded colors
 */

:root {
    /* ============================================
       PRIMARY COLORS - Inherit from Elementor/WordPress Theme
       ============================================ */
    
    /* Primary color from theme (buttons, links, accents) 
       Priority: Elementor Primary > Direct Fallback to Dark Green */
    --wma-primary: var(--e-global-color-primary, #0A4834);
    --wma-primary-dark: color-mix(in srgb, var(--wma-primary) 80%, black);
    --wma-primary-light: color-mix(in srgb, var(--wma-primary) 15%, white);
    
    /* Secondary/Accent color from theme
       Priority: Elementor Secondary > Direct Fallback to Orange */
    --wma-secondary: var(--e-global-color-secondary, #F7941D);
    --wma-secondary-dark: color-mix(in srgb, var(--wma-secondary) 80%, black);
    --wma-secondary-light: color-mix(in srgb, var(--wma-secondary) 15%, white);
    
    /* ============================================
       TEXT COLORS - Inherit from Elementor Theme
       ============================================ */
    
    /* Text color
       Priority: Elementor Text > Direct Fallback to Dark Gray */
    --wma-text: var(--e-global-color-text, #333333);
    --wma-text-light: color-mix(in srgb, var(--wma-text) 60%, transparent);
    --wma-text-lighter: color-mix(in srgb, var(--wma-text) 40%, transparent);
    
    /* ============================================
       BACKGROUND COLORS - Inherit from Theme
       ============================================ */
    
    /* Background color
       Priority: WP White > Fallback */
    --wma-bg: var(--wp--preset--color--white, #ffffff);
    --wma-bg-secondary: color-mix(in srgb, var(--wma-text) 3%, var(--wma-bg));
    --wma-bg-tertiary: color-mix(in srgb, var(--wma-text) 6%, var(--wma-bg));
    
    /* ============================================
       BORDER COLORS - Derived from Theme
       ============================================ */
    
    --wma-border: color-mix(in srgb, var(--wma-text) 12%, transparent);
    --wma-border-light: color-mix(in srgb, var(--wma-text) 8%, transparent);
    
    /* ============================================
       SEMANTIC COLORS - Use theme colors where possible
       ============================================ */
    
    /* Danger/Error - Use WP Vivid Red or fallback */
    --wma-danger: var(--wp--preset--color--vivid-red, #cf2e2e);
    --wma-danger-light: color-mix(in srgb, var(--wma-danger) 15%, white);
    
    /* Success - Use Elementor Accent (Green) > Direct Fallback */
    --wma-success: var(--e-global-color-accent, #38C172);
    --wma-success-light: color-mix(in srgb, var(--wma-success) 15%, white);
    
    /* Warning - Use Elementor Secondary (Orange) > Direct Fallback */
    --wma-warning: var(--e-global-color-secondary, #F7941D);
    --wma-warning-light: color-mix(in srgb, var(--wma-warning) 15%, white);
    
    /* ============================================
       TYPOGRAPHY - Inherit from Elementor
       ============================================ */
    
    /* Font families from Elementor global typography */
    --wma-font-primary: var(--e-global-typography-primary-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    --wma-font-secondary: var(--e-global-typography-secondary-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    --wma-font-text: var(--e-global-typography-text-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    --wma-font-accent: var(--e-global-typography-accent-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    
    /* Font weights from Elementor */
    --wma-font-weight-primary: var(--e-global-typography-primary-font-weight, 600);
    --wma-font-weight-secondary: var(--e-global-typography-secondary-font-weight, 400);
    --wma-font-weight-text: var(--e-global-typography-text-font-weight, 400);
    --wma-font-weight-accent: var(--e-global-typography-accent-font-weight, 500);
    
    /* ============================================
       BUTTON STYLING - Inherit from Theme
       ============================================ */
    
    /* Button Border Radius - Inherit from Elementor button settings */
    --wma-button-radius: var(--e-global-typography-accent-font-size, 8px);
    
    /* Button Font Size - Inherit from Elementor */
    --wma-button-font-size: var(--wp--preset--font-size--medium, 16px);
    
    /* Button Padding */
    --wma-button-padding-y: var(--wp--preset--spacing--30, 0.67rem);
    --wma-button-padding-x: var(--wp--preset--spacing--50, 1.5rem);
    
    /* Button Font Weight */
    --wma-button-font-weight: var(--e-global-typography-accent-font-weight, 500);
    
    /* Button Font Family */
    --wma-button-font-family: var(--e-global-typography-accent-font-family, var(--wma-font-text));
    
    /* Button Border */
    --wma-button-border-width: 1px;
    --wma-button-border-style: solid;
    
    /* ============================================
       SPACING & EFFECTS
       ============================================ */
    
    /* Border Radius - Inherit from WP/Elementor where possible */
    --wma-radius-sm: 4px;
    --wma-radius-md: 8px;
    --wma-radius-lg: 12px;
    --wma-radius-xl: 16px;
    
    /* Shadows - Use WP presets where available */
    --wma-shadow-sm: var(--wp--preset--shadow--natural, 0 1px 2px 0 rgba(0, 0, 0, 0.05));
    --wma-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --wma-shadow-lg: var(--wp--preset--shadow--deep, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05));
    --wma-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    
    /* Transitions */
    --wma-transition: all 0.2s ease;
    
    /* Spacing - Use WP presets where available */
    --wma-spacing-sm: var(--wp--preset--spacing--20, 0.44rem);
    --wma-spacing-md: var(--wp--preset--spacing--40, 1rem);
    --wma-spacing-lg: var(--wp--preset--spacing--60, 2.25rem);
    --wma-spacing-xl: var(--wp--preset--spacing--80, 5.06rem);
    
    /* Font Sizes - Use WP presets */
    --wma-font-size-xs: 12px;
    --wma-font-size-sm: var(--wp--preset--font-size--small, 13px);
    --wma-font-size-md: var(--wp--preset--font-size--medium, 16px);
    --wma-font-size-lg: var(--wp--preset--font-size--large, 20px);
    --wma-font-size-xl: var(--wp--preset--font-size--x-large, 24px);
}

/* ============================================
   USAGE GUIDELINES
   ============================================ */

/*
 * THEME VARIABLE PRIORITY:
 * 1. Elementor Global Colors (--e-global-color-*) - PRIMARY SOURCE
 * 2. Direct fallback values (Elementor color values)
 * 
 * AVAILABLE THEME COLORS:
 * - Primary: #0A4834 (Elementor Primary - Dark Green)
 * - Secondary: #F7941D (Elementor Secondary - Orange)
 * - Text: #333333 (Elementor Text - Dark Gray)
 * - Accent: #38C172 (Elementor Accent - Green)
 * 
 * AVAILABLE FONTS (Elementor):
 * - Primary: "Outfit" (weight: 600) - For headings
 * - Secondary: "Outfit" (weight: 400) - For subheadings
 * - Text: "Inter" (weight: 400) - For body text
 * - Accent: "Roboto" (weight: 500) - For special elements
 * 
 * HOW TO USE THESE VARIABLES:
 * 
 * ✅ DO:
 * - Use --wma-primary for all primary buttons, links, and accents
 * - Use --wma-secondary for secondary actions and highlights (Orange)
 * - Use --wma-text for all text colors
 * - Use --wma-bg for all backgrounds
 * - Use --wma-border for all borders
 * - Use --wma-font-primary for headings
 * - Use --wma-font-text for body text
 * - Use --wma-button-* variables for all button styling
 * - Use semantic colors (danger, success, warning) only for their specific purposes
 * 
 * ❌ DON'T:
 * - Don't use hardcoded colors like #10b981, #667eea, #3b82f6
 * - Don't create new color variables without theme inheritance
 * - Don't use purple, blue, green for decorative purposes
 * 
 * EXAMPLES:
 * 
 * Primary Button (Dark Green):
 *   background: var(--wma-primary);
 *   color: var(--wma-bg);
 *   border-radius: var(--wma-button-radius);
 *   font-size: var(--wma-button-font-size);
 *   font-weight: var(--wma-button-font-weight);
 *   font-family: var(--wma-button-font-family);
 *   padding: var(--wma-button-padding-y) var(--wma-button-padding-x);
 * 
 * Secondary Button (Orange):
 *   background: var(--wma-secondary);
 *   color: var(--wma-bg);
 *   border-radius: var(--wma-button-radius);
 *   font-size: var(--wma-button-font-size);
 * 
 * Heading:
 *   color: var(--wma-text);
 *   font-family: var(--wma-font-primary);
 *   font-weight: var(--wma-font-weight-primary);
 * 
 * Body Text:
 *   color: var(--wma-text);
 *   font-family: var(--wma-font-text);
 *   font-weight: var(--wma-font-weight-text);
 * 
 * Subtle text:
 *   color: var(--wma-text-light);
 * 
 * Card:
 *   background: var(--wma-bg);
 *   border: 1px solid var(--wma-border-light);
 *   box-shadow: var(--wma-shadow-md);
 * 
 * Error message:
 *   color: var(--wma-danger);
 *   background: var(--wma-danger-light);
 * 
 * Success message:
 *   color: var(--wma-success);
 *   background: var(--wma-success-light);
 */