/*https://coolors.co/tailwind/*/
:root {
  /* Thème par défaut : bleu (Maquette 1) */
  --bg-body: #dde6ec; /* Couleur de fond externe (desktop) */
  --bg-app: #f8fbfd; /* Fond de l'application */
  --bg-card: #ffffff;
  --bg-input: #f2f7fa;
  --text-main: #12263a;
  --text-muted: #64748b;
  /*--primary: #6d28d9; /* Violet 
  --primary-hover: #5b21b6;*/
  --border-color: #d7e2ea;
  --card-border: 1px solid #d7e2ea;
  --card-shadow: 0 8px 24px rgba(17, 24, 39, 0.06);
  --star-color: #eab308;
  --rank-bg: #111111;
  --rank-color: #ffffff;

  /* Variables de base (Theme clair bleu) */
  --primary: #006ea3;
  --primary-hover: #00567f;

  /* Variables "fétiches" (Gris transparents) */
  --gray-transparent-light: rgba(0, 0, 0, 0.03);
  --gray-transparent-medium: rgba(0, 0, 0, 0.08);

  /* Dimensions & Ombres */
  --border-radius-sm: 6px;
  --border-radius-md: 10px;
  --border-radius-lg: 16px;
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
}

body.theme-vert {
  /* Thème vert (Maquette 2) */
  --bg-body: #dfece8;
  --bg-app: #f7fdfa;
  --bg-card: #ffffff;
  --bg-input: #f1faf7;
  --text-main: #16352f;
  --text-muted: #5e7d76;
  --primary: #2a9d8f;
  --primary-hover: #1f7a6f;
  --border-color: #d6e7e2;
  --card-border: 1px solid #d6e7e2;
  --card-shadow: 0 8px 24px rgba(42, 157, 143, 0.08);
  --rank-bg: #1f7a6f;
  --rank-color: #ffffff;
}

body.theme-gold {
  /* Thème Sombre & Or (Maquette 3) */
  --bg-body: #090805;
  --bg-app: #0f0c06;
  --bg-card: #17120a;
  --bg-input: #120d05;
  --text-main: #fff6df;
  --text-muted: #c3b28e;
  --primary: #FCBD43;
  --primary-hover: #d89a1f;
  --border-color: #332811;
  /* Effet néon / glow sur les cartes */
  --card-border: 1px solid rgba(252, 189, 67, 0.24);
  --card-shadow: 0 0 12px rgba(252, 189, 67, 0.09);
  --rank-bg: #FCBD43;
  --rank-color: #000000;
}

body.theme-blue {
  /* Thème Sombre & Bleu (Maquette 4) */
  --bg-body: #040b12;
  --bg-app: #05111d;
  --bg-card: #0a1828;
  --bg-input: #07111c;
  --text-main: #eef6ff;
  --text-muted: #93aac4;
  --primary: #01A7F3;
  --primary-hover: #0286c5;
  --border-color: #14273b;
  /* Effet néon / glow sur les cartes */
  --card-border: 1px solid rgba(1, 167, 243, 0.24);
  --card-shadow: 0 0 12px rgba(1, 167, 243, 0.1);
  --rank-bg: #01A7F3;
  --rank-color: #ffffff;
}