/* ═══════════════════════════════════════════════════════════════════════════ SCRIPTORIUM — o núcleo. Fonte única: `C04 Apps/Scriptorium/nucleo.css`. As cópias em `Tabula/web/` e `Leitor/web/assets/` são produzidas por `sincronizar.sh` — editar a cópia é perder a edição no próximo sync. O que mora aqui: o que é verdade sobre QUALQUER superfície dos dois apps. O que não mora: componente, e a metáfora de cada um (a Mesa do Tabula, a Câmara do Leitor). Ver `B01 Projects/Scriptorium/01-a-fundacao-compartilhada`. ═══════════════════════════════════════════════════════════════════════════ */ @font-face{font-family:'Literata';src:url('/fontes/literata.woff2') format('woff2-variations'),url('/fontes/literata.woff2') format('woff2');font-weight:200 700;font-style:normal;font-display:swap} @font-face{font-family:'Inter';src:url('/fontes/inter.woff2') format('woff2-variations'),url('/fontes/inter.woff2') format('woff2');font-weight:200 700;font-style:normal;font-display:swap} @font-face{font-family:'Source Serif 4';src:url('/fontes/source-serif.woff2') format('woff2-variations'),url('/fontes/source-serif.woff2') format('woff2');font-weight:400 600;font-style:normal;font-display:swap} :root{ --serif:'Literata',Georgia,'Times New Roman',serif; --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --serif-leitura:'Source Serif 4',Georgia,serif; --mono:ui-monospace,SFMono-Regular,monospace; /* Forma. O raio subiu de 10 para 12 no Tabula (spec §3.2); a regra dele — post-it e cartão com o MESMO raio, senão a view-transition deforma o canto no meio do gesto — continua de pé, só num valor novo. */ --raio-p:8px; --raio:12px; --alvo:44px; /* Uma fonte de luz só, alta e à esquerda. Toda sombra deriva daqui — sombra incoerente é o que faz profundidade parecer barata. Veio do Tabula; o Leitor tinha só `--sombra`, uma cor crua. */ --luz-x:-1; --dur-rapida:.12s; --dur:.18s; /* --dur-lenta:.32s nunca foi consumido em produção nos dois apps (grep confirma, Onda 5). Os dois "gestos lentos" reais que existem — .34s no cross-fade da view-transition do Tabula (`estilo.css`, "Motion (2026-08-12): .34s (folha) e .28s (root) formam um PAR deliberado") e .4s no pulso de destaque do Leitor (`estilo.css`, "`.4s ease` fica LITERAL de propósito") — os dois MEDIRAM contra `--dur-lenta` e recusaram: arredondar para .32s custava a folga que cada um tinha razão medida para manter. O valor nunca foi validado por nada que roda de verdade. Se um consumidor real aparecer, conferir se .32s é o número certo em vez de assumir — não promover por analogia. */ --dur-lenta:.32s; --curva:cubic-bezier(.2,.7,.3,1); /* ── O CROMO é escuro, e é escuro nos TRÊS temas (2026-09-02) ──────────── A primeira família de COR que mora no `:root` do núcleo, e a razão de ela não morar num bloco de tema é a mesma que já vale para os `--t-cheio-*` do Leitor: isto é objeto, não superfície de leitura. Uma lateral que clareia no tema claro devolve os três beges empilhados que a rodada «grafite, lombada, prateleira» existe para desfazer — `--tela`, `--papel-elev-2` e `--papel-elev` vivem dentro de 1,2:1 de razão, e o cromo pintado com eles é uma coluna que não se separa da mesa. Um corte de valor só: cromo escuro contra papel claro. É ele que responde «onde eu ando» × «o que eu leio» sem gastar cor nenhuma. ── `--cromo-acento` é o acento do tema ESCURO, em qualquer tema ───────── Não é cor nova: `#f39d7a` é o que a pele do Leitor já declara em `[data-tema="escuro"] --acento`. A brasa funda do tema claro (#832f0d) é tinta pensada para papel claro — sobre grafite ela desaparece. A regra que sai daí vale para qualquer app que ponha cromo escuro numa pele clara. ── Os dois cinzas foram MEDIDOS, e a prancha errou por pouco ──────────── A prancha pedia `#7d838a` na contagem e `#8a9098` no «Sair». Contra o topo do gradiente (#272c31) eles dão 3,68:1 e 4,38:1 — abaixo do piso de 4.5 que este projeto cobra de TEXTO, e a contagem é informação, não enfeite (mesma tese do `--tenue`). O conserto é clarear a tinta, nunca clarear o gradiente: o gradiente é a superfície, e é ele que está medido contra todas as outras. `#9198a0` é o mesmo cinza-azulado 1,16× mais claro — 4,83:1 no topo e 5,74:1 na base. E é UM cinza, não dois: a diferença entre 3,68 e 4,38 não é hierarquia que o olho leia, e um terceiro cinza «decorativo» é o defeito que a nota do `--tenue` já registra. Quem separa a contagem do carimbo de versão é o TAMANHO (11,5px × 10,5px), que é a mesma decisão que o `#versao` do Leitor tomou quando recusou `opacity`. */ --cromo-1:#272c31; --cromo-2:#1b1e22; --cromo-borda:rgba(255,255,255,.07); --cromo-tinta:#eee9e1; --cromo-tinta-2:#a9aeb3; --cromo-tenue:#9198a0; --cromo-acento:#f39d7a; } /* ── Os três temas ────────────────────────────────────────────────────────── Claro e sepia unificados em valor (spec §3.1) — as diferenças entre os dois apps eram vizinhas de arredondamento (#faf8f4 vs #fbf9f5), e duas definições quase iguais custam manutenção de duas sem entregar coerência de uma. O ESCURO não unificou. O Tabula precisa de papel quente e alto (#26251f) porque a folha tem de se destacar da mesa quase preta; no Leitor a tela inteira É o papel, e o fundo é frio e baixo (#16171a). Os dois estão certos para contextos diferentes. O núcleo declara os valores do Leitor e o Tabula sobrescreve os três `--papel*` na pele dele. ── `--tela`, e por que faltava ──────────────────────────────────────────── O núcleo declarava a FOLHA (`--papel`) e nunca a SUPERFÍCIE onde ela pousa. Por isso o tema "claro" tinha cor de fundo diferente nos dois apps sem ninguém ter errado nada: o Leitor usava `body { background: var(--papel) }` — a tela era a folha —, e o Tabula, que precisa de uma mesa por baixo dos post-its, inventou `--mesa` na pele dele para tapar o buraco. Meses de deriva por um conceito que não existia na fundação. `--tela` é essa superfície de trabalho: sempre ao fundo, nunca recebe texto de leitura longa. `--papel` continua sendo a folha — recebe o conteúdo, e é ela (só ela) que carrega sombra; é a sombra que separa a folha da mesa, não o contraste de cor, e por isso a razão `--papel` × `--tela` mira BAIXA nos três temas (~1,13–1,22:1 no claro/sépia, ver `nucleo.test.mjs`) — alto contraste ali seria a pista errada. Claro: valores validados numa rodada de design do Tabula e aprovados pelo Yuri olhando o app publicado (#e8e2d7). Vieram prontos, não recalculados aqui. ── O sépia deixou o manila e virou ROSA-VELHO (2026-08-24) ──────────────── O sépia antigo (#f6eeda / #ece0c6) tinha matiz ~44° — amarelo de envelope manila — e `--papel-elev` quase branco (#fffdf8): cartão branco gritando sobre mesa amarela, dois materiais brigando. Yuri reprovou a cor, e a revisão de design refez o tema inteiro em cima de dois movimentos: 1. **A matiz desceu de ~44° para ~33°** — pergaminho com subtom rosado, vizinho do carmesim do acento (#8e1233, hue 344 do outro lado do vermelho). É o que faz o acento parecer tinta DESTE papel em vez de corpo estranho, e o que tira o tom salmão-acidental das superfícies tingidas de acento (barra de navegação ativa, opção escolhida do Aa). 2. **A escada de elevação comprimiu**: `--papel-elev` saiu do quase-branco e virou creme (#f8f1e7). A tela inteira lê como um material só; quem separa cartão de mesa continua sendo a sombra, como sempre foi. A tinta acompanhou (mais quente e mais funda: tinta-2 #4c443b, tenue #61594f) porque as superfícies escureceram um degrau e os pisos são medidos, não herdados. Bateria completa (papel · elev · elev-2 · tela): tinta #2e2519 12,45 · 13,43 · 11,16 · 10,40 tinta-2 #4c443b 7,90 · 8,52 · 7,08 · 6,60 tenue #61594f 5,69 · 6,14 · 5,10 · 4,76 (piso 4.5, mira ≥4.7) b-ctrl #746a5d 4,38 · 4,73 · 3,93 · 3,66 (piso 3) A borda-controle está mais escura do que o mínimo do núcleo pede, e a razão é o quinto consumidor: o gradiente de mesa do Tabula termina em `--tela-funda` (#dcc9b2, pele dele), e a borda precisa dos mesmos 3:1 lá embaixo — mede 3,29:1. Escurecer aqui só cresce as outras folgas. `--papel` × `--tela` = 1,197:1 — dentro da faixa baixa que o teste do teto exige (a sombra separa, não a cor). Escuro: os dois apps já tinham candidato — a `--mesa` quase preta do Tabula (#14171a) e o `--papel` frio do Leitor (#16171a), dois pontos de distância. Escolhido **#14171a**, a mesa do Tabula: é o único dos dois que já foi validado NO PAPEL DE SUPERFÍCIE (visto e aprovado como mesa, não como folha) — #16171a foi julgado como folha do Leitor, nunca como fundo. Contra o `--papel` frio do núcleo (que continua #16171a, ver abaixo) a diferença é cosmética: --tenue/--foco/--borda-controle sobre #14171a e sobre #16171a variam por <0,05:1 em toda a bateria — a escolha não é sobre o piso, os dois passam com folga larga, é sobre não fazer `--tela` e `--papel` colidirem no MESMO valor literal (que #16171a escolhido faria, já que `--papel` escuro também é #16171a hoje). Promover o `--papel` quente do Tabula (#26251f) para o núcleo — o que fecharia a pergunta e eliminaria a razão de existir da sobrescrita — FOI avaliado e NÃO sustentou, por dois motivos medidos: 1. Promover só `--papel` (deixando `--papel-elev`/`--papel-elev-2` frios) quebra a ESCADA DE ELEVAÇÃO: luminância de #26251f é 0,01834, maior que a de `--papel-elev` frio (#1d1f24, 0,01369) — a folha base ficaria mais clara que a folha "erguida" acima dela, invertendo a metáfora. 2. Promover a família inteira (papel + elev + elev-2 + borda, os quatro que o Tabula sobrescreve) resolve a escada, mas reprova o piso que o próprio núcleo garante: `--tenue` sobre `--papel-elev` quente (#2f2e27) mede 4,392:1, e sobre `--papel-elev-2` quente (#33322a) mede 4,151:1 — os dois abaixo de 4.5:1. O Tabula não sente isso hoje porque não pinta `--tenue` sobre essas duas superfícies elevadas, mas promover para o núcleo tornaria o par legal em qualquer app que o use, com dois pares que reprovam. Regra do projeto: se um par de texto reprova, o conserto é na cor, não no piso — e aqui não há cor que resolva sem também resolver 1) e sem tocar em `--tenue`, que já está calibrado contra outras seis superfícies. Então `--papel` escuro do núcleo permanece #16171a (frio, do Leitor); a sobrescrita do Tabula continua necessária e não foi tocada (adoção nos apps é tarefa à parte). Fica registrado para quem reabrir a pergunta. ── `--regra` × `--borda-controle`, e por que são DOIS tokens ───────────── Os dois são linha de 1px, e por isso pareciam a mesma coisa até a revisão da Task 4 medir os dois contra `--papel*` e achar 1,03–1,34:1 — adequado para fio, ilegível como pista de controle (WCAG 1.4.11 pede 3:1 em toda borda que seja a ÚNICA pista de que ali existe um controle interativo). A saída não é engrossar todo separador dos dois apps — um filete de texto ou uma divisória de lista a 3:1 vira uma linha nítida, o oposto do que um separador discreto deve fazer. A saída é nomear as duas funções à parte: - `--regra` continua sem piso. Fio decorativo — separador de texto, `.filete`, divisória de lista. Ornamento não cai sob 1.4.11. - `--borda-controle` nasce com piso 3:1 contra as três superfícies, nos três temas. É para o controle cuja borda é a única pista de que ali há algo clicável — sem sombra reforçando ao lado. - `--papel-borda` continua sem piso também, por razão diferente: é a borda do papel do cartão, que SEMPRE vem com sombra — a sombra é a pista, a linha é só o acabamento da beirada. A distinção é de função (o que a borda está fazendo ali), não de aparência — os três podem, por acidente, ter a mesma espessura. ── `--sombra-aresta`, e por que não é um quarto degrau de `--sombra-*` ─── Os três degraus acima (`pousada`, `erguida`, `alta`) modelam SOMBRA PROJETADA: um objeto sobre uma superfície, sob uma fonte de luz alta e à esquerda (`--luz-x`) — a pergunta que cada um responde é "a que altura o objeto está pairando?". Painel ancorado no rodapé da viewport (`#ajustes`, `#nota`, `#diag` do Leitor) não paira sobre nada: ele nasce da borda de baixo da tela e cobre o conteúdo atrás. O fenômeno não é altura, é OCLUSÃO DE CONTATO NA ARESTA — a pergunta é "onde a folha encosta a borda?", e a resposta certa é sombra para CIMA (Y negativo), o oposto do sinal que os três degraus produzem. Por isso `--sombra-aresta` não usa `--luz-x`: não há fonte de luz alta projetando isto, então multiplicar por uma direção de luz que não existe aqui seria emprestar uma física errada. É um token à parte, não um quarto degrau da mesma escada — nomear a diferença deixa o modelo mais coerente, não menos. Valores restaurados dos que o Leitor tinha antes da migração para `--sombra-alta` (Task 9), que devolveu Y positivo a um painel que precisava de Y negativo. ── A paleta gótica de `--foco` (2026-08-21) ────────────────────────────── `--foco` deixou o azul-noite (#2b4c85 / #2b4468 / #8fb3dd) e passou a carregar a cor da casa: **rubrica no claro, carmesim no sépia, púrpura no escuro**. A âncora não é decorativa — é o próprio nome desta fundação. No scriptorium medieval a *rubrica* (de `ruber`, vermelho) era a tinta que marcava título, inicial e direção litúrgica; e o *codex purpureus* era o pergaminho tingido de púrpura dos manuscritos de luxo. Os dois vermelhos e a púrpura são pigmentos do mesmo ofício, não uma paleta emprestada. Uma coisa importante mudou de peso junto: `--foco` **não é só o anel**. O Codex e a Memoria não declaram acento próprio — eles pintam TEXTO com `--foco` (`.md-ligacao`, `.aviso`, `.aviso-marcador`, `.rodape .estado`, `.dia-sinal[data-sinal="divergente"]`). Por isso o piso real deste token é DUPLO: 3:1 como anel sobre as quatro superfícies (WCAG 1.4.11, é o que `nucleo.test.mjs` mede) **e** 4.5:1 como texto sobre `--papel`, que quem mede são `Codex/web/test/nucleo.test.mjs` e `Memoria/web/test/ nucleo.test.mjs`. Escolher um vermelho pelo piso do anel e esquecer o segundo piso quebraria dois apps sem o teste do núcleo acusar nada. Medido (texto sobre `--papel` · anel sobre elev/elev-2/tela): claro #8c1c22 (hue 357, oxblood) 8,59 · 8,97 · 7,80 · 7,07 sépia #8e1233 (hue 344, carmesim) 7,60 · 8,20 · 6,81 · 6,35 (remedido em 2026-08-24 contra o sépia rosa-velho — o papel escureceu um degrau e a razão desceu junto, com folga larga) escuro #c19ae6 (hue 271, ametista) 7,71 · 7,09 · 6,34 · 7,74 O escuro foi conferido também contra o `--papel` QUENTE que o Tabula sobrescreve (#26251f), que não aparece em teste nenhum do núcleo: 6,61:1. Por que o claro e o sépia não dividem o mesmo vermelho, como dividem `--papel` e `--tela`: aqui a diferença **não** é vizinhança de arredondamento. São 13° de matiz — sangue seco (357) contra carmesim de quermes (344) —, e é justamente o que o pedido separou. Duas cores distintas de propósito, não duas definições da mesma. Candidato futuro: a gaveta do Tabula, que é o mesmo tipo de painel ancorado numa borda. NÃO migrada agora — ela já projetava sombra para baixo antes desta fundação existir, e usar `--sombra-alta` ali não é regressão nenhuma. Migrar por analogia sem um problema visível seria escopo que ninguém pediu. */ [data-tema="claro"]{ --papel:#faf8f4; --papel-elev:#fffdf9; --papel-elev-2:#f1ede4; --papel-borda:#ece7dd; --regra:#e6e2d9; --borda-controle:#7d7972; --tela:#e8e2d7; /* `--tinta-2` não mudou. `--tenue` escureceu de #6b6861 para #65625b — não pela mesma razão da rodada anterior (que mirava os NOVE papéis de pilar, todos mais claros que --papel), mas por --tela: #6b6861 sobre #e8e2d7 dava 4,312:1, abaixo do piso, porque --tela é mais escura que qualquer --papel* — a primeira superfície do núcleo onde isso acontece. Escurecer nunca regride um par já medido contra superfície mais clara (papel, papel-elev, papel-elev-2, os nove papéis de pilar do Tabula): a razão só sobe. Mirado ≥4.7:1 pelo mesmo motivo da nota do escuro abaixo — folga real, não raspão —, deu 4,720:1. */ --tinta:#22211d; --tinta-2:#5c5a52; --tenue:#65625b; --foco:#8c1c22; --sombra-pousada: calc(var(--luz-x) * -1px) 2px 3px rgba(0,0,0,.10), calc(var(--luz-x) * -2px) 6px 12px rgba(0,0,0,.09); --sombra-erguida: calc(var(--luz-x) * -2px) 6px 8px rgba(0,0,0,.12), calc(var(--luz-x) * -6px) 18px 34px rgba(0,0,0,.14); --sombra-alta: calc(var(--luz-x) * -4px) 12px 18px rgba(0,0,0,.16), calc(var(--luz-x) * -14px) 44px 80px rgba(0,0,0,.22); --sombra-aresta:0 -6px 24px rgba(0,0,0,.10); } [data-tema="sepia"]{ --papel:#f3e8da; --papel-elev:#f8f1e7; --papel-elev-2:#e9dccb; --papel-borda:#dfd0be; --regra:#e4d9cb; --borda-controle:#746a5d; --tela:#e4d4c3; /* Rosa-velho, 2026-08-24 — a história e a bateria completa estão na nota "── O sépia deixou o manila…" no topo do arquivo. O par mais apertado é `--tenue` sobre `--tela` (4,755:1), acima da mira ≥4.7 do projeto. */ --tinta:#2e2519; --tinta-2:#4c443b; --tenue:#61594f; --foco:#8e1233; --sombra-pousada: calc(var(--luz-x) * -1px) 2px 3px rgba(60,40,10,.11), calc(var(--luz-x) * -2px) 6px 12px rgba(60,40,10,.10); --sombra-erguida: calc(var(--luz-x) * -2px) 6px 8px rgba(60,40,10,.13), calc(var(--luz-x) * -6px) 18px 34px rgba(60,40,10,.15); --sombra-alta: calc(var(--luz-x) * -4px) 12px 18px rgba(60,40,10,.17), calc(var(--luz-x) * -14px) 44px 80px rgba(60,40,10,.23); --sombra-aresta:0 -6px 24px rgba(60,40,10,.12); } [data-tema="escuro"]{ --papel:#16171a; --papel-elev:#1d1f24; --papel-elev-2:#26282e; --papel-borda:#2c2f36; --regra:#2c2f36; --borda-controle:#83807a; /* #14171a, a mesa do Tabula — não #16171a, o papel frio do Leitor a 2 pontos de distância. Razão e números na nota grande "── `--tela`, e por que faltava" no topo do arquivo. */ --tela:#14171a; /* `--tenue` clareado de #918e88 para #95928c (revisão, rodada 1 da Task 4). O par mais apertado do núcleo — --tenue sobre --papel-elev-2 — media 4,5101:1: passava o piso de 4.5, mas por 0,22% de margem relativa, sem folga nenhuma para as superfícies que as Tasks 6 e 9 ainda vão trazer. Corrigido para mirar ≥4.7:1 nesse mesmo par (deu 4.748:1). A escolha foi clarear `--tenue`, não escurecer `--papel-elev-2`: o papel é superfície estrutural, compartilhada com `--tinta`, `--tinta-2`, `--borda-controle` e a escada de elevação inteira — mexer nele reabre toda medição que já passava com folga. `--tenue` é o único token que precisava da correção, e é o único que este ajuste toca. O passo foi pequeno de propósito (+4 em cada canal): o objetivo é folga, não contraste máximo — texto branco puro sobre fundo quase preto é desconfortável em leitura longa, e `--tenue` carrega o relógio de tempo decorrido e a linha de crédito, textos lidos de relance, não manchete. Efeito colateral visto e considerado: clarear `--tenue` o aproximou de `--tinta-2` — a razão entre os dois caiu de 1,2984:1 para 1,2333:1. Não viola piso nenhum (a WCAG não pede piso entre dois tons do mesmo lado, texto e texto-mais-fraco) e os dois nunca aparecem lado a lado na UI hoje, mas fica registrado: se um terceiro token nascer entre eles, ou se algum dia colidirem numa mesma tela, é esta migração que criou o aperto. Nota à parte, para quem procurar aqui a razão de `--tinta-2` × destaque do Leitor (rodada 2/3 da revisão): o problema achado em `.prosa figcaption` **não é do `--tinta-2`**, e por isso o token não muda. `--tinta-2` está certo para o que ele é — texto secundário, testado e folgado contra as três superfícies do núcleo e contra os 9 papéis de pilar do Tabula. O erro estava em usá-lo dentro de um bloco destacável: a regra que o Yuri fixou é que **bloco destacável usa `--tinta`**, ponto — nada que possa receber um `--hl-*` por baixo pode estar pintado com tinta secundária. O conserto é uma linha na pele do Leitor (`.prosa figcaption` troca de `--tinta-2` para `--tinta`), entregue na Task 9, com um teste que trava a classe inteira — não só este caso. Ver `nucleo.test.mjs` e `task-4-report.md` (rodada 3/4). */ --tinta:#e4e2dd; --tinta-2:#a6a39d; --tenue:#95928c; --foco:#c19ae6; /* Sombra preta sobre fundo quase preto some: os três degraus sobem de opacidade em vez de escurecer mais. */ --sombra-pousada: calc(var(--luz-x) * -1px) 2px 3px rgba(0,0,0,.5), calc(var(--luz-x) * -2px) 6px 12px rgba(0,0,0,.45); --sombra-erguida: calc(var(--luz-x) * -2px) 6px 8px rgba(0,0,0,.55), calc(var(--luz-x) * -6px) 18px 34px rgba(0,0,0,.5); --sombra-alta: calc(var(--luz-x) * -4px) 12px 18px rgba(0,0,0,.6), calc(var(--luz-x) * -14px) 44px 80px rgba(0,0,0,.55); --sombra-aresta:0 -6px 24px rgba(0,0,0,.5); } /* ── Base ─────────────────────────────────────────────────────────────────── */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent; } /* ── Foco visível ─────────────────────────────────────────────────────────── Novo nos dois: nenhum declarava token de foco. O anel usa `--foco`, medido a 3:1 sobre as três superfícies nos três temas (piso de não-texto da WCAG), e o `offset` existe para o anel não se confundir com a borda do próprio controle. `:focus-visible` e não `:focus`: o segundo acende no clique de mouse, e um anel que aparece sem teclado ensina o usuário a ignorá-lo. */ :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{ outline:2px solid var(--foco); outline-offset:2px; border-radius:var(--raio-p); } /* ── Alvo de toque ────────────────────────────────────────────────────────── `:where()` mantém especificidade zero: a pele sobrescreve sem precisar de `!important`, e sem herdar uma briga de especificidade da fundação. */ :where(button,[role="button"],a[href]){min-height:var(--alvo)} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; } }