/* Kliently : police des titres et thème clair (le thème sombre reste celui par défaut).
   Les couleurs « voile » (traits et fonds légers), « fond-rgb » (barres translucides) et la force des ombres
   passent par des variables : en clair, l'encre remplace le blanc, et les ombres s'adoucissent. */
@import url(polices/bricolage.css);

:root {
  --titres: 'Bricolage Grotesque', 'Plus Jakarta Sans', system-ui, sans-serif;
  --voile: 255 255 255;
  --fond-rgb: 31 29 39;
  --k-ombre: 1;
  --fort: #FFFFFF;
  --lavande: #D9CFFF;
}

:root[data-theme="clair"] {
  color-scheme: light;
  --app: #F5F1EA;
  --carte: #FFFFFF;
  --carte-2: #F8F5F0;
  --carte-3: #EFE9E0;
  --champ: #FFFFFF;
  --voile: 31 29 39;
  --fond-rgb: 245 241 234;
  --k-ombre: .2;
  --fort: #15131B;
  --ligne-1: rgba(31, 29, 39, .09);
  --ligne-2: rgba(31, 29, 39, .15);
  --ligne-3: rgba(31, 29, 39, .25);
  --texte: #1F1D27;
  --texte-2: #45414D;
  --discret: #5E5867;
  --accent: #B04416;
  --accent-clair: #9C3B12;
  --accent-encre: #FFFFFF;
  --accent-doux: rgba(176, 68, 22, .08);
  --accent-ligne: rgba(176, 68, 22, .32);
  --ciel: #9A94A3;
  --azur: #1F5FA8;
  --menthe: #157A55;
  --peche: #A0521C;
  --rose: #A8326A;
  --lavande: #5345B8;
  --succes: #157A3B;
  --succes-doux: rgba(21, 122, 59, .1);
  --attention: #A85008;
  --attention-doux: rgba(168, 80, 8, .1);
  --danger: #C02626;
  --danger-doux: rgba(192, 38, 38, .08);
  --ombre: 0 1px 2px rgba(31, 29, 39, .05), 0 14px 32px -20px rgba(31, 29, 39, .28);
  --ombre-lg: 0 24px 60px -24px rgba(31, 29, 39, .3), 0 0 0 1px var(--ligne-2);
}
:root[data-theme="clair"] ::selection { background: rgba(176, 68, 22, .2); color: var(--texte); }

/* Bouton clair / sombre (accueil, connexion) */
.theme-bouton { all: unset; box-sizing: border-box; cursor: pointer; display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--ligne-2); color: var(--texte-2); }
.theme-bouton:hover { color: var(--texte); border-color: var(--ligne-3); }
.theme-bouton:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.theme-bouton svg { width: 18px; height: 18px; }
.theme-bouton .soleil { display: none; }
:root[data-theme="clair"] .theme-bouton .soleil { display: block; }
:root[data-theme="clair"] .theme-bouton .lune { display: none; }