/* ============================================================ * Aegio — camada de tokens do rebrand v10 * Fatia 1 de 5. Substitui o bloco de tokens do index.css. * * Fonte de verdade: uploads/all/01-tokens/aegio-design-tokens.md * Traduzido do tokens.css do kit (que assume `.dark`) para o * mecanismo real do app: atributo `data-tema` no . * * Estratégia: os nomes NOVOS são a verdade; os nomes ANTIGOS * (--cor-*) viram apelidos que apontam para eles. Assim o app * inteiro muda de cor sem nenhuma tela ser editada, e o rename * acontece tela por tela nas fatias seguintes. * * TODOS os valores de cor são hex literais, de propósito. O kit * entrega oklch, mas oklch convertido não cai no mesmo hex — a * diferença chegava a ΔRGB 26 no violeta do foil e 25 no teal, o * que é visível. Como cada tela foi aprovada em hex e cada razão * de contraste foi medida nesses hexes, o token tem que ser o * MESMO valor, senão o que sai no ar não é o que foi aprovado. * Se um dia migrar para oklch, recalcule e reverifique contraste. * ============================================================ */ /* ---------- Tema escuro (Mágica) — padrão ---------- */ :root, :root[data-tema="magica"] { color-scheme: dark; /* Superfícies e texto — seção 2.1 do documento canônico */ --background: #0B1013; --surface-1: #141B1A; --surface-2: #1C2523; --surface-3: #243030; --border: #2A3534; --input: var(--border); --foreground: #E8EDEB; --muted-foreground: #8FA09D; --mono-foreground: #CFE0DB; /* Acentos — seção 2.2 */ --primary: #E1703F; /* terracota */ --primary-foreground: #0B1013; --teal: #66C2B4; /* suporte */ --teal-foreground: #0B1013; --destructive: #E0584F; --destructive-foreground: #0B1013; --ring: var(--teal); /* Aviso — decisão 01, opção D (aprovada). O documento canônico não tem cor de aviso, mas o app usa --cor-alerta em 20+ lugares e "atrasado" não é erro. Amarelo escuro é fisicamente marrom, então o âmbar MUDA DE FORMA por tema em vez de mudar de matiz: escuro → tinta clara sobre fundo escuro; claro → cápsula preenchida clara com tinta escura. Componentes de aviso usam sempre o par --warning-surface (fundo) + --warning-ink (texto e número). */ /* Foil — decisão do usuário (2026-08-24). Não é estado nem alerta: é outra impressão da mesma carta, com preço próprio, e o colecionador precisa distinguir de relance. É a única cor do sistema fora do trio ação/suporte/erro, e existe só para isso — não usar em nada além de marcar foil. Os dois temas NÃO usam a mesma cor, só o mesmo papel: no escuro um lilás claro e leve (#b39ddb), no claro um violeta forte e saturado (#6B32B5). Papel branco pede mais pigmento — o lilás do escuro dava 2,3:1 no papel, e uma versão apenas escurecida dele ficava lavada. O RÓTULO e o NÚMERO usam --foil juntos: a linha inteira é foil, e colorir só a palavra deixa o preço órfão. */ --foil: #b39ddb; /* 7,5:1 sobre o card de preço */ --warning: #E8BD63; /* gráfico, ícone, borda */ --warning-surface: color-mix(in oklab, var(--warning) 18%, transparent); --warning-ink: var(--warning); /* [DECIDIR] O app tem TRÊS níveis de texto (texto / secundário / terciário); o kit tem dois. Este terceiro nível é derivado, não um valor novo — mantém a hierarquia atual sem inventar cor. Sobre --surface-1 (onde ficam os cards de conteúdo) dá 5,17:1 e sobre --surface-2 dá 4,64:1 — os dois acima do mínimo de 4,5:1 da seção 2.1. Se mexer neste valor, meça sobre --surface-1, que é o pior caso real: era essa a premissa errada da primeira versão. */ --muted-foreground-2: #7F8F8C; /* 5,17:1 em surface-1, 4,64:1 em surface-2 */ /* Régua — decisão 03, cenário C1 (aprovado). Régua e trilha não existem no kit. ATENÇÃO à direção: no escuro a régua puxa para o TEXTO, não para o fundo — derivar para o fundo aqui é apagar a linha (era o defeito da primeira versão). C1 fica visivelmente acima do fundo e ainda assim mais fraca que --border, para a borda do card seguir sendo a linha mais forte da tela. CORREÇÃO (medido): a frase acima está errada no tema escuro e fica registrada só para quem leu a versão anterior. No escuro esta régua dá 1,55 sobre o card e --border dá 1,24 — ou seja, a régua é MAIS marcada que a borda, não menos. É inerente ao tema: puxar uma linha para o texto aumenta o contraste dela. Aqui a separação do card vem do degrau de superfície (background → surface-1), que é o que a seção 4 do documento canônico manda. No tema claro, onde a régua puxa para o fundo, a frase original vale de verdade. Valor literal, e não color-mix, para não haver diferença entre o que foi aprovado em tela e o que o navegador resolve. */ --rule: #384443; --track: var(--surface-3); --image-placeholder: var(--surface-3); } /* ---------- Tema claro (Refrescante) ---------- */ :root[data-tema="refrescante"] { color-scheme: light; /* Seção 3.1 */ --background: #E8E2D6; /* papel quente */ --surface-1: #F4F0E8; --surface-2: #FCFAF6; /* topo da pilha */ --surface-3: #EFE9DE; /* hover, um passo abaixo de surface-1 */ --border: #CFC5B3; --input: var(--border); --foreground: #1A2422; --muted-foreground: #5C6B68; --mono-foreground: #243330; /* Seção 3.2 */ --primary: #B24D18; --primary-foreground: #FCFAF6; --teal: #1E605A; --teal-foreground: #FCFAF6; --destructive: #A8362E; --destructive-foreground: #FCFAF6; --ring: var(--teal); --foil: #6B32B5; /* 7,3:1 sobre o card, 6,7:1 sobre surface-1 */ --warning: #8A5A10; /* gráfico, ícone, borda */ --warning-surface: #F7E3A8; /* cápsula clara */ --warning-ink: #5A3D06; /* 9,0:1 sobre o card */ /* CORRIGIDO (medido em tela, 2026-08-24): o valor anterior (92% de mistura, ~#677471) foi calibrado sobre --surface-2 e dava 4,67:1 ali, mas REPROVAVA sobre --surface-1 (4,28:1) — e surface-1 é onde ficam os cards de conteúdo do app, ou seja o caso mais comum, não o mais raro. Literal agora, calibrado sobre surface-1: 4,55:1 em s1 e 4,95:1 em s2. Regra pra qualquer ajuste futuro: medir sobre --surface-1. */ --muted-foreground-2: #606D6A; /* Direção OPOSTA à do escuro, de propósito: aqui afastar do texto é que enfraquece a linha. Só neste tema a régua é de fato mais fraca que a borda. Literal pelo mesmo motivo do bloco Mágica. */ --rule: #E0D8C9; --track: #DAD2C3; --image-placeholder: #DED6C7; } /* ============================================================ * Tipografia * O app escreve a família à mão em ~880 lugares (757 "Sora", * 123 "JetBrains Mono"). Estes tokens existem para que a * próxima troca custe uma linha, e são o alvo da fatia 4. * ============================================================ */ :root { --font-display: "Fraunces", Georgia, serif; --font-sans: "IBM Plex Sans", system-ui, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, monospace; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px; } /* ============================================================ * APELIDOS — nomes antigos apontando para os novos. * * É isto que faz o app inteiro mudar de cor sem editar tela. * Cada linha é temporária: sai quando a última tela que usa * aquele nome for migrada (fatias 3 e 4). * * Duas linhas exigem atenção especial, marcadas com ⚠ — * são inversões de papel, não renomeações. * ============================================================ */ :root, :root[data-tema="magica"], :root[data-tema="refrescante"] { --cor-fundo-pagina: var(--background); --cor-superficie: var(--surface-1); --cor-superficie-destaque: var(--surface-2); --cor-texto: var(--foreground); --cor-texto-secundario: var(--muted-foreground); --cor-texto-terciario: var(--muted-foreground-2); --cor-borda: var(--border); --cor-regua: var(--rule); --cor-trilha: var(--track); --cor-placeholder-imagem: var(--image-placeholder); /* ⚠ --cor-primaria era o teal e pintava botão, aba ativa, link, borda de hover, barra de gráfico — tudo. Apontar para --primary acende cinco ou seis terracotas por tela e viola a regra "um acento por seção". Fica em TEAL nesta fatia: nada muda de papel ainda, e a decisão de qual é o único ponto de ação sai tela por tela na fatia 3. */ --cor-primaria: var(--teal); /* ⚠ Mesmo motivo: --cor-primaria-clara é a cor de link e de valor em destaque no app. Teal é exatamente o papel de suporte que o kit reserva pra ela. */ --cor-primaria-clara: var(--teal); --cor-sucesso: var(--teal); /* Aponta para a TINTA, não para --warning: no claro a tinta é o marrom escuro da cápsula (9,0:1 sobre o card), no escuro é o próprio âmbar. Onde o uso for cápsula/selo, usar também --warning-surface como fundo — ver fatia 3. */ --cor-alerta: var(--warning-ink); --cor-perigo: var(--destructive); /* Tokens locais de Decks Sugeridos — foram criados só pra corrigir contraste do rosa antigo, que não existe mais. Redundantes. */ --decks-sugeridos-acc: var(--teal); --decks-sugeridos-sub: var(--muted-foreground-2); /* Pasta de Meus Decks — derivada da cor primária de cada tema. Segue derivada, agora do teal de suporte. */ --cor-pasta: color-mix(in oklab, var(--teal) 62%, var(--surface-2)); --cor-pasta-topo: color-mix(in oklab, var(--teal) 78%, var(--surface-2)); --cor-pasta-contagem: var(--mono-foreground); } /* ------------------------------------------------------------ * Painel sempre-escuro do Deck Card / Collection Card. * Fica FORA do sistema de temas de propósito: o texto ali vive * sobre a arte da carta, não sobre a superfície do tema. O kit * não cobre este caso, então os valores seguem fixos — só o * fundo foi realinhado ao preto novo da marca. * ------------------------------------------------------------ */ :root { --cor-painel-escuro: #080C0E; --cor-painel-alerta: #E8BD63; --cor-painel-sucesso: #9FD3B4; --cor-painel-texto-secundario: #A9B7C2; } /* ------------------------------------------------------------ * Base * ------------------------------------------------------------ */ body { margin: 0; background: var(--background); color: var(--foreground); font-family: var(--font-sans); font-size: 16px; line-height: 1.5; }