/* ========================================================================== IPÊ MATERIAIS DE CONSTRUÇÃO — TOKENS Capítulo 8 do PRD. Este arquivo é o contrato do design system. Nenhum valor literal de cor, espaço, raio ou duração pode existir fora daqui. Se um componente precisar de um valor que não está neste arquivo, a pergunta correta não é "qual valor uso" — é "por que esse valor não está no sistema". ========================================================================== */ :root { /* ------------------------------------------------------------------ 1. COR — derivada exclusivamente da marca oficial (cap. 4.1) ------------------------------------------------------------------ */ /* Estrutura */ --ipe-preto: #000000; /* wordmark e títulos — o preto do logo, sem apologia */ --ipe-grafite: #696561; /* texto secundário — cinza de cimento, levemente quente. #6B6763 do PRD dava 4,41:1 sobre --ipe-cimento e reprovava dentro da faixa. Dois pontos mais escuro: 4,55:1, mesma cor a olho. */ --ipe-cimento: #E6E4DF; /* superfície secundária, bordas */ --ipe-branco: #FFFFFF; /* base */ /* A rampa dos arcos — a única cor do sistema (cap. 8.2). Valores lidos do arquivo oficial, não do PRD: o cap. 8.2 estimou #FFB100/#F26522/#E22B18 e a marca real usa os hexes abaixo. A regra "derivada exclusivamente da marca oficial" decide o empate. A rampa também corre ao contrário do que o cap. 4.2 descreve: da esquerda para a direita é vermelho → laranja → âmbar. */ --ipe-vermelho: #FF0009; /* arco 1, o maior — alerta real, nunca decoração */ --ipe-laranja: #FA800F; /* arco 2 — AÇÃO, exclusivo do CTA primário */ --ipe-amarelo: #FFA41F; /* arco 3 — âmbar; informação e destaque de dado */ --ipe-vinho: #CE060D; /* junção do arco 1 com o "E". Quarta cor do arquivo oficial (#D4060D), três por cento mais escura: o valor do arquivo dá 4,31:1 sobre o chão de cimento e reprovava em texto de erro. O LOGO continua usando o hex oficial exato — este token é só de interface. */ /* Camada semântica — use SEMPRE estes nomes nos componentes. Ela existe para tornar visível quando uma regra está sendo quebrada: dois --cor-acao na mesma viewport é erro de layout, não de cor. */ --cor-texto: var(--ipe-preto); --cor-texto-2: var(--ipe-grafite); /* O chão da página é CIMENTO e o branco é a superfície ELEVADA — cartão, campo, bloco de orçamento. A inversão aquece a página inteira sem tirar nada da paleta, e faz o que é acionável saltar por ser mais claro que o fundo, em vez de por ser colorido. */ --cor-chao: var(--ipe-cimento); --cor-superficie: var(--ipe-branco); --cor-superficie-2: var(--ipe-cimento); --cor-borda: var(--ipe-cimento); /* card e divisória — limite decorativo */ --cor-borda-campo: var(--ipe-grafite); /* input e select — o limite É o componente: WCAG 1.4.11 exige 3:1, e cimento sobre branco dá 1,27:1. Sem cor nova: token que já existe. */ --cor-borda-forte: var(--ipe-preto); --cor-acao: var(--ipe-laranja); /* CTA primário. Um por viewport. */ --cor-sobre-acao: var(--ipe-preto); /* texto do CTA. Branco sobre o laranja oficial dá 2,57:1 e reprova; preto dá 6,41:1 e mantém a cor exata da marca. */ --cor-dado: var(--ipe-amarelo); /* destaque de número e informação */ --cor-alerta: var(--ipe-vermelho); /* borda e ícone de erro — limite de componente, exige só 3:1 (4,00:1) */ --cor-alerta-texto: var(--ipe-vinho); /* TEXTO de erro — o vermelho oficial dá 4,00:1 e reprova em texto normal; o vinho do arquivo oficial dá 5,48:1 */ --cor-foco: var(--ipe-preto); /* Proibido: azul de link, verde de sucesso, cinza de desabilitado. Sucesso usa --cor-texto + o chevron completo. Erro usa --cor-alerta. Botão desabilitado não existe (cap. 13). */ /* ------------------------------------------------------------------ 2. TIPOGRAFIA — uma família, dois papéis opticamente distintos (cap. 8.3) ------------------------------------------------------------------ */ /* Uma família só. O "Expanded" do cap. 8.3 é o eixo de largura da própria Archivo variável (wdth 125%), não um segundo arquivo — um woff2 entrega os dois papéis. Por isso a largura é token, não família. */ --fonte-display: "Archivo", system-ui, sans-serif; --fonte-corpo: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif; --largura-display: 125%; /* Archivo Expanded */ --largura-corpo: 100%; --peso-normal: 400; --peso-forte: 600; /* teto. 700+ não existe neste projeto: vira grito (cap. 8.3) */ --tracking-display: -0.02em; --tracking-corpo: 0; --lh-display: 1.05; --lh-corpo: 1.6; /* Escala fluida */ --step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.90rem); --step-0: clamp(1.00rem, 0.96rem + 0.20vw, 1.13rem); --step-1: clamp(1.33rem, 1.24rem + 0.45vw, 1.60rem); --step-2: clamp(1.78rem, 1.60rem + 0.90vw, 2.27rem); --step-3: clamp(2.37rem, 2.05rem + 1.60vw, 3.20rem); --step-4: clamp(3.16rem, 2.60rem + 2.80vw, 4.55rem); /* ------------------------------------------------------------------ 3. ESPAÇO — escala de 4px (cap. 8.4) ------------------------------------------------------------------ */ --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-6: 24px; --e-8: 32px; --e-12: 48px; --e-16: 64px; --e-24: 96px; --e-32: 128px; /* Ritmo vertical entre seções: generoso e constante. Respiro é o que separa design profissional de template. */ --ritmo-secao: var(--e-24); /* 96px — mobile; vira 128px em ≥768px, abaixo */ /* ------------------------------------------------------------------ 4. GRADE (cap. 8.4) ------------------------------------------------------------------ */ --container: 1240px; --gutter: var(--e-6); /* 24px */ --prose: 68ch; /* máximo de caracteres por linha */ --colunas: 4; /* mobile; vira 12 em ≥1024px, abaixo */ /* * Altura do header sticky. Existe como token porque o scroll-padding do * depende dela: sem isso, âncora e scrollIntoView param com o alvo * atrás do header. Mudou o header, muda aqui. */ --altura-header: 72px; /* ------------------------------------------------------------------ 5. RAIO — hierárquico, não uniforme. O raio comunica a natureza do elemento (cap. 8.4) ------------------------------------------------------------------ */ --raio-bloco: 0; /* blocos estruturais, faixas */ --raio-input: 4px; --raio-botao: 8px; --raio-card: 12px; --raio-chip: 999px; /* ------------------------------------------------------------------ 6. ELEVAÇÃO — uma sombra só, e apenas onde há elevação real. Cards NÃO têm sombra: têm borda de 1px em --cor-borda (cap. 8.4) ------------------------------------------------------------------ */ --sombra-elevada: 0 -1px 24px rgba(0, 0, 0, 0.08); /* ------------------------------------------------------------------ 7. MOVIMENTO — responde a ação, nunca a scroll (cap. 8.7) ------------------------------------------------------------------ */ --dur-rapida: 150ms; --dur-media: 250ms; --dur-marca: 300ms; /* desenho dos três chevrons, uma vez por sessão */ --defasagem-arco: 60ms; --easing: cubic-bezier(0.2, 0, 0, 1); /* ------------------------------------------------------------------ 8. ALVO DE TOQUE E FOCO (cap. 14.1) ------------------------------------------------------------------ */ --toque-min: 48px; /* meta do projeto, acima dos 24px do WCAG 2.5.8 */ --altura-botao: 56px; /* mobile */ --altura-input: 56px; --altura-barra: 72px; /* barra de ação mobile, + safe-area */ --foco-largura: 2px; --foco-offset: 2px; } /* -------------------------------------------------------------------- Escalas que mudam por breakpoint. Breakpoints do projeto: 360 · 480 · 768 · 1024 · 1280 (cap. 14.3). 360px é o piso obrigatório de teste — é o aparelho real da região. Mobile-first: o CSS acima é o do mobile. -------------------------------------------------------------------- */ @media (min-width: 768px) { :root { --ritmo-secao: var(--e-32); /* 128px */ --altura-botao: 52px; } } @media (min-width: 1024px) { :root { --colunas: 12; } } /* -------------------------------------------------------------------- Movimento reduzido — desliga tudo, inclusive o desenho do chevron. Zerando os tokens, nenhum componente precisa saber que isso existe. -------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { :root { --dur-rapida: 0.01ms; --dur-media: 0.01ms; --dur-marca: 0.01ms; --defasagem-arco: 0ms; } }