/* ============================================================ tryzen — design tokens Cores medidas por histograma nos mockups originais (1179x2556). ============================================================ */ /* ---------- fontes (self-hosted, funcionam offline) ---------- */ @font-face { font-family: 'Figtree'; font-style: normal; font-weight: 300 800; font-display: swap; src: url('../assets/fonts/figtree-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Figtree'; font-style: normal; font-weight: 300 800; font-display: swap; src: url('../assets/fonts/figtree-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 300 800; font-display: swap; src: url('../assets/fonts/inter-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 300 800; font-display: swap; src: url('../assets/fonts/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ============================================================ Cores — baseadas nas System Colors da Apple (HIG). systemGreen #34C759 (claro) / #30D158 (escuro) systemYellow #FFCC00 / #FFD60A systemRed #FF3B30 / #FF453A O tema claro usa a paleta semantica do iOS (systemBackground, secondarySystemBackground, label, separator). ------------------------------------------------------------ O QUE CADA COR DIZ (a cor e informacao, nao decoracao) ------------------------------------------------------------ O app tem UMA cor: o verde. O resto e cinza, e as duas excecoes (amarelo e vermelho) so aparecem quando alguem precisa agir. verde ESTA CERTO no combinado, em dia, o que vem pela frente amarelo PRECISA DE fora do combinado, atrasado, prova chegando VOCE AGORA cinza JA FOI aconteceu e esta fechado. Nao pede nada. cinza INCOMPLETO nao existe ainda: dia vazio, campo sem dado vermelho DESTRUTIVO excluir, cancelar, perder de vez OS DOIS CINZAS SAO O MESMO CINZA EM DENSIDADES DIFERENTES: --feito e cheio e solido — aconteceu, tem corpo, ocupa lugar. --vazio e so um traco — nao tem corpo porque nao tem dado. Se os dois fossem iguais, "corri 8 km" e "dia sem treino" ficariam identicos na semana. A densidade e o que separa. O VERDE TEM DUAS FORCAS, e nenhuma delas e outra cor: --certo cheio: e HOJE, e o agora, e onde o olho para. --certo-fraco diluido: e o que ainda vem. Mesmo verde, menos voz. Era um teal (#30B0C7) que fazia esse papel. Duas matizes obrigavam a pessoa a decorar uma legenda; duas forcas da mesma cor ela le sozinha. Cada leitura tem TRES pecas, e o par e o que da o contraste limpo: var(--certo) a tinta viva — barra, bolinha, icone var(--certo-texto) a mesma cor fechada — so pra LETRA var(--certo-fundo) a tinta diluida no fundo do tema — corpo de caixa ⚠️ A viva NUNCA carrega letra em cima. No claro ela da 2,2 a 3,5:1. Quem carrega letra e a -texto (>= 4,5:1). Quem e superficie e a -fundo. ⚠️ O -fundo dilui a viva NO FUNDO DO TEMA (branco no claro, o preto quente no escuro) — nunca em cinza. Cinza tira saturacao junto com a luz e a cor sai embacada. ============================================================ */ :root { color-scheme: light; /* ---------- claro (padrao) ---------- */ --bg: #FFFFFF; /* systemBackground */ --bg-elev: #FFFFFF; --surface: #F2F2F7; /* secondarySystemBackground */ --surface-2: #E5E5EA; /* systemGray5 */ /* O traco e CINZA, nao o separator da Apple. O dela e rgba(60,60,67), com o azul 7 pontos acima do vermelho e do verde: sobre branco da (198,198,200), e num traço de 1px o ClearType pega essa sobra e devolve uma linha que le como azul clara. Pedido do dono em 17/09/2026, olhando o formulario de codigo: "esse traco deve seguir um cinza ainda". Igualar os tres canais resolve sem mexer no peso da linha. */ --border: rgba(60, 60, 60, .29); --border-soft: rgba(60, 60, 60, .18); --text: #000000; /* label */ /* Os cinzas de apoio sao SOLIDOS e medidos, nao os alpha do iOS. O secondaryLabel da Apple (.60) dava 3,44:1 sobre branco e o tertiary 2,40:1 — os dois reprovavam no minimo de 4,5:1 mesmo antes de existir cartao colorido. Sobre o tom de estado mais fechado (--risco-fundo) estes fecham 7,56:1 e 4,88:1: passam em TODA superficie do tema claro, branco ou cartao. */ --text-2: #42454A; /* O --text-3 tem um gemeo com o mesmo valor. Ele existe porque as superficies de estado solidas (css/components.css) sobem o --text-3 pro --text-2 dentro delas, e a bandeja — que e um recuo em --bg dentro do cartao colorido — precisa de um jeito de PEDIR o cinza de volta sem repetir o hex em dois arquivos. */ --text-3-base: #5E6167; --text-3: var(--text-3-base); --accent: #34C759; /* systemGreen — preenchimentos */ --accent-texto:#1B722F; /* o verde vivo da 2,2:1 sobre branco. Este era #248A3D, que dava 4,40:1 — reprovava por 0,1 no branco e caia pra 3,45:1 em cima de um cartao de estado. Agora fecha 4,72:1 na PIOR superficie do tema. */ --accent-dim: #1B722F; --warn: #FFCC00; /* systemYellow */ --danger: #FF3B30; /* systemRed */ --accent-tint: rgba(52, 199, 89, .12); --accent-line: rgba(52, 199, 89, .45); --accent-glow: rgba(52, 199, 89, .30); --warn-tint: rgba(255, 204, 0, .14); /* A LETRA EM CIMA DO VERDE CLARO. Era o #06230F, um preto com um resto de verde dentro. Agora e o verde-floresta fechado que o dono passou em 28/09/2026 (Ink Deep): a mesma matiz do --accent, so que no fundo do poco. Ele fecha 6,3:1 sobre o verde do claro e 6,9:1 sobre o do escuro, e como e verde de verdade (e nao preto) o botao verde para de parecer um retangulo com texto preto colado. */ --on-accent: #163300; /* O VERDE APERTADO — o que aparece embaixo do dedo quando alguem segura um botao verde (Pressed positive, do dono). E o mesmo nos dois temas de proposito: o toque nao muda de cor com o tema, e o verde vivo sobe pra letra (5,0:1 no escuro, 4,6:1 no claro) pra leitura nao sumir no meio do toque. */ --accent-preso: #054D28; /* ---------- a marca ---------- O verde do LOGO (#0BD25C, o verde do corredor). Ele NAO e uma sexta cor do sistema: nao diz estado nenhum, nao entra em cartao, em barra nem em botao. Ele so pinta a marca — o simbolo e o nome — onde a marca aparece: splash e icone do app. Toda leitura de estado continua no verde do app (--certo e companhia). Se um dia isso for usado pra DIZER alguma coisa, virou a sexta cor e quebrou a regra 1 de docs/cores.md. ⚠️ Era o lima #9BC204 ate a v1.11.0. O lima era uma matiz A PARTE (60 graus de distancia do verde do app), entao ninguem confundia a marca com um estado. Este verde novo esta a ~5 graus do --accent: eles vao parecer a mesma cor no meio da tela. A regra nao mudou — --marca continua fora de cartao, barra e botao —, mas agora ela precisa de disciplina em vez de sair de graca pela matiz. */ --marca: #0BD25C; --marca-texto: #067533; /* a mesma matiz fechada, pra LETRA: o verde vivo da 2,0:1 no branco. Este fecha 4,58:1 na PIOR superficie do tema claro. */ /* ---------- a faixa que varre o nome (js/faixa.js) ---------- Os cinco verdes que passam por "Zentry" e "Tryzen Intelligence" no DiaTextReveal (pedido do dono, 19/09/2026: "usando o verde"). No claro eles descem do vivo pro fechado, porque um verde claro demais some no branco no meio da passada. */ --faixa-1: #7BEFA6; --faixa-2: #0BD25C; --faixa-3: #00B84A; --faixa-4: #067533; --faixa-5: #34C759; /* ---------- significado (ver a tabela no topo) ---------- Aliases. Trocam o nome da TINTA pelo nome do que ela DIZ, e e por esse nome que as telas pedem. Assim "o que a cor significa" mora num lugar so: mudou a leitura, muda aqui, nao em 30 arquivos. O -fundo e a viva a 22% sobre o fundo do tema (rgba sobre branco da exatamente essa conta) e o -fio e a mesma a 40%. */ /* ESTA CERTO — a cor do produto */ --certo: var(--accent); --certo-texto: var(--accent-texto); --certo-titulo: #24913E; /* SO pra titulo (>= 24px, ou >= 19px em negrito): texto grande pede 3:1, nao 4,5:1, e essa folga deixa usar um verde mais vivo. Fecha 3,18:1 na pior superficie. Em texto miudo, reprova — la e a --certo-texto. */ --certo-fraco: rgba(52, 199, 89, .38); /* o que ainda vem */ --certo-fundo: rgba(52, 199, 89, .22); --certo-preso: rgba(52, 199, 89, .34); /* o contorno verde apertado: no claro ele so enche com a propria superficie, um pouco mais densa. O Positive Deep aqui viraria um botao preto no meio da pagina branca. */ --certo-fio: rgba(52, 199, 89, .40); /* PRECISA DE VOCE AGORA */ --acao: var(--warn); --acao-texto: #4A3B1C; /* o amarelo vivo da 1,4:1 no branco. Era o #7E5800, que fechava 5,03:1 na pior superficie; este (Warning Content, do dono) fecha 10,0:1 em cima da propria pastilha amarela. */ --acao-fundo: rgba(255, 204, 0, .28); /* o amarelo pinta menos: +6% */ --acao-fio: rgba(255, 204, 0, .50); --acao-preso: #B86700; /* Warning Deep: o amarelo apertado. Leva --bg na letra, nao --acao-texto. */ /* JA FOI — cinza cheio */ --feito: #B4B4BA; --feito-texto: var(--text-3); --feito-fundo: var(--surface); --feito-fio: var(--border); /* INCOMPLETO — o mesmo cinza, sem corpo */ --vazio: var(--border); --vazio-fundo: transparent; /* DESTRUTIVO */ --risco: var(--danger); --risco-texto: #A7000D; /* Negative Darkest, do dono. Era o #C4271C, que passava por 0,02 (4,52:1) na pior superficie; este fecha 6,5:1 la e 7,9:1 no branco. */ --risco-fundo: rgba(255, 59, 48, .18); --risco-fio: rgba(255, 59, 48, .38); --risco-preso: #A72027; /* Negative Deep: o vermelho apertado. Leva --text na letra (6,4:1). */ /* CONTATO — o azul de "fala com a pessoa" ------------------------------------------------------------ Terceira familia de estado, e a mais nova (16/09/2026). Ela existe porque o painel passou a ter pastilha de telefone e de e-mail, e verde ali significaria "deu certo", que nao e o caso: um telefone nao e um acerto, e um caminho. O texto NAO e o azul vivo: #007AFF no branco da 3,6:1, e pastilha e texto miudo. O fechado abaixo da 6,0:1 no branco e 5,2:1 sobre a propria pastilha. */ --azul-texto: #0B5FCC; --azul-fundo: rgba(0, 122, 255, .14); --azul-fio: rgba(0, 122, 255, .34); --barra-planejada: var(--certo-fraco); /* o que ainda vem: o mesmo verde, com menos voz */ --tabbar-fundo: rgba(255, 255, 255, .88); --fora-do-app: #E5E5EA; /* moldura no desktop */ } /* ---------- escuro ---------- ⚠️ Este bloco e o `:root[data-tema="escuro"]` la embaixo sao GEMEOS: os mesmos valores, um pro sistema, outro pra escolha manual. Mexeu em um, mexe no outro na mesma edicao — a duplicacao existe porque CSS nao deixa uma media query e um seletor comum dividirem a mesma regra sem `light-dark()`, que corta iOS abaixo do 17.5. */ @media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) { color-scheme: dark; /* Preto QUENTE no fundo e nas bordas, FRIO nos dois cinzas claros. O porque de cada metade esta no bloco gemeo, la embaixo (`:root[data-tema="escuro"]`) — e o mesmo texto, e ele nao se repete aqui pra nao virar duas explicacoes que divergem. */ --bg: #141414; --bg-elev: #191919; --surface: #1F1F1F; --surface-2: #252525; --border: #2B2B2B; --border-soft: #202020; --text: #F2F0E8; --text-2: #B2B1AE; --text-3-base: #9E988F; /* o gemeo: ver o bloco claro */ --text-3: var(--text-3-base); /* subiu de #7A7B7C: o antigo dava 3,9:1 dentro de uma caixa e reprovava. Este fecha 4,56:1 na pior superficie. */ --accent: #30D158; /* systemGreen (dark) */ --accent-texto:#30D158; --accent-dim: #248A3D; --warn: #FFD60A; /* systemYellow (dark) */ --danger: #FF453A; /* systemRed (dark) */ --accent-tint: rgba(48, 209, 88, .10); --accent-line: rgba(48, 209, 88, .40); --accent-glow: rgba(48, 209, 88, .32); --warn-tint: rgba(255, 214, 10, .09); --on-accent: #163300; /* o mesmo Ink Deep do claro */ /* ---------- a marca (ver o bloco claro) ---------- */ --marca: #0BD25C; --marca-texto: #0BD25C; /* sobre o preto quente o verde ja da 10,2:1 */ /* a faixa do nome: no escuro ela sobe pro claro e pro neon do Pro */ --faixa-1: #DDFFD8; --faixa-2: #A4FC9E; --faixa-3: #00FF21; --faixa-4: #0BD25C; --faixa-5: #30D158; /* ---------- significado (ver a tabela no topo) ---------- Mesma leitura do claro. O que muda e a conta do -fundo: aqui a viva dilui no PRETO QUENTE, e por isso a porcentagem cai — os 22% do claro virariam uma mancha de cor sobre o escuro. */ /* ESTA CERTO */ --certo: var(--accent); --certo-texto: var(--accent); /* no escuro a viva ja da 9,3:1 */ --certo-titulo: var(--accent); /* no escuro nao precisa fechar: a viva ja passa em tudo */ --certo-fraco: #22773C; /* 3,4:1 no fundo: le como verde, mas nao briga com o de hoje */ /* ---------- o verde do escuro, e quanto dele (28/09/2026) ---------- Duas correcoes no mesmo dia, e a segunda desfaz metade da primeira. De manha: era o verde vivo diluido a 13% no preto quente, uma mancha que em cima de um fundo ja escuro quase nao existia — o cartao "esta certo" e o cartao neutro liam igual a meio metro de distancia. Virou o Positive Deep do dono (#054D28), CHEIO. De tarde, olhando o Plano com os quatro dias de treino acesos: o dono pediu o mesmo verde MAIS ESCURO, e de volta pela transparencia. Foi a 40% primeiro (21% de tinta) e, olhando de novo, parou em 55%. Entao o corpo e o verde vivo diluido no preto quente a 16,5%, que e a conta que tira exatamente 55% da luz do #054D28 (0,0549 vira 0,0246). Ele assenta em #17311C. Nao e um meio-termo preguicoso: ainda e 27% mais tinta do que os 13% que sumiam, e pouco mais da metade da luz do cheio que gritava. O -fio desce na mesma proporcao, medido do mesmo jeito. ⚠️ O -preso NAO desce junto. A conta daria 7%, e a 7% ele assenta em #141E15 — a dois pontos do proprio fundo (#121110). O toque sumiria: um botao que nao responde ao dedo e pior que um botao de cor errada. Ele fica em 10%, que ainda e um degrau abaixo do corpo e continua visivel. Em cima do corpo: --certo-texto 7,0:1, --text 12,3:1, --text-2 6,6:1. ⚠️ Diluir de novo NAO dispensa a regra do texto miudo: o --text-3 continua reprovando aqui (4,2:1; era 3,8:1 a 21% e 3,0:1 no cheio). Quem resolve e a lista de superficies de estado no css/components.css, que sobe o --text-3 pro --text-2 dentro delas. ⚠️ O amarelo e o vermelho aqui embaixo continuam CHEIOS: o pedido do dono foi sobre o verde. Como o amarelo ficou com mais luz que o verde (0,045 contra 0,033), um cartao de "precisa de voce" agora pesa mais que um dia de treino na mesma tela. Isso e defensavel — e ele que pede acao — mas nao foi desenhado, foi consequencia. */ --certo-fundo: rgba(48, 209, 88, .165); --certo-preso: rgba(48, 209, 88, .10); /* NAO e 7%: ver o ⚠️ acima */ --certo-fio: rgba(48, 209, 88, .28); /* PRECISA DE VOCE AGORA */ --acao: var(--warn); --acao-texto: var(--warn); /* 13,4:1 */ /* O mesmo corpo cheio do verde, na familia do amarelo: o Warning Content do dono virou superficie (no escuro ele e escuro), e o Warning Deep virou o fio — e ele que da o contorno laranja que faz o cartao de "precisa de voce" saltar sem gritar. */ --acao-fundo: #4A3B1C; --acao-preso: #B86700; /* Warning Deep: leva --bg na letra */ --acao-fio: #B86700; /* JA FOI — cinza cheio (quente, como o resto do tema) */ --feito: #5C554B; --feito-texto: var(--text-3); --feito-fundo: var(--surface); --feito-fio: var(--border); /* INCOMPLETO — o mesmo cinza, sem corpo */ --vazio: var(--border); --vazio-fundo: transparent; /* DESTRUTIVO */ --risco: var(--danger); --risco-texto: var(--danger); /* 5,5:1 */ /* O vermelho e o unico que nao usa o hex do dono no corpo: o Negative Deep (#A72027) como fundo derruba o --risco-texto pra 2,1:1. Ele fica no fio e no toque, que e onde ele foi desenhado pra estar, e o corpo e a mesma cor levada ao fundo do poco. */ --risco-fundo: #3F1013; --risco-preso: #A72027; /* Negative Deep: leva --text na letra */ --risco-fio: #A72027; /* CONTATO — no escuro o vivo ja basta sobre o cinza do fundo */ --azul-texto: #4DA3FF; --azul-fundo: rgba(10, 132, 255, .16); --azul-fio: rgba(10, 132, 255, .32); --barra-planejada: var(--certo-fraco); /* Aqui o borrao FUNCIONA: sobre o preto ele le como luz saindo do botao. */ --tabbar-fundo: rgba(18, 17, 16, .88); --fora-do-app: #0A0908; } } /* ---------- escolha manual (vence o sistema) ---------- */ /* A `.paleta-escura` pendura os MESMOS valores num pedaco da pagina, e nao na raiz: e como o cadastro e o login viram tema escuro por dentro enquanto o app inteiro esta claro (css/screens.css). Sao telas que ficam em cima do filme, e o filme nao tem versao clara. Vai no bloco da escolha manual, e nao no gemeo da media query, porque ali ela valeria so no aparelho que ja esta no escuro — que e exatamente o caso em que ela nao e necessaria. O `color-scheme` desce junto de proposito: e ele que faz o teclado e o preenchimento automatico do navegador nascerem escuros dentro do cartao. */ :root[data-tema="escuro"], .paleta-escura { color-scheme: dark; /* Preto QUENTE, nao azulado. O azul vem 2 a 9 pontos ABAIXO do vermelho — e isso que puxa pro preto de fotografia em vez do azul-noite. A luminancia e a mesma de antes (0,005 no fundo): nenhum contraste caiu. ⚠️ Nao "corrigir" pra um cinza neutro achando que e engano. ---------- os dois cinzas claros sao a excecao (15/09/2026) ---------- Decisao do dono: `--surface` e `--surface-2` sao as superficies que SOBEM — o cartao, o chip, o campo, a faixa da roda — e no quente elas liam como bege sujo em vez de cinza. Foram tres tentativas antes de parar aqui. A rampa espelhada (8 e 9 pontos de azul acima do vermelho) ficou azul-noite demais; o meio do caminho (6 e 7) continuou azulado; o cinza frio da Apple (#1C1C1E / #242426) resolveu o azulado e ainda era o cinza DELES. O numero final e do dono (16/09/2026): "em vez desse cinza que voce esta usando nos box, use esse: #212121 em todo o site". Ele e um cinza NEUTRO de verdade — R, G e B iguais, sem um ponto de azul nem de vermelho puxando pra lado nenhum: --surface #212121 a caixa. Cartao, chip, campo, faixa da roda: tudo o que SOBE do fundo. --surface-2 #252525 o mesmo cinza, um degrau acima. ⚠️ O degrau e de 4 pontos, e nao dos 8 de antes, e isso NAO e descuido: --text-3 (#918B82) sobre --surface-2 e a pior combinacao do tema, e ela tem que fechar 4,5:1. Em #252525 da 4,54:1 e passa; em #262626 cai pra 4,48 e reprova. Qualquer cinza mais claro que #252525 aqui exige mexer no --text-3 antes, e o --text-3 e o texto miudo do produto inteiro. O FUNDO e as BORDAS continuam QUENTES: o preto de fotografia e do fundo, e e ele que da o clima. Neutro e so o que sobe. Conferido: --text-3 sobre --surface da 4,77:1 e sobre --surface-2 da 4,54:1. Passa. O FUNDO e as BORDAS continuam quentes: o preto de fotografia e do fundo, e e ele que da o clima. O que mudou foi so o que sobe. */ /* 14/10/2026, o dono, em duas voltas: o preto do fundo pesava (contraste demais com a letra) e as camadas se confundiam (pouca diferenca entre fundo e caixa). O 10% em tudo foi desfeito. Agora: · o FUNDO clareou 4% em direcao ao branco: #121110 -> #1B1B1A (e o --bg-elev junto, #171613 -> #201F1C); · as CAIXAS subiram um degrau maior que o do fundo, pra separar: #212121 -> #2B2B2B e #252525 -> #303030, com as bordas junto; · o --text-3 subiu pra #9E988F: 4,61:1 na pior caixa (#303030). Terceira volta, no mesmo dia: "deixa 1,5% mais claro, e a diferenca entre as cores igual a da Attio ou do Claude". Medido no print do app do Claude no escuro: fundo #151515, caixa +11, borda +23, pilula +28. Aqui o fundo subiu 1,5% (#1B1B1A -> #1E1E1D) e os degraus copiam os do Claude: --bg-elev +5 (#232321), --surface +11 (#292927), --surface-2 +17 (#2F2F2D), --border +23 (#353432). O --text-3 segue #9E988F: 4,69:1 sobre #2F2F2D. */ --bg: #141414; --bg-elev: #191919; --surface: #1F1F1F; --surface-2: #252525; --border: #2B2B2B; --border-soft: #202020; --text: #F2F0E8; --text-2: #B2B1AE; --text-3-base: #9E988F; /* o gemeo: ver o bloco claro */ --text-3: var(--text-3-base); /* subiu de #7A7B7C: o antigo dava 3,9:1 dentro de uma caixa e reprovava. Este fecha 4,56:1 na pior superficie. */ --accent: #30D158; --accent-texto:#30D158; --accent-dim: #248A3D; --warn: #FFD60A; --danger: #FF453A; --accent-tint: rgba(48, 209, 88, .10); --accent-line: rgba(48, 209, 88, .40); --accent-glow: rgba(48, 209, 88, .32); --warn-tint: rgba(255, 214, 10, .09); --on-accent: #163300; /* o mesmo Ink Deep do claro */ /* ---------- a marca (ver o bloco claro) ---------- */ --marca: #0BD25C; --marca-texto: #0BD25C; /* sobre o preto quente o verde ja da 10,2:1 */ /* a faixa do nome: no escuro ela sobe pro claro e pro neon do Pro */ --faixa-1: #DDFFD8; --faixa-2: #A4FC9E; --faixa-3: #00FF21; --faixa-4: #0BD25C; --faixa-5: #30D158; /* ---------- significado (ver a tabela no topo) ---------- Mesma leitura do claro. O que muda e a conta do -fundo: aqui a viva dilui no PRETO QUENTE, e por isso a porcentagem cai — os 22% do claro virariam uma mancha de cor sobre o escuro. */ /* ESTA CERTO */ --certo: var(--accent); --certo-texto: var(--accent); /* no escuro a viva ja da 9,3:1 */ --certo-titulo: var(--accent); /* no escuro nao precisa fechar: a viva ja passa em tudo */ --certo-fraco: #22773C; /* 3,4:1 no fundo: le como verde, mas nao briga com o de hoje */ /* ---------- o verde do escuro, e quanto dele (28/09/2026) ---------- Duas correcoes no mesmo dia, e a segunda desfaz metade da primeira. De manha: era o verde vivo diluido a 13% no preto quente, uma mancha que em cima de um fundo ja escuro quase nao existia — o cartao "esta certo" e o cartao neutro liam igual a meio metro de distancia. Virou o Positive Deep do dono (#054D28), CHEIO. De tarde, olhando o Plano com os quatro dias de treino acesos: o dono pediu o mesmo verde MAIS ESCURO, e de volta pela transparencia. Foi a 40% primeiro (21% de tinta) e, olhando de novo, parou em 55%. Entao o corpo e o verde vivo diluido no preto quente a 16,5%, que e a conta que tira exatamente 55% da luz do #054D28 (0,0549 vira 0,0246). Ele assenta em #17311C. Nao e um meio-termo preguicoso: ainda e 27% mais tinta do que os 13% que sumiam, e pouco mais da metade da luz do cheio que gritava. O -fio desce na mesma proporcao, medido do mesmo jeito. ⚠️ O -preso NAO desce junto. A conta daria 7%, e a 7% ele assenta em #141E15 — a dois pontos do proprio fundo (#121110). O toque sumiria: um botao que nao responde ao dedo e pior que um botao de cor errada. Ele fica em 10%, que ainda e um degrau abaixo do corpo e continua visivel. Em cima do corpo: --certo-texto 7,0:1, --text 12,3:1, --text-2 6,6:1. ⚠️ Diluir de novo NAO dispensa a regra do texto miudo: o --text-3 continua reprovando aqui (4,2:1; era 3,8:1 a 21% e 3,0:1 no cheio). Quem resolve e a lista de superficies de estado no css/components.css, que sobe o --text-3 pro --text-2 dentro delas. ⚠️ O amarelo e o vermelho aqui embaixo continuam CHEIOS: o pedido do dono foi sobre o verde. Como o amarelo ficou com mais luz que o verde (0,045 contra 0,033), um cartao de "precisa de voce" agora pesa mais que um dia de treino na mesma tela. Isso e defensavel — e ele que pede acao — mas nao foi desenhado, foi consequencia. */ --certo-fundo: rgba(48, 209, 88, .165); --certo-preso: rgba(48, 209, 88, .10); /* NAO e 7%: ver o ⚠️ acima */ --certo-fio: rgba(48, 209, 88, .28); /* PRECISA DE VOCE AGORA */ --acao: var(--warn); --acao-texto: var(--warn); /* 13,4:1 */ /* O mesmo corpo cheio do verde, na familia do amarelo: o Warning Content do dono virou superficie (no escuro ele e escuro), e o Warning Deep virou o fio — e ele que da o contorno laranja que faz o cartao de "precisa de voce" saltar sem gritar. */ --acao-fundo: #4A3B1C; --acao-preso: #B86700; /* Warning Deep: leva --bg na letra */ --acao-fio: #B86700; /* JA FOI — cinza cheio (quente, como o resto do tema) */ --feito: #5C554B; --feito-texto: var(--text-3); --feito-fundo: var(--surface); --feito-fio: var(--border); /* INCOMPLETO — o mesmo cinza, sem corpo */ --vazio: var(--border); --vazio-fundo: transparent; /* DESTRUTIVO */ --risco: var(--danger); --risco-texto: var(--danger); /* 5,5:1 */ /* O vermelho e o unico que nao usa o hex do dono no corpo: o Negative Deep (#A72027) como fundo derruba o --risco-texto pra 2,1:1. Ele fica no fio e no toque, que e onde ele foi desenhado pra estar, e o corpo e a mesma cor levada ao fundo do poco. */ --risco-fundo: #3F1013; --risco-preso: #A72027; /* Negative Deep: leva --text na letra */ --risco-fio: #A72027; /* CONTATO — no escuro o vivo ja basta sobre o cinza do fundo */ --azul-texto: #4DA3FF; --azul-fundo: rgba(10, 132, 255, .16); --azul-fio: rgba(10, 132, 255, .32); --barra-planejada: var(--certo-fraco); /* Aqui o borrao FUNCIONA: sobre o preto ele le como luz saindo do botao. */ --tabbar-fundo: rgba(18, 17, 16, .88); --fora-do-app: #0A0908; } :root { /* ---------- tipografia ---------- */ --font: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* Fonte dos dados: pace, tempo, distancia, rotulos tecnicos. Nao e mais monoespacada (era JetBrains Mono) — o nome do token ficou por causa das ~30 chamadas espalhadas. O alinhamento de coluna que a mono dava de graca agora vem do `font-variant-numeric: tabular-nums` abaixo; sem ele os numeros dancam nas tabelas de splits e no ranking. */ --font-mono: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --fs-display: clamp(40px, 13.4vw, 56px); /* headline do splash */ --fs-h1: clamp(32px, 10.2vw, 42px); /* titulo grande de tela */ --fs-h2: clamp(27px, 8.6vw, 35px); /* titulo de tela padrao */ --fs-h3: 21px; --fs-lg: 19px; --fs-body: 17px; --fs-sm: 15px; --fs-xs: 13px; --fs-mono: 13px; --fs-mono-sm: 12px; --fs-stat: 30px; --fs-stat-lg: 38px; --lh-tight: 1.06; --lh-snug: 1.2; --lh-body: 1.55; /* +.05 de entrelinha: o paragrafo respira sem mudar nenhum tamanho de fonte */ --tr-tight: -.028em; /* letter-spacing dos displays */ --tr-mono: .02em; /* ---------- espaco ---------- Escala de UM proposito por degrau. O que separa BLOCO de bloco e o --gap-lg pra cima; dentro do bloco nunca passa do --gap. xs/sm colados (rotulo e valor, chip e chip) gap dentro do mesmo bloco md fim de um bloco pro comeco do proximo lg troca de assunto xl troca de secao 2xl respiro grande (antes de um rodape, depois de um titulo solto) Os degraus de cima cresceram: o app estava com o "vao" apertado demais e tudo lia como uma lista so. */ --pad: 22px; /* padding lateral da pagina */ --gap-xs: 6px; --gap-sm: 10px; --gap: 16px; --gap-md: 24px; --gap-lg: 34px; --gap-xl: 52px; --gap-2xl: 76px; /* ---------- forma ---------- */ --r-sm: 10px; /* pastilha de informacao */ --r: 14px; --r-lg: 18px; /* bandeja de dentro do cartao · modal */ --r-card: 22px; /* o cartao por fora. Sempre MAIOR que a bandeja: raio igual por dentro e por fora faz a peca de dentro parecer torta. */ --r-pill: 999px; --tabbar-h: 58px; /* A area das barras do sistema. No app do Android quem sabe o numero certo e o Capacitor, que escreve `--safe-area-inset-*` na raiz (o `env()` do WebView erra antes da versao 140, e quando o Capacitor recua a pagina por conta propria ele escreve 0 aqui, pra ninguem recuar duas vezes). No iPhone e no navegador a variavel nao existe e vale o `env()` de sempre. */ --safe-top: var(--safe-area-inset-top, env(safe-area-inset-top, 0px)); --safe-bottom: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)); /* Quantos pixels do fim da tela o teclado do celular esta cobrindo. Zero e o normal, e zero e tambem o que fica em navegador sem `visualViewport`: quem escreve aqui e js/teclado.js, e o CSS que le (a tela de conversa, a tab bar, o toast) volta ao de sempre sozinho quando a medida e zero. */ --teclado: 0px; /* ---------- movimento ---------- */ --ease: cubic-bezier(.22, .61, .36, 1); --dur: .26s; /* A MOLA. O `spring` do motion (stiffness 350, damping 40, massa 1) que o AnimatedList do MagicUI usa, resolvido e ajustado numa curva de CSS: a mola e levemente sobreamortecida (razao 1.07), entao ela nao balanca — chega rapido e assenta. Os 460ms sao o tempo que ela leva pra ficar a 99,5% do destino; o 1.02 do fim passa de 1 de proposito, porque e assim que a mola encosta no destino. Quem usa: `.lista-anim` no css/components.css. */ --mola: cubic-bezier(.25, .36, .12, 1.02); --mola-dur: 460ms; /* ---------- as duas molas do beui ---------- Resolvidas em `linear()`, que desenha a curva ponto a ponto: uma Bezier tem quatro numeros e nao consegue passar do destino e voltar, que e justamente o que uma mola faz. TRILHO (380 / 35 / 0.75): a lateral do painel. A razao de amortecimento e 1,04, ou seja, ela NAO passa do ponto. E de proposito: a lateral encolhe ate uma parede (o trilho de icones tem largura minima) e uma mola que passasse bateria nela e voltaria no ultimo quadro. PILULA (520 / 34 / 1): o fundo da aba ativa correndo de uma aba pra outra. Aqui nao ha parede nenhuma, entao ela passa 2,9% e volta, que e o que da o peso do movimento. */ --mola-trilho: linear(0, 0.1086, 0.3047, 0.4924, 0.6433, 0.7553, 0.8347, 0.8896, 0.9267, 0.9517, 0.9682, 0.9792, 0.9864, 0.9911, 0.9942, 0.9962, 0.9975, 0.9984, 1); --mola-trilho-dur: 450ms; --mola-pilula: linear(0, 0.1429, 0.411, 0.6619, 0.844, 0.9541, 1.0087, 1.0279, 1.0286, 1.0218, 1.0137, 1.0072, 1.0028, 1.0004, 0.9994, 0.9991, 0.9992, 0.9995, 0.9997, 0.9999, 1); --mola-pilula-dur: 550ms; /* FOLHA (420 / 40 / 0.5): o `SPRING_PANEL` do beui, a fisica das folhas e modais que sobem por cima da tela. Razao 1,38, bem sobreamortecida: painel que passa do ponto e volta parece elastico, e uma folha que pede uma decisao nao pode parecer brinquedo. PULO (460 / 30 / 0.55): o `SPRING_SWAP`, pro conteudo que TROCA de lugar dentro de um controle (a aba que muda, o rotulo que vira outro). Razao 0,94: passa 0,01% e volta, o suficiente pra ter peso sem balancar. */ --mola-folha: linear(0, 0.1669, 0.391, 0.5659, 0.6922, 0.782, 0.8457, 0.8907, 0.9226, 0.9452, 0.9612, 0.9725, 0.9806, 0.9862, 0.9903, 0.9931, 0.9951, 0.9965, 1); --mola-folha-dur: 500ms; --mola-pulo: linear(0, 0.221, 0.5357, 0.7589, 0.8864, 0.9508, 0.9805, 0.9931, 0.998, 0.9996, 1.0001, 1.0001, 1.0001, 1.0001, 1, 1, 1, 1, 1, 1, 1); --mola-pulo-dur: 600ms; } @media (prefers-reduced-motion: reduce) { :root { --dur: .01ms; } } /* 15/10/2026: dark ~1,25 ponto percentual mais escuro (-3/255 nas superficies e bordas), preservando os degraus entre camadas e os textos. */ /* 16/10/2026: o escuro do Admin passou a ser o de TODO o produto (app, Coach, paineis), pedido do dono: "passa essa cor atual do admin pra todo o resto do app e do coach". Neutro: fundo #141414, elev #191919, caixa #1F1F1F, pilula #252525, borda #2B2B2B. O --text-3 #9E988F da 5,3:1 sobre #252525. Os dois blocos de escuro (automatico e escolhido) tem os mesmos numeros. */