/* 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: 11 31 58; --surf: 245 248 252; --accent: 30 99 201; --accent2: 23 79 163; }
html.dark { --fg: 234 241 250; --surf: 6 14 27; --accent: 124 192 245; --accent2: 165 212 248; }
html { color-scheme: light; }
html.dark { color-scheme: dark; }
body { transition: background-color .2s ease, color .2s ease; }

::selection { background: rgb(var(--accent) / .3); color: rgb(var(--fg)); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgb(var(--accent) / .3); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: rgb(var(--accent) / .5); }

/* 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); }