/* =========================================================================
PlayCash — tokens de marca
Fonte única de verdade para cor, tipo, raio, sombra, espaço e movimento.
ATENÇÃO — ESTE ARQUIVO SÓ TEM EFEITO DEPOIS DE UMA EDIÇÃO EM styles.css.
Hoje styles.css declara o próprio :root (linhas 8-32) e o próprio
[data-tema="escuro"] (linhas 34-51) com os MESMOS nomes de token. Mesma
especificidade + carregado depois = styles.css vence em todos eles, e o
app continua laranja mesmo com este arquivo no . Apagar aqueles dois
blocos é o primeiro item do handoff (MARCA.md, seção 6). Ordem no HTML:
Regras da casa:
- Nenhum hex solto fora deste arquivo.
- Azul é o chassi (onde o dinheiro fica). Verde é dinheiro entrando.
Vermelho é risco. Ouro é conquista. Nada de cor decorativa nova.
Contraste (WCAG 2.1, sRGB) — o que os números abaixo significam:
- ✓AA = 4,5:1, texto normal. ✓AA-G = 3:1, só texto ≥18,7px em peso forte.
- Onde claro e escuro diferem, os DOIS números aparecem, nessa ordem.
Um número só carimbando os dois temas foi exatamente o erro da versão
anterior deste arquivo.
- Token sem número não é par de texto (preenchimento, borda, sombra) e
não tem contraste a cumprir.
Verde e vermelho vêm em DOIS tokens cada, e trocar um pelo outro reprova AA:
--verde / --vermelho = cor de TEXTO sobre fundo do app.
--verde-cheio / --vermelho-cheio = PREENCHIMENTO que leva texto branco.
No tema claro os dois são o mesmo hex. No escuro NÃO são — e é aí que o
descuido aparece: branco sobre o verde de texto do escuro dá 3,38:1.
========================================================================= */
:root {
/* ------------------------------------------------------------- MARCA
O OURO DA MOEDA. Os tons não foram escolhidos no olho: saíram da arte da
logo, amostrando a moeda pixel a pixel — o dourado dominante da borda deu
#C07F20 e o brilho do relevo, #FDEE90. O tom de ação é o ponto entre os
dois que ainda escreve com folga.
TEXTO ESCURO POR CIMA, e não branco. Todo ouro que serve como cor de ação
é claro demais para segurar branco: no #EDA51F, branco dá 2,1:1 — ilegível.
Com o quase-preto abaixo, dá 8,8:1.
O OURO DA MARCA E O OURO DE CONQUISTA SÃO O MESMO OURO, de propósito. Num
app cuja marca é uma moeda e cujo assunto é juntar dinheiro, separar "cor da
marca" de "cor de conquista" inventaria uma distinção que ninguém lê. O que
continua estritamente separado é o VERDE: verde na tela é dinheiro que
entrou, e nada mais. */
--marca: #EDA51F; /* ação. texto escuro em cima: 8,8:1 ✓AAA */
--marca-2: #C07F20; /* o ouro medido da moeda. par de gradiente */
--marca-3: #F5C451; /* o brilho do relevo: ilustração e realce */
--marca-suave: #FDF2DC; /* fundo de etiqueta, faixa, destaque */
--marca-suave-2: #F9E6BE; /* estado pressionado do suave */
--marca-texto: #8F5300; /* marca como TEXTO no claro: 5,4:1 ✓AA */
--sobre-marca: #1A1200; /* texto por cima do ouro: 8,8:1 ✓AAA */
/* O verde-azulado do fundo da logo. Acento de identidade — nunca dinheiro,
nunca ação. Aparece em detalhe, fio, brilho de estado. */
--teal: #0E7C7B;
--teal-2: #12A5A0;
--teal-suave: #E2F5F4;
/* ------------------------------------------------------- SEMÂNTICAS
Verde nunca é decoração: verde na tela significa dinheiro que entrou. */
--verde: #0C7C43; /* TEXTO. no branco 5,3:1 ✓AA · no --fundo 4,8:1 ✓AA */
--verde-cheio: #0C7C43; /* PREENCHIMENTO. branco em cima: 5,3:1 ✓AA */
--verde-suave: #E1F5E9;
--sobre-verde: #FFFFFF; /* vai sobre --verde-cheio, não sobre --verde */
--vermelho: #B4540A; /* TEXTO. âmbar de erro: no branco 5,0:1 ✓AA */
--vermelho-cheio: #B4540A; /* PREENCHIMENTO. branco em cima: 5,0:1 ✓AA */
--vermelho-suave: #FBEEE0;
--sobre-vermelho: #FFFFFF; /* vai sobre --vermelho-cheio */
--amarelo: #F5A623; /* ouro: preenchimento, ícone, sequência */
--alerta: #8F5300; /* a mesma ideia legível como texto ✓AA */
--amarelo-suave: #FFF3DC;
--sobre-amarelo: #2B1A00;
/* ------------------------------------------------------------ ACENTOS
Só para diferenciar categoria (atalho, capa de vídeo). Nunca para ação.
São os únicos herdeiros do laranja antigo (MARCA.md seção 6, itens 5 e 6).
A PENDÊNCIA FOI RESOLVIDA: home.js passava '#ff4d00', '#066aab', '#2fbf71'
e '#7c4dff' crus para --cor-atalho. Hoje passa token, e por isso os atalhos
acompanham o tema em vez de ficarem presos na paleta antiga. */
/* OS ACENTOS PERDERAM O AZUL em 17/08/2026, por decisão do dono.
Eram água (#0B6FBF) e uva (#6B4EE6) — os dois puxavam para o azul, que é
quase complementar do ouro da marca e brigava com ele em toda tela onde
apareciam juntos: capa de campanha, chip de categoria, peça de pergunta.
Os nomes mudaram junto com as cores. Um token chamado "agua" pintando
terracota seria uma armadilha para quem lesse o código depois. */
--acento-terra: #C2542A;
--acento-oliva: #5E7A22;
--acento-vinho: #A8324B;
--acento-cobre: #9A6118;
--acento-manga: #D9541F;
--acento-jade: #0C7C43;
/* ----------------------------------------------------------- NEUTROS
Neutros QUENTES, e não cinza azulado.
Eles eram levemente azuis porque a marca era azul — um cinza que puxa para
o tom da marca some no fundo em vez de sujar. Com a marca dourada, o mesmo
raciocínio leva ao lado oposto: o neutro puxa para o âmbar, e é isso que
faz o ouro parecer ouro em vez de amarelo solto. */
--fundo: #F7F4EE;
--superficie: #FFFFFF;
--superficie-2: #FBF9F4;
--superficie-3: #F0EBE0; /* era #EAEFF7, cinza AZULADO da identidade velha */
--borda: #E8E1D4;
--borda-forte: #D8CFBC;
--texto: #1C1810; /* 17,4:1 no branco */
--texto-fraco: #6B6354; /* neutro quente. 5,9:1 no branco ✓AA */
--texto-3: #776F5E; /* neutro quente. 5,1:1 no branco ✓AA */
/* ---------------------------------------------------------- SUPERFÍCIES
especiais que hoje estão cravadas em styles.css */
--toast-fundo: #231E14;
--sobre-toast: #FFFFFF;
/* A BARRA DO APP É ESCURA NOS DOIS TEMAS, e não acompanha o tema como o resto.
A marca do PlayCash é ouro sobre preto, e é a arte real que fica ali. Num
tema claro a barra ficaria branca, o ouro sumiria nela e o `screen` que
dissolve o preto do arquivo devolveria branco puro — a marca desapareceria
por inteiro. Uma barra de aplicativo escura sobre conteúdo claro é escolha
comum e legível; uma marca invisível não é escolha nenhuma.
Por isso estes dois tokens são valor cravado e não se redefinem no escuro. */
--barra: #17150F;
--barra-2: #211E16;
--barra-borda: #3A3427;
--sobre-barra: #F5F1E8;
--palco: #0A0806; /* fundo do player de vídeo */
--overlay: rgba(18, 14, 6, .55);
/* ------------------------------------------------------------ SOMBRAS
Tingidas de MARROM-TINTA, não de preto puro: some a borda cinza morta.
Eram tingidas de azul, junto com o resto da identidade antiga — e sombra
azul debaixo de um botão dourado devolve um halo frio que briga com ele.
O brilho da marca é o próprio ouro, com opacidade baixa. */
--sombra: 0 1px 2px rgba(28, 22, 10, .06), 0 6px 18px rgba(28, 22, 10, .08);
--sombra-alta: 0 12px 36px rgba(28, 22, 10, .22);
--sombra-marca: 0 6px 20px rgba(192, 127, 32, .30);
--sombra-marca-forte: 0 10px 30px rgba(192, 127, 32, .38);
--sombra-verde: 0 6px 20px rgba(12, 124, 67, .26);
--sombra-nav: 0 -2px 14px rgba(28, 22, 10, .08);
--sombra-topo: 0 2px 12px rgba(28, 22, 10, .14);
--anel-foco: 0 0 0 3.5px rgba(237, 165, 31, .34);
/* --------------------------------------------------------- TIPOGRAFIA
Pilha nativa. O app abre offline: nenhuma fonte vem da rede. */
--fonte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
Arial, "Noto Sans", sans-serif;
--fonte-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
"Roboto Mono", monospace;
--txt-micro: 10px; /* rótulo da barra inferior */
--txt-mini: 11.5px; /* etiqueta, rótulo caixa-alta */
--txt-nota: 13px; /* apoio */
--txt-corpo: 15px; /* padrão de leitura e de botão */
--txt-forte: 17px; /* h2 */
--txt-titulo: 22px; /* h1 de tela */
--txt-destaque: 28px; /* título de entrada */
--txt-valor: 40px; /* o saldo. o maior número do app */
--peso-normal: 400;
--peso-medio: 600;
--peso-forte: 700;
--peso-extra: 800;
--altura-apertada: 1.15; /* números e títulos */
--altura-normal: 1.45;
--altura-solta: 1.6;
--letra-titulo: -.02em;
--letra-rotulo: .08em; /* caixa-alta pequena */
/* --------------------------------------------------------------- RAIOS */
--raio-p: 10px;
--raio: 16px;
--raio-g: 22px;
--raio-gg: 28px;
--raio-pill: 999px;
/* ---------------------------------------------------------- ESPAÇAMENTO
Base 4. Só estes degraus — nada de 7px, 13px, 19px. */
--e-1: 4px;
--e-2: 8px;
--e-3: 12px;
--e-4: 16px;
--e-5: 20px;
--e-6: 24px;
--e-7: 32px;
--e-8: 40px;
--e-9: 48px;
--pad-tela: 16px;
/* ------------------------------------------------------------- LAYOUT */
--topo-h: 60px;
--nav-h: 64px;
--largura: 520px;
/* Alvo de toque. Dois números, e cada um tem hora certa:
--toque-min botão, campo, qualquer coisa que a pessoa mira.
--toque-min-compacto ícone, chip, aba e item que vive dentro de uma
fileira apertada — é o piso do briefing (44px), não
um arredondamento. Abaixo destes dois, nada. */
--toque-min: 48px;
--toque-min-compacto: 44px;
/* ---------------------------------------------------------- MOVIMENTO
--curva é a padrão: sai rápido, chega devagar, sem quicar.
--curva-mola só quando dinheiro entra: o saldo pode comemorar. */
--curva: cubic-bezier(.2, .7, .3, 1);
--curva-saida: cubic-bezier(.4, 0, 1, 1);
--curva-mola: cubic-bezier(.34, 1.56, .64, 1);
--tempo-instante: 120ms; /* toque, press */
--tempo-curto: 220ms; /* troca de estado */
--tempo-medio: 340ms; /* entrada de tela */
--tempo-longo: 520ms; /* contagem de saldo, barra de nível */
/* -------------------------------------------------- PADRÕES DE APOIO
O JS injeta --cor-atalho e --cor-video no elemento. Estes valores são
só a rede de segurança: sem eles, color-mix() falha e o bloco some. */
--cor-atalho: var(--marca);
--cor-video: var(--marca-2);
--atraso: 0ms;
}
/* =========================================================================
TEMA ESCURO
Não é o claro invertido: o azul da marca sobe de luminosidade para
continuar legível, e as sombras viram preto puro porque sombra colorida
em fundo escuro vira mancha.
Aqui verde e vermelho se PARTEM em dois. O verde e o vermelho de texto
sobem de luminosidade para serem lidos sobre --superficie; se esse mesmo
tom for usado como preenchimento com texto branco, o par reprova AA
(branco sobre #14A05B = 3,38:1; sobre #EA6270 = 3,2:1). Por isso o
preenchimento continua no tom escuro, que segura branco com folga.
========================================================================= */
[data-tema="escuro"] {
/* O mesmo ouro. Ele já nasce legível no escuro — 9,1:1 sobre o fundo do app —
então aqui não há o ajuste que o vermelho exigia. */
--marca: #EDA51F; /* no fundo do app: 9,1:1 ✓AAA */
--marca-2: #C07F20; /* par de gradiente */
--marca-3: #F5C451;
--marca-suave: #2A1F08;
--marca-suave-2: #3D2D0C;
--marca-texto: #F5C451; /* marca como TEXTO no escuro: 11,7:1 ✓AAA */
--sobre-marca: #1A1200; /* texto por cima do ouro */
--teal: #12A5A0; /* 6,3:1 sobre o fundo do app ✓AA */
--teal-2: #16C7C0;
--teal-suave: #06282A;
--verde: #14A05B; /* TEXTO. 5,1:1 sobre --superficie ✓AA
NÃO use como fundo de texto branco: 3,38:1 */
--verde-cheio: #0C7C43; /* PREENCHIMENTO. branco em cima: 5,3:1 ✓AA */
--verde-suave: #0C2A1C;
--sobre-verde: #FFFFFF; /* sobre --verde-cheio */
--vermelho: #E8973F; /* TEXTO. âmbar de erro: 7,3:1 sobre --superficie ✓AA
Âmbar, não vermelho: vermelho agora é a marca,
e erro com a cor do botão principal confunde. */
--vermelho-cheio: #B4540A; /* PREENCHIMENTO. branco em cima: 5,0:1 ✓AA */
--vermelho-suave: #2E1418;
--sobre-vermelho: #FFFFFF; /* sobre --vermelho-cheio */
--amarelo: #F0A81E;
--alerta: #E3A63C;
--amarelo-suave: #2A1F08;
--sobre-amarelo: #241800;
--acento-terra: #F08A4B;
--acento-oliva: #9DC13F;
--acento-vinho: #F0607F;
--acento-cobre: #D9A03C;
--acento-manga: #F0793F;
--acento-jade: #14A05B;
/* AS SUPERFÍCIES SAÍRAM DO AZUL EM 17/08/2026, e o motivo é o ouro.
Azul e dourado são quase complementares: um sobre o outro, os dois brigam e
nenhum ganha — o ouro perde a temperatura e o azul perde a profundidade.
Com o carvão levemente quente abaixo, o mesmo ouro parece mais dourado sem
mudar um dígito do hex dele.
A luminosidade foi mantida em degraus iguais aos de antes, e todo contraste
de texto SUBIU: texto sobre superfície foi de 15,1:1 para 16,2:1, o mais
apertado (texto-3) de 4,7:1 para 5,1:1. */
--fundo: #0B0A09;
--superficie: #17150F;
--superficie-2: #211E16;
--superficie-3: #2C2820;
--borda: #3A3427; /* era #2B3550, azul-ardósia */
--borda-forte: #514936;
--texto: #F5F1E8; /* 16,2:1 sobre --superficie */
--texto-fraco: #B0A794; /* 7,7:1 sobre --superficie ✓AA */
--texto-3: #8E8676; /* 5,1:1 sobre --superficie ✓AA */
--toast-fundo: #2C2820;
--sobre-toast: #FFFFFF;
--palco: #050403;
--overlay: rgba(0, 0, 0, .62);
--sombra: 0 1px 2px rgba(0, 0, 0, .45), 0 6px 18px rgba(0, 0, 0, .35);
--sombra-alta: 0 12px 36px rgba(0, 0, 0, .60);
--sombra-marca: 0 6px 20px rgba(237, 165, 31, .28);
--sombra-marca-forte: 0 10px 30px rgba(237, 165, 31, .34);
--sombra-verde: 0 6px 20px rgba(20, 160, 91, .26);
--sombra-nav: 0 -2px 14px rgba(0, 0, 0, .40);
--sombra-topo: 0 2px 12px rgba(0, 0, 0, .45);
--anel-foco: 0 0 0 3.5px rgba(237, 165, 31, .42);
}
/* O tema é sempre carimbado no pelo JS. Este bloco cobre só o piscar
do primeiro quadro (e o caso de o script falhar) em quem já usa o sistema
no escuro — por isso replica os tokens sensíveis, não todos.
DEPENDÊNCIA: só funciona depois que index.html:2 parar de vir com
data-tema="claro" cravado no (item da seção 6 do MARCA.md). Com o
atributo lá, :root:not([data-tema="claro"]) nunca casa e este bloco é
código morto. Ou o atributo sai, ou este bloco sai — não deixe os dois. */
@media (prefers-color-scheme: dark) {
:root:not([data-tema="claro"]) {
/* ESTE BLOCO FICOU PARA TRÁS NA TROCA DE IDENTIDADE, e o defeito era
invisível de dentro do app: ele só vale para quem deixa o tema em
"seguir o sistema" e está com o sistema no escuro. Quem escolhe o tema à
mão cai em [data-tema="escuro"], que foi atualizado; quem não escolhe
nada — o padrão de muita gente — continuava vendo o vermelho e o azul de
duas identidades atrás.
A regra que evita isso: token novo em [data-tema="escuro"] entra AQUI na
mesma edição. São duas listas para o mesmo tema, e elas não podem
divergir. */
--marca: #EDA51F;
--marca-2: #C07F20;
--marca-3: #F5C451;
--marca-suave: #2A1F08;
--marca-suave-2: #3D2D0C;
--marca-texto: #F5C451;
--sobre-marca: #1A1200;
--teal: #12A5A0;
--teal-2: #16C7C0;
--teal-suave: #06282A;
--verde: #14A05B;
--verde-cheio: #0C7C43;
--vermelho: #E8973F;
--vermelho-cheio: #B4540A;
--fundo: #0B0A09;
--superficie: #17150F;
--superficie-2: #211E16;
--superficie-3: #2C2820;
--borda: #3A3427;
--texto: #F5F1E8;
--texto-fraco: #B0A794;
--texto-3: #8E8676;
--toast-fundo: #2C2820;
--sombra: 0 1px 2px rgba(0, 0, 0, .45), 0 6px 18px rgba(0, 0, 0, .35);
--sombra-alta: 0 12px 36px rgba(0, 0, 0, .60);
}
}
/* Quem pediu menos movimento recebe menos movimento no sistema inteiro,
não só nas animações que alguém lembrou de listar. */
@media (prefers-reduced-motion: reduce) {
:root {
--tempo-instante: .01ms;
--tempo-curto: .01ms;
--tempo-medio: .01ms;
--tempo-longo: .01ms;
--curva-mola: linear;
}
}