/* CÓPIA — não editar aqui. Fonte: texselantes-site/src/styles/tokens.css Para atualizar: node texselantes-site/scripts/sync-tokens-portal.mjs O que se escreve neste arquivo é apagado na próxima cópia. */ /* TEX — tokens de design v2 ("Aspro", aprovado pelo PO em 10/10/2026). Preto + amarelo da marca, título em Anton, corpo em Work Sans, canto cortado em diagonal. O escuro nasceu MARINHO (#03071E) e virou PRETO/cinza neutro por decisão do PO em 13/10/2026; onde um comentário antigo do projeto disser "marinho", leia "o escuro do `--ink-900`". FONTE ÚNICA: o site lê este arquivo direto; o portal usa uma CÓPIA dele (`node scripts/sync-tokens-portal.mjs` -> texselantes-portal/public/tokens.css) e o teste do portal reprova se as duas divergirem. Mudou cor ou fonte, muda AQUI e roda o script. Os NOMES dos tokens são os mesmos da v1 (grafite/Bebas/Barlow). `--ink-900` segue sendo "o escuro mais escuro" e `--ink-100` "o claro de fundo": só os valores mudaram. Por isso as ~50 telas que já usavam `bg-ink-800`, `text-ink-600` etc. mudaram de pele sem ser reescritas. */ :root { /* ── Marca ─────────────────────────────────────────────────────────────────────────────── Amarelo e verde saem da própria logo (public/img/tex-marca.svg). */ --tex-yellow: #FCEC06; --tex-yellow-deep: #E3D400; --tex-yellow-soft: #FFF8A3; /* Verde como TEXTO em fundo claro = `--tex-green` (5,0:1 no branco, 4,6:1 no cinza). O verde vivo da logo (`-bright`) só entra em fundo escuro ou como FUNDO de botão com letra marinho (7,8:1). Verde vivo como letra sobre branco reprova contraste (2,4:1). */ --tex-green: #157F4A; --tex-green-deep: #0F6A3C; --tex-green-soft: #D6F2E3; --tex-green-bright: #3DB878; /* ── Escala "ink": do preto ao cinza de fundo (neutra, sem tom azulado) ────────────────── 900/800/700 = fundos escuros (e título sobre claro). 600/500 = texto sobre claro. 400/300 = texto sobre escuro (400 é o MÍNIMO no escuro: 8,4:1; sobre branco reprova). 200 = linha. 100/050 = fundos claros alternados. */ --ink-900: #0A0A0A; --ink-800: #151515; --ink-700: #262626; --ink-600: #4A4A4A; --ink-500: #6B6B6B; --ink-400: #A8A8A8; --ink-300: #CCCCCC; --ink-200: #E3E3E3; --ink-100: #F5F5F5; --ink-050: #FAFAFA; --paper: #FFFFFF; /* Camuflagem branca (dobras claras, 13/10/2026): o cinza do padrão e o tom dos cartões sobre ele. O cartão é mais escuro que o `--ink-100` de sempre porque, sobre as manchas brancas do padrão, cartão branco ou quase branco perde a borda. Texto ink-600 sobre ele: 7,4:1. */ --camo-clara: #F3F3F3; --cartao-camo: #EBEBEB; /* A faixa diagonal mais clara que corta os fundos escuros (o nome ficou do tempo do marinho). */ --navy-glow: #4A4A4A; /* ── Semânticas ──────────────────────────────────────────────────────────────────────── */ --success: var(--tex-green); --warning: #F2A20C; --danger: #C8362B; --info: #2C6FB5; --fg-1: var(--ink-900); --fg-2: var(--ink-600); --fg-3: var(--ink-500); --fg-4: var(--ink-400); --fg-on-dark: #FFFFFF; --fg-on-yellow: var(--ink-900); --fg-on-green: var(--ink-900); --bg-page: var(--paper); --bg-surface: var(--paper); --bg-sunken: var(--ink-100); --bg-dark: var(--ink-800); --bg-darker: var(--ink-900); --border-1: var(--ink-200); --border-2: var(--ink-300); --border-strong: var(--ink-900); --border-on-dark: rgba(255,255,255,.14); /* Botão de ação (WhatsApp): verde vivo com letra marinho. */ --acao: var(--tex-green-bright); --acao-fg: var(--ink-900); /* ── Assinaturas do desenho ──────────────────────────────────────────────────────────── */ /* Canto cortado: P nos botões e selos, M nos cartões, G nos painéis. */ --cut-p: 12px; --cut: 16px; --cut-m: 28px; --cut-g: 44px; /* Faixas diagonais sobre o marinho (hero, dobras escuras, rodapé). */ --dark-diag: linear-gradient(124deg, transparent 0 34%, rgba(120,120,120,.20) 34% 56%, transparent 56%), linear-gradient(124deg, transparent 0 70%, rgba(120,120,120,.12) 70% 84%, transparent 84%); /* Listras de advertência — fina, como divisor. */ --hazard-stripes: repeating-linear-gradient(-45deg, var(--tex-yellow) 0 18px, var(--ink-900) 18px 36px); /* Listras tom-sobre-tom do fundo amarelo (faixa de chamada). */ --yellow-diag: repeating-linear-gradient(-56deg, rgba(0,0,0,.055) 0 54px, transparent 54px 108px); /* ── Espaço (base 8) ─────────────────────────────────────────────────────────────────── */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; /* ── Raio: o desenho é reto. Só o que é redondo de verdade usa `--r-pill`. ───────────── */ --r-0: 0px; --r-1: 0px; --r-2: 0px; --r-3: 0px; --r-4: 0px; --r-pill: 999px; /* Play do bloco de vídeo (PO, 18/10/2026): o vermelho do YouTube é o sinal que o leitor reconhece como "vídeo, clique aqui". Só no ícone do play e no logotipo. Branco sobre ele = 4:1 (gráfico, mín. 3:1). */ --yt-red: #FF0000; /* ── Sombra ──────────────────────────────────────────────────────────────────────────── */ --shadow-1: 0 1px 2px rgba(0,0,0,.06), 0 1px 1px rgba(0,0,0,.04); --shadow-2: 0 5px 15px rgba(0,0,0,.10); --shadow-3: 0 14px 34px rgba(0,0,0,.18); --shadow-press: inset 0 2px 0 rgba(0,0,0,.18); /* ── Tipo ────────────────────────────────────────────────────────────────────────────── */ /* As famílias "… Fallback" são fontes do SISTEMA redimensionadas para ocupar o mesmo espaço da webfont (Fontes.astro): se a webfont atrasar, o texto não pula quando ela chega. */ --font-display: "Anton", "Anton Fallback", "Anton Fallback Sans", sans-serif; --font-heading: var(--font-display); --font-body: "Work Sans Variable", "Work Sans Fallback", system-ui, -apple-system, sans-serif; /* O desenho não tem fonte mono: número e rótulo técnico usam o corpo com algarismo tabular. */ --font-mono: var(--font-body); /* Mobile primeiro: os mínimos são os do celular; a tela larga só aumenta. */ --t-display: clamp(40px, 7.4vw, 100px); --t-h1: clamp(34px, 5.4vw, 68px); --t-h2: clamp(28px, 4.4vw, 56px); --t-h3: clamp(21px, 2.2vw, 28px); --t-h4: 20px; --t-body: clamp(16px, 15px + .25vw, 18px); --t-body-sm: 15px; --t-caption: 13px; --t-eyebrow: 13px; /* Anton é alta e leva acento em caixa alta (Ç, Ã, É): abaixo de 1,12 o acento encosta na linha de cima. */ --lh-tight: 1.12; --lh-snug: 1.18; --lh-normal: 1.6; --lh-loose: 1.72; --tracking-display: 0.006em; --tracking-eyebrow: 0.16em; --tracking-caps: 0.05em; /* ── Movimento ───────────────────────────────────────────────────────────────────────── */ --ease-out: cubic-bezier(.2,.7,.2,1); --ease-in-out: cubic-bezier(.65,.05,.35,1); --t-fast: 120ms; --t-base: 200ms; --t-slow: 420ms; /* ── Layout ──────────────────────────────────────────────────────────────────────────── */ --max-w: 1280px; --gutter: clamp(18px, 4vw, 32px); /* Altura do cabeçalho fixo: quem cola abaixo dele (títulos, âncoras) lê daqui. */ --header-h: 68px; } @media (min-width: 1024px) { :root { --header-h: 92px; } }