/* Dandelion bundle for Playground — GENERATED by tools/bundle-css.py from the vault source. Do not edit. */ @import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@300;400;500;600&family=JetBrains+Mono:wght@300;400;500;700&display=swap'); /* ---- styles.css ---- */ /* =========================================================================== machado.group — Design System · global entry --------------------------------------------------------------------------- Consumers link THIS one file. It is a manifest of @imports only — no rules live here. Two layers, kept separate: TOKENS (the shipped foundation) and COMPONENTS (vanilla class implementations on top of those tokens). =========================================================================== */ /* ---- fonts ------------------------------------------------------------ */ /* ---- tokens/fonts.css ---- */ /* =========================================================================== machado.group — Webfonts --------------------------------------------------------------------------- The canonical faces of the system (serif retired 2026-07-24 — Baskervville dropped from all surfaces; the display/heading face is now a geometric grotesk in the Aeonik family): - Hanken Grotesk: geometric grotesk (display / headings / the core face, Aeonik-like — replaces the serif) - IBM Plex Mono: monospace (labels, eyebrows, wordmark) - JetBrains Mono: technical mono (PRIMARY body face — incl. light 300) Doto (dot-matrix, the "luzinha" numerals) was the fourth face and was REMOVED in contract 6: it earned its place on a readout that had already moved to JetBrains, so what it actually bought was one more webfont request for a flourish. Numerals are one face — see --font-numeric. The system uses TWO faces: grotesk (display/headings) + mono (everything else). Serif and sans are retired — --font-serif is aliased to the grotesk and --font-sans to mono, both for back-compat only. All three are open and self-hostable. This file loads them from Google Fonts for prototyping; production surfaces (or CSP-restricted artifacts) graduate to self-hosted woff2 @font-face rules — nothing else in the system changes, it all reads from the --font-* tokens in typography.css. =========================================================================== */ /* --------------------------------------------------------------------------- VCR OSD Mono — A FACE DO PAINEL [escolhida por ele em 25-ago-2026] --------------------------------------------------------------------------- Ganhou a prova das 14 monos instaladas na máquina dele por três razões, e nenhuma é gosto: 13,22 de tinta a mais densa das 14 — 22% acima da Menlo que era o default. A malha de LED escurece uma fração FIXA da área, então densa não é "mais bonita": é a que SOBREVIVE à malha. acentos ÁÀÂÃÉÊÍÓÔÕÚÜÇ completos, conferidos glifo a glifo. A Rigidon Mono era a 3ª em tinta e caiu exactamente aqui. é a coisa é uma fonte de on-screen display de vídeo. As outras 13 imitam o painel; esta É o painel. AUTO-HOSPEDADA DE PROPÓSITO. Ela está instalada no Mac dele, e é justamente por isso que o @font-face é obrigatório: sem ele a identidade do painel só existiria na máquina de quem a tem instalada, e toda superfície servida — flavio.machado.group, artifact, deck de cliente — cairia no fallback sem avisar ninguém. O .woff2 tem 18KB e vive ao lado deste arquivo. PENDENTE, e é decisão dele: o arquivo NÃO traz campo de licença embutido (nameID 13/14 ausentes). Circula há anos como gratuita, mas antes de entrar em superfície de CLIENTE isso precisa de confirmação escrita. Em ferramenta interna — dash, runbook, status — segue sem ressalva. --------------------------------------------------------------------------- */ @font-face { font-family: 'VCR OSD Mono'; src: url("tokens/fonts/vcr-osd-mono.woff2") format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } /* ---- tokens (foundation) ---------------------------------------------- */ /* ---- tokens/colors.css ---- */ /* =========================================================================== machado.group — Color --------------------------------------------------------------------------- Two layers: 1. PALETTE — raw, named values. Never reference these directly in UI. 2. SEMANTIC — role aliases. DARK is the default (`:root`, applied unless `data-theme="light"` is set); LIGHT is the opt-out. Components reference ONLY these. Mood: warm paper light, near-black dark, a single WHITE accent (the one bold color — orange RETIRED 2026-07-24, removed 2026-07-27), a SIGNAL BLUE as the secondary house colour (gradient white → blue → cool cyan), and red / green / yellow status "luzinhas". =========================================================================== */ :root { /* ---- PALETTE : warm neutral (ink) scale ------------------------------- */ --c-white: #ffffff; --c-paper: #f4f2ec; /* bone — default page in light */ --c-paper-2: #fcfbf8; /* warm white — raised card */ --c-sand: #edeae2; /* cream — sunken / alt card */ --c-sand-2: #e4e0d6; /* deeper cream */ --c-gray-200: #d8d4c9; /* hairline-on-cream */ --c-gray-300: #bcb7aa; --c-gray-400: #928e83; --c-gray-500: #6f6b62; --c-gray-600: #524f49; --c-gray-700: #3a3833; --c-gray-800: #242320; --c-gray-900: #141312; /* ink */ --c-black: #0c0c0c; /* near-black — dark page */ --c-ink-2: #121212; /* dark raised card */ --c-ink-3: #1e1e1e; /* dark inset — o degrau que faltava */ --c-ink-0: #080808; /* dark sunken */ /* os degraus de TOQUE e de ÂNCORA — vieram do app de treino (22-set-2026, ordem dele). Ficam no meio da escala de propósito: toque é um passo, não uma cor nova. */ --c-ink-00: #060606; /* dark anchor — barra, menu */ --c-chip-dark: #151515; --c-press-dark: #201f1c; --c-press-soft-dark: #151413; --c-chip-light: #e9e6dd; --c-press-light: #c8c3b6; --c-press-soft-light:#ded9cf; /* ---- PALETTE : signal blue (the secondary house colour) --------------- Sampled from refs/index.md — uploads/ref-blue-border.png: a rim that runs near-white → bright blue → deep blue, with a cool cyan tail. This is the only chromatic family in the system besides status. */ --c-signal-050: #eaf2ff; --c-signal-100: #c1dcfc; /* light rim */ --c-signal-200: #9bc0fa; --c-signal-300: #5992f7; --c-signal-500: #2f6bf5; /* SIGNAL core */ --c-signal-600: #2350b3; --c-signal-700: #1d459f; /* deep */ --c-signal-cyan: #aae8fa; /* cool tail of the gradient */ /* ---- PALETTE : status -------------------------------------------------- */ --c-red-100: #fcdad8; --c-red-500: #e5403b; --c-red-600: #c8302c; --c-green-100: #d8ecdd; --c-green-500: #3fa45e; --c-green-600: #2f8049; --c-yellow-100: #fbedc6; --c-yellow-500: #f5b81e; --c-yellow-600: #cf9606; /* ---- PALETTE : deck blue (dark-mode editorial accent) ----------------- */ --c-blue-300: #bcb4e0; /* periwinkle */ --c-blue-500: #3b36f0; /* electric */ /* ---- PALETTE : azure (the "working" luzinha — vivid blue light) ------- */ --c-azure-100: #d8e8ff; --c-azure-300: #bcd9fb; /* working light border (locked default) */ --c-azure-400: #3b8bff; --c-azure-500: #0cc8ed; /* working core — cyan (locked default) */ --c-azure-600: #0f54e6; /* ---- PALETTE : voltage (amarelo sólido — a nota de sinalização) ------- Medido em refs/index.md → uploads/…a38b1c.jpg: o cartão de voo em amarelo chapado com conteúdo preto. Não é status (não pisca, não avisa): é uma CHAPA, para o botão que tem de ser visto de longe. */ --c-volt-500: #f8f808; --c-volt-600: #e4e400; /* ---- PALETTE : teal (alternate accent — calm, dark-leaning) ----------- */ --c-teal-50: #eaf5f3; --c-teal-100: #cfe8e4; --c-teal-300: #95cdc6; --c-teal-400: #7cc2ba; --c-teal-500: #62b3aa; /* ALT accent */ --c-teal-600: #4f9890; /* hover / pressed */ --c-teal-700: #3d7a73; /* default color-scheme is dark (form controls, scrollbars) */ color-scheme: dark; /* ===================================================================== SEMANTIC ROLES — DARK (default — near-black editorial) ===================================================================== */ /* surfaces */ --surface-page: var(--c-black); --surface-raised: var(--c-ink-2); --surface-sunken: var(--c-ink-0); --surface-inset: var(--c-ink-3); --surface-inverse: var(--c-paper); /* papéis do app mobile (22-set-2026). ÂNCORA inverte de DENSIDADE, não de cor: no escuro é o mais preto da tela, no claro o mais denso. */ --surface-anchor: var(--c-ink-00); --surface-chip: var(--c-chip-dark); --surface-press: var(--c-press-dark); --surface-press-soft: var(--c-press-soft-dark); /* ink (text / icon) --------------------------------------------------------------------- A ESCADA SUBIU EM 04-set-2026. [ele, olhando o Tolkien Desk: "as fontes estão com um tom de cinza muito escuro, e é difícil de ler"] Ele estava certo e o número diz onde. Medido sobre os quatro fundos escuros da casa, antes: --ink 1.00 17,5:1 ✓ --ink-secondary 0.60 6,6:1 ✓ --ink-tertiary 0.40 3,5:1 ✗ abaixo do piso de 4,5:1 --ink-disabled 0.24 2,0:1 ✗✗ O réu é o TERCIÁRIO, e ele é o degrau que mais trabalha: eyebrow, rótulo de coluna, legenda de eixo, carimbo de rodapé — tudo que diz ONDE o número está. Um degrau que carrega informação e mede 3,5:1 não é hierarquia, é dado escondido. Hierarquia se faz com a DISTÂNCIA entre os degraus, não empurrando o de baixo para fora da leitura. A escada nova mantém os quatro degraus distintos e põe os três que carregam informação bem acima do piso — o terciário sai de 3,5:1 e chega a 9,2:1, em duas passadas no mesmo dia (a segunda está explicada abaixo). --ink 1.00 17,5:1 #f4f2ec --ink-secondary 0.86 12,9:1 #d4d2cd --ink-tertiary 0.72 9,2:1 #b3b2ad --ink-disabled 0.44 4,0:1 ← de propósito: desabilitado NÃO se lê, e a WCAG isenta. Subiu só o bastante para a peça continuar visível como peça. SEGUNDA PASSADA no mesmo dia, ordem dele: "more close to white". A primeira correção tirou o terciário do vermelho (3,5 → 6,2) e ele ainda leu cinza. Está certo: 6,2:1 PASSA na norma e mesmo assim a letra aparente é #93918e — cinza médio. A norma é piso de acessibilidade, não régua de conforto, e quem lê 12-15h por dia opera acima do piso. O terciário agora aparece como #b3b2ad e o secundário como #d4d2cd — ambos claramente tinta clara, não cinza. A conta que fecha, para quem for mexer: sobre estes fundos, o alfa mínimo para 4,5:1 é 0,48, e para 7:1 é 0,62. Abaixo de 0,48 nenhum tom de tinta desta casa se lê — é aritmética, não gosto. */ --ink: var(--c-paper); --ink-secondary: rgba(244, 242, 236, 0.86); --ink-tertiary: rgba(244, 242, 236, 0.72); --ink-disabled: rgba(244, 242, 236, 0.44); --ink-inverse: var(--c-gray-900); --ink-on-accent: var(--c-black); /* lines / borders (alpha so they sit on any surface) */ --line: rgba(244, 242, 236, 0.12); --line-strong: rgba(244, 242, 236, 0.24); --line-faint: rgba(244, 242, 236, 0.07); /* accent — WHITE (the single bold color) */ --accent: var(--c-white); --accent-hover: rgba(255, 255, 255, 0.86); --accent-press: rgba(255, 255, 255, 0.70); --accent-tint: rgba(255, 255, 255, 0.12); --accent-tint-2: rgba(255, 255, 255, 0.20); --accent-ink: var(--c-black); /* signal — the secondary house colour. White stays primary; signal carries the live/indicator layer (dots, rims, sweeps) and never the page action. */ --signal: var(--c-signal-500); --signal-soft: var(--c-signal-300); --signal-light: var(--c-signal-100); --signal-deep: var(--c-signal-700); --signal-cyan: var(--c-signal-cyan); --signal-tint: rgba(47, 107, 245, 0.16); --signal-tint-2: rgba(47, 107, 245, 0.28); /* GRADIENTE É LUZ, NÃO SUPERFÍCIE [ordem dele 01-out-2026: "a gente não utiliza gradiente"]. Estes tokens só alimentam o EFEITO de luz que varre (signal, bloom, a linha do agora do gantt). Card, painel, fundo e botão nunca levam gradiente. */ --gradient-signal: linear-gradient(118deg, #ffffff 0%, var(--c-signal-100) 24%, var(--c-signal-500) 62%, var(--c-signal-cyan) 100%); --gradient-signal-deep: linear-gradient(118deg, var(--c-signal-100) 0%, var(--c-signal-500) 46%, var(--c-signal-700) 100%); /* ---- LUZ (o default) ------------------------------------------------ O gradiente dos DETALHES — fieiras, rims, luz de timeline, glow. É branco: varia luminosidade e alfa, nunca hue, com o papel da casa como meio-tom quente para não cair em cinza morto. O azul continua guardado em `--gradient-signal` e volta com `data-glow="signal"` no ancestral. Todo detalhe decorativo aponta para `--glow-*`, nunca para signal direto. */ --gradient-light: linear-gradient(118deg, #ffffff 0%, rgba(255,255,255,0.26) 30%, var(--c-paper) 66%, rgba(255,255,255,0.95) 100%); --glow-gradient: var(--gradient-light); --glow-tint: rgba(255, 255, 255, 0.16); --glow-tint-2: rgba(255, 255, 255, 0.32); /* status (foreground / tint background) — locked light colors */ --status-online: #c2e368; /* DONE — soft house green (HBF) */ --status-online-bg: color-mix(in srgb, var(--status-online), transparent 80%); --status-ondeck: var(--c-yellow-500); /* ON-DECK — worked on now */ --status-ondeck-bg: color-mix(in srgb, var(--status-ondeck), transparent 80%); --status-warning: #f5e000; --status-warning-bg: color-mix(in srgb, var(--status-warning), transparent 80%); --status-progress: var(--c-azure-500); --status-progress-bg: color-mix(in srgb, var(--status-progress), transparent 80%); --status-offline: #e9048b; --status-offline-bg: color-mix(in srgb, var(--status-offline), transparent 80%); /* ALERTA — o laranja voltou, e voltou como ESTADO, não como cor de marca. A aposentadoria de 24-jul tirou o laranja do acento; isto aqui é outra coisa: o tom de alarme e destrutivo-armado, que a casa já usava cru em `key.css` (255,77,0) sem token nenhum. Registrado em 24-ago-2026 depois de o Eduardo cobrar o ícone laranja na tecla em falha. NÃO usar como acento decorativo — só onde algo deu errado ou vai doer. */ --status-alert: #ff4d00; --status-alert-rgb: 255, 77, 0; --status-alert-bg: color-mix(in srgb, var(--status-alert), transparent 80%); /* TOM — os três tons do painel, agora fora do selo. 28-set-2026 [vector, achado do harvest na auditoria do Runbook do HBF]. O `badge.css` cravava #c2e368 / #ff3300 / #f4f2ec dentro do próprio arquivo. Consumidor que precisa do MESMO tom fora da pílula — texto de linha travada, borda de item feito, traço de gráfico — não tinha de onde ler e cravava o hex outra vez. Cor é DADO (00_context/tint.md): três tons e só três, e o nome é do PAPEL, não da cor — o valor recalibra, o papel não. ATENÇÃO: --tone-held é o LARANJA #ff3300, não o âmbar que o comentário antigo do badge dizia. O valor manda; a palavra "âmbar" ali é herança. É irmão de --status-alert (#ff4d00) e não o mesmo: alert é "deu errado", held é "está travado esperando". Não trocar um pelo outro. */ --tone-done: #c2e368; /* lima — terminou bem, disponível, confirmado */ --tone-held: #ff3300; /* travado, esgotado, fora do que se validou */ --tone-live: #f4f2ec; /* acento — está acontecendo agora */ /* ESCALA LIMA — 31-out-2026 [vector, pedido do playground-project, ordem dele 27-out: "use the lime theme… get it out with the Design Lab"]. Promovida do Mission Control do lab (--mc-lime-1…7, --mc-past-b), hexes copiados, não medidos. Escala de PELE (skin, glow), não tom de estado: --tone-done continua sendo o papel "terminou bem". Aditivo — nada que já está no ar lê estes nomes antes desta data. Pares de leitura: escuro --lime-6 sobre --lime-floor · claro --lime-2 sobre --lime-7. */ --lime-1: #2f5216; --lime-2: #5f8f2c; --lime-3: #9ccf3c; --lime-4: #aed74b; --lime-5: #c8ec7a; --lime-6: #d9f28c; --lime-7: #e6f7b8; --lime-floor: #16260d; /* o chão escuro da lima (mc-past-b) */ /* focus */ --focus-ring: var(--c-white); /* glass (frosted, translucent — buttons/chips over any backdrop) */ --glass-bg: rgba(244, 242, 236, 0.12); --glass-bg-hover: rgba(244, 242, 236, 0.18); --glass-edge: rgba(244, 242, 236, 0.14); } /* ===================================================================== SEMANTIC ROLES — LIGHT (opt-out: set data-theme="light") ===================================================================== */ [data-theme="light"] { color-scheme: light; --surface-page: var(--c-paper); --surface-raised: var(--c-paper-2); --surface-sunken: var(--c-sand); --surface-inset: var(--c-sand-2); --surface-inverse: var(--c-gray-900); --surface-anchor: var(--c-gray-200); --surface-chip: var(--c-chip-light); --surface-press: var(--c-press-light); --surface-press-soft: var(--c-press-soft-light); --ink: var(--c-gray-900); --ink-secondary: var(--c-gray-500); --ink-tertiary: var(--c-gray-400); --ink-disabled: var(--c-gray-300); --ink-inverse: var(--c-paper); --ink-on-accent: var(--c-white); --line: rgba(20, 19, 18, 0.10); --line-strong: rgba(20, 19, 18, 0.20); --line-faint: rgba(20, 19, 18, 0.06); /* accent — INK (white is invisible on paper; the bold color inverts to ink) */ --accent: var(--c-gray-900); --accent-hover: var(--c-gray-800); --accent-press: var(--c-gray-700); --accent-tint: rgba(20, 19, 18, 0.08); --accent-tint-2: rgba(20, 19, 18, 0.16); --accent-ink: var(--c-white); /* signal keeps its hue on paper; the gradient starts deeper so it reads */ --signal: var(--c-signal-600); --signal-soft: var(--c-signal-500); --signal-light: var(--c-signal-200); --signal-deep: var(--c-signal-700); --signal-tint: rgba(35, 80, 179, 0.12); --signal-tint-2: rgba(35, 80, 179, 0.22); --gradient-signal: linear-gradient(118deg, var(--c-signal-200) 0%, var(--c-signal-500) 40%, var(--c-signal-700) 100%); /* luz em papel: branco é invisível, então a luz inverte para ink — a mesma regra do acento. Continua a variar só valor, nunca hue. */ --gradient-light: linear-gradient(118deg, var(--c-gray-900) 0%, rgba(20,19,18,0.20) 30%, var(--c-gray-600) 66%, var(--c-gray-900) 100%); --glow-gradient: var(--gradient-light); /* obrigatório: --glow-gradient resolve onde é DECLARADO, então o :root fixaria o branco e o ink acima seria código morto */ --glow-tint: rgba(20, 19, 18, 0.14); --glow-tint-2: rgba(20, 19, 18, 0.26); --status-online: #c2e368; --status-online-bg: color-mix(in srgb, var(--status-online), transparent 86%); --status-ondeck: var(--c-yellow-500); --status-ondeck-bg: color-mix(in srgb, var(--status-ondeck), transparent 86%); --status-warning: #f5e000; --status-warning-bg: color-mix(in srgb, var(--status-warning), transparent 86%); --status-progress: var(--c-azure-500); --status-progress-bg: color-mix(in srgb, var(--status-progress), transparent 86%); --status-offline: #e9048b; --status-offline-bg: color-mix(in srgb, var(--status-offline), transparent 86%); /* ALERTA — o laranja voltou, e voltou como ESTADO, não como cor de marca. A aposentadoria de 24-jul tirou o laranja do acento; isto aqui é outra coisa: o tom de alarme e destrutivo-armado, que a casa já usava cru em `key.css` (255,77,0) sem token nenhum. Registrado em 24-ago-2026 depois de o Eduardo cobrar o ícone laranja na tecla em falha. NÃO usar como acento decorativo — só onde algo deu errado ou vai doer. */ --status-alert: #ff4d00; --status-alert-rgb: 255, 77, 0; --status-alert-bg: color-mix(in srgb, var(--status-alert), transparent 86%); --focus-ring: var(--c-gray-900); --glass-bg: rgba(20, 19, 18, 0.07); --glass-bg-hover: rgba(20, 19, 18, 0.11); --glass-edge: rgba(20, 19, 18, 0.10); } /* ===================================================================== GLOW VARIATION — SIGNAL (opt-in via [data-glow="signal"]) --------------------------------------------------------------------- O azul guardado. O default da casa para detalhes é LUZ BRANCA (`--gradient-light`); ponha `data-glow="signal"` em , numa seção ou numa peça e todo o gradiente decorativo dentro dela volta ao azul. Repõe só os três ponteiros `--glow-*` (+ as paradas da timeline) — surfaces, ink e status ficam intactos, e `.signal-dot` é azul sempre. ===================================================================== */ [data-glow="signal"] { --glow-gradient: var(--gradient-signal); --glow-tint: var(--signal-tint); --glow-tint-2: var(--signal-tint-2); } /* ===================================================================== ALT ACCENT — TEAL (opt-in via [data-accent="teal"]) --------------------------------------------------------------------- A calmer, dark-leaning accent (~#62b3aa). Add data-accent="teal" on (alone, or with the light theme). Overrides only the accent role tokens — surfaces, ink and status are untouched. ===================================================================== */ [data-accent="teal"] { --accent: var(--c-teal-500); --accent-hover: var(--c-teal-400); --accent-press: var(--c-teal-300); --accent-tint: rgba(98, 179, 170, 0.16); --accent-tint-2: rgba(98, 179, 170, 0.24); --accent-ink: #0c0c0c; --focus-ring: var(--c-teal-400); } [data-theme="light"][data-accent="teal"] { --accent: var(--c-teal-500); --accent-hover: var(--c-teal-600); --accent-press: var(--c-teal-700); --accent-tint: var(--c-teal-50); --accent-tint-2: var(--c-teal-100); --accent-ink: var(--c-white); --focus-ring: var(--c-teal-500); } /* ===================================================================== ALT ACCENT — SIGNAL BLUE (opt-in via [data-accent="blue"]) --------------------------------------------------------------------- Promotes the secondary house colour to the accent role for views that need a chromatic focal point. Same discipline: one accent per view. ===================================================================== */ [data-accent="blue"] { --accent: var(--c-signal-500); --accent-hover: var(--c-signal-300); --accent-press: var(--c-signal-600); --accent-tint: rgba(47, 107, 245, 0.16); --accent-tint-2: rgba(47, 107, 245, 0.26); --accent-ink: var(--c-white); --focus-ring: var(--c-signal-300); } [data-theme="light"][data-accent="blue"] { --accent: var(--c-signal-600); --accent-hover: var(--c-signal-500); --accent-press: var(--c-signal-700); --accent-tint: var(--c-signal-050); --accent-tint-2: rgba(35, 80, 179, 0.18); --accent-ink: var(--c-white); --focus-ring: var(--c-signal-600); } /* ---- tokens/typography.css ---- */ /* =========================================================================== machado.group — Typography --------------------------------------------------------------------------- Families, weights, and a fixed type scale. Steps pair a size with a line-height and tracking; consume via the .h1 / .text-body / .mono-label utilities in components/type.css, or read the raw tokens directly. =========================================================================== */ :root { /* ---- families --------------------------------------------------------- */ /* The system uses TWO faces: DISPLAY GROTESK (Aeonik-like — display, headings AND body prose, the core brand face) and MONO (UI chrome, labels, numerals, console). Serif and sans are retired: --font-serif is kept as an alias to the grotesk so existing references resolve to the new face, and --font-sans is aliased to mono. Nothing new should reach for either. */ --font-display: 'Hanken Grotesk', 'Aeonik', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; /* geometric grotesk — display / headings / core */ --font-serif: var(--font-display); /* retired — aliased to the display grotesk */ --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace; --font-mono-tech: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace; /* technical mono — chrome, labels, data */ /* CONSOLE — a face de terminal, e ela existe separada por medição, não por gosto [vector, 24-ago-2026, pedido dele via opdash: "a tipografia que vai dentro do terminal é uma tipografia típica de terminal… algo similar ao terminal atual do VS Code"]. O `.log` do runbook JÁ era mono e ainda assim não lia como terminal: o --font-mono da casa começa em IBM Plex Mono, que é mono de DOCUMENTO — contraste alto, terminações humanistas, desenhada para texto corrido. A do console é de grade fechada e desenho de máquina. NÃO se resolve trocando --font-mono: isso arrastaria junto todo rótulo mono da casa — selo, tabela, legenda, número. Por isso é token próprio, e por isso só o terminal o usa. Sem webfont de propósito: é a face do sistema, a mesma que o VS Code usa por default neste Mac. Custo zero de carregamento, e a familiaridade é o ponto. A ORDEM É MEDIDA, não copiada de um snippet [24-ago]: · `ui-monospace` NÃO pode vir primeiro. No Chromium ele resolve para a fonte fixa padrão (Courier), não para a SF Mono — e como casa sempre, a lista morre nele e nunca chega no Menlo. O log sairia em Courier. · `SF Mono` não é acessível por nome ao browser no macOS (é de sistema, restrita). Fica na lista por higiene, mas não conta com ela. · `Menlo` é o que existe de verdade aqui e é o default do VS Code no macOS. Por isso vem primeiro. Medido no próprio pane: Menlo mede 101,14px onde a lista com ui-monospace à frente media 84,47 — o mesmo valor do fallback genérico, que é como se descobre que a face pedida nunca entrou. */ /* CLOCK — o número do painel. [escolha dele, 25-ago-2026, olhando sete candidatas lado a lado no material do painel: "let's use Monaco for numbers with this style of board".] Não é capricho de fonte: dígito de mono de CÓDIGO tem ombro redondo e zero oval, e num painel de LED isso lê como texto, não como mostrador. O de Monaco é fechado e reto — o mesmo desenho dos relógios de cabeceira, que é exatamente a referência que ele pediu. Fica SEPARADO do --font-mono de propósito: o número do painel é a única coisa da casa que quer este desenho. Rótulo, tabela e legenda continuam no mono de sempre; misturar os dois numa frase corrida seria pior que não ter token nenhum. Sem webfont: Monaco é de sistema neste Mac. Custo zero, e foi medida ao vivo antes da escolha — três das candidatas instaladas nem chegam ao browser pelo nome (Aeion, GC Robuto, GC Monoglitch), e a IBM Plex Mono do --font-mono também não: cai no fallback há tempos. */ /* O RELÓGIO CONTINUA MONACO — decisão dele de 24-ago, e não foi reaberta: a VCR ganhou a prova do PAINEL, não a do número grande. Onde os dois se encontram (o número DENTRO de uma pílula), quem manda é o painel, e por isso `.badge__n` lê --font-console, não este token. 'Courier New' saiu da cauda pela mesma medida que a tirou do console. */ --font-clock: Monaco, Menlo, ui-monospace, monospace; /* A FACE DO PAINEL — VCR OSD Mono na frente desde 25-ago-2026 (c9). A cauda perdeu a 'Courier New': ela mediu 9,01 de tinta contra 13,22 da VCR, a ÚLTIMA das 14 medidas, e estava justamente no último degrau da pilha — o dia em que caísse nela, cairia na pior. Monaco e Menlo são as duas mais densas depois da VCR, e são as que ficam. */ --font-console: 'VCR OSD Mono', Monaco, Menlo, 'SF Mono', SFMono-Regular, ui-monospace, monospace; /* O CORPO DO CONSOLE — 12px, e é token porque 10px era o PISO sendo usado como alvo [vector, 10-set-2026, ordem dele olhando o Drift Ops: "painel retro tá defasado, com legibilidade ruim"]. retro-panel-led.md mede: a 10px sobre malha de passo 4 o traço da VCR tem 0,8px contra uma linha escura de 1px — a letra não escurece, some. Todo painel de instrumento estava cravando 10px porque era o número que o documento cita como mínimo, e mínimo virou default sem ninguém decidir. 12px é onde a letra ganha da malha. Quem consome escreve `var(--fs-console)`, nunca o número: é a alavanca única para o dia em que a malha ou a face mudarem. */ --fs-console: 12px; /* @kind font */ --font-numeric: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace; /* ALL numerals — figures, data, stats, counters */ --font-sans: var(--font-mono-tech); /* retired — aliased to mono */ /* ZERO CONSUMIDORES NA FONTE desde 28-set-2026 [vector, ordem dele olhando os Cards da OpDeck: "não tenho hierarquia… parece bula de remédio"]. O alias mandava PROSA para mono sem ninguém pedir: .accordion-item__body, título, feature, input e o próprio body do base.css. Cada consumidor foi apontado pelo PAPEL — prosa → --font-body, rótulo/chrome → --font-mono-tech — e o alias fica só para não quebrar consumidor fora da fonte. Nome de papel, nunca de família: quem escreve --font-sans hoje está pedindo o erro. */ /* semantic body face — GROTESK. Prosa é grotesk; a mono fica com chrome, rótulo, número e console. [vector, 05-set-2026, ordem dele: "por que que cê tá usando essa fonte? Essa fonte tá errada", olhando prosa em mono numa página que colou o mg-head.] Até hoje --font-body apontava para --font-mono-tech, e o `body` do mg-head aplicava isso sozinho: TODA página da casa nascia com prosa em mono sem ninguém pedir. Quem precisa de mono no corpo pede explícito — [data-body="mono"] no container, ou .text-mono num bloco. */ --font-body: var(--font-display); /* ---- weights (restrained: light→semibold, no black) ------------------- */ --weight-light: 300; /* @kind font */ --weight-regular: 400; /* @kind font */ --weight-medium: 500; /* @kind font */ --weight-semibold: 600; /* @kind font */ /* PESO DO RÓTULO EM CAIXA ALTA — 21-ago-2026, pedido do Eduardo. MECÂNICA, não gosto: caixa alta pequena com tracking largo perde peso APARENTE — as letras afastam e o traço fino some, sobretudo no escuro. A correção é peso real, não corpo maior: subir o tamanho faria o rótulo competir com o dado, que é o que um rótulo nunca pode fazer. Existe como TOKEN e não como 600 espalhado por treze folhas porque a pergunta "quanto pesa um rótulo desta casa" tem que ter UM lugar. Herança era a causa raiz: 22 das 30 regras não declaravam peso nenhum e herdavam --weight-light (300) do body. */ --weight-label: 500; /* @kind font — 500 desde 19-set-2026: ordem dele 08-set ("bold não excessivo, mediano"); os utilitários de type.css já estavam em 500 e o token ficou em 600 sozinho */ /* ---- tracking --------------------------------------------------------- */ --tracking-tight: -0.02em; /* @kind font */ --tracking-snug: -0.01em; /* @kind font */ --tracking-normal: 0em; /* @kind font */ --tracking-wide: 0.08em; /* @kind font */ --tracking-wider: 0.14em; /* @kind font */ --tracking-numeric: -2px; /* @kind font */ /* numerals only (test) */ /* ---- type scale : size / line-height ---------------------------------- */ /* display — the big end. Titles live at 120px by default (`.title`); the 4xl/mega steps are for posters, hero covers and full-bleed statements. */ --fs-mega: 200px; --lh-mega: 0.90; /* @kind font */ --fs-display-4xl: 160px; --lh-display-4xl: 0.92; /* @kind font */ --fs-display-3xl: 120px; --lh-display-3xl: 0.96; /* @kind font */ /* = .title */ --fs-display-2xl: 72px; --lh-display-2xl: 1.04; /* @kind font */ --fs-display-xl: 56px; --lh-display-xl: 1.06; /* @kind font */ --fs-display-lg: 44px; --lh-display-lg: 1.08; /* @kind font */ /* headings */ --fs-h1: 34px; --lh-h1: 1.12; /* @kind font */ --fs-h2: 28px; --lh-h2: 1.18; /* @kind font */ --fs-h3: 22px; --lh-h3: 1.25; /* @kind font */ --fs-h4: 18px; --lh-h4: 1.33; /* @kind font */ /* body */ --fs-lede: 24px; --lh-lede: 1.45; /* @kind font */ /* standfirst / subhead */ --fs-body-lg: 18px; --lh-body-lg: 1.6; /* @kind font */ --fs-body: 16px; --lh-body: 1.6; /* @kind font */ /* O PÉ DA ESCADA SUBIU EM 04-set-2026. [ele: "as fontes estão muito pequenas de uma forma geral"] O topo nunca foi o problema — ninguém reclama de um h1. A dor mora aqui embaixo, e por duas razões que se somam: 1 · O PÉ ESTAVA COMPRIMIDO. body-sm 14 · caption 13 · label 12 · label-sm 11: quatro degraus dentro de 3px. Um degrau de 1px não é hierarquia — o olho não separa 13 de 12, então a tela inteira lê como um bloco só de letra miúda. Era escada no papel e rampa na tela. 2 · ELES CARREGAM O TRABALHO. Rótulo, legenda, carimbo e eyebrow são justamente o que se lê em ferramenta de operação — e é a camada que estava mais apertada, no degrau de tinta mais fraco (ver a escada de `--ink` em colors.css, corrigida no mesmo dia). Letra pequena com pouco contraste não soma: multiplica. A escada nova abre 1px real entre cada degrau e sobe o piso de 11 para 12. O topo (lede, body-lg, body) não se move: ele estava certo. */ --fs-body-sm: 15px; --lh-body-sm: 1.55; /* @kind font */ --fs-caption: 14px; --lh-caption: 1.45; /* @kind font */ /* labels (mono) */ --fs-label: 13px; --lh-label: 1.2; /* @kind font */ /* 12px é o PISO da tipografia da casa — e não confundir com o piso de 10px do RETRO PANEL LED, que é outra conta: lá o limite é a malha comendo o traço da VCR; aqui é leitura de rótulo em tela de trabalho. */ --fs-label-sm: 12px; --lh-label-sm: 1.2; /* @kind font */ /* data (pixel) */ --fs-data-lg: 48px; --lh-data-lg: 1.0; /* @kind font */ --fs-data: 28px; --lh-data: 1.0; /* @kind font */ } /* ---- tokens/spacing.css ---- */ /* =========================================================================== machado.group — Spacing --------------------------------------------------------------------------- One scale, 4px base. Negative space is a deliberate element — reach for the larger steps generously. Use for padding, margin, and gap. =========================================================================== */ :root { --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; /* layout */ --container-max: 1200px; --gutter: var(--space-6); /* RITMO DE SECÇÃO — 21-set-2026, do rascunho "Dandelion" (DesignSystem #spacers) e do dandelion-site, onde vivia como token local. As secções alternam page / raised / sunken; a profundidade é só tom, e o vão entre elas é um destes degraus: hero 0→x2 · intro xl→x3 · sticky x2 (x3 na home) · carrossel x2 · painel, newsletter, fecho e rodapé 0→x2. */ --pad-x: clamp(20px, 2.78vw, 40px); --sy-xs: clamp(1.25rem, 1.0714rem + .8929vw, 1.875rem); --sy-sm: clamp(1.875rem, 1.6964rem + .8929vw, 2.5rem); --sy-md: clamp(2.5rem, 2.2857rem + 1.0714vw, 3.25rem); --sy-lg: clamp(3.25rem, 2.75rem + 2.5vw, 5rem); --sy-xl: clamp(5rem, 4.6429rem + 1.7857vw, 6.25rem); --sy-x2: clamp(6.25rem, 5.3571rem + 4.4643vw, 9.375rem); --sy-x3: clamp(9.375rem, 8.4821rem + 4.4643vw, 12.5rem); } /* ---- tokens/radius.css ---- */ /* =========================================================================== machado.group — Radius --------------------------------------------------------------------------- Tightened, uniform scale: containers read RECTANGULAR. Every surface caps at 15px, the smallest detail is 4px — nothing in between drifts soft. Pills and status lights stay fully round. No "rounded-everything". **30-jul-2026:** os três passos de container subiram 5px (10 → 15) por decisão do Eduardo. Controlos (input, botão) e o detalhe mínimo não mexeram — a distância entre um card e um botão passou a ser legível. **08-out-2026 18:4x:** os três passos de container subiram de novo, 15 → 24, ordem dele (via opdeck, verbatim): "adotar 24px como padrão… até para as tools da casa… precisamos de um padrão… mudou em um, muda em todos". É o canto dos cards da Crew na OpDeck, e a ESCADA INTEIRA sobe junto no mesmo fator 1,6, como ele mandou na OpDeck ("container e botão… a proporção mantenha a mesma. O que é quadrado permanece quadrado"): 4→6 · 6→10 · 8→12 · 12→20 · 15→24. O fio (hair 2) e a pílula (999) não mudam. A OpDeck fazia isso por cima (RAIO_OPDECK, cliente/build.py); agora é a fonte, e o override dela fica redundante. Ajuste fino daqui pra frente: SÓ NESTE ARQUIVO. =========================================================================== */ :root { /* O FIO DE CABELO — só na camada de INSTRUMENTO (Retro Panel LED). Não é um degrau novo da escala de container: é a resposta à MALHA. O canto reto absoluto deixa o pixel do vértice ligado sozinho contra a trama de LED, e 2px é o menor raio que apaga esse pixel sem o mostrador voltar a ler como etiqueta. Site de cliente, deck, proposta e social não usam — lá não há malha, e sem malha isto é só um canto arredondado sem razão. [09-set-2026 · escolha dele: "2px só na camada de instrumento, como token"] */ --radius-hair: 2px; /* painel de LED — pílula, aviso, chip de instrumento */ --radius-xs: 6px; /* tags, tiny chips, smallest detail (4 → 6, 08-out-2026) */ --radius-sm: 10px; /* inputs, buttons, segmented cells (6 → 10) */ --radius-md: 12px; /* compact cards, menus (8 → 12) */ --radius-ml: 20px; /* (12 → 20, 08-out-2026) card em grade, mídia em card — o degrau que faltava entre 8 e 15 (Dandelion, 10-set-2026; com fallback, não sobe contrato) */ --radius-lg: 24px; /* cards — the container maximum (15 → 24, 08-out-2026) */ --radius-xl: 24px; /* large surfaces / panels */ --radius-2xl: 24px; /* hero panels */ --radius-pill: 999px; /* pills, badges, status dots */ } /* ---- tokens/shadows.css ---- */ /* =========================================================================== machado.group — Elevation & Glow --------------------------------------------------------------------------- Shadows are soft, low, and diffuse — never "shadow soup". The signature is the status GLOW ("luzinha"): a colored bloom behind a live status light, used sparingly to draw the eye. =========================================================================== */ :root { /* soft neutral elevation (dark default) */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40), 0 2px 6px rgba(0, 0, 0, 0.40); --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.40), 0 8px 24px rgba(0, 0, 0, 0.50); --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.45), 0 18px 48px rgba(0, 0, 0, 0.60); /* inner hairline that reads as a crisp edge on raised cards */ --shadow-edge: inset 0 0 0 1px var(--line); /* focus ring (offset halo) — MORTO NA BASE desde 21-set-2026 (ordem dele: foco é branco, glow só na fonte, sem sombra). Fica só pra instrumento legado. */ --shadow-focus: 0 0 0 3px var(--accent-tint), 0 0 0 1px var(--accent); /* status glows — the "luzinha" bloom */ --glow-online: 0 0 0 3px var(--status-online-bg), 0 0 12px 1px rgba(63, 164, 94, 0.45); --glow-warning: 0 0 0 3px var(--status-warning-bg), 0 0 12px 1px rgba(245, 184, 30, 0.45); --glow-offline: 0 0 0 3px var(--status-offline-bg), 0 0 12px 1px rgba(229, 64, 59, 0.55); /* progress ("working") — FLAT core + thick lighter-blue soft border + a faint displacement shadow behind. No gloss. */ --glow-progress: 0 0 0 2px var(--c-azure-300), 0 0 5px 2px color-mix(in srgb, var(--c-azure-300), transparent 40%), 0 0 13px 4px color-mix(in srgb, var(--c-azure-300), transparent 72%); } [data-theme="light"] { /* soft neutral elevation (light) */ --shadow-xs: 0 1px 2px rgba(20, 19, 18, 0.05); --shadow-sm: 0 1px 2px rgba(20, 19, 18, 0.05), 0 2px 6px rgba(20, 19, 18, 0.05); --shadow-md: 0 2px 4px rgba(20, 19, 18, 0.05), 0 8px 24px rgba(20, 19, 18, 0.07); --shadow-lg: 0 4px 8px rgba(20, 19, 18, 0.05), 0 18px 48px rgba(20, 19, 18, 0.10); } /* =========================================================================== O HALO — uma lei, três corpos (21-ago-2026) --------------------------------------------------------------------------- A casa acende o que responde, e só quando a mão chega. Em repouso nada pisca: a tinta é morna e pinta tudo sem um ponto de luz. O hover é o único momento em que a casa acende COR PLENA — e é por isso que ele lê como energia, e não como mais um degrau da escada de tons. POR QUE ESTE BLOCO EXISTE. A lei do brilho do botão foi escrita em 14-ago dentro de `guidelines/control-glow.card.html` — numa CARTA, não no sistema. Quando o campo (`.fld`) precisou de halo em 21-ago, nasceu um segundo vocabulário para a mesma ideia, porque o primeiro não estava onde se procura. Duas leis para o mesmo gesto é como um sistema começa a mentir. Aqui elas viram uma; a carta e o componente passam a LER daqui. O TOM É DE QUEM ACENDE. `--glow-tone` é um TRIPLETO R,G,B — os corpos compõem-no com o seu próprio alfa. O default é branco pleno (#fff, o `--accent`), NUNCA o osso `#f4f2ec`: é a cor plena que faz a luz ler como luz. Um botão com tom próprio troca o triplo e herda tempo e forma. OS TRÊS CORPOS, e a diferença entre eles é medida, não gosto: ARESTA o botão acende o CONTORNO. Duas camadas: um anel curto e um bloom largo e fraco. É o que faz uma pastilha escura parecer ligada. CORPO a peça sólida que a mão agarra — barrinha do slider, botão do interruptor, amostra de cor. Halo CURTO e quase cheio: largo espalha e some no fundo escuro; curto lê como FILAMENTO. A coisa está acesa, não iluminada. LED, não abajur. TEXTO valor e rótulo. Mais fraco que o corpo porque halo em tipografia miúda vira borrão antes de virar brilho. E acende SEMPRE por `text-shadow`: mudar o peso no hover faz a linha saltar. =========================================================================== */ :root { --glow-tone: 255, 255, 255; /* @kind other */ --glow-edge: 0 0 12.6px 0 rgba(var(--glow-tone), .392), 0 0 30.8px 7px rgba(var(--glow-tone), .14); /* @kind shadow */ /* o LIGADO tem uma terceira camada — um bloom muito largo e fraco. É ele que faz o estado ligado ler à distância sem clarear a pastilha. */ --glow-edge-on: 0 0 12.6px 0 rgba(var(--glow-tone), .56), 0 0 30.8px 7px rgba(var(--glow-tone), .28), 0 0 64.4px 14px rgba(var(--glow-tone), .14); /* @kind shadow */ --glow-body: 0 0 6px 0 rgba(var(--glow-tone), .95); /* @kind shadow */ --glow-text: 0 0 5px rgba(var(--glow-tone), .85); /* @kind shadow */ --glow-text-soft: 0 0 4px rgba(var(--glow-tone), .55); /* @kind shadow */ /* CORPO PEQUENO (≤ 12px) — duas camadas, não uma. [03-set-2026, palavra dele sobre o OPS de um cliente: "esfumaçado, sem contraste"] Uma camada de 5px a .85 lê como fósforo num corpo grande. Num traço de 0,8px ela é NÉVOA em volta da letra: o halo cobre mais área que o glifo e a peça borra em vez de acender. A separação em duas resolve pela função — o NÚCLEO curto e quase opaco é o que faz a letra parecer acesa, e o HALO largo e fraco é o que a solta do fundo. Uma camada só tenta fazer as duas coisas e não faz nenhuma. Em currentColor de propósito: quem usa isto (badge, readout, campo) já pinta o próprio tom, e um --glow-tone fixo obrigaria a repintar o par nos nove lugares que hoje o repetem à mão. */ --glow-text-sm: 0 0 2px color-mix(in srgb, currentColor 85%, transparent), 0 0 6px color-mix(in srgb, currentColor 28%, transparent); /* @kind shadow */ } /* ---- tokens/motion.css ---- */ /* =========================================================================== machado.group — Motion --------------------------------------------------------------------------- Restrained and quick. Mostly opacity + small translate, ease-out. No bounce, no spring, no decorative loops (the one exception: a slow status pulse). =========================================================================== */ :root { /* durations */ --dur-instant: 80ms; /* @kind other */ --dur-fast: 120ms; /* @kind other */ --dur-base: 200ms; /* @kind other */ --dur-slow: 320ms; /* @kind other */ --dur-slower: 480ms; /* @kind other */ --dur-snap: 1000ms; /* @kind other */ /* carrossel assenta no slide — Dandelion, 10-set-2026 */ --dur-reveal: 1800ms; /* @kind other */ /* mídia revela por clip-path — Dandelion, 10-set-2026 */ --dur-enter: 800ms; /* @kind other */ /* texto entra: título gigante, painel de aba, reveal de texto — Dandelion, 11-set-2026 */ /* easing */ --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* @kind other */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */ --ease-in: cubic-bezier(0.4, 0, 1, 1); /* @kind other */ --ease-linear: linear; /* @kind other */ /* EASE DAS PEÇAS DE SCROLL — decisão dele, 10-set-2026, contra a recomendação do vector (que era o --ease-out expo). power3.out do GSAP = 1 − (1−t)³ = easeOutCubic; em CSS é cubic-bezier(.215,.61,.355,1). É a curva das 18 páginas do bundle Dandelion e da gramática de movimento (regra 2, "one ease"). Vale para stack, pinned, sticky-rule, text-fill, carousel snap. Hover e transição curta continuam em --ease-standard / --ease-out. */ --ease-scroll: cubic-bezier(.215, .61, .355, 1); /* @kind other */ /* common composed transitions */ --transition-colors: color var(--dur-fast) var(--ease-standard), background-color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard); --transition-transform: transform var(--dur-base) var(--ease-standard); } /* signature slow pulse for live status lights */ @keyframes mg-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } } /* first-tick blink for empty tick-bars (TickBar .is-zero) */ @keyframes tick-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.15; } } @media (prefers-reduced-motion: reduce) { :root { --dur-instant: 0ms; /* @kind other */ --dur-fast: 0ms; /* @kind other */ --dur-base: 0ms; /* @kind other */ --dur-slow: 0ms; /* @kind other */ --dur-slower: 0ms; /* @kind other */ --dur-snap: 0ms; /* @kind other */ --dur-reveal: 0ms; /* @kind other */ --dur-enter: 0ms; /* @kind other */ } } /* ---- tokens/led.css ---- */ /* =========================================================================== machado.group — A RESOLUÇÃO DA MALHA DE LED --------------------------------------------------------------------------- Retro Panel LED é a linguagem de instrumento da casa (retro-panel-led.md): caixa preta, canto reto, fósforo com glow, e uma MALHA por cima que faz o texto parecer um mostrador em vez de uma etiqueta. Até 02-set-2026 essa malha era código repetido: 40+ gradientes espalhados por 12 componentes e 6 páginas, cada um com o passo cravado (3px, 4px, 5px) e a linha escura cravada em 1px. Não havia o que calibrar sem editar 40 lugares, e por isso ela nunca foi calibrada — ficou no primeiro chute. A MECÂNICA, e ela contraria a intuição --------------------------------------------------------------------------- A malha ESCURECE O VÃO entre os LEDs. Ela não pinta o ponto aceso — pintar o ponto exigiria alinhar a grade ao glifo, e a grade quebra a cada troca de fonte, corpo ou zoom. Consequência: a 10px a haste da VCR OSD Mono mede ~0,8px e a linha escura media 1px. A linha era MAIS GROSSA que a letra. O texto pequeno não ficava escuro — ficava CORTADO, e nenhuma dose de contraste resolvia, porque não era falta de contraste, era subtração de traço. E diminuir a célula sozinho PIORA: no passo 3 a linha ocupa 33% da área, no passo 4 ocupa 25%. Célula menor com a mesma linha = mais preto. Por isso a alavanca principal é o TRAÇO, não o passo. OS TRÊS TOKENS --------------------------------------------------------------------------- --led-traco px a espessura da linha escura. É ela que corta. --led-k fator multiplica o passo de cada peça. Multiplicador, e não valor absoluto, de propósito: a calibragem RELATIVA entre as peças (3px no campo, 4px na pílula, 5px no aviso) foi comprada com leitura e fica de pé. O knob move todas na mesma proporção. --led-malha fator multiplica a opacidade .9 da grade. A CALIBRAGEM, e de onde ela vem --------------------------------------------------------------------------- Ele achou o número na tela, com os três knobs provisórios do masthead da Opdash, em 02-set-2026 — e mandou fixar. Não é um valor derivado de conta: é MEDIÇÃO na superfície, que é a única prova que vale para composição. --led-traco: .30px ⅓ da linha antiga. Some sob a haste em vez de comê-la, e a textura continua legível. --led-k: .50 célula na metade — 4px→2px, 3px→1,5px. Só funciona porque o traço caiu junto; sozinha, dobraria o preto. --led-malha: 1.30 a grade mais forte. Com a linha fina, a malha podia subir sem cobrar leitura — e é ela que segura a matéria de painel que o traço fino quase apagou. Os três se compram juntos: um sozinho quebra os outros dois. COMO SE MEXE NISTO --------------------------------------------------------------------------- Aqui, e só aqui. Nenhum componente volta a cravar 1px ou um passo em px sem passar por estes tokens — foi o que custou os 40 lugares. Peça que precise de um passo próprio declara `--panel-passo` no seu escopo; o multiplicador continua valendo por cima. Ver também: 00_context/tint.md (a lei do rótulo) e machado.group/design-system/retro-panel-led.md (a linguagem). =========================================================================== */ :root { --led-traco: .30px; /* @kind other */ --led-k: .50; /* @kind other */ --led-malha: 1.30; /* @kind other */ } /* a resolução da malha de LED — calibrada na tela em 02-set */ /* ---- tokens/version.css ---- */ /* =========================================================================== machado.group — Selo de versão --------------------------------------------------------------------------- Um projeto consumidor carrega uma CÓPIA deste sistema (a pasta `_ds/`), não um link vivo. Sem selo, não há como olhar um projeto e saber que versão ele tem — só arqueologia no código. Estes dois tokens respondem isso. `--ds-contract` é o número que importa: sobe UMA vez por mudança que quebra contrato (classe renomeada, componente removido, markup obrigatório novo). Se o número do consumidor é menor que o daqui, há trabalho a fazer, e o `sync.md` diz exactamente qual. `--ds-version` é a data do último toque. Regra: quem mexer em contrato sobe o número AQUI e escreve a linha no `sync.md`. Sem isso o selo mente, e um selo que mente é pior que nenhum. =========================================================================== */ :root { --ds-version: "2026-09-09"; /* @kind other */ --ds-contract: 11; /* @kind other */ } /* ---- components (vanilla HTML + CSS, token-driven) -------------------- */ /* ---- components/base.css ---- */ /* =========================================================================== machado.group — Base --------------------------------------------------------------------------- Minimal reset + document defaults wired to tokens. Sets the warm paper surface, ink color, and the sans family as the document baseline. =========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--surface-page); color: var(--ink); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--weight-regular); letter-spacing: var(--tracking-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "ss01", "cv01"; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6, p, figure { margin: 0; } a { color: inherit; text-decoration: none; } ::selection { background: var(--accent); color: var(--accent-ink); } /* @kit:foco:inicio — o gerar-mg-kit.py copia daqui até o fim do marcador pro mg-kit. Sem isto, página montada com os blocos ganhava o anel AZUL do navegador (29-set-2026, ele no visualizador de imagens: "remova esses elementos azuis"). */ /* FOCO DA CASA: BRANCO, GLOW SÓ NA FONTE, SEM SOMBRA — ordem dele 21-set-2026 ("a cor de foco vai ser branco, com um pouquinho de glow só na fonte. Não quero nenhum efeito de acessível, shadow, sombra"). O halo de acento saiu; o que acende é o texto do elemento focado. Peça com foco próprio (nav, input, pager) declara o seu; instrumento LED continua com a régua do painel. */ :focus-visible { outline: none; box-shadow: none; text-shadow: var(--glow-text-sm); } /* O ÍCONE ACENDE JUNTO — 28-set-2026 [vector, achado do harvest na auditoria do Runbook do HBF: botão SÓ COM ÍCONE ficava sem foco nenhum, porque o glow da casa é `text-shadow` e ali não há texto para acender]. A ordem dele de 21-set fica INTEIRA — branco, glow só na fonte, sem efeito de acessível, sem sombra. Isto é a mesma matéria aplicada ao traço: `drop-shadow` de deslocamento ZERO na cor do próprio ícone é GLOW, não sombra projetada. Sem outline, sem halo, sem offset, sem cor nova. Vale também em botão com texto: o ícone acende junto com a letra, que é o que a peça já parecia prometer. */ :focus-visible svg { filter: drop-shadow(0 0 2px currentColor); } /* @kit:foco:fim */ /* tabular figures everywhere numbers matter by default */ .tnum { font-variant-numeric: tabular-nums; } /* =========================================================================== VÍDEO DECORATIVO — contrato (2026-07-27) --------------------------------------------------------------------------- Vídeo decorativo NUNCA depende de mix-blend-mode para esconder o próprio fundo. A composição entra ASSADA no arquivo, UM ARQUIVO POR TEMA, com o fundo do arquivo batendo com o do container (desvio ≤ 1/255). Em CSS o clip fica neutro: filter:none · opacity:1 · mix-blend-mode:normal. Por quê (medido): webm VP9 não carrega canal alpha no Safari, e o WebKit de iOS compõe vídeo numa camada de GPU que IGNORA o blend — o retângulo opaco aparece no aparelho. Não reproduz em Chromium nem em WebKit headless (esses compõem por software e aplicam o blend): defeito visual de Safari/iOS só se valida no APARELHO. Receita de bake e teto de peso em readme.md → Media. Marcação: data-decor="light|dark" no