/* ============================================================ 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 */ --border: rgba(60, 60, 67, .29); /* separator */ --border-soft: rgba(60, 60, 67, .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; --text-3: #5E6167; --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); --on-accent: #06230F; /* texto sobre o verde: escuro tem 11:1 de contraste, branco teria 1.8:1 */ /* ---------- 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. */ /* ---------- 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-fio: rgba(52, 199, 89, .40); /* PRECISA DE VOCE AGORA */ --acao: var(--warn); --acao-texto: #7E5800; /* o amarelo vivo da 1,4:1 no branco; este fecha 5,03:1 na pior superficie */ --acao-fundo: rgba(255, 204, 0, .28); /* o amarelo pinta menos: +6% */ --acao-fio: rgba(255, 204, 0, .50); /* 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: #C4271C; /* systemRed fechado: 4,52:1 na pior */ --risco-fundo: rgba(255, 59, 48, .18); --risco-fio: rgba(255, 59, 48, .38); --barra-planejada: var(--certo-fraco); /* o que ainda vem: o mesmo verde, com menos voz */ /* Halo do botao de microfone. No claro e um ANEL nitido: um brilho borrado sobre branco nao le como luz, le como mancha. */ --fab-halo: 0 0 0 10px var(--certo-fundo); --fab-halo-forte: 0 0 0 18px var(--certo-fundo); --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, nao azulado. O azul vem 2 a 9 pontos ABAIXO do vermelho em toda a rampa — 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. */ --bg: #121110; --bg-elev: #171613; --surface: #221F1B; --surface-2: #282420; --border: #37332E; --border-soft: #232019; --text: #F2F0E8; --text-2: #B2B1AE; --text-3: #918B82; /* 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: #04210C; /* ---------- a marca (ver o bloco claro) ---------- */ --marca: #0BD25C; --marca-texto: #0BD25C; /* sobre o preto quente o verde ja da 10,2:1 */ /* ---------- 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 */ --certo-fundo: rgba(48, 209, 88, .13); --certo-fio: rgba(48, 209, 88, .30); /* PRECISA DE VOCE AGORA */ --acao: var(--warn); --acao-texto: var(--warn); /* 13,4:1 */ --acao-fundo: rgba(255, 214, 10, .10); --acao-fio: rgba(255, 214, 10, .24); /* 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 */ --risco-fundo: rgba(255, 69, 58, .13); --risco-fio: rgba(255, 69, 58, .30); --barra-planejada: var(--certo-fraco); /* Aqui o borrao FUNCIONA: sobre o preto ele le como luz saindo do botao. */ --fab-halo: 0 0 68px rgba(48, 209, 88, .32); --fab-halo-forte: 0 0 104px rgba(48, 209, 88, .32); --tabbar-fundo: rgba(18, 17, 16, .88); --fora-do-app: #0A0908; } } /* ---------- escolha manual (vence o sistema) ---------- */ :root[data-tema="escuro"] { color-scheme: dark; /* Preto QUENTE, nao azulado. O azul vem 2 a 9 pontos ABAIXO do vermelho em toda a rampa — 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. */ --bg: #121110; --bg-elev: #171613; --surface: #221F1B; --surface-2: #282420; --border: #37332E; --border-soft: #232019; --text: #F2F0E8; --text-2: #B2B1AE; --text-3: #918B82; /* 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: #04210C; /* ---------- a marca (ver o bloco claro) ---------- */ --marca: #0BD25C; --marca-texto: #0BD25C; /* sobre o preto quente o verde ja da 10,2:1 */ /* ---------- 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 */ --certo-fundo: rgba(48, 209, 88, .13); --certo-fio: rgba(48, 209, 88, .30); /* PRECISA DE VOCE AGORA */ --acao: var(--warn); --acao-texto: var(--warn); /* 13,4:1 */ --acao-fundo: rgba(255, 214, 10, .10); --acao-fio: rgba(255, 214, 10, .24); /* 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 */ --risco-fundo: rgba(255, 69, 58, .13); --risco-fio: rgba(255, 69, 58, .30); --barra-planejada: var(--certo-fraco); /* Aqui o borrao FUNCIONA: sobre o preto ele le como luz saindo do botao. */ --fab-halo: 0 0 68px rgba(48, 209, 88, .32); --fab-halo-forte: 0 0 104px rgba(48, 209, 88, .32); --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; --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); /* ---------- movimento ---------- */ --ease: cubic-bezier(.22, .61, .36, 1); --dur: .26s; } @media (prefers-reduced-motion: reduce) { :root { --dur: .01ms; } }