/* ============================================================
   VARIABLES SÉMANTIQUES
   Indépendantes du thème de couleur. Universelles pour success,
   warning, error, info — signaux UX standards.
   ============================================================ */

:root {
    --color-success: #16A34A;
    --color-success-text: #FFFFFF;
    
    --color-danger: #C44545;
    --color-danger-text: #FFFFFF;
    
    --color-warning: #F59E0B;
    --color-warning-text: #FFFFFF;
}

html.dark {
    --color-success: #22C55E;
    --color-danger: #DC5858;
    --color-warning: #FBBF24;
    --color-warning-text: #1F2937;
}

/* ============================================================
   THÈMES — MODE CLAIR
   Collection "cuisine cozy" : 6 ambiances distinctes
    
   - theme-nature 🌿 — le feutré forestier
    Fond gris-vert sombre, header vert forêt profond, accents vert sauge et noisette chaleureux.
    
   - theme-ocean 🌊 — la nuit maritime
    Fond bleu-ardoise, header bleu nuit, accents bleu-ciel lumineux et touches sable.
    
   - theme-pain-dore 🍞 — la boulangerie du soir
    Fond brun chocolat sombre, header encore plus foncé, accents caramel et miel qui réchauffent.
  
   - theme-jardin-aromatique 🌱 — le potager au crépuscule
    Fond gris-vert légèrement différent de nature (plus jaune-olive), accent rose fleur de thym (plus discret en dark), jaune safran comme décoration.
  
   - theme-epices 🌶️ — le marché aux épices nocturne
    Fond brun paprika sombre, header profond, accents terracotta vif et safran.
  
   - theme-glycine 🌸 — la pergola au soir
    Fond gris-violet, header aubergine, accents lilas doux et caramel. Le plus "raffiné" de la collection.
   ============================================================ */

.theme-nature {
    --color-text: #344E41;
    --color-bg: #FDF6E3;
    --color-surface: #FFFBEF;
    --color-primary: #588157;
    --color-accent: #A47551;
    --color-secondary: #CED882;
    --color-border: #E0D9B5;
    --color-input-border: #8A9680;
    --color-muted: #7A8471;
    --color-header-bg: #344E41;
    --color-header-text: #FDF6E3;
    --color-header-hover: #588157;
}

.theme-ocean {
    --color-text: #2C4A6B;
    --color-bg: #F0F4F7;
    --color-surface: #FFFFFF;
    --color-primary: #7BA7C7;
    --color-accent: #B89068;
    --color-secondary: #B8D4E8;
    --color-border: #D8E0E8;
    --color-input-border: #8AA4BC;
    --color-muted: #6B8099;
    --color-header-bg: #2C4A6B;
    --color-header-text: #F0F4F7;
    --color-header-hover: #4A6E94;
}

.theme-pain-dore {
    --color-text: #4A3628;
    --color-bg: #F5E6C8;
    --color-surface: #FBF2DB;
    --color-primary: #8B5A3C;
    --color-accent: #C19660;
    --color-secondary: #E8D4A8;
    --color-border: #E0CFA8;
    --color-input-border: #A88B64;
    --color-muted: #8A7560;
    --color-header-bg: #4A3628;
    --color-header-text: #F5E6C8;
    --color-header-hover: #6B4E38;
}

.theme-jardin-aromatique {
    --color-text: #2A3D2A;
    --color-bg: #F0EDD8;
    --color-surface: #F8F5E4;
    --color-primary: #7A9060;
    --color-accent: #C47A7A;
    --color-secondary: #D8C474;
    --color-border: #D5D0B0;
    --color-input-border: #8FA078;
    --color-muted: #707760;
    --color-header-bg: #2A3D2A;
    --color-header-text: #F0EDD8;
    --color-header-hover: #4A5E44;
}

