/* ========================================================================= tema-claro.css - escopo de tema claro Reescreve os MESMOS nomes de variável dentro de .paper, então qualquer estrutura que use os tokens (opção B, opção C) herda o tema sem CSS extra. Porta para o Astro: src/styles/tema-claro.css, com a classe no do layout. Vale para as duas opções: o que muda entre elas é a estrutura. ========================================================================= */ .paper { --bg: #f5f5f3; --surface: #fbfbfa; --surface-strong: #eceae6; --border: rgba(20, 22, 26, 0.14); --border-strong: rgba(20, 22, 26, 0.3); --text: #14161a; --text-muted: #4b525c; --text-faint: #666d76; --accent: #ffb224; --accent-hover: #f0a30f; --accent-ink: #171003; --ok: #1d7a45; --error: #b3261e; color-scheme: light; background: var(--bg); color: var(--text); } /* o anel de foco âmbar some no papel: no claro ele vira âmbar escuro */ .paper :focus-visible { outline: 2px solid #8a5b00; outline-offset: 3px; } .paper ::selection { background: var(--accent); color: var(--accent-ink); }