/* ══════════════════════════════════════════════════════════════════════════ GABRIEL FRANCHI — TOKENS Fonte única de verdade. 12/08/2026 · v2 (vidro + régua de raio) · v2.1 (azul, tipo fluido) — 12/08/2026. ⚠️ Antes deste arquivo a paleta existia em DOIS lugares: o :root do deck/deck.html (36 tokens) e o :root do marca/prova.html (8 tokens). Os dois discordavam: --paper-4 valia #BDBAB3 no deck e #8E8B84 na prova — e o #8E8B84 é exatamente o valor que a v2 removeu por reprovar no APCA. O mesmo nome, dois valores, um deles com bug conhecido. É para isso que existe fonte única. Todo número de contraste aqui foi MEDIDO com deck/validar-sessao.mjs (WCAG 2.2 + APCA 0.1.9). Onde os dois discordam, vale o mais restritivo. COMO USAR ───────── Nunca redeclare um token. Precisa de um valor novo? Ele entra aqui. ══════════════════════════════════════════════════════════════════════════ */ :root{ /* ────────────────────────────────────────────── SUPERFÍCIE ── */ --navy-950:#060D18; /* vinheta, fundo da página fora do slide */ --navy-900:#0B1524; /* fundo base do modo escuro */ --navy-800:#101E33; /* elevação — cartão sobre o fundo */ --paper-bg:#F4F1EA; /* fundo base do modo claro */ /* ──────────────────────────── TEXTO SOBRE --navy-900 (escuro) ── token WCAG APCA piso que cobre paper 14,42 −89,7 tudo paper-2 12,62 −81,0 corpo (75) paper-3 10,73 −71,3 rótulo (60) — NÃO corpo paper-4 9,45 −64,4 rótulo (60) — NÃO corpo traco 5,38 −39,3 NADA textual */ --paper:#E8E4DA; /* display e corpo. NÃO usar #F4F1EA: Lc −98 > 90 → halation */ --paper-2:#DAD6CC; /* corpo secundário, lista, valor de gráfico */ --paper-3:#C9C6BE; /* rótulo, contexto, metadado — teto de 60 */ --paper-4:#BDBAB3; /* rodapé e apoio mais baixo — teto de 60 */ --traco:#8E8B84; /* ⚠️ SÓ não-textual: fio, ponto, borda, barra */ /* ─────────────────────────────────────── DOURADO — dois tokens ── Um só não resolve: #B8925A passa folgado no WCAG (6,36) e dá Lc −46, que cobre display ≥36px e mais nada. */ --gold:#B8925A; /* fio, moldura, display ≥36px. NUNCA campo atrás de texto: navy sobre ele dá Lc 48 e não cobre nível nenhum */ --gold-txt:#D0AE74; /* o dourado que carrega letra: eyebrow, numeral, delta. E o campo do selo: navy sobre ele dá Lc 61,7 ✓ */ /* ⚠️ NOVO · 12/08/2026. O dourado da SUPERFÍCIE ELEVADA. A v4 da landing criou cartões em --navy-800 e pôs rótulo dourado neles. Medido: --gold-txt sobre #101E33 cai para Lc −59,3 contra piso 60 de rótulo — reprova por 0,7. É o mesmo mecanismo do --bronze: quando a superfície muda, o token do dourado muda junto, senão o contraste some. #D3B177 entrega Lc −60,9 sobre elevada, −62,0 sobre navy-900 e −62,5 sobre navy-950: passa nas três e não chega perto do teto de 90. */ --gold-txt-800:#D3B177; --bronze:#7A5A22; /* o dourado em fundo claro — 5,62:1 · Lc 73,2 sobre papel. #B8925A sobre papel dá 2,55:1 e reprova até em display */ /* ──────────────────────────────────────── AZUL — v2.1, 12/08/2026 ── A "pitada de azul claro". Ele NÃO é um segundo dourado: dourado e azul falam de coisas diferentes, e é essa divisão que impede a briga. --gold / --gold-txt → o NEGÓCIO. A promessa, o número, a decisão. --azul → o SISTEMA. Link, metadado técnico, segunda série de gráfico, estado ao vivo, referência. Um elemento dourado por peça continua valendo. O azul não entra nessa cota porque não disputa o mesmo trabalho. POR QUE #A6D4FC E NÃO OUTRO — é o azul MAIS ESCURO que ainda carrega corpo de texto nas três superfícies escuras do sistema: navy-950 Lc −77,1 ✓ navy-900 Lc −76,5 ✓ navy-800 Lc −75,5 ✓ Um degrau abaixo (#A4D2FC) dá Lc −74,4 no navy-800 e reprova o piso de corpo justamente na superfície elevada, que é onde cartão e painel vivem. Mesma lógica dos 80% do vidro: escolhe-se o limite, não o confortável. ⚠️ AZUL É LETRA, NUNCA FIO NEM CAMPO. Fio é do --gold; anel é do --foco. É o que impede a colisão com o foco: os dois são azuis claros, mas nunca ocupam o mesmo papel — um é sempre letra, o outro é sempre contorno. Corolário: elemento em --azul que RECEBE foco leva o texto para --paper enquanto está focado. Anel azul em cima de letra azul dá 1,31:1 e vira mingau — não reprova nada, porque o anel mede contra o fundo, mas fica feio. ⚠️ NO VIDRO O AZUL É RÓTULO, NÃO CORPO: sobre a composição do pior fundo ele dá Lc 66,5 — passa em rótulo (60), reprova em corpo (75). Mesma regra do --paper-2 lá dentro. */ --azul:#A6D4FC; /* Lc −76,5 · 11,72:1 sobre navy-900 */ --azul-tinta:#1E4C84; /* o azul em fundo claro — Lc 81,2 · 7,69:1 sobre papel. #A6D4FC sobre papel dá 1,41:1 e reprova em tudo */ /* ────────────────────────────── TINTA SOBRE --paper-bg (claro) ── */ --tinta:#0B1524; /* 16,23:1 · Lc 96,7 — display e ênfase */ --tinta-2:#31404F; /* 9,42:1 · Lc 86,4 — corpo */ --tinta-3:#57626E; /* 5,51:1 · Lc 72,8 — rótulo e rodapé */ /* ──────────────────────────────────── SEMÂNTICOS (camada web) ── Introduzidos em 12/08/2026 para gabrielfranchi.com.br. O deck nunca precisou deles porque slide não tem estado. Produto tem. */ --acao:var(--gold-txt); /* ação primária */ --acao-tinta:var(--navy-900); /* texto sobre a ação primária — Lc 61,7 ✓ */ /* Cada semântico tem gêmeo claro, pela mesma razão que o gold tem o bronze: sobre papel, #95B4F0 dá 1,89:1 e #EF9E97 dá 2,10:1 — reprovam em tudo. */ --foco:#95B4F0; /* anel de foco · 8,78:1 · Lc −60,7 sobre navy. ⚠️ Dourado NÃO serve de foco: colide com o grifo semântico e some sobre a moldura dourada */ --foco-claro:#5B6E93; /* 4,54:1 · Lc 67,1 sobre papel */ --sucesso:#8BC18B; /* 8,80:1 · Lc −60,9 */ --sucesso-claro:#557655;/* 4,53:1 · Lc 67,0 */ --erro:#EF9E97; /* 8,73:1 · Lc −60,5 */ --erro-claro:#93615D; /* 4,53:1 · Lc 66,9 */ --desativado:var(--traco); /* não-textual por definição: elemento desativado não precisa de contraste de leitura, precisa parecer desativado */ /* ⚠️ NÃO EXISTE --aviso, e a ausência é decisão. Procurei o âmbar que atinge Lc 60 sobre navy e ele converge para #D0AF72 — que é o --gold-txt #D0AE74 com dois pontos de diferença. Um token de aviso indistinguível do dourado da marca briga com a regra "dourado é grifo semântico". Aviso é --gold-txt. Um dourado só, com dois trabalhos, é melhor que dois dourados. REGRA QUE VALE PARA TODOS OS SEMÂNTICOS: a cor nunca é o único portador do estado (WCAG 1.4.1). O texto da mensagem continua em --paper-2; quem carrega o estado é a borda, o ícone e a própria frase. É por isso que não existe --erro-txt: colorir o texto de vermelho seria pior, não melhor. */ /* ───────────────────────────────── LOGO — tokens antes órfãos ── logo-horizontal.svg e logo-empilhado.svg já consumiam var(--logo-tinta) e var(--logo-acento), mas ninguém nunca os definiu: os SVGs viviam do fallback. Definidos aqui, a troca de contexto passa a ser uma linha. */ --logo-tinta:var(--tinta); --logo-acento:var(--bronze); /* ──────────────────────────────── TIPOGRAFIA — as duas réguas ── Duas razões diferentes é o mecanismo, não detalhe de implementação. Uma razão só, larga o bastante para o display, deixa o miúdo grosseiro. */ --serif:'Newsreader',Charter,Georgia,'Times New Roman',serif; --sans:'Inter Tight',Inter,'Helvetica Neue',Arial,sans-serif; /* apoio · Inter Tight · razão 1,125 · base 16 */ --t-11:11px; --t-13:13px; --t-14:14px; --t-16:16px; --t-18:18px; --t-20:20px; --t-23:23px; --t-26:26px; /* display · Newsreader · razão √2 = 1,414 · base 32 — dobra a cada 2 degraus */ --d-32:32px; --d-45:45px; --d-64:64px; --d-90:90px; --d-128:128px; --d-181:181px; --d-256:256px; --d-362:362px; /* ────────────────── TIPO FLUIDO — v2.1. Superfície não é slide ── O deck é 1280×720 fixo: lá o degrau em px é a resposta certa. Produto e página são fluidos, e tamanho fixo em tela fluida é o traço mais datado que sobrou no sistema. Estes quatro tokens interpolam ENTRE DOIS DEGRAUS DA RÉGUA — nenhum tamanho novo é inventado, e os dois limites são degraus. Derivação (nada de número mágico): reta entre 375px e 1280px de viewport. inclinação = (teto − piso) / 905px intercepto = piso − inclinação×375 Em 375 o valor é exatamente o piso; em 1280, exatamente o teto; fora do intervalo o clamp segura. A conta está aqui para ser conferida. */ --f-display:clamp(var(--d-45), calc(26.35px + 4.97vw), var(--d-90)); --f-titulo: clamp(var(--d-32), calc(26.61px + 1.44vw), var(--d-45)); --f-corpo-g:clamp(var(--t-18), calc(15.93px + 0.55vw), var(--t-23)); --f-corpo: clamp(var(--t-16), calc(15.17px + 0.22vw), var(--t-18)); /* ─────────────────────────────────────── ESPAÇAMENTO — base 4 ── ⚠️ NOVO. Até 12/08/2026 o sistema não tinha régua de espaço: o deck usava 24 valores distintos em px (1,2,3,4,6,7,8,9,10,11,12,16,18,20,22,24,26, 28,32,36,40,44,64,74). Régua de tipo sem régua de espaço é meia régua. Adoção: obrigatória em componente novo; no deck, só com nova verificação de estouro de caixa — ver a migração no DESIGN-SYSTEM.md. */ --e-2:2px; --e-4:4px; --e-8:8px; --e-12:12px; --e-16:16px; --e-20:20px; --e-24:24px; --e-32:32px; --e-40:40px; --e-48:48px; --e-64:64px; --e-80:80px; --marg:64px; /* margem do slide — 5% de 1280 */ --calha:16px; /* calha da grade de 12 colunas */ --fio-h:1px; /* ──────────────────────────────────────── FORMA E ELEVAÇÃO ── Raio 0 não é omissão: é o eixo "Geometria · 1 · reta" do briefing. Cantos retos são o marcador de seriedade medido em Blackstone, Brunswick e General Atlantic. Raio médio uniforme lê como SaaS genérico. */ /* ⚠️ v2 — o raio deixou de ser um valor e virou uma RÉGUA DE TRÊS DEGRAUS. Raio igual em tudo não informa nada: é o antipadrão nº 27, e era o motivo de --raio ser 0. Raio DIFERENTE informa muito — aqui ele passa a medir a distância entre a coisa e o plano da página: 0 superfície e peça impressa. Slide, caixa, imagem, fio. Está NO plano 4px controle — o que a mão toca. Botão, campo. Está SOBRE o plano 8px material que flutua POR CIMA do conteúdo. Só o vidro Base 4 nos dois degraus, e o vidro sempre o dobro do controle: é o que mantém o sinal legível. Se o botão e o vidro tiverem o mesmo canto, o raio volta a ser acabamento e a régua morre. ⚠️ O deck fica em 0 — os 12 slides são peça verificada, e mexer no canto deles exige reverificar estouro de caixa. Ver DESIGN-SYSTEM.md §2 e §7.6. */ --raio:0; --raio-ui:4px; --raio-vidro:8px; --borda:1px; --borda-forte:2px; --elev-1:0 1px 2px rgba(6,13,24,.28); --elev-2:0 8px 24px rgba(6,13,24,.42); --elev-3:0 18px 50px rgba(6,13,24,.55); /* ────────────────────────────────────────────────── MOVIMENTO ── ⚠️ NOVO. O deck é estático; a camada web não é. Sempre respeitar prefers-reduced-motion — já tratado no fim deste arquivo. */ --dur-rapida:120ms; --dur-padrao:200ms; --dur-lenta:320ms; --ease-saida:cubic-bezier(.2,0,0,1); --ease-entrada:cubic-bezier(.3,0,.8,.15); /* ───────────────────────────────────────────────── OPACIDADE ── Substitui os rgba() com o RGB literal do token. O deck tinha 9 desses: rgba(184,146,90,…) é o --gold, rgba(201,198,190,…) é o --paper-3. Hardcode de token com máscara de rgba continua sendo hardcode. */ --fio-fraco:color-mix(in srgb, var(--gold) 40%, transparent); --fio-tenue:color-mix(in srgb, var(--gold) 28%, transparent); --linha-tenue:color-mix(in srgb, var(--paper-3) 14%, transparent); --trilho:color-mix(in srgb, var(--paper-3) 9%, transparent); --campo-rec:color-mix(in srgb, var(--gold) 7%, transparent); /* ───────────────────────────────────────── TEXTURA — v4 ── Duas camadas sobre a superfície: um degradê tom sobre tom e um grão. Nenhuma das duas carrega informação — se a tela for impressa em preto e branco, nada se perde. Elas existem para tirar o fundo do "chapado digital", que é o que mais entrega tela feita às pressas. ⚠️ A DIREÇÃO DO GRÃO NÃO É ESCOLHA, É MEDIÇÃO. Grão simétrico (claro e escuro) a 10% sobre a superfície escura levanta o fundo o bastante para derrubar o --azul de Lc 76,5 para 73,0 — abaixo do piso de corpo. Só passa a 4%, que é invisível. Grão escuro a 10% sobre superfície CLARA é pior ainda: derruba --tinta-2, --tinta-3, --bronze e --azul-tinta de uma vez. A saída é uma regra só: O GRÃO ANDA NA DIREÇÃO DO PRÓPRIO FUNDO. superfície escura → grão preto → contraste só AUMENTA superfície clara → grão branco → contraste só AUMENTA Assim a textura nunca pode reprovar nada — no pior grão possível o contraste melhora em vez de piorar. É o mesmo truque do piso do vidro: em vez de torcer, fecha-se a direção do erro. TETO: 14%. A 18% de grão preto o --paper sobre o ponto mais escuro chega a Lc 90,0 e encosta no teto de halation. 10% fica com folga. */ --grao-forca:.10; --grao-tamanho:200px; --grao-mascara:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"); /* Degradê tom sobre tom, 15%. Medido nos dois extremos: a variação total é de 0,2 Lc — o --paper vai de 89,6 a 89,8 e nada chega perto do teto. Custo zero de acessibilidade, e é o que dá profundidade sem blob. */ --degrade-forca:.15; /* ─────────────────────────────────────────────────── VIDRO ── ⚠️ NOVO em 12/08/2026 (v2). O vidro é MATERIAL, não estilo — ele existe para resolver sobreposição real: algo que passa por baixo de algo. Onde não há sobreposição, não há vidro. Ver DESIGN-SYSTEM.md §7. O PROBLEMA QUE ELE CRIA, E A SOLUÇÃO ──────────────────────────────────── Este sistema inteiro se sustenta em contraste MEDIDO. Vidro mede o quê? O fundo por baixo muda conforme a página rola — a foto, o dourado, a seção clara. Um par de contraste com fundo variável não é mensurável. A saída é o piso: a tinta é opaca o bastante para que o PIOR fundo possível (branco puro, realce de foto) ainda componha uma superfície escura o suficiente. Aí volta a ser mensurável — mede-se o pior caso. ⚠️ Desfoque NÃO é contraste. blur() reorganiza pixel no espaço, não muda a luminância média. Uma mancha branca desfocada continua branca. Quem garante a leitura é o alfa da tinta; o desfoque só faz o fundo parar de competir com a forma da letra. O NÚMERO — medido com deck/validar-sessao.mjs, tinta sobre branco puro: --paper carrega corpo (Lc 75) a partir de 74,5% de tinta --paper-3 carrega rótulo (Lc 60) a partir de 78,5% Daí 80%: o menor alfa que cobre os dois com margem. Passa 20% do mundo. Vidro que aguenta texto é quase opaco — essa é a verdade do material. A TINTA É --navy-900, NÃO --navy-950, e isso é medido também: --paper sobre navy-950 dá Lc −90,2 — acima do teto de 90, halation. Com navy-900 o vidro sobre a página escura é um no-op exato (composição = #0B1524) e o teto nunca é furado. O vidro só escurece o que é claro. */ /* ⚠️ v4 — A TINTA DO VIDRO SEGUE A SUPERFÍCIE, e o alfa muda junto. Até a v2 a tinta era navy nos dois temas. Consequência medida: no tema claro o painel "sobre a própria página" virava o mais visível da tela e o "sobre a superfície oposta" sumia — as duas legendas trocavam de dono. Material que se comporta ao contrário em metade dos temas não é material, é enfeite. E os dois alfas são DIFERENTES, o que também é medição e não gosto: vidro escuro (tinta navy-900) → 80% · pior fundo = branco puro vidro claro (tinta paper-bg) → 92% · pior fundo = preto puro A assimetria vem da curva do APCA: texto claro sobre fundo escurecido aguenta muito mais que texto escuro sobre fundo clareado. --tinta-2 sobre vidro claro só atinge o piso de corpo a partir de 92%; a 80% ele dá Lc 59 e reprova. Vidro claro é quase opaco — e é honesto dizer isso em vez de fingir simetria. ⚠️ ARMADILHA DE CSS, e ela custou uma rodada de verificação: --vidro é uma propriedade customizada, então o var() dentro dela é substituído NO PONTO EM QUE ELA É DECLARADA. Declarar --vidro só aqui no :root e trocar --vidro-tinta lá embaixo NÃO refaz a mistura — o valor computado já viajou pronto. Por isso a mistura é redeclarada dentro de cada .superficie--*, e não só aqui. */ --vidro-tinta:var(--navy-900); --vidro-forca:80%; --vidro:color-mix(in srgb, var(--vidro-tinta) var(--vidro-forca), transparent); --vidro-solido:var(--vidro-tinta);/* o que o vidro vira quando não pode ser vidro */ --vidro-veu:color-mix(in srgb, var(--vidro-tinta) 40%, transparent); --vidro-fio:color-mix(in srgb, var(--paper-3) 18%, transparent); --vidro-desfoque:blur(14px); /* 14px fica dentro do teto de 12–16px que a medição de campo recomenda para não derrubar quadro em aparelho de entrada. E é valor FIXO: animar raio de desfoque recompõe na GPU a cada quadro. Anima-se opacidade, nunca o blur. Sem saturate(): o realce de saturação clássico do vidro puxaria o dourado dessaturado da marca para o dourado de guru. Ver MARCA.md §1. */ /* ⚠️ NÃO EXISTE UM VIDRO INTERMEDIÁRIO, e a ausência é decisão — a mesma lógica do --aviso que não existe. Um vidro de ~64% carrega rótulo em --paper e MAIS NADA: reprova em --paper-2, em --paper-3 e no --gold-txt. Token que só funciona com um texto de um tamanho é armadilha, não API. Ou o vidro aguenta texto (80%), ou não aguenta texto nenhum (véu, 40%). */ } /* ────────────────────────── MODO CLARO — troca de superfície ── Uma classe, não um tema paralelo. O slide invertido e a página clara do site usam a mesma troca. */ .superficie--clara{ --superficie:var(--paper-bg); --texto:var(--tinta); --texto-2:var(--tinta-2); --texto-3:var(--tinta-3); --acento:var(--bronze); --acento-2:var(--azul-tinta); /* o sistema: link, metadado, 2ª série */ --logo-tinta:var(--tinta); --logo-acento:var(--bronze); /* v4 — o que faltava para a página inteira trocar de tema numa classe */ --elevada:#FFFFFF; /* cartão sobre papel: elevação por luminosidade */ --linha:color-mix(in srgb, var(--tinta-3) 20%, transparent); --linha-forte:color-mix(in srgb, var(--tinta-3) 38%, transparent); --grao-cor:#FFFFFF; /* claro sobre claro — ver TEXTURA */ --oposta:var(--navy-900); /* a outra superfície, para demonstração de material */ --vidro-tinta:var(--paper-bg); --vidro-forca:92%; /* medido: a 80% o --tinta-2 dá Lc 59 e reprova */ --vidro:color-mix(in srgb, var(--paper-bg) 92%, transparent); --vidro-veu:color-mix(in srgb, var(--paper-bg) 52%, transparent); --vidro-solido:var(--paper-bg); --vidro-fio:color-mix(in srgb, var(--tinta-3) 18%, transparent); --degrade:linear-gradient(180deg, color-mix(in srgb,#FFFFFF calc(var(--degrade-forca)*100%), var(--paper-bg)) 0%, var(--paper-bg) 46%, color-mix(in srgb,var(--paper) calc(var(--degrade-forca)*100%), var(--paper-bg)) 100%); } .superficie--escura{ --superficie:var(--navy-900); --texto:var(--paper); --texto-2:var(--paper-2); --texto-3:var(--paper-3); --acento:var(--gold); --acento-2:var(--azul); --logo-tinta:var(--paper); --logo-acento:var(--gold); --elevada:var(--navy-800); /* cartão sobre a página */ --linha:var(--linha-tenue); --linha-forte:var(--fio-tenue); --grao-cor:#000000; /* escuro sobre escuro — ver TEXTURA */ --oposta:var(--paper-bg); /* a outra superfície, para demonstração de material */ --vidro-tinta:var(--navy-900); --vidro-forca:80%; --vidro:color-mix(in srgb, var(--navy-900) 80%, transparent); --vidro-veu:color-mix(in srgb, var(--navy-900) 40%, transparent); --vidro-solido:var(--navy-900); --vidro-fio:color-mix(in srgb, var(--paper-3) 18%, transparent); --degrade:linear-gradient(180deg, color-mix(in srgb,var(--navy-800) calc(var(--degrade-forca)*100%), var(--navy-900)) 0%, var(--navy-900) 46%, color-mix(in srgb,var(--navy-950) calc(var(--degrade-forca)*100%), var(--navy-900)) 100%); } /* ─────────────────────────── SUPERFÍCIE DE VIDRO — mesmo mecanismo ── Não é um tema novo: é o terceiro remapeamento, ao lado de clara e escura. Um componente escrito contra --texto/--texto-2/--texto-3 vira legal no vidro sozinho — e é aqui que ficam as três regras que a medição impôs. */ /* Vidro sobre página ESCURA: a composição é escura, o texto é claro. */ .superficie--vidro{ --superficie:var(--vidro); --texto:var(--paper); --texto-2:var(--paper); /* ⚠️ NÃO é --paper-2: no pior fundo ele dá Lc 70,9 e reprova o piso de corpo. No vidro o texto sobe um degrau — o sistema perde um nível de hierarquia e é por isso que vidro não carrega texto longo. */ --texto-3:var(--paper-3); /* Lc 61,3 no pior fundo — rótulo, nunca corpo */ --acento:var(--gold); /* ⚠️ FIO, não letra. --gold-txt sobre vidro no pior fundo dá Lc 50,3 e reprova até como rótulo. No vidro o eyebrow é --paper-3, não dourado. Se o componente precisa de uma PALAVRA dourada, ele não vai no vidro. */ --acento-2:var(--azul); /* ⚠️ RÓTULO, não corpo: Lc 66,5 no pior fundo. Passa em 60, reprova em 75 — mesma regra do --paper-2 aqui dentro. */ --logo-tinta:var(--paper); --logo-acento:var(--gold); } /* Vidro sobre página CLARA: a composição é clara, o texto é escuro. E aqui, a 92% de tinta, TODOS os cinco tokens passam — inclusive o --tinta-2, que no vidro escuro reprova. Vidro claro carrega mais texto justamente porque é mais opaco: o preço da legibilidade é o efeito. */ .superficie--clara .superficie--vidro, .superficie--vidro.superficie--clara{ --superficie:var(--vidro); --texto:var(--tinta); --texto-2:var(--tinta-2); --texto-3:var(--tinta-3); --acento:var(--bronze); --acento-2:var(--azul-tinta); --logo-tinta:var(--tinta); --logo-acento:var(--bronze); } /* ────────────────────── QUANDO O VIDRO NÃO PODE SER VIDRO ── Duas quedas, e as duas viram a mesma coisa: a tinta sólida. 1. Sem backdrop-filter não há desfoque — o fundo passa cru pelos 20% e a medição do pior caso deixa de valer. 2. prefers-reduced-transparency é a preferência do sistema operacional. ⚠️ Hoje só o Chrome 119+ implementa: Safari e Firefox ignoram. Ou seja, o iPhone com "Reduzir transparência" ligado NÃO recebe este bloco — é exatamente por isso que a garantia real é o piso de 80%, e esta regra aqui é bônus. Nunca o contrário. O véu não entra na queda: ele não carrega texto, e opacá-lo apagaria a foto que ele existe para escurecer. */ @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ :root{ --vidro:var(--vidro-solido); --vidro-desfoque:none; } } @media (prefers-reduced-transparency:reduce){ :root{ --vidro:var(--vidro-solido); --vidro-desfoque:none; } } @media (prefers-reduced-motion:reduce){ :root{ --dur-rapida:0ms; --dur-padrao:0ms; --dur-lenta:0ms; } }