/* TOKENS — a central de ajuda do TodaRota. * * ⚠ ESTA PALETA CLARA É ADAPTAÇÃO DO MANUAL, NÃO UM TEMA DO PRODUTO. * O TodaRota é escuro e tem UM tema só (`color-scheme: dark` em * `css/tokens.css` do sistema). Nada aqui deve ser lido como "o tema claro * do TodaRota", nem servir de base para criar um: o que existe é uma folha * clara feita para LER documentação, derivada da paleta do produto. * * A regra que guiou cada valor: NENHUMA COR NOVA. Toda tinta abaixo é um * token do sistema, ou o mesmo token virado para o claro mantendo a matiz. * A coluna "de onde vem" diz qual. * * O que NÃO é copiado do produto, de propósito: a densidade. Corpo de 17px, * entrelinha 1,62 e medida de 680px são de documentação — o painel usa 14px * com entrelinha normal porque é monitorado de relance, não lido por minutos. */ /* ============================================================== TIPOGRAFIA As duas famílias do produto, em arquivo local: o manual abre por duplo clique e não pode depender do Google Fonts, que é como o sistema as carrega. Licenças em `fontes/`. ⚠ O eixo de peso do Outfit começa em 100 e o DEFAULT do arquivo é Thin. Sem a faixa declarada aqui, um texto sem `font-weight` sai finíssimo. ========================================================================= */ @font-face { font-family: "Outfit"; src: url("../fontes/Outfit-Variable.ttf") format("truetype-variations"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Spline Sans Mono"; src: url("../fontes/SplineSansMono-Variable.ttf") format("truetype-variations"); font-weight: 300 700; font-style: normal; font-display: swap; } :root { color-scheme: light; /* ---------------------------------------------------------- superfícies O produto empilha quatro planos (mesa → painel → conteúdo → cartão) e a profundidade vive na DIFERENÇA entre eles, nunca numa borda grossa. Aqui são três, pela mesma lógica e na mesma matiz fria. ⚠ A matiz é a do produto, e ela é AZULADA: as linhas dele são declaradas literalmente como `rgba(210,225,245, α)`. Um cinza quente aqui seria cor nova — foi o que a versão anterior deste arquivo fez. */ --papel: #FFFFFF; /* a coluna de leitura (↔ --bg-card) */ --osso: #F4F6FA; /* a mesa em volta, e o menu (↔ --bg-app) */ --bloco: #EBEFF5; /* bloco destacado dentro do texto(↔ --bg-inset) */ --moldura: #E6EBF2; /* o fundo atrás de uma captura */ /* ------------------------------------------------------------- traços Em alpha, como no produto, para valerem sobre qualquer das superfícies acima sem virar três valores diferentes. */ --fio: rgba(19, 32, 51, .10); /* ↔ --hairline / --line-card */ --fio-forte: rgba(19, 32, 51, .19); /* ↔ --line-control */ /* --------------------------------------------------------------- texto A rampa do produto virada em luminância, mantendo a matiz fria. Contraste medido sobre --papel, e conferido também sobre --osso e --bloco, que são onde legenda e apoio de fato aparecem. */ --tinta: #131820; /* título ↔ --text · 17,8:1 */ --texto: #2E3641; /* corpo ↔ --text-2 · 12,2:1 */ --texto-2: #5A6472; /* apoio ↔ --text-4 · 6,0:1 */ /* ⚠ O PIOR CASO DA LEGENDA NÃO É O PAPEL, É A MESA. Ela vive no menu e no pé, que são `--osso`. Sobre branco o degrau anterior (#6B7583) dava 4,67:1 e passava; sobre a mesa dava 4,32:1 e reprovava, e sobre o bloco, 4,05:1. Este passa nos três: 5,47 · 5,05 · 4,74. */ --texto-3: #616A78; /* legenda ↔ --text-6 */ /* -------------------------------------------------- acento: o laranja ⚠ SÃO TRÊS PAPÉIS, E ELES NÃO SÃO O MESMO TOKEN. É essa separação que permite ter a marca viva sem clarear texto nenhum: --marca IDENTIDADE. O laranja oficial, chapado. Só onde ele PODE estar vivo: o símbolo, o disco da marcação sobre a captura escura, o sublinhado do link, o atalho de pular. --acento TEXTO. Link, chamada, aviso. Precisa de 4,5:1. --acento-esc FORMA QUE CARREGA ESTADO. Foco, nó do menu, marca do índice. Precisa de 3:1. Tratar os três como um só produziu os dois defeitos, um em cada ponta: um laranja apagado demais para a marca, e antes disso um laranja claro demais para o texto. ⚠ NENHUM DEGRADÊ. O produto pinta a marca com dois gradientes; aqui o laranja é chapado, para a marca continuar legível impressa. */ /* O LARANJA OFICIAL — o mesmo `--accent` do produto, e o único dono dele. Ele NÃO veste texto nem indicador de estado sobre claro: ali dá 2,84:1 no papel e 2,62 na mesa. Onde ele vive o número é outro — 6,8:1 sobre a captura escura, e 6,22:1 com o `--on-acento` por cima. */ --marca: #F2762E; /* IDENTIDADE ↔ --accent */ /* ⚠ O LINK É A MATIZ DA MARCA (22°) COM CHROMA CHEIA, e o degrau saiu de varredura: é o mais laranja que ainda passa 4,5:1 nas superfícies em que ele de fato aparece. O `#B54F16` anterior tem a mesma matiz com 88% de chroma, e era isso que o fazia ler como marrom. */ --acento: #C24700; /* TEXTO: link, chamada, aviso */ /* ⚠ A FORMA PEDE 3:1 CONTRA O VIZINHO, e o vizinho do menu é a mesa, não o branco: ali `--marca` dá 2,62 e reprova. Este dá 3,57 na mesa, 3,87 no papel e 3,25 sobre a superfície de controle. Token do produto. */ --acento-esc: #D2601C; /* FORMA COM ESTADO ↔ --accent-solid-active */ --on-acento: #2A1300; /* o que se escreve DENTRO do laranja ↔ --on-accent */ /* Os dois são o `--marca` diluído: como véu e como fio ele não carrega texto nem estado sozinho, e é assim que o produto usa `--ativo-bg`. */ --acento-bg: rgba(242, 118, 46, .10); /* ↔ --ativo-bg */ --acento-fio: rgba(242, 118, 46, .38); /* ↔ --alert-line */ /* -------------------------------------------------------------- avisos ⚠ DUAS NATUREZAS, como no produto — `.aviso--erro` e `.aviso--neutro` —, e as duas são SUPERFÍCIE INTEIRA. A regra é escrita no sistema: "alerta é superfície inteira, nunca tarja colorida na borda". A versão anterior tinha três avisos, tarja de 3px na borda esquerda e duas famílias de cor (um azul e um âmbar) que não existem em lugar nenhum do produto. */ --cuidado-bg: rgba(242, 118, 46, .09); /* ↔ --anomalia / --veu-accent */ --cuidado-fio: rgba(242, 118, 46, .30); --nota-bg: rgba(19, 32, 51, .04); /* ↔ .aviso--neutro */ --nota-fio: rgba(19, 32, 51, .12); /* ---------------------------------------------------------- controles O manual quase não tem controle. Os que tem (o campo de busca, o botão de assuntos, o item ativo do menu) vestem o material neutro do produto. */ --controle-bg: rgba(19, 32, 51, .05); /* ↔ --control-bg / --nav-on-bg */ --controle-hov: rgba(19, 32, 51, .08); /* ↔ --control-bg-hover */ /* ---------------------------------------------------------- tipografia */ --fonte: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --mono: "Spline Sans Mono", ui-monospace, "SF Mono", "Cascadia Mono", monospace; /* Corpo e entrelinha SÃO de documentação e não seguem o painel. */ --t-corpo: 1.0625rem; /* 17px */ --t-peq: .9375rem; /* 15px */ --t-mini: .8125rem; /* 13px */ --t-carimbo: 11px; /* o rótulo em caixa alta ↔ --t-xs */ /* Já os TÍTULOS ecoam a escala do produto: 36 e 21. */ --t-h1: clamp(1.75rem, 1.32rem + 1.55vw, 2.25rem); /* 28 → 36px */ --t-h2: 1.3125rem; /* 21px */ --t-h3: 1.0625rem; /* 17px */ --linha: 1.62; /* --------------------------------------------------------------- espaço A escala de 4 do produto, estendida para os saltos que um texto longo precisa e um painel não. */ --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px; --e7: 48px; --e8: 72px; /* ---------------------------------------------------------------- forma Os raios do produto, sem inventar degrau. Saiu o 12px do manual antigo, que não correspondia a nada. */ /* ⚠ `--r-panel` (14px) do produto NÃO entrou: ele veste o painel flutuante da moldura, e o manual não tem painel flutuante — a coluna de leitura encosta nas divisórias. Token sem usuário é dívida, então ele não existe aqui; se um painel nascer, o valor está no sistema. */ --r-bloco: 10px; /* ↔ --r-card */ --r-peca: 8px; /* ↔ --r-control */ --r-seg: 5px; /* ↔ --r-seg */ --r-pill: 999px; /* ↔ --r-pill */ /* ------------------------------------------------- medidas da moldura ⚠ O cabeçalho e o corpo usam AS DUAS: mesma largura máxima e mesma calha. Foi a falta disso que deixou a marca a 156px do menu numa janela de 1920. */ --moldura-max: 1440px; --calha: 32px; --topo-h: 64px; /* ↔ --chrome-h */ /* ⚠ O cabeçalho tem 64px de conteúdo MAIS 1px de fio. Quem gruda embaixo dele precisa dos 65: com 64, o menu dava um salto de 1px no instante em que grudava. */ --topo-total: 65px; --lateral-l: 280px; --indice-l: 220px; /* A MEDIDA DE LEITURA É EM PIXEL, NUNCA EM `ch`. ⚠ `ch` é relativo ao corpo de CADA elemento: 68ch dava 700px no parágrafo e 962px no h1, na mesma coluna. Em pixel, todo mundo divide a mesma margem direita. */ --medida: 680px; /* texto */ --medida-fig: 920px; /* figura: espaço maior, como pedido */ }