.theme-epices {
    --color-text: #4A2518;
    --color-bg: #F7E8D3;
    --color-surface: #FCF3E4;
    --color-primary: #B8543F;
    --color-accent: #D4A54C;
    --color-secondary: #E8BFA0;
    --color-border: #E5D0B3;
    --color-input-border: #B08C74;
    --color-muted: #8A5C48;
    --color-header-bg: #4A2518;
    --color-header-text: #F7E8D3;
    --color-header-hover: #6B3826;
}

.theme-glycine {
    --color-text: #4A3850;
    --color-bg: #F5EEE8;
    --color-surface: #FCF7F2;
    --color-primary: #A888B0;
    --color-accent: #C9966B;
    --color-secondary: #E8D0D4;
    --color-border: #E0D5D8;
    --color-input-border: #A494A8;
    --color-muted: #7A6A80;
    --color-header-bg: #4A3850;
    --color-header-text: #F5EEE8;
    --color-header-hover: #6B5270;
}


/* ============================================================
   THÈMES — MODE SOMBRE
   Recette unifiée, testée et validée sur theme-nature
   ============================================================ */

html.dark .theme-nature {
    --color-text: #D8DCD0;
    --color-bg: #1E2320;
    --color-surface: #2E352F;
    --color-primary: #7FA678;
    --color-accent: #C49868;
    --color-secondary: #A0B872;
    --color-border: #4A5148;
    --color-input-border: #6A7068;
    --color-muted: #8E948A;
    --color-header-bg: #2A3D33;
    --color-header-text: #E8ECDE;
    --color-header-hover: #4A6648;
}

html.dark .theme-ocean {
    --color-text: #D4DEE8;
    --color-bg: #1C2530;
    --color-surface: #2C3847;
    --color-primary: #8FBDD8;
    --color-accent: #D4A078;
    --color-secondary: #90B4D0;
    --color-border: #485468;
    --color-input-border: #6A7A8E;
    --color-muted: #8A96A8;
    --color-header-bg: #26384C;
    --color-header-text: #DCE6F0;
    --color-header-hover: #446080;
}

html.dark .theme-pain-dore {
    --color-text: #E8D8BC;
    --color-bg: #26201A;
    --color-surface: #38302A;
    --color-primary: #C48A60;
    --color-accent: #D8A875;
    --color-secondary: #B89478;
    --color-border: #524840;
    --color-input-border: #786A5E;
    --color-muted: #988878;
    --color-header-bg: #2E2620;
    --color-header-text: #E8D8BC;
    --color-header-hover: #4E4236;
}

html.dark .theme-jardin-aromatique {
    --color-text: #D8DCC8;
    --color-bg: #1F2520;
    --color-surface: #2F382F;
    --color-primary: #A0B878;
    --color-accent: #D68A8A;
    --color-secondary: #B0A058;
    --color-border: #4A524A;
    --color-input-border: #6A7468;
    --color-muted: #8C9288;
    --color-header-bg: #293228;
    --color-header-text: #DDE4CC;
    --color-header-hover: #465844;
}

html.dark .theme-epices {
    --color-text: #E8D0B8;
    --color-bg: #252018;
    --color-surface: #3A2F24;
    --color-primary: #D46B52;
    --color-accent: #D8A858;
    --color-secondary: #C89078;
    --color-border: #524438;
    --color-input-border: #786454;
    --color-muted: #9C8470;
    --color-header-bg: #2E241C;
    --color-header-text: #E8D0B8;
    --color-header-hover: #503C2E;
}

html.dark .theme-glycine {
    --color-text: #E0D4E0;
    --color-bg: #252028;
    --color-surface: #352E38;
    --color-primary: #C0A0C8;
    --color-accent: #D4A078;
    --color-secondary: #B89CA0;
    --color-border: #4C4450;
    --color-input-border: #6E6272;
    --color-muted: #988C9C;
    --color-header-bg: #2E2834;
    --color-header-text: #E0D4E0;
    --color-header-hover: #4E4258;
}