:root {
    /* Palette de couleurs principales - Thème DolceVita DARK MODE */
    
    /* 🔴 ROUGE VIF - ACCENT PRINCIPAL (Pizza, Couverts, Action) */
    --color-primary: #E21818;    /* Rouge Cerise (du logo) - Boutons d'action */
    --color-primary-dark: #B51212; /* Rouge plus foncé (Hover) */
    --color-primary-light: #FF2E2E; /* Rouge plus clair (Notification/Tags) */
    --color-primary-lighter: #FFC0C0;
     /* Rouge très clair (Background léger) */
    
    /* 🟢 VERT FORÊT - COULEUR SECONDAIRE (Dolce Vita, Nature, Détails) */
    --color-secondary: #255710FF; /* Vert Forêt (du logo) - Titres, icônes non-action */
    --color-secondary-dark: #1F440FFF; /* Vert plus foncé */
    --color-secondary-light: #426B31FF; /* Vert plus clair */

    /* 🍦 DARK MODE - FOND DE L'ÉCRAN */
    --color-screen-bg: #1a1a1a; /* Fond sombre */
    
    /* ⚪️ COULEURS NEUTRES & CONSTRASTE */
    --color-accent: #FFFFFF; /* Blanc pur (Texte sur fond rouge/vert) */
    --color-accent-dark: #3d3d3d; /* Gris foncé pour dark mode */
    
    /* 📱 COULEURS STRUCTURELLES */
    --color-iphone-border: #222222; /* Noir Profond */
    --color-notch: #222222; /* Noir Profond */
    
    /* Couleurs de fond - DARK MODE */
    --bg-gradient-start: #1e1e1e; /* Fond sombre */
    --bg-gradient-end: #252525; /* Fond sombre légèrement plus clair */
    --bg-card: #2d2d2d; /* Carte sombre */
    --bg-card-transparent: rgba(45, 45, 45, 0.95); /* Carte sombre translucide */
    --bg-nav: rgba(30, 30, 30, 0.98); /* Navigation sombre */
    --bg-icon: #D6272B; /* Fond Rouge pour les icônes d'action */
    --bg-widget: rgba(45, 45, 45, 0.95); /* Widget sombre */
    
    /* Couleurs de texte - DARK MODE */
    --text-light: #FFFFFF; /* Texte blanc */
    --text-dark: #e8e8e8; /* Texte clair sur fond sombre */
    --text-medium: #b8b8b8; /* Texte moyen clair */
    --text-muted: #909090; /* Texte atténué clair */
    --text-action: var(--color-primary); /* Texte pour actions/prix */
    
    /* Couleurs de bordures - DARK MODE */
    --border-light: rgba(255, 255, 255, 0.2); /* Bordure claire sur fond sombre */
    --border-medium: #4a4a4a; /* Bordure moyenne sombre */
    --border-dark: rgba(255, 255, 255, 0.15); /* Bordure foncée */
    --border-iphone: #222222;
    --border-notification: var(--color-secondary); /* Vert pour une notification moins urgente que le rouge */
    
    /* Couleurs d'ombres et effets - DARK MODE */
    --shadow-color: rgba(0, 0, 0, 0.4); /* Ombres standard sombres */
    --shadow-color-light: rgba(0, 0, 0, 0.3);
    --shadow-color-dark: rgba(0, 0, 0, 0.5);
    --shadow-color-medium: rgba(0, 0, 0, 0.4);
    --shadow-color-red: rgba(214, 39, 43, 0.2); /* Ombres Rouges (Primary) */
    --shadow-color-green: rgba(56, 118, 29, 0.2); /* Ombres Vertes (Secondary) */
    --shadow-iphone: 0px 20px 15px rgba(0, 0, 0, 0.4);
    
    /* Transparences - DARK MODE */
    --overlay-dark: rgba(0, 0, 0, 0.3); 
    --overlay-light: rgba(30, 30, 30, 0.9);
    --overlay-medium: rgba(60, 60, 60, 0.8);
    --overlay-primary: rgba(214, 39, 43, 0.08); /* Overlay rouge (Primary) */
    --overlay-secondary: rgba(56, 118, 29, 0.08); /* Overlay vert (Secondary) */
    
    /* Dégradés prédéfinis - Style DolceVita DARK MODE */
    --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    --gradient-secondary: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-dark) 100%);
    --gradient-button: var(--gradient-primary);
    --gradient-button-hover: linear-gradient(145deg, var(--color-primary-dark), var(--color-primary-light));
    --gradient-bg: linear-gradient(135deg, #1e1e1e 0%, #252525 100%);
    --gradient-screen: linear-gradient(135deg, #1a1a1a 0%, #252525 100%);
    --gradient-accent: linear-gradient(135deg, #3d3d3d 0%, #2d2d2d 100%);
    
    /* ... (Autres variables de glassmorphism, tailles, espacements inchangées) ... */
    
    /* Tailles et espacements */
    --border-radius-sm: 15px;
    --border-radius-md: 20px;
    --border-radius-lg: 25px;
    --border-radius-circle: 50%;
    --border-radius-iphone: 40px;
    --border-radius-widget: 20px;
    --border-radius-icon: 15px;
    --spacing-xs: 10px;
    --spacing-sm: 15px;
    --spacing-md: 20px;
    --spacing-lg: 25px;
    --spacing-xl: 30px;
    --spacing-xxl: 40px;
    --iphone-width: 320px;
    --iphone-height: 700px;
    --iphone-border: 10px;
    --notch-width: 200px;
    --notch-height: 30px;
    --icon-size: 50px;
    --widget-height: 120px;
    --transition-fast: 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    --transition-normal: 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
    --transition-slow: 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);
    --transition-bounce: 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --transition-ios: 400ms ease-in-out;
    --opacity-low: 0.4;
    --opacity-medium: 0.6;
    --opacity-high: 0.8;
    --z-notch: 50;
    --z-screen: 10;
    --z-icon: 100;
    --z-widget: 100;
    --z-nav: 200;
    --z-notification: 300;
}

/* ============================================
   MODE SOMBRE - Mobile / Tablette (prefers-color-scheme: dark)
   Textes lisibles sur fond sombre
   ============================================ */
/* FORCER LE MODE SOMBRE POUR INDEX.HTML */
:root {
    --shadow-color-dark: rgba(0, 0, 0, 0.5);
    --shadow-color-medium: rgba(0, 0, 0, 0.4);
    --overlay-light: rgba(30, 30, 30, 0.9);
    --overlay-medium: rgba(60, 60, 60, 0.8);
    --gradient-accent: linear-gradient(135deg, #3d3d3d 0%, #2d2d2d 100%);
    
    /* Fonds sombres */
    --color-screen-bg: #1a1a1a;
    --bg-gradient-start: #1e1e1e;
    --bg-gradient-end: #252525;
    --bg-card: #2d2d2d;
    --bg-card-transparent: rgba(45, 45, 45, 0.95);
    --bg-nav: rgba(30, 30, 30, 0.98);
    --bg-widget: rgba(45, 45, 45, 0.95);
    --color-accent-dark: #3d3d3d;
    
    /* Textes lisibles (clairs sur fond sombre) */
    --text-dark: #e8e8e8;
    --text-medium: #b8b8b8;
    --text-muted: #909090;
    --text-light: #ffffff;
    
    /* Bordures visibles */
    --border-medium: #4a4a4a;
    --border-dark: rgba(255, 255, 255, 0.15);
    --border-light: rgba(255, 255, 255, 0.2);
    
    /* Ombres adaptées */
    --shadow-color: rgba(0, 0, 0, 0.4);
    --shadow-color-light: rgba(0, 0, 0, 0.3);
    --overlay-dark: rgba(0, 0, 0, 0.3);
    
    /* Dégradés sombres */
    --gradient-bg: linear-gradient(135deg, #1e1e1e 0%, #252525 100%);
    --gradient-screen: linear-gradient(135deg, #1a1a1a 0%, #252525 100%);
}

/* Mode sombre pour les autres pages (si nécessaire) */
@media (prefers-color-scheme: dark) {
    :root {
        --shadow-color-dark: rgba(0, 0, 0, 0.5);
        --shadow-color-medium: rgba(0, 0, 0, 0.4);
        --overlay-light: rgba(30, 30, 30, 0.9);
        --overlay-medium: rgba(60, 60, 60, 0.8);
        --gradient-accent: linear-gradient(135deg, #3d3d3d 0%, #2d2d2d 100%);
        
        /* Fonds sombres */
        --color-screen-bg: #1a1a1a;
        --bg-gradient-start: #1e1e1e;
        --bg-gradient-end: #252525;
        --bg-card: #2d2d2d;
        --bg-card-transparent: rgba(45, 45, 45, 0.95);
        --bg-nav: rgba(30, 30, 30, 0.98);
        --bg-widget: rgba(45, 45, 45, 0.95);
        --color-accent-dark: #3d3d3d;
        
        /* Textes lisibles (clairs sur fond sombre) */
        --text-dark: #e8e8e8;
        --text-medium: #b8b8b8;
        --text-muted: #909090;
        --text-light: #ffffff;
        
        /* Bordures visibles */
        --border-medium: #4a4a4a;
        --border-dark: rgba(255, 255, 255, 0.15);
        --border-light: rgba(255, 255, 255, 0.2);
        
        /* Ombres adaptées */
        --shadow-color: rgba(0, 0, 0, 0.4);
        --shadow-color-light: rgba(0, 0, 0, 0.3);
        --overlay-dark: rgba(0, 0, 0, 0.3);
        
        /* Dégradés sombres */
        --gradient-bg: linear-gradient(135deg, #1e1e1e 0%, #252525 100%);
        --gradient-screen: linear-gradient(135deg, #1a1a1a 0%, #252525 100%);
    }
}

/* ============================================
   FORMULAIRES - Lisibilité globale tous modes
   ============================================ */
input,
textarea,
select,
.form-control,
.form-select {
    background-color: #ffffff !important;
    color: #1a1a1a !important;
    -webkit-text-fill-color: #1a1a1a !important;
    border: 1.5px solid #d0d0d0 !important;
    font-size: 16px !important;
    opacity: 1;
}

input::placeholder,
textarea::placeholder,
.form-control::placeholder {
    color: #999999 !important;
    -webkit-text-fill-color: #999999 !important;
    opacity: 1 !important;
}

input:focus,
textarea:focus,
select:focus,
.form-control:focus,
.form-select:focus {
    background-color: #ffffff !important;
    color: #1a1a1a !important;
    -webkit-text-fill-color: #1a1a1a !important;
    border-color: var(--color-primary, #c41e3a) !important;
    box-shadow: 0 0 0 3px rgba(196, 30, 58, 0.15) !important;
    outline: none !important;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
    -webkit-text-fill-color: #1a1a1a !important;
    background-color: #ffffff !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* Classes utilitaires spécifiques à DolceVita */
.dolcevita-primary {
    color: var(--color-primary); /* Rouge */
}

.dolcevita-bg-primary {
    background-color: var(--color-primary); /* Rouge */
}

.dolcevita-secondary {
    color: var(--color-secondary); /* Vert */
}

.dolcevita-bg-secondary {
    background-color: var(--color-secondary); /* Vert */
}

.dolcevita-text-dark {
    color: var(--text-dark);
}

/* Effets hover spécifiques */
.hover-primary:hover {
    background-color: var(--color-primary-dark);
    color: white;
}

.hover-secondary:hover {
    background-color: var(--color-secondary-dark);
    color: white;
}