/* Substrato visual do produto: tokens, base e os componentes que as telas de hoje realmente usam. Portado de `specs/001-cadastro-estrutural/mockups/tokens.css`, que segue artefato de desenho e não implementação. A paleta, a tipografia e a escala de espaçamento vêm de lá sem alteração de valor. O que **não** veio é o que nenhuma tela renderiza ainda — tabela, badge, filtro, pop-up, régua de 24 h, topologia. Cada tela da T021 traz o componente que ela usa; folha com CSS morto é folha que ninguém confere. Duas adaptações à marcação real, e o motivo de cada uma: - o campo em erro é `[aria-invalid="true"]`, não `.campo--com-erro`. O módulo de tela marca o próprio input por atributo ARIA, que é o que o leitor de tela anuncia; exigir uma classe no invólucro obrigaria o JS a manter dois sinais para o mesmo fato, e eles divergiriam no primeiro descuido; - a casca é grade no ``, não numa `
`. O esqueleto tem um `
` só, e é nele que todo módulo monta — envolver a casca numa div exigiria a tela de login redeclarar esse contrato para escapar da grade. Com a classe no corpo, o login só troca `app` por `tela-login`. */ /* ─────────────────────────── FONTES ─────────────────────────── Auto-hospedadas de propósito. A CSP canônica traz `font-src 'self'` e `style-src 'self' 'unsafe-inline'`, sem domínio externo: puxar do Google Fonts como o mockup faz seria bloqueado pelo navegador, e afrouxar a política se decide no `SECURITY.md` §10, nunca dentro da folha de estilo. Newsreader e Space Grotesk são fontes variáveis de eixo completo — conferido por comparação de bytes entre o arquivo servido para um peso só e o servido para a faixa inteira: é o mesmo arquivo. Por isso a faixa em `font-weight`, que é a que o próprio Google declara. IBM Plex Mono é estática, e só o peso 400 entra porque só ele é usado aqui. As três estão sob a SIL Open Font License 1.1, conferida no repositório de cada uma. Texto e atribuição em `static/fonts/LICENCAS.md`. */ @font-face { font-family: "Newsreader"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("../fonts/newsreader-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Newsreader"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("../fonts/newsreader-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("../fonts/space-grotesk-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("../fonts/space-grotesk-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-mono-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-mono-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ─────────────────────────── TOKENS ─────────────────────────── */ :root { /* Paleta */ --paper: #fafbf7; --paper-2: #f4f5ef; --card: #ffffff; --ink: #15201a; --ink-soft: #4d5751; --ink-faint: #8a928c; --line: rgba(21, 32, 26, 0.1); --line-strong: rgba(21, 32, 26, 0.22); --primary: #2f5a3a; --primary-2: #3f7a4d; --primary-soft: #e3ece4; --accent: #b8543a; --gold: #b8860b; /* Derivados */ --accent-soft: #f7e9e5; --gold-soft: #f6efdc; --overlay: rgba(21, 32, 26, 0.45); /* Tipografia */ --font-display: "Newsreader", Georgia, "Times New Roman", serif; --font-body: "Space Grotesk", "Segoe UI", system-ui, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace; /* Espaçamento — base 4 */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; /* Raio */ --r-sm: 2px; --r: 4px; --r-lg: 6px; /* Estrutura */ --menu-w: 220px; --conteudo-max: 1100px; --toque-min: 44px; } /* ─────────────────────────── BASE ─────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; } a { color: var(--primary); text-decoration: none; border-bottom: 1px solid var(--line-strong); } a:hover { color: var(--primary-2); border-bottom-color: var(--primary-2); } :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--r-sm); } /* ─────────────────────── TIPOGRAFIA ─────────────────────── */ .t-display-xl { font-family: var(--font-display); font-weight: 400; font-size: 32px; line-height: 1.15; letter-spacing: -0.01em; margin: 0; } .t-display-l { font-family: var(--font-display); font-weight: 400; font-size: 24px; line-height: 1.2; margin: 0; } .t-body-sm { font-size: 13px; line-height: 1.5; color: var(--ink-soft); } .t-mono { font-family: var(--font-mono); font-size: 11px; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-faint); } /* ─────────────────────── CASCA ─────────────────────── */ .app { display: grid; grid-template-columns: var(--menu-w) 1fr; min-height: 100vh; } .menu { background: var(--paper-2); border-right: 1px solid var(--line); display: flex; flex-direction: column; padding: var(--s5) 0; } .menu__marca { font-family: var(--font-display); font-size: 22px; padding: 0 var(--s5) var(--s6); border-bottom: none; color: var(--ink); } /* O `