/*
 * Barras de rolagem no padrão Taboka (todas as páginas do taboka.shop).
 * Usa a cor de destaque do tema: vermelho no tema escuro, a cor do tema claro quando ativo.
 * Chrome/Edge/Firefox usam scrollbar-color; Safari usa ::-webkit-scrollbar.
 */
html, body, * {
    scrollbar-width: thin;
    scrollbar-color: var(--accent-color, #e60014) var(--bg-secondary, #141418);
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-secondary, #141418); }
::-webkit-scrollbar-thumb {
    background: var(--accent-color, #e60014);
    border-radius: 10px;
    border: 2px solid var(--bg-secondary, #141418);
}
::-webkit-scrollbar-thumb:hover { background: var(--accent-hover, #b3000f); }
::-webkit-scrollbar-corner { background: var(--bg-secondary, #141418); }

/* A barra principal pertence ao <html>; as cores do tema claro ficam no <body>. */
html:has(body.light-mode) { scrollbar-color: #f39c12 #ffffff; }
html:has(body.light-mode)::-webkit-scrollbar-track,
html:has(body.light-mode)::-webkit-scrollbar-corner { background: #ffffff; }
html:has(body.light-mode)::-webkit-scrollbar-thumb { background: #f39c12; border-color: #ffffff; }