/* ============================================================ Tokens do design — os valores vêm do handoff, sem tradução. Ficam num arquivo só e como variáveis CSS porque o protótipo define claro/escuro pelo mesmo conjunto de nomes: trocar `data-tema` no `#app` troca o tema inteiro sem uma linha de JavaScript por componente. As cores estão em `oklch` como no handoff, e não convertidas para hex. Converter perderia o que o espaço de cor dá de graça: `--accent-hover` é o mesmo tom com menos luminosidade, e continua sendo o mesmo vermelho. Os tokens vivem em `:root`, e o `data-tema` fica no `` — não no `#app`. Modal e toast são anexados ao `body`, fora do `#app`: com os tokens presos ali, `var(--surface)` não resolvia nada e o modal aparecia transparente, com o texto flutuando sobre a tabela. ============================================================ */ :root { color-scheme: light dark; --bg: oklch(0.97 0.003 250); --surface: #fff; --surface2: oklch(0.955 0.004 250); --border: oklch(0.9 0.006 250); --text: oklch(0.23 0.015 260); --muted: oklch(0.52 0.015 260); --accent: oklch(0.52 0.2 22); --accent-hover: oklch(0.46 0.19 22); --accent-soft: oklch(0.95 0.03 22); --ok: oklch(0.55 0.15 150); --ok-soft: oklch(0.94 0.05 150); --warn: oklch(0.62 0.14 70); --warn-soft: oklch(0.95 0.06 80); --info: oklch(0.55 0.13 250); --info-soft: oklch(0.94 0.04 250); --mut: var(--muted); --mut-soft: var(--surface2); --shadow: 0 1px 2px oklch(0.2 0.02 260 / .06), 0 4px 16px oklch(0.2 0.02 260 / .05); --shadow-alto: 0 10px 28px oklch(0.2 0.02 260 / .10); /* A barra lateral é escura nos DOIS temas — é assim no handoff, e é o que dá à marca um ponto fixo enquanto o resto da tela troca. */ --lateral: oklch(0.17 0.02 260); --lateral-hover: oklch(0.22 0.02 260); --lateral-sub: oklch(0.24 0.02 260); --lateral-texto: oklch(0.85 0.005 250); --lateral-muted: oklch(0.6 0.01 260); --lateral-borda: oklch(0.28 0.015 260); --fonte-titulo: 'Space Grotesk', 'Instrument Sans', system-ui, sans-serif; --fonte-corpo: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --raio-card: 14px; --raio-btn: 10px; /* 100%: o conteúdo acompanha a largura da tela do usuário (pedido de 2026-08-16; antes havia um teto de 1240px). */ --largura-conteudo: 100%; } :root[data-tema="escuro"] { --bg: oklch(0.16 0.012 260); --surface: oklch(0.21 0.014 260); --surface2: oklch(0.25 0.015 260); --border: oklch(0.3 0.015 260); --text: oklch(0.93 0.005 250); --muted: oklch(0.65 0.012 260); --accent: oklch(0.6 0.19 25); --accent-hover: oklch(0.66 0.19 25); --accent-soft: oklch(0.3 0.06 22); --ok: oklch(0.72 0.14 150); --ok-soft: oklch(0.3 0.05 150); --warn: oklch(0.75 0.13 75); --warn-soft: oklch(0.3 0.05 80); --info: oklch(0.72 0.11 250); --info-soft: oklch(0.29 0.04 250); --shadow: 0 1px 2px oklch(0 0 0 / .3); --shadow-alto: 0 10px 28px oklch(0 0 0 / .4); } /* ============================================================ Escala do texto — um número só. Todos os tamanhos de fonte do sistema estão em `rem`, e `rem` é relativo a este valor. Mudar aqui aumenta ou diminui o texto INTEIRO de forma proporcional: nada de mexer em oitenta e sete declarações espalhadas por CSS e JavaScript, que era o estado anterior e a razão de o texto ter ficado pequeno demais sem ninguém conseguir corrigir de uma vez. O valor é uma PORCENTAGEM, e não `18px`, de propósito: assim ele parte do tamanho que a pessoa configurou no navegador. Quem aumentou a fonte padrão por dificuldade de leitura passa a ser atendido — com `px` fixo, a preferência era simplesmente ignorada. 100% = 16px (o padrão dos navegadores) 112.5% = 18px 125% = 20px 137.5% = 22px ← atual ============================================================ */ html { font-size: 137.5%; }