/* Thème clair (par défaut) / sombre : variables RGB consommées par les tokens Tailwind "ink", "bst-950", "bst-400" et "bst-300" */
:root { --fg: 15 23 42; --surf: 253 246 245; --accent: 29 78 216; --accent2: 37 99 235; }
html.dark { --fg: 255 255 255; --surf: 7 14 28; --accent: 96 165 250; --accent2: 147 197 253; }
html { color-scheme: light; }
html.dark { color-scheme: dark; }
body { transition: background-color .2s ease, color .2s ease; }

/* Bouton bascule thème (icône lune/soleil) */
.theme-toggle { position: relative; width: 38px; height: 38px; }
.theme-toggle svg { position: absolute; inset: 0; margin: auto; transition: opacity .2s ease, transform .3s ease; }
.theme-toggle .icon-moon { opacity: 1; transform: rotate(0deg) scale(1); }
.theme-toggle .icon-sun { opacity: 0; transform: rotate(-90deg) scale(.5); }
html.dark .theme-toggle .icon-moon { opacity: 0; transform: rotate(90deg) scale(.5); }
html.dark .theme-toggle .icon-sun { opacity: 1; transform: rotate(0deg) scale(1); }