/* Kola — Material 3 color roles (générés via Material Color Utilities / HCT)
   Sources de marque : primary = vert forêt #0C6B47 · tertiary = terre de kola #B23A2E
   Utilisables tels quels par tes Web Components Lit (les custom properties traversent le Shadow DOM). */

:root, .kola-light {
    --md-sys-color-primary: #0E6C48;
    --md-sys-color-on-primary: #FFFFFF;
    --md-sys-color-primary-container: #A0F4C6;
    --md-sys-color-on-primary-container: #002112;
    --md-sys-color-secondary: #4B6455;
    --md-sys-color-on-secondary: #FFFFFF;
    --md-sys-color-secondary-container: #CDE9D6;
    --md-sys-color-on-secondary-container: #072014;
    --md-sys-color-tertiary: #AA3529;
    --md-sys-color-on-tertiary: #FFFFFF;
    --md-sys-color-tertiary-container: #FFDAD5;
    --md-sys-color-on-tertiary-container: #410001;
    --md-sys-color-error: #B4271F;
    --md-sys-color-on-error: #FFFFFF;
    --md-sys-color-error-container: #FFDAD5;
    --md-sys-color-on-error-container: #410001;
    --md-sys-color-background: #FFF8F5;
    --md-sys-color-on-background: #221A15;
    --md-sys-color-surface: #FFF8F5;
    --md-sys-color-on-surface: #221A15;
    --md-sys-color-surface-variant: #FBDDCA;
    --md-sys-color-on-surface-variant: #564335;
    --md-sys-color-outline: #8A7263;
    --md-sys-color-outline-variant: #DDC1AF;
    --md-sys-color-surface-dim: #E7D7CE;
    --md-sys-color-surface-bright: #FFF8F5;
    --md-sys-color-surface-container-lowest: #FFFFFF;
    --md-sys-color-surface-container-low: #FFF1E9;
    --md-sys-color-surface-container: #FBEBE1;
    --md-sys-color-surface-container-high: #F5E5DC;
    --md-sys-color-surface-container-highest: #F0DFD6;
    --md-sys-color-inverse-surface: #382F29;
    --md-sys-color-inverse-on-surface: #FEEEE4;
    --md-sys-color-inverse-primary: #85D7AB;
    --md-sys-color-scrim: #000000;
    --md-sys-color-shadow: #000000;

    --md-ref-typeface-brand: 'Plus Jakarta Sans', system-ui, sans-serif;
    --md-ref-typeface-plain: 'Plus Jakarta Sans', system-ui, sans-serif;

    --md-sys-shape-corner-none: 0px;
    --md-sys-shape-corner-extra-small: 4px;
    --md-sys-shape-corner-small: 8px;
    --md-sys-shape-corner-medium: 12px;
    --md-sys-shape-corner-large: 16px;
    --md-sys-shape-corner-extra-large: 28px;
    --md-sys-shape-corner-full: 9999px;

    /* Accent ambre Kola (hors rôles M3 standards, cf. charte-material3.md §1).
       Texte foncé sur ambre — variante AA pour lien sur fond clair. */
    --kola-accent: #F5A524;
    --kola-accent-on-light: #B07410;
}

@media (prefers-color-scheme: dark) {
  :root {
    --md-sys-color-primary: #85D7AB;
    --md-sys-color-on-primary: #003823;
    --md-sys-color-primary-container: #005234;
    --md-sys-color-on-primary-container: #A0F4C6;
    --md-sys-color-secondary: #B1CDBB;
    --md-sys-color-on-secondary: #1D3528;
    --md-sys-color-secondary-container: #334C3E;
    --md-sys-color-on-secondary-container: #CDE9D6;
    --md-sys-color-tertiary: #FFB4A9;
    --md-sys-color-on-tertiary: #680102;
    --md-sys-color-tertiary-container: #891C15;
    --md-sys-color-on-tertiary-container: #FFDAD5;
    --md-sys-color-error: #FFB4A9;
    --md-sys-color-on-error: #690002;
    --md-sys-color-error-container: #910809;
    --md-sys-color-on-error-container: #FFDAD5;
    --md-sys-color-background: #19120D;
    --md-sys-color-on-background: #F0DFD6;
    --md-sys-color-surface: #19120D;
    --md-sys-color-on-surface: #F0DFD6;
    --md-sys-color-surface-variant: #564335;
    --md-sys-color-on-surface-variant: #DDC1AF;
    --md-sys-color-outline: #A58C7C;
    --md-sys-color-outline-variant: #564335;
    --md-sys-color-surface-dim: #19120D;
    --md-sys-color-surface-bright: #413731;
    --md-sys-color-surface-container-lowest: #140D08;
    --md-sys-color-surface-container-low: #221A15;
    --md-sys-color-surface-container: #261E18;
    --md-sys-color-surface-container-high: #312822;
    --md-sys-color-surface-container-highest: #3C332D;
    --md-sys-color-inverse-surface: #F0DFD6;
    --md-sys-color-inverse-on-surface: #382F29;
    --md-sys-color-inverse-primary: #0E6C48;
    --md-sys-color-scrim: #000000;
    --md-sys-color-shadow: #000000;

    /* Accent ambre Kola (variante éclaircie pour AA en mode sombre). */
    --kola-accent: #F5A524;
    --kola-accent-on-light: #FFC763;
  }
}
.kola-dark {
    --md-sys-color-primary: #85D7AB;
    --md-sys-color-on-primary: #003823;
    --md-sys-color-primary-container: #005234;
    --md-sys-color-on-primary-container: #A0F4C6;
    --md-sys-color-secondary: #B1CDBB;
    --md-sys-color-on-secondary: #1D3528;
    --md-sys-color-secondary-container: #334C3E;
    --md-sys-color-on-secondary-container: #CDE9D6;
    --md-sys-color-tertiary: #FFB4A9;
    --md-sys-color-on-tertiary: #680102;
    --md-sys-color-tertiary-container: #891C15;
    --md-sys-color-on-tertiary-container: #FFDAD5;
    --md-sys-color-error: #FFB4A9;
    --md-sys-color-on-error: #690002;
    --md-sys-color-error-container: #910809;
    --md-sys-color-on-error-container: #FFDAD5;
    --md-sys-color-background: #19120D;
    --md-sys-color-on-background: #F0DFD6;
    --md-sys-color-surface: #19120D;
    --md-sys-color-on-surface: #F0DFD6;
    --md-sys-color-surface-variant: #564335;
    --md-sys-color-on-surface-variant: #DDC1AF;
    --md-sys-color-outline: #A58C7C;
    --md-sys-color-outline-variant: #564335;
    --md-sys-color-surface-dim: #19120D;
    --md-sys-color-surface-bright: #413731;
    --md-sys-color-surface-container-lowest: #140D08;
    --md-sys-color-surface-container-low: #221A15;
    --md-sys-color-surface-container: #261E18;
    --md-sys-color-surface-container-high: #312822;
    --md-sys-color-surface-container-highest: #3C332D;
    --md-sys-color-inverse-surface: #F0DFD6;
    --md-sys-color-inverse-on-surface: #382F29;
    --md-sys-color-inverse-primary: #0E6C48;
    --md-sys-color-scrim: #000000;
    --md-sys-color-shadow: #000000;

    /* Accent ambre Kola (variante éclaircie pour AA en mode sombre). */
    --kola-accent: #F5A524;
    --kola-accent-on-light: #FFC763;
}