/* ========================================================================== Aceite — aceite.app.br tokens.css — design tokens (cores, escala, tipografia) -------------------------------------------------------------------------- Tema: `:root` = ESCURO (padrao). `html[data-theme="light"]` = CLARO (sobrescreve os mesmos tokens). Sem atributo no , o ESCURO vale quando o sistema pede `@media (prefers-color-scheme: dark)`. Cor em OKLCH. Nenhuma cor hard-coded deve existir fora deste arquivo. ========================================================================== */ /* -------------------------------------------------------------------------- 1. TEMA ESCURO (padrao) - Cyber Premium Dark -------------------------------------------------------------------------- */ :root { color-scheme: dark; /* --- superficies e texto --- */ --bg: oklch(8% 0.002 260); --surface: oklch(12% 0.008 260); --surface-2: oklch(15% 0.01 260); --text: oklch(95% 0.004 260); --text-muted: oklch(70% 0.008 260); --border: oklch(25% 0.01 260); /* Borda dos CONTROLES DE FORMULARIO (.input/.select/.textarea do app.css — os 31 campos das 6 telas). E' um token PROPRIO, e nao `--border`, por um motivo medido: `--border` tem 84 consumidores (separador de tabela, borda de cartao, divisor) e o valor dele e' quase o fundo do campo (rgb(31,34,39) contra o campo rgb(10,12,15) e o cartao rgb(15,15,15) = 1.19:1 e 1.12:1, medido com pixel composto em tools/qa-campo-borda-cdp.mjs). A WCAG 1.4.11 pede 3:1 no limite do controle, e 3:1 a partir de um fundo escuro exige uma borda CLARA — mexer em `--border` vazaria essa borda clara para os 84 lugares que so' querem um divisor. Ver o bloco claro (56%) e o do `prefers-color-scheme`: a FORCA muda por tema porque a luminancia do fundo muda; o matiz e o croma sao os do `--border`. */ --border-control: oklch(52% 0.01 260); /* --- marca --- */ --brand: oklch(85% 0.12 180); /* Neon cyan */ /* Segundo ponto do gradiente da marca. As paginas usam `from-[var(--brand)] to-[var(--accent)]` nos titulos; sem este token o gradiente nao pinta nada e o texto, que e `text-transparent`, fica INVISIVEL. Definido aqui, vale para todas as paginas. */ --accent: oklch(78% 0.16 305); /* Neon violeta */ --brand-ink: oklch(20% 0.02 260); /* --- semantico --- */ --danger: oklch(75% 0.18 25); --warn: oklch(80% 0.16 75); --ok: oklch(85% 0.14 155); /* --- status (um por status; use nos badges) --- */ --st-rascunho: oklch(65% 0.02 260); --st-enviada: oklch(80% 0.14 200); /* Neon blue */ --st-vista: oklch(75% 0.12 220); --st-aceita: oklch(85% 0.14 155); /* Neon green */ --st-recusada: oklch(75% 0.18 25); /* Neon red */ --st-expirada: oklch(80% 0.16 75); /* Neon amber */ --st-cancelada: oklch(62% 0.008 260); /* "Realizado" e' o unico status que ja' ACONTECEU. Era o mesmo verde de "Presenca confirmada" (--st-aceita) e as duas etiquetas ficavam iguais. Violeta da marca, para nao inventar cor nova. */ --st-realizado: var(--accent); /* --- foco visivel --- */ --focus-ring: oklch(85% 0.12 180); /* Neon cyan */ --focus-ring-offset: oklch(10% 0 0); /* Chevron do