:root { color-scheme: light; /* Primitivas — nunca consumir diretamente em componentes. */ --blue-50: #eaf1fb; --blue-100: #d3e2f7; --blue-200: #a9c6ef; --blue-300: #7ba6e6; --blue-400: #5a97ee; --blue-500: #2e78e6; --blue-600: #1e63c8; --blue-700: #154494; --blue-800: #0e3360; --blue-900: #061b36; --blue-950: #05152b; --neutral-0: #ffffff; --neutral-50: #f7f9fc; --neutral-100: #eef2f8; --neutral-200: #e4eaf2; --neutral-300: #c9d3e0; --neutral-400: #a8b5c6; --neutral-500: #8493a6; --neutral-550: #65758c; --neutral-600: #5b6b7f; --neutral-700: #3a4760; --neutral-800: #1c2740; --neutral-900: #15233b; --neutral-950: #0a1424; --green-400: #34d399; --green-600: #188056; --amber-400: #f5b544; --amber-600: #c9821a; --red-400: #f47272; --red-600: #d14343; /* Semânticas — contrato público do sistema. */ --bg: var(--neutral-0); --surface: var(--neutral-50); --surface-2: var(--neutral-100); --surface-brand: var(--blue-50); --text: var(--neutral-900); --text-muted: var(--neutral-600); --text-subtle: var(--neutral-550); --text-on-brand: var(--neutral-0); --brand: var(--blue-600); --brand-hover: var(--blue-700); --brand-soft: var(--blue-50); --accent: var(--blue-600); --platina: var(--neutral-300); --border: var(--neutral-200); --border-strong: var(--neutral-300); --ring: var(--blue-600); --success: var(--green-600); --success-on: var(--neutral-0); --success-soft: #e6f6ef; --warning: var(--amber-600); --warning-on: var(--neutral-950); --warning-soft: #fbf1df; --error: var(--red-600); --error-on: var(--neutral-0); --error-soft: #fbeaea; --info: var(--blue-600); --info-on: var(--neutral-0); /* Compatibilidade semântica para produtos existentes. */ --panel: var(--neutral-0); --panel-2: var(--neutral-50); --panel-3: var(--neutral-100); --line: var(--neutral-200); --line-soft: var(--neutral-200); --muted: var(--text-muted); --muted-2: var(--text-subtle); --amber: var(--warning); --amber-soft: var(--warning-soft); --mint: var(--success); --mint-soft: var(--success-soft); --cyan: var(--brand); --cyan-soft: var(--brand-soft); --red: var(--error); --red-soft: var(--error-soft); --violet: var(--blue-700); --font-body: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-display: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; --display-weight: 800; --display-tracking: -0.03em; --num-font: var(--font-body); --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: 4.5rem; --r-sm: 0.625rem; --r-base: 0.875rem; --r-lg: 1.125rem; --r-pill: 9999px; --shadow-sm: 0 1px 2px rgba(10, 20, 36, 0.06); --shadow-md: 0 8px 24px -8px rgba(10, 20, 36, 0.14); --shadow-lg: 0 24px 60px -16px rgba(6, 27, 54, 0.3); --shadow: var(--shadow-md); --grad-brand: linear-gradient(135deg, #154494 0%, #1e63c8 100%); --grad-sky: linear-gradient(155deg, #eaf1fb 0%, #cbddf7 50%, #a9c6ef 100%); --grad-deep: radial-gradient(130% 130% at 85% -10%, #1b2e50 0%, #0d1524 52%, #090d18 100%); --grad-platina: linear-gradient(120deg, #1e63c8 0%, #c9d3e0 120%); --glass-fill: rgba(15, 35, 70, 0.04); --glass-border: rgba(15, 35, 70, 0.1); --glass-hi: rgba(255, 255, 255, 0.5); --glass-blur: 22px; --ease: cubic-bezier(0.4, 0, 0.2, 1); --t: 0.25s var(--ease); --t-fast: 0.15s var(--ease); --maxw: 1180px; } :root[data-theme="dark"] { color-scheme: dark; --bg: #0a0f1a; --surface: #111826; --surface-2: #18202f; --surface-brand: #111f36; --text: #eaf1fb; --text-muted: #98aac4; --text-subtle: #67788f; --brand: #1e63c8; --brand-hover: #2e78e6; --brand-soft: #111f36; --accent: #5a97ee; --ring: #5a97ee; --border: rgba(255, 255, 255, 0.07); --border-strong: rgba(255, 255, 255, 0.14); --success: var(--green-400); --warning: var(--amber-400); --error: var(--red-400); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ------------------------------------------------------------------ Derivações do Maker. Nada aqui inventa cor: todo valor é uma semântica oficial acima ou uma primitiva já declarada. O bloco oficial (linhas 1–155) é mantido idêntico a testes/fixtures/design-system-oficial-tokens.css. ------------------------------------------------------------------ */ :root { /* Seção 12.8 do relatório: foco de 2 px com offset de 2 px e alvo de 44 px. */ --focus-width: 2px; --focus-offset: 2px; --touch-target: 44px; /* N-427: --text-subtle não atinge AA sobre --surface-2 nos dois temas. */ --muted-2: var(--text-muted); /* N-429: tinta de links com contraste por tema, sem remendos nos componentes. */ --link: var(--brand); /* Ausência no arquivo oficial: a curva de `--ease` parte devagar — entrega 3% do percurso nos primeiros 10% do tempo, e a régua de interação proíbe partida lenta em movimento de interface. A curva abaixo entrega 40% no mesmo trecho e NÃO é valor novo: é a mesma que public/tema-acelera.css já aplica em todo botão, link e campo do produto. Declarada uma única vez aqui para `--t` e `--t-fast` herdarem, em vez de espalhar uma terceira cópia do literal pelas folhas. docs/maker-interacao-polida.md */ --ease: cubic-bezier(.2, .8, .2, 1); /* Patamar de pressão da régua (100–160 ms). `--t` e `--t-fast` continuam valendo para o resto; a resposta ao toque é o caso mais curto que existe e precisa de nome próprio para não virar número solto na folha. */ --t-press: .12s var(--ease); /* Piso de fonte da refatoração visual (14/10/2026): nada de interface abaixo de 12 px. --fs-sm é o tamanho de dica, erro e rótulo secundário. */ --fs-min: .75rem; --fs-sm: .8125rem; /* Véus derivados da cor do texto: trocam de tom com o tema, ao contrário de rgba(255,255,255,x), que some no claro. */ --veu-1: color-mix(in srgb, var(--text) 4%, transparent); --veu-2: color-mix(in srgb, var(--text) 8%, transparent); --veu-3: color-mix(in srgb, var(--text) 14%, transparent); } :root[data-theme="dark"] { --link: var(--accent); /* Ausência no arquivo oficial: no escuro --success/--warning/--error viram tintas claras, mas --success-on/--error-on continuavam brancos. Branco sobre --error escuro (#f47272) dá 2,80:1; --neutral-950 dá 6,58:1. */ --error-on: var(--neutral-950); --success-on: var(--neutral-950); --warning-on: var(--neutral-950); } /* Os utilitários de transição do build (`public/tailwind.css`) gravam a curva como literal dentro do arquivo gerado — corrigir lá morre no próximo build, sem avisar ninguém. A curva do sistema é imposta aqui, de fora, e alcança os pares elemento×propriedade que herdavam a partida lenta. `:is()` e não `:where()` de propósito: `:where()` tem especificidade zero e perderia para a própria classe utilitária, que é o erro que faria esta regra existir sem efeito nenhum. */ html body :is(.transition, .transition-all, .transition-colors, .transition-opacity, .transition-transform, .transition-shadow) { transition-timing-function: var(--ease); } /* Trocar de tema é repintar a página inteira. Com dezenas de elementos interpolando cor ao mesmo tempo o cliente vê a tela LAVAR, não trocar — e o mais longo levava 450 ms. Quem troca o tema (public/theme.js fora do editor, public/maker-shell.js dentro dele) marca a raiz antes de escrever `data-theme` e desmarca dois quadros depois; no meio, nada interpola. `!important` aqui não é para vencer camada nenhuma: é a única forma de uma regra de estado alcançar declarações de transição espalhadas por seis folhas e por atributos `style=`. docs/maker-interacao-polida.md */ [data-trocando-tema] *, [data-trocando-tema] *::before, [data-trocando-tema] *::after { transition: none !important; } /* ── Segundo tema das telas do Maker (D10) ────────────────────────────────────── Entrada, projetos e editor foram escritos sobre `--zh-*`, que /theme.css gera a partir do preset ativo: valores fixos de tema escuro. Por isso a tela saía igual nos dois temas (§4.1 de docs/maker-revisao-visual-producao.md, provado por md5sum). O bloco abaixo faz as semânticas do preset virem de /maker-tokens.css, que é quem troca de valor por `data-theme`. Só o tema claro é remapeado, de propósito: no escuro o preset Safira JÁ entrega exatamente os tokens escuros — --zh-bg #0A0F1A = --bg, --zh-text #EAF1FB = --text, --zh-surface #111826 = --surface, --zh-surface-2 #18202F = --surface-2, --zh-muted #98AAC4 = --text-muted, --zh-brand #1E63C8 = --brand, --zh-accent #5A97EE = --accent. Remapear o escuro não mudaria um pixel; não remapear é a prova de que o tema que já funcionava não foi tocado. O escopo é toda tela que carrega esta folha: entrada e editor. A ponte morava antes no