/* ============================================================ ANBE MUSIC — theme.css · fonte única dos tokens de cor Tema CLARO por padrão (madeira & latão em versão clara); escuro via classe .theme-dark no — alternador flutuante injetado pelo anbe.js (ANBE.initTheme), persistido em localStorage. Regras: - Páginas NÃO definem :root com cores; só usam tokens. - Novos componentes usam os tokens semânticos (--bg, --surface, ...). - Os nomes antigos (--ebony, --brass, ...) existem como ALIASES para compatibilidade — não usar em código novo. ============================================================ */ :root{ color-scheme:light; /* superfícies */ --bg:#efe7d4; /* fundo geral (pergaminho) */ --surface:#fbf7ee; /* cartões / painéis */ --surface-2:#f3ecdb; /* painel interno, hover */ --surface-3:#e9dfc7; /* trilhos, barras */ /* texto */ --text:#2a2018; --text-dim:#6f6252; /* acento (latão escurecido p/ contraste no claro) */ --accent:#9a6b1f; --accent-2:#b4842e; --on-accent:#ffffff; /* texto sobre acento / notas acesas */ --accent-rgb:154,107,31; /* p/ rgba(var(--accent-rgb),.06) */ /* semânticas */ --copper:#b05a2a; --patina:#3f7d68; --good:#4e7c4e; --on-good:#ffffff; --bad:#b2493a; --amber:#a9791d; /* linhas e regiões */ --line:#e0d5bf; --line-soft:#eae0cb; --topbar-bg:linear-gradient(180deg,#f8f2e3,#efe7d2); --side-bg:#f4edda; } html.theme-dark{ color-scheme:dark; --bg:#15110d; --surface:#211710; --surface-2:#2c2018; --surface-3:#382a1f; --text:#ece1cc; --text-dim:#a4977f; --accent:#d4a24c; --accent-2:#ecc06a; --on-accent:#1a130b; --accent-rgb:212,162,76; --copper:#c06b3c; --patina:#6fa593; --good:#7fbf7f; --on-good:#10240f; --bad:#d97a6c; --amber:#e0b65a; --line:#3a2c20; --line-soft:#271c14; --topbar-bg:linear-gradient(180deg,#1c140d,#171008); --side-bg:#190f08; } /* aliases de compatibilidade (nomes antigos -> tokens novos) */ :root, html.theme-dark{ --ebony:var(--bg); --rosewood:var(--surface); --rosewood-2:var(--surface-2); --rosewood-3:var(--surface-3); --ivory:var(--text); --ivory-dim:var(--text-dim); --brass:var(--accent); --brass-bright:var(--accent-2); } /* alternador claro/escuro (botão flutuante injetado pelo anbe.js) */ /* variante INLINE (na topbar): herda o botão .btn.ghost.sm da página; só garante o ícone um pouco maior e centralizado */ .userbox>#anbe-theme-toggle{font-size:1.02rem;line-height:1;padding-top:5px;padding-bottom:5px} /* variante FLUTUANTE (telas sem topbar: login, cadastro, cursos) */ #anbe-theme-toggle.anbe-theme-float{ position:fixed;right:18px;bottom:18px;z-index:60; width:46px;height:46px;border-radius:50%; border:1.5px solid var(--accent);background:var(--surface);color:var(--accent); cursor:pointer;font-size:1.2rem;line-height:1;display:grid;place-items:center; box-shadow:0 6px 20px rgba(0,0,0,.28); transition:transform .15s ease, background .2s ease, color .2s ease; } #anbe-theme-toggle.anbe-theme-float:hover{background:var(--accent);color:var(--on-accent);transform:translateY(-2px)} #anbe-theme-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px} @media(prefers-reduced-motion:reduce){ #anbe-theme-toggle.anbe-theme-float{transition:none} } @media(max-width:680px){ #anbe-theme-toggle.anbe-theme-float{right:14px;bottom:14px;width:42px;height:42px} }