/* <link rel="stylesheet" href="themes.css"> */

    :root {
      --primary-color: #d0d0d0; /* gris foncé pour header, top-header, div latérale gauche et droite, et footer */
      --secondary-color: #a6a6a6; /* gris pour lecture avec lettres blanches */
      --third-color: white; /* Zone centrale des messages */
      --fourth-color: #333; /* noir adouci pour le texte */
      --background-color: var(--third-color); /* Couleur de fond par défaut */
      --text-color: var(--fourth-color); /* Couleur du texte par défaut */
      --button-color:#00ff00; /* vert, couleur des buttons */
      --button-background:#00ff00; /* vert, couleur des buttons */
      --userlist-background-color:var(--secondary-color);
      --userlist-color:white;   
    }

    /* Thème jour */
    [data-theme="light"] {
      --primary-color: #d0d0d0;
      --secondary-color: #a6a6a6;
      --third-color: white;
      --fourth-color: #333;
      --background-color: var(--third-color);
      --text-color: var(--fourth-color);
      --button-color: var(--button-color);
      --button-background:var(--secondary-color);
      --userlist-background-color:var(--secondary-color);
      --userlist-color:white;      
    }

    /* Thème nuit */
    [data-theme="dark"] {
      --primary-color: #333;
      --secondary-color: #444;
      --third-color: #111;
      --fourth-color: #ddd;
      --background-color: var(--third-color);
      --text-color: var(--fourth-color);
      --button-color: white;
      --button-background:var(--secondary-color);
      --userlist-background-color:var(--secondary-color);
      --userlist-color:white;   
      
    }

    /* Thème bleu */
    /*
    [data-theme="blue"] {
      --primary-color: #007BFF;
      --secondary-color: #0056b3; 
      --third-color:#c2dbf2 ; 
      --fourth-color: #002f6c;
      --background-color: var(--third-color);
      --text-color: var(--fourth-color);
      --button-color: white;
      --button-background:var(--secondary-color);
      --userlist-background-color:var(--secondary-color);
      --userlist-color:white;   
    }
    */
    
   :root[data-theme="blue"] {
  --primary-color: #c2dbf2;/* #c2dbf2 Bleu principal légèrement foncé header footer et deux div laterales*/
  --secondary-color: #003d80; /* #003d80 Accent plus profond */
  --third-color: #b0d4f1;     /* #b0d4f1 Bleu clair adouci */
  --fourth-color: #00264d ;   /* #00264d Bleu sombre pour le contraste pour le texte */
  
  --background-color: var(--third-color); /* Arrière-plan avec teinte adoucie */
  --text-color: var(--fourth-color); /* Texte en bleu très sombre */
  
  --button-background: var(--primary-color); /* Boutons utilisant le bleu principal */
  --button-color: var(--fourth-color); /* Texte blanc pour les boutons */
  
  --userlist-background-color: var(--secondary-color); /* Fond de liste avec du bleu profond */
  --userlist-color:blue; /* Texte en blanc */
  
  --select-background: var(--third-color); /* Fond des menus déroulants */
  --select-color: var(--fourth-color); /* Texte en bleu sombre */
  
  --border-color: var(--primary-color); /* Cadres avec le bleu principal */
  --hover-color: var(--secondary-color); /* Couleur de survol plus prononcée */
}

