/* ============================================================ TOKENS, Mentes & Letras Comunicação. Modo ABSORVER. Os HEX vêm do manual do cliente (MANUAL IDV FINAL.ai, página 7, "cores") e são lei: #3A506B R58 G80 B107 C82 M62 Y36 K25 #FFE700 R255 G231 B0 C3 M3 Y91 K0 O resto (neutros, superfícies, linhas) foi completado aqui, que é justamente o sistema que faltava ao manual. O site (styles.css), o manual (marca/manual-da-marca.html) e a apresentação (apresentacao/index.html) consomem este arquivo. ============================================================ */ :root { /* ---- Superfícies ---- Duas bases, e só duas. Ardósia é o campo institucional (manual e vinheta CARIMBO). Papel é o campo de leitura. O carvão do deck 2026 é variação declarada de peça editorial, e não existe no site. Ver identidade.md, "A regra que faltava". */ --surface-page: #3a506b; /* manual, p.7, exato */ --surface-raised: #445c79; /* ardósia clareada 8%, bloco sobre o campo */ --surface-sunken: #2e415a; /* ardósia rebaixada 8%, rodapé e faixa recuada */ --surface-inverse: #f3f1ec; /* papel, a faixa de leitura */ --surface-paper-raised: #ffffff; --surface-paper-sunken: #e7e3da; /* ---- Texto sobre papel (padrão de :root) ---- Toda combinação conferida em AA. Ver identidade.md, "Paleta". */ --text-strong: #16202b; /* 14,6:1 sobre papel */ --text-body: #2e3e52; /* 9,7:1 */ --text-muted: #4a5c71; /* 6,1:1 */ --text-faint: #5c6e82; /* 4,6:1 */ --text-on-dark: #f5f3ee; /* ---- Acento e detalhe ---- accent é a cor institucional: serve como texto e link sobre papel. detail é o amarelo do manual: fio, rótulo sobre ardósia, marcador. O amarelo reprova AA como texto sobre papel (1,1:1) e por isso nunca é corpo de texto nem link em fundo claro. */ --accent: #3a506b; --accent-hover: #26374a; --accent-soft: #7d92ab; --accent-tint: rgba(58, 80, 107, 0.1); --detail: #ffe700; /* manual, p.7, exato */ --detail-hover: #e5d000; --detail-tint: rgba(255, 231, 0, 0.16); /* ---- Linhas ---- Régua fina é o recurso mais característico deste vertical. Uma espessura só, uma cor só, por superfície. */ --line-hair: rgba(22, 32, 43, 0.12); --line-soft: rgba(22, 32, 43, 0.07); --line-on-dark: rgba(245, 243, 238, 0.2); --line-on-dark-soft: rgba(245, 243, 238, 0.11); /* ---- Tipografia ---- O manual especifica Decomart FF 4F (lettering), Gilroy Light (texto) e Myriad Pro (o &). As três são comerciais e não podem ser servidas na web sem licença. Substituições declaradas em identidade.md. O lettering do logo continua em Decomart, porque virou vetor. Nota sobre o nome do token: --font-sans é o nome canônico da família de leitura em todo o ecossistema, e é mantido para a comparação do registro de projetos. Neste projeto o valor é uma SERIFA de texto: os sócios vêm de redação e o arquétipo é editorial. */ --font-display: "Outfit", "Segoe UI", Helvetica, Arial, sans-serif; --font-sans: "Source Serif 4", Georgia, "Times New Roman", serif; --fs-display-xl: clamp(2.35rem, 5.6vw, 5rem); --fs-display-m: clamp(1.8rem, 3.2vw, 2.85rem); --fs-display-s: clamp(1.4rem, 2.3vw, 2rem); --fs-lead: clamp(1.12rem, 1.35vw, 1.3rem); --fs-body: 1.0625rem; /* 17px, o mínimo deste vertical */ --fs-body-lg: 1.125rem; --fs-label: 0.75rem; --fs-micro: 0.6875rem; --ls-display: -0.02em; --ls-wide: 0.18em; --ls-wider: 0.32em; /* o letterspacing do descritor do logo */ --lh-tight: 1.06; --lh-texto: 1.68; /* ---- Espaço ---- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --gutter: clamp(1.25rem, 5vw, 5.5rem); --container: 1240px; --measure: 66ch; --section-y: clamp(72px, 10vw, 148px); --header-h: 72px; /* ---- Forma ---- */ --r-sm: 3px; --r-md: 6px; /* teto: raio maior lê como consumo */ --shadow-md: 0 14px 34px -18px rgba(9, 16, 24, 0.55); --scrim: linear-gradient(to top, rgba(20, 30, 42, 0.8), rgba(20, 30, 42, 0.28) 42%, rgba(20, 30, 42, 0) 72%); --blur-nav: saturate(130%) blur(14px); /* ---- Movimento ---- Escala 2 de 5. A curva é a do arquétipo editorial: chegada seca, sem overshoot. Deslocamentos curtos: sobriedade se lê na distância percorrida, não na duração. Assinatura descrita em motion.md. */ --ease-marca: cubic-bezier(0.16, 1, 0.3, 1); --ease-entrada: cubic-bezier(0.2, 0, 0, 1); --ease-saida: cubic-bezier(0.4, 0, 1, 1); --dur-micro: 150ms; --dur-curta: 300ms; --dur-media: 520ms; --dur-longa: 860ms; --mv-desloc: 16px; --mv-desloc-longo: 48px; --mv-escala: 1.03; --mv-stagger: 58ms; /* Apelidos mantidos por compatibilidade com o CSS de componentes. */ --ease: var(--ease-marca); --dur: var(--dur-curta); --dur-slow: var(--dur-media); --dur-reveal: var(--dur-longa); } /* ------------------------------------------------------------ Escopo de superfície. A rampa de texto muda com o campo, e os nomes dos tokens não. Assim todo componente funciona nos dois fundos sem variante. ------------------------------------------------------------ */ .em-ardosia { --surface-local: var(--surface-page); --text-strong: #f5f3ee; /* 7,4:1 sobre #3A506B */ --text-body: #dde4ec; /* 6,4:1 */ --text-muted: #bcc9d8; /* 4,9:1 */ --text-faint: #b3c1d1; /* 4,5:1 */ /* Sobre ardósia o acento de PRIMEIRO PLANO é o papel, não o amarelo. O amarelo continua sendo --detail e vive em fio, rótulo e marcador. Assim nenhum componente que use --accent como cor de texto vira amarelo por descuido. */ --accent: #f5f3ee; --accent-hover: #ffffff; --line-hair: var(--line-on-dark); --line-soft: var(--line-on-dark-soft); } .em-papel { --surface-local: var(--surface-inverse); --text-strong: #16202b; --text-body: #2e3e52; --text-muted: #4a5c71; --text-faint: #5c6e82; --accent: #3a506b; --accent-hover: #26374a; --line-hair: rgba(22, 32, 43, 0.12); --line-soft: rgba(22, 32, 43, 0.07); }