/* Tokens do CaptureHub — porte fiel do DESIGN-SYSTEM.md (v1.1) para a web. Nenhum valor de cor pode existir fora deste arquivo: hex solto em folha de estilo ou em marcação é defeito, a mesma regra que vale para o XAML e o C#. Cor nova entra primeiro no DESIGN-SYSTEM.md e só depois aqui. */ :root { /* Paleta oficial — §1 */ --cor-navy: #0A0F1E; --cor-navy-superficie: #0E1322; /* A ESCADA DE SUPERFICIES, portada em 18/09/2026. O site descia o chao e parava ai: os cartoes separavam do fundo por borda, e nao por material. No aplicativo os degraus valiam 1,12:1 e a tela lia como chapada; a medicao e o conserto estao no DESIGN-SYSTEM.md §1. Agora os dois lados tem a mesma escada: fundo -> cartao (1,22:1) -> elevado (1,21:1) -> toggle-desligado (1,29:1). */ --cor-navy-cartao: #141E3C; --cor-navy-elevado: #1E2C56; --cor-menta: #2BE3A6; --cor-menta-escura: #1ED89A; --cor-branco-gelo: #F6F8FB; --cor-cinza-nevoa: #9FABBD; --cor-tinta: #0E1526; /* Tokens funcionais — §1 */ --cor-gradiente-topo: #4EF2BC; --cor-gravacao: #E5484D; --cor-aviso: #FFB020; --cor-erro: #E5484D; /* Nivel 3 da escada, alem do trilho do toggle. Clareou junto. */ --cor-toggle-desligado: #293C74; --cor-overlay-escuro: rgb(0 0 0 / 60%); --gradiente-marca: linear-gradient(180deg, var(--cor-gradiente-topo) 0%, var(--cor-menta-escura) 100%); /* O ESPECTRO, da onda 2 da revisão visual (28/09/2026). Não é cor nova: é a menta, o sinal e o profundo, que já estão aqui, lidos numa linha só. Ele pinta o fim da frase do herói e os filetes de luz, e nunca o que se clica: a cor da ação continua sendo a menta. */ --gradiente-espectro: linear-gradient(100deg, var(--cor-menta), var(--cor-sinal) 55%, var(--cor-profundo)); /* A REVISÃO VISUAL DE 18/09/2026, ONDA 1 — APROVADA no mesmo dia. Os tokens subiram para o DESIGN-SYSTEM.md §1 e deixaram de ser desvio desta folha: `--cor-fundo` virou `Cor.Fundo`, `--cor-sinal` virou `Cor.Sinal`, `--cor-profundo` virou `Cor.Profundo` e `--cor-cinza-fraco` virou `Cor.CinzaFraco`. O aplicativo de desktop passou a usar os quatro, e a guarda `CoresDesignTests` cobra os valores de lá. O texto abaixo fica porque é a justificativa da direção, e ela não mudou ao ser aprovada — só o `--fonte-mono` continua sendo coisa da web. A regra da casa continua valendo e é o motivo de eles estarem AQUI e não soltos numa folha qualquer: cor só por token, num lugar só. Se a direção for aprovada, eles sobem para o documento de design; se for recusada, apagar este bloco e as regras que o citam devolve o site ao estado anterior, porque nenhuma outra coisa depende deles. A MENTA NÃO MUDA, e isso é o ponto: ela continua sendo a marca e a cor da ação. O que entra é o que acompanha a menta. O ciano é sinal (dado em trânsito, varredura, ordinal de seção) e o violeta é profundidade (o lado da nuvem, no desenho do ADR 0009). Os dois têm croma e claridade próximos da menta de propósito: paleta de três cores que brigam entre si vira confete, e o produto vende sobriedade. O FUNDO DESCE QUATRO PONTOS do navy oficial. Não é cor nova de marca, é chão: com ele o `--cor-navy-superficie` dos cartões separa do fundo sem precisar de borda mais clara, que era o que o site fazia antes. O navy oficial continua existindo e continua sendo usado onde é superfície. O MONO É DO SISTEMA, e nunca de servidor de terceiro (ADR 0009): a Cascadia e a Consolas já estão na máquina de quem roda Windows, que é todo o público do produto. Ele carrega o que é medido, o ordinal de seção e o rótulo de instrumento, e é a mudança que mais muda o caráter do site sem custar um byte de download. */ --cor-fundo: #06090F; --cor-sinal: #49D8FF; --cor-profundo: #8B7BFF; --cor-cinza-fraco: #7C8BA3; --fonte-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, monospace; /* A ONDA 3, NO ESTILO AURION — 29/09/2026, decidida pelo dono depois de ver a proposta lado a lado, página por página, contra o site no ar. É DESVIO DA WEB, pelo mesmo caminho da onda 1 em 18/09: os tokens entram aqui, marcados, e sobem para o DESIGN-SYSTEM.md quando o aplicativo quiser a mesma direção. Apagar este bloco e as regras que o citam devolve o site ao chão da onda 2. O CHÃO DESCE MAIS UM DEGRAU, e fica azulado: `--cor-noite`. O `--cor-fundo` continua existindo, porque o aplicativo o usa, e deixa de ser o fundo da página. A LUZ É AZUL-GELO, e não é cor de marca: quatro pontos da mesma família, do núcleo quase branco ao azul fundo, que desenham os brilhos atrás do aparelho do herói, dos números, do plano em destaque e do arco do rodapé. Ela nunca pinta texto de leitura nem o que se clica. A MENTA CONTINUA SENDO A MARCA, e deixa de ser a cor do botão: o botão principal passa a ser branco, decisão do dono no mesmo dia. Ela fica com o que confirma, o ponto do selo, o visto, o passo registrado e o aro do plano. */ --cor-noite: #030817; --cor-luz-gelo: #CDEFFF; --cor-luz: #8FD6FF; --cor-luz-media: #3F97E6; --cor-luz-funda: #0F3F86; /* O que vem a seguir não é cor, é composição das que existem. O corpo de texto é o névoa clareado com o branco, a mistura que a proposta pedia para ler bem no chão mais escuro; as bordas de vidro são o branco em duas diluições, escritas uma vez em vez de em quarenta regras. */ --cor-corpo: color-mix(in srgb, var(--cor-cinza-nevoa) 75%, var(--cor-branco-gelo)); --borda-vidro: color-mix(in srgb, var(--cor-branco-gelo) 10%, transparent); --borda-vidro-forte: color-mix(in srgb, var(--cor-branco-gelo) 18%, transparent); /* O material do cartão: o topo pega a luz do navy-cartão, o meio é a superfície e o pé desce para a noite. */ --material-cartao: linear-gradient(180deg, color-mix(in srgb, var(--cor-navy-cartao) 75%, var(--cor-noite)), color-mix(in srgb, var(--cor-navy-superficie) 85%, var(--cor-navy-cartao)) 55%, color-mix(in srgb, var(--cor-navy-superficie) 60%, var(--cor-noite))); /* O brilho, do núcleo quase branco ao azul fundo, que some nas bordas. */ --brilho-luz: radial-gradient(closest-side, var(--cor-luz-gelo) 0%, var(--cor-luz) 18%, var(--cor-luz-media) 42%, color-mix(in srgb, var(--cor-luz-funda) 45%, transparent) 66%, transparent 100%); /* A sombra que separa do chão o que flutua: a tinta, e não o preto, que não é cor desta paleta. */ --sombra-funda: 0 40px 100px -30px color-mix(in srgb, var(--cor-tinta) 92%, transparent); /* O raio do vidro: os cartões grandes e o aparelho do herói arredondam mais que os 16 px do modal. Desvio da §3 pelo mesmo bloco. */ --raio-vidro: 24px; /* Tipografia — §2. A POPPINS PASSOU A SER SERVIDA EM 15/09/2026, e até essa data ela nunca renderizou para ninguém: estava declarada na pilha, não existia em lugar nenhum, e toda visita caía no Segoe UI. O efeito era pior que perder a marca. `--fonte-corpo` também é Segoe UI, então título e corpo eram a MESMA fonte, diferenciados só por peso e tamanho: o site não tinha par tipográfico nenhum. É a razão de ele ler como limpo e não como desenhado. Servida daqui, e nunca de servidor de terceiro (ADR 0009). O arquivo é o mesmo que o aplicativo de desktop empacota, reduzido ao conjunto de caracteres que o site usa: 155 KB de TTF viram 5,9 KB de woff2 por peso. */ --fonte-titulo: "Poppins", "Poppins Reserva", "Segoe UI", system-ui, sans-serif; --fonte-corpo: "Segoe UI", system-ui, sans-serif; --tamanho-tela: 2rem; /* título de tela: 32 px */ --tamanho-secao: 1.3125rem; /* título de seção: 21 px */ /* CORPO A 16 PX, E NÃO AOS 14 DA §2 — 15/09/2026. É o terceiro desvio deliberado desta folha, pelo mesmo caminho da legenda logo abaixo e do `--tamanho-destaque`, e o de maior efeito. No aplicativo, 14 px é corpo de painel denso, lido a distância de mesa por quem já está trabalhando com a janela aberta na frente. No site, o mesmo número carrega texto corrido que alguém lê de celular, em pé, vindo de um anúncio, sem nenhum contexto do que está lendo. 16 px é o padrão do navegador e o piso confortável de leitura na web, e ficar abaixo dele é a decisão que mais faz um site parecer denso e técnico em vez de desenhado. A escala inteira sobe junto para a hierarquia sobreviver: seção de 20 para 21, legenda de 12 para 13. A PÁGINA FICA MAIS LONGA, e isso é o preço, não um efeito colateral esquecido: texto maior ocupa mais linhas. Foi medido depois. */ --tamanho-corpo: 1rem; /* corpo: 16 px */ /* LEGENDA A 12 PX, E NÃO OS 10–11 DA §2: desvio deliberado da web, pelo mesmo caminho de `--tamanho-destaque` logo abaixo. No aplicativo, legenda é enfeite de painel denso, lido a distância de mesa por quem já está trabalhando. No site ela carrega texto que alguém lê de celular, em pé, vindo de um anúncio: o selo do herói, a equivalência de preço, a identificação da empresa no rodapé. Medidos 30 elementos a 11 px só na página inicial, em 02/09/2026. Não subo mais que isso porque o corpo é 14 px, e a legenda precisa continuar visivelmente abaixo dele para a hierarquia sobreviver. */ /* A legenda sobe de 12 para 13 junto com o corpo, em 15/09/2026: com o corpo em 16, 12 abriria um degrau grande demais, e legenda no site carrega o selo do herói, a equivalência de preço e a identificação da empresa no rodapé. Continua visivelmente abaixo do corpo, que é o que a hierarquia precisa. */ --tamanho-legenda: 0.8125rem; /* legenda: 13 px */ /* Título de destaque, exclusivo da web. Não existe no DESIGN-SYSTEM.md: proposto para a §2 e pendente de aprovação. */ --tamanho-destaque: clamp(2rem, 5vw, 3.25rem); /* Grade de 8 px — §3 */ --espaco-1: 8px; --espaco-2: 16px; --espaco-3: 24px; --espaco-4: 32px; --espaco-6: 48px; --espaco-8: 64px; --espaco-12: 96px; /* Raios — §3 */ --raio-controle: 8px; --raio-cartao: 12px; --raio-modal: 16px; --raio-pilula: 999px; /* Elevação única — §3 */ --sombra-padrao: 0 4px 16px rgb(0 0 0 / 35%); /* A altura da barra fixa de download do celular. Vive aqui porque tres regras dependem dela: o respiro do rodape, a subida do aviso de cookies e a propria barra. Escrita em tres lugares, uma delas ficaria para tras e o rodape voltaria a ser tapado. */ --altura-barra-download: 64px; /* 1208 DESDE A ONDA 3, 29/09/2026: 1160 px de conteúdo, descontados os 24 de recuo de cada lado. É a largura em que a proposta aprovada foi desenhada, página por página; com 1120 a coluna ficava com 1072, e os cartões e as cenas da home saíam 88 px mais estreitos do que o dono viu. */ --largura-conteudo: 1208px; /* 80 PX DESDE A ONDA 3: a barra ficou fixa e ganhou a navegação no meio, com pílulas de 40 px, e o respiro em volta delas é o que a faz ler como barra e não como fita. No telefone ela volta aos 64, logo abaixo. */ --altura-cabecalho: 80px; } @media (max-width: 40rem) { :root { --altura-cabecalho: 64px; } } /* AS DUAS FACES, e só duas: 500 para controle e rótulo, 700 para título. O site pede 600 em três lugares e 800 em um, e o navegador os aproxima a partir destas; carregar quatro arquivos por causa de quatro regras seria pagar banda para ninguém notar. `font-display: swap` e não `optional`: com `optional` o navegador desiste da fonte se ela não chegar em cerca de 100 ms, e como o arquivo é servido com revalidação e a aplicação está no outro hemisfério, a ida e volta estoura essa janela quase sempre — a marca nunca apareceria. `swap` mostra o texto em Segoe UI e troca quando a fonte chega. A TROCA CUSTA DESLOCAMENTO DE LAYOUT, e o CLS deste site é zero. Foi medido depois de ligar isto, e não assumido: ver o commit. */ @font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fontes/poppins-500.woff2") format("woff2"); } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fontes/poppins-700.woff2") format("woff2"); } /* A RESERVA QUE NÃO DESLOCA — 15/09/2026. `swap` mostra o texto na fonte de reserva e troca quando a Poppins chega. A troca custa deslocamento de layout, porque as duas têm larguras diferentes: medido nos próprios arquivos, a minúscula média da Poppins Bold ocupa 0,5952 em contra 0,5356 da Segoe UI Bold. A Poppins é 11,1% mais larga, e sem correção o título reflui no meio do carregamento. Esta face é a Segoe UI local, esticada para ocupar exatamente o espaço que a Poppins vai ocupar. Os quatro números saem das tabelas das duas fontes, e não de tentativa: size-adjust do quociente das larguras médias, e as três sobreposições verticais da Poppins divididas por ele. O texto fica um pouco mais largo do que o Segoe UI desenharia sozinho, e é esse o preço: meio segundo de letra levemente esticada, em troca de a página não pular embaixo do dedo de quem já começou a ler. */ @font-face { font-family: "Poppins Reserva"; src: local("Segoe UI"), local("Segoe UI Bold"), local("Arial"); size-adjust: 111.12%; ascent-override: 94.49%; descent-override: 31.50%; line-gap-override: 9.00%; } /* O TÍTULO CEDE 2 PX NO TELEFONE MAIS ESTREITO — 15/09/2026. A Poppins é 11,1% mais larga que a Segoe UI, medido nos arquivos das duas, e com ela "documenta sozinho" pede 327 px a 32 px de corpo. A coluna de uma tela de 360 tem 312, então só ali o h1 da página inicial quebrava em quatro linhas, e a quarta empurrava a imagem do produto para fora da primeira tela. Em 390 e em 412, medidos, ele já cabia em três. Dois pixels resolvem: a 29,6 px a mesma frase pede 302, e sobram dez. O corte é só abaixo de 380 px, então nenhum outro aparelho vê título menor por causa de um que é mais estreito que todos. */ @media (max-width: 23.75rem) { :root { --tamanho-destaque: clamp(1.85rem, 5vw, 3.25rem); } }