/* ========================================================================== Bourgeois Advocacia — tokens.css -------------------------------------------------------------------------- Duas origens, e o arquivo diz qual é qual em cada bloco. 1. MARCA — cor, tipografia, espaço, escala e medida. Transcrição literal dos blocos travados no brandbook. Nada aqui é escolha deste arquivo: cor — "3. Identidade Visual/4. Paleta e Tokens" espaço — "3. Identidade Visual/6. Grade e Composição" fonte — "3. Identidade Visual/3. Tipografia" Divergência entre este arquivo e o brandbook é erro deste arquivo. 2. ESTRUTURA — raio, ritmo de seção, as horas do dia e o fólio. Raio e ritmo vêm do MVP de 30/08/2026 (referência "Website test.md"), sem alteração. As horas e o fólio são desta versão (29/09/2026), da gramática "capitulada editorial" escolhida pelo Pedro: ver BRIEF.md. Nenhuma cor nova — as horas são nomes para tons que a paleta já tem. ========================================================================== */ :root { /* ====================================================================== 1. MARCA — travado no brandbook ====================================================================== */ /* ---- Tipografia -------------------------------------------------- * * O site NÃO serve arquivo de fonte. O `fsType` do Office autoriza * incorporação em documento, não redistribuição como webfont. Quem tem * Office vê a tipografia da marca; quem não tem cai no substituto, e a * grade não se move porque é travada em caracteres por linha. */ --fonte-serifada: "Century Schoolbook", "Century Schoolbook L", "C059", "New Century Schoolbook", Georgia, "Times New Roman", serif; --fonte-humanista: "Gill Sans MT", "Gillius ADF", "Gill Sans", "Gill Sans Nova", Optima, Candara, "Trebuchet MS", sans-serif; /* ---- Marca ------------------------------------------------------- */ --pbg-tinta: #042240; --pbg-papel: #EBE4D8; --pbg-ouro: #A8793C; --pbg-azul: #4E6880; /* ---- Escalas derivadas ------------------------------------------- */ --pbg-papel-50: #F9F7F3; --pbg-papel-100: #F4F0E9; --pbg-papel-300: #DFD4C1; --pbg-papel-500: #CBB99A; --pbg-tinta-900: #031629; --pbg-tinta-500: #294560; --pbg-azul-300: #A0B3C5; --pbg-azul-700: #384B5C; --pbg-ouro-100: #ECDCC9; --pbg-ouro-300: #D7B78E; --pbg-ouro-700: #74542A; /* ---- Semânticos --------------------------------------------------- */ --fundo: var(--pbg-papel); --fundo-elevado: var(--pbg-papel-50); --fundo-inverso: var(--pbg-tinta); --texto: var(--pbg-tinta); --texto-secundario: var(--pbg-tinta-500); --texto-terciario: var(--pbg-azul-700); --texto-inverso: var(--pbg-papel); --acento: var(--pbg-ouro); --acento-texto: var(--pbg-ouro-700); --acento-inverso: var(--pbg-ouro-300); --filete: rgba(4, 34, 64, 0.14); --filete-forte: rgba(4, 34, 64, 0.28); --filete-inverso: rgba(235, 226, 216, 0.20); /* ---- Campo — fundo travado para superfície escura ----------------- * * Nesta versão o campo é a noite: o rodapé abre nele. */ --fundo-campo: var(--pbg-tinta); --fundo-campo-rico: radial-gradient( ellipse 120% 90% at 20% 0%, var(--pbg-azul-700) 0%, var(--pbg-tinta) 45%, var(--pbg-tinta-900) 100% ); /* ---- Vidro — Liquid Glass ----------------------------------------- * * Travado em 30/08/2026 e mantido como token. Nesta versão NENHUMA * superfície usa vidro: sem barra fixa, nada flutua sobre conteúdo em * movimento, e a regra de exceção da decisão de linguagem visual manda * não usar vidro onde não há o que refratar. Ratificado por Pedro em * 29/09/2026 (revisão da decisão de linguagem visual). */ --vidro-fundo: rgba(235, 228, 216, 0.10); --vidro-borda: rgba(235, 228, 216, 0.22); --vidro-brilho: rgba(255, 255, 255, 0.30); --vidro-sombra: rgba(3, 22, 41, 0.40); --vidro-desfoque: 20px; --vidro-solido: var(--pbg-tinta-500); /* ---- Unidade ------------------------------------------------------ */ --u: 0.25rem; /* 4 px */ /* ---- Espaço ------------------------------------------------------- */ --esp-1: 0.25rem; /* 4 */ --esp-2: 0.5rem; /* 8 */ --esp-3: 0.75rem; /* 12 */ --esp-4: 1rem; /* 16 */ --esp-6: 1.5rem; /* 24 */ --esp-8: 2rem; /* 32 */ --esp-12: 3rem; /* 48 */ --esp-16: 4rem; /* 64 */ --esp-24: 6rem; /* 96 */ --esp-32: 8rem; /* 128 */ --esp-paragrafo: var(--esp-6); --esp-bloco: var(--esp-8); /* ---- Tipo: faixa de texto (fixa, razão 1,125) --------------------- */ --tipo-xs: 0.84rem; /* 13,4 px */ --tipo-sm: 0.94rem; /* 15,0 px */ --tipo-md: 1.06rem; /* 17,0 px */ --tipo-base: 1.19rem; /* 19,0 px — corpo de leitura */ --tipo-lg: 1.34rem; /* 21,4 px */ /* ---- Tipo: faixa de display (fluida, razão 1,25) ------------------ */ --display-1: clamp(1.50rem, 1.43rem + 0.32vw, 1.68rem); --display-2: clamp(1.75rem, 1.61rem + 0.62vw, 2.10rem); --display-3: clamp(2.05rem, 1.81rem + 1.03vw, 2.63rem); --display-4: clamp(2.40rem, 2.03rem + 1.57vw, 3.29rem); /* ---- Entrelinha ---------------------------------------------------- */ --entre-display: 1.15; --entre-titulo: 1.25; --entre-corpo: 1.60; --entre-pequeno: 1.5; --entre-versal: 1.2; /* ---- Espacejamento de versal --------------------------------------- */ --versal: 0.11em; --versal-largo: 0.25em; /* nome do escritório, descritor */ --versal-display: 0.06em; /* acima de 1,68rem */ /* ---- Grade --------------------------------------------------------- */ --col: 4.625rem; /* 74 px */ --goteira: 1.5rem; /* 24 px */ --medida-estreita: 23rem; /* 4 col — 368 px */ --medida-leitura: 35.25rem; /* 6 col — 564 px */ --medida-larga: 47.5rem; /* 8 col — 760 px */ --medida-pagina: 72rem; /* 12 col — 1152 px */ --margem-viewport: clamp(1.25rem, 0.6rem + 2.8vw, 3rem); /* ====================================================================== 2. ESTRUTURA — desta versão, sobre tokens da marca ====================================================================== */ /* ---- Raio (do MVP, sem alteração; ratificação pendente) ------------ */ --raio-imagem: 40px; --raio-sublinhado: 24px; /* ---- Ritmo de seção (do MVP, sem alteração) ------------------------ */ --esp-40: 10rem; /* 160 px — degrau pendente de ratificação */ --esp-secao: clamp(6rem, 3.6rem + 6.4vw, 10rem); /* 96 → 160 */ /* ---- Espacejamento de display (do MVP, pendente) ------------------- */ --display-fechado: -0.01em; /* ---- As horas do dia ----------------------------------------------- * * O gesto desta versão: a página escurece por corte seco, capítulo a * capítulo, e o rodapé abre na noite. Cada hora é um tom da escala já * travada. Contraste medido de `tinta` e de `tinta-500` sobre cada uma: * * manhã papel-50 15,00 · 9,28 * dia papel 12,71 · 7,86 * tarde papel-300 10,95 · 6,77 * poente papel-500 8,37 · 5,18 (azul-700 ainda passa: 4,70) * noite tinta papel 12,71 · azul-300 7,45 * mar tinta-900 papel 14,45 · azul-300 8,47 * * Tudo antes do rodapé é da família papel: a proporção travada da * paleta (~70% papel, ~25% tinta, ≤5% ouro) continua de pé. */ --hora-manha: var(--pbg-papel-50); --hora-dia: var(--pbg-papel); --hora-tarde: var(--pbg-papel-300); --hora-poente: var(--pbg-papel-500); --hora-noite: var(--pbg-tinta); --hora-mar: var(--pbg-tinta-900); /* ---- Fólio --------------------------------------------------------- * * Duas colunas da grade mais a goteira entre elas: 172 px. É a margem * do livro, onde correm o capítulo, o índice e o horizonte pequeno. */ --folio-l: calc(var(--col) * 2 + var(--goteira)); --folio-folga: var(--esp-12); /* ---- Movimento ----------------------------------------------------- */ --saida: cubic-bezier(0.23, 1, 0.32, 1); }