/* Variables CSS - Electro World Checkout - Style Shopify */
:root {
    /* Couleurs principales du site */
    --ew-primary: #CBB390 !important;              /* Couleur accent dorée */
    --ew-primary-hover: #B8A07C !important;       /* Version plus foncée */
    --ew-primary-light: rgba(203, 179, 144, 0.1) !important;

    /* Couleurs de base */
    --ew-text: #1C1C1C !important;                /* Texte principal */
    --ew-text-light: #666666 !important;          /* Texte secondaire */
    --ew-text-muted: #999999 !important;          /* Texte très léger */

    /* Backgrounds */
    --ew-bg: #FFFFFF !important;                   /* Fond principal */
    --ew-bg-light: #F9F9F9 !important;           /* Fond léger */
    --ew-bg-warm: #F1E9E2 !important;            /* Fond chaud */

    /* Bordures */
    --ew-border: #EDEDED !important;              /* Bordure principale */
    --ew-border-light: rgba(237, 237, 237, 0.5) !important;
    --ew-border-focus: #CBB390 !important;        /* Bordure focus */

    /* États */
    --ew-success: #00A859 !important;             /* Vert succès */
    --ew-error: #E74C3C !important;               /* Rouge erreur */
    --ew-warning: #F39C12 !important;             /* Orange warning */

    /* Ombres - très subtiles comme Shopify */
    --ew-shadow-light: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    --ew-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    --ew-shadow-strong: 0 8px 25px rgba(0, 0, 0, 0.12) !important;

    /* Géométrie */
    --ew-radius: 8px !important;                  /* Bordures arrondies */
    --ew-radius-small: 4px !important;
    --ew-radius-large: 12px !important;

    /* Animation */
    --ew-transition: all 0.2s ease !important;    /* Plus rapide comme Shopify */

    /* Police */
    --ew-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;

    /* Espacement */
    --ew-spacing-xs: 4px !important;
    --ew-spacing-sm: 8px !important;
    --ew-spacing-md: 16px !important;
    --ew-spacing-lg: 24px !important;
    --ew-spacing-xl: 32px !important;

    /* Tailles de police */
    --ew-text-xs: 12px !important;
    --ew-text-sm: 14px !important;
    --ew-text-md: 16px !important;
    --ew-text-lg: 18px !important;
    --ew-text-xl: 24px !important;
}