/*
 * GenWave Design Tokens
 * =====================
 * CSS custom properties that inherit from Elementor globals.
 * Used by both built-in and AI-generated widgets.
 */

:root {
    /* Colors — inherit from Elementor Global Colors */
    --gw-color-primary: var(--e-global-color-primary, #0071e3);
    --gw-color-secondary: var(--e-global-color-secondary, #6c757d);
    --gw-color-text: var(--e-global-color-text, #1a1a2e);
    --gw-color-accent: var(--e-global-color-accent, #8b5cf6);
    --gw-color-bg: #ffffff;
    --gw-color-bg-alt: #f8fafc;
    --gw-color-bg-dark: #0f172a;
    --gw-color-border: #e2e8f0;
    --gw-color-muted: #94a3b8;

    /* Typography — inherit from Elementor Global Fonts */
    --gw-font-primary: var(--e-global-typography-primary-font-family, 'Inter', sans-serif);
    --gw-font-secondary: var(--e-global-typography-secondary-font-family, 'Inter', sans-serif);

    /* Spacing Scale */
    --gw-space-xs: 4px;
    --gw-space-sm: 8px;
    --gw-space-md: 16px;
    --gw-space-lg: 24px;
    --gw-space-xl: 32px;
    --gw-space-2xl: 48px;
    --gw-space-3xl: 64px;

    /* Border Radius */
    --gw-radius-sm: 6px;
    --gw-radius-md: 10px;
    --gw-radius-lg: 16px;
    --gw-radius-xl: 24px;
    --gw-radius-full: 9999px;

    /* Shadows */
    --gw-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --gw-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --gw-shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12);
    --gw-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.15);

    /* Transitions */
    --gw-transition-fast: 0.15s ease;
    --gw-transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --gw-transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    --gw-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}