/* <!-- ---------------------------------------- --> */    
:root[data-theme="pink"] {
  --primary-color: #FADADD; /* #FADADD Rose pastel principal (pour header, footer, et div latérales) */
  --secondary-color: #D883A6; /* #D883A6 Accent rose légèrement plus profond */
  --third-color: #FFE4E9;    /* #FFE4E9 Rose clair adouci pour les arrière-plans */
  --fourth-color: #924E7D;   /* #924E7D Rose sombre pour le contraste du texte */

  --background-color: var(--third-color); /* Arrière-plan doux et pastel */
  --text-color: var(--fourth-color); /* Texte en rose sombre pour une bonne lisibilité */

  --button-background: var(--primary-color); /* Boutons avec le rose principal doux */
  --button-color: var(--fourth-color); /* Texte sombre sur les boutons */

  --userlist-background-color: var(--secondary-color); /* Fond de la liste utilisateur avec un accent rose */
  --userlist-color: white; /* Texte blanc pour contraste dans la liste utilisateurs */

  --select-background: var(--third-color); /* Fond des menus déroulants doux */
  --select-color: var(--fourth-color); /* Texte sombre dans les menus */

  --border-color: var(--primary-color); /* Bordures en rose pastel principal */
  --hover-color: var(--secondary-color); /* Couleur de survol plus prononcée */
}

/* <!--  ----------------------------------------------------   -->  */
 /* <!--  ----------------------------------------------------   -->  */
 

:root[data-theme="mauve"] {
  --primary-color: #EADAF5; /* #EADAF5 Mauve pastel principal (pour header, footer, et div latérales) */
  --secondary-color: #C8A2D6; /* #C8A2D6 Accent mauve légèrement plus profond */
  --third-color: #F3EAFD;    /* #F3EAFD Mauve clair adouci pour les arrière-plans */
  --fourth-color: #7B5C9B;   /* #7B5C9B Mauve sombre pour le contraste du texte */

  --background-color: var(--third-color); /* Arrière-plan doux et pastel */
  --text-color: var(--fourth-color); /* Texte en mauve sombre pour une bonne lisibilité */

  --button-background: var(--primary-color); /* Boutons avec le mauve principal doux */
  --button-color: var(--fourth-color); /* Texte sombre sur les boutons */

  --userlist-background-color: var(--secondary-color); /* Fond de la liste utilisateur avec un accent mauve */
  --userlist-color: white; /* Texte blanc pour contraste dans la liste utilisateurs */

  --select-background: var(--third-color); /* Fond des menus déroulants doux */
  --select-color: var(--fourth-color); /* Texte sombre dans les menus */

  --border-color: var(--primary-color); /* Bordures en mauve pastel principal */
  --hover-color: var(--secondary-color); /* Couleur de survol plus prononcée */
}


/* Thème bleu foncé ServerOne */
:root[data-theme="serverblue"] {

  --primary-color: #082b52;     /* header, footer, côtés */
  --secondary-color: #103456;   /* zones secondaires */
  --third-color: #020b16;       /* fond messages */
  --fourth-color: #e8f4ff;      /* texte clair */

  --background-color: var(--third-color);
  --text-color: var(--fourth-color);

  --button-background: #0b5fa5;
  --button-color: white;

  --userlist-background-color: var(--secondary-color);
  --userlist-color: white;

  --select-background: #06182d;
  --select-color: white;

  --border-color: #1b6ca8;
  --hover-color: #1684d8;
}


/* BLEU GLACIER DOUX */

body[data-theme="glacier"] {
    --primary-color: #7899b8;
    --secondary-color: #6689aa;
    --third-color: #e9f0f5;
    --fourth-color: #26394d;

    --background-color: var(--third-color);
    --text-color: var(--fourth-color);

    --button-background: #7899b8;
    --button-color: #ffffff;

    --userlist-background-color: #e9f0f5;
    --userlist-color: #26394d;

    --select-background: #e9f0f5;
    --select-color: #26394d;

    --border-color: #c1d1df;
    --hover-color: #6689aa;
}

/* CREME */

body[data-theme="creme"] {
    --primary-color: #d6c9b5;
    --secondary-color: #b5a58e;
    --third-color: #f3ecdf;
    --fourth-color: #403b34;

    --background-color: var(--third-color);
    --text-color: var(--fourth-color);

    --button-background: #a99579;
    --button-color: #ffffff;

    --userlist-background-color: #f3ecdf;
    --userlist-color: #403b34;

    --select-background: #f3ecdf;
    --select-color: #403b34;

    --border-color: #d5c8b5;
    --hover-color: #89765e;
}