/* * Design tokens — fatia 12a do redesign. * * Fonte da paleta: D-22 (decisão de 04/09/2026), que adotou o esquema * "Systemic Precision" de `novo/DESIGN dashboard_tecnico.md` e revogou D-20. * * Este arquivo NÃO estiliza componentes. Ele só declara as variáveis que as * fatias seguintes (12b, macros; 12c, páginas) vão consumir. Manter a camada * de tokens separada é o que permite trocar a paleta inteira sem varrer 59 * templates — e é também o que evita que o redesign vire 59 edições manuais * divergentes. * * O Bulma continua sendo o framework (o briefing §11 proíbe trocá-lo sem * justificativa técnica); os tokens são uma camada por cima dele. */ /* --------------------------------------------------------------------------- Fontes vendorizadas --------------------------------------------------------------------------- Baixadas para static/vendor/fonts/ de propósito, e não via Google Fonts: a CSP da aplicação define `font-src 'self'` e o app é um PWA offline-first — um para fonts.gstatic.com seria bloqueado pelo navegador e, mesmo sem CSP, quebraria a tipografia sem rede. São fontes VARIÁVEIS: um arquivo por subset cobre todos os pesos, então há 4 arquivos (188 KB no total) em vez de um por peso. ------------------------------------------------------------------------- */ @font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../vendor/fonts/hanken-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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../vendor/fonts/hanken-grotesk-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../vendor/fonts/inter-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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../vendor/fonts/inter-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* --------------------------------------------------------------------------- Tokens — tema claro (padrão) ------------------------------------------------------------------------- */ :root { /* Marca */ --cor-primaria: #0059c1; --cor-primaria-hover: #004395; --cor-primaria-container: #3273dc; --cor-sobre-primaria: #ffffff; --cor-secundaria: #006c47; --cor-secundaria-container: #7efabc; --cor-sobre-secundaria: #ffffff; --cor-terciaria: #b9172f; --cor-terciaria-container: #dc3545; --cor-sobre-terciaria: #ffffff; /* Superfícies — do fundo da página ao card mais elevado */ --superficie: #f9f9ff; --superficie-baixa: #f2f3fc; --superficie-media: #ededf7; --superficie-alta: #e7e7f1; --superficie-maxima: #e1e2eb; --superficie-cartao: #ffffff; --cor-texto: #191b22; --cor-texto-suave: #424753; --cor-borda: #c2c6d5; --cor-borda-forte: #727784; /* Navegação (shell da fatia 12d) — a sidebar é faixa de marca, não superfície de conteúdo: mesmo tom nos dois temas, por decisão do usuário (os mockups divergiam entre quase-preto e navy). O item ativo inverte para fundo claro, que é o unico ponto de alto contraste da barra e por isso se le como "voce esta aqui". */ --superficie-nav: #16203a; --superficie-nav-hover: #22304f; --superficie-nav-ativa: #e8eeff; --cor-sobre-nav: #b7c4de; --cor-sobre-nav-forte: #ffffff; --cor-sobre-nav-ativa: #0b3f80; --cor-borda-nav: #2b3856; /* Estados — semânticos, não decorativos: SLA vencido usa --cor-erro, não "vermelho", para o dia em que a paleta mudar. */ --cor-erro: #ba1a1a; --cor-erro-container: #ffdad6; --cor-sobre-erro: #ffffff; --cor-sucesso: #198857; --cor-atencao: #b06f00; --cor-info: #0059c1; /* Tipografia */ --fonte-titulo: 'Hanken Grotesk', 'Segoe UI', system-ui, sans-serif; --fonte-texto: 'Inter', 'Segoe UI', system-ui, sans-serif; --fonte-mono: 'JetBrains Mono', 'Cascadia Mono', Consolas, monospace; --texto-display: 2rem; /* 32px */ --texto-titulo: 1.25rem; /* 20px */ --texto-base: 0.875rem; /* 14px */ --texto-pequeno: 0.75rem; /* 12px */ --texto-rotulo: 0.6875rem; /* 11px */ /* Raio e sombra */ --raio-sm: 0.125rem; --raio: 0.25rem; --raio-md: 0.375rem; --raio-lg: 0.5rem; --raio-xl: 0.75rem; --raio-total: 9999px; --sombra-1: 0 1px 2px rgba(25, 27, 34, 0.08); --sombra-2: 0 2px 8px rgba(25, 27, 34, 0.10); --sombra-3: 0 8px 24px rgba(25, 27, 34, 0.12); /* Espaçamento */ --esp-1: 0.25rem; --esp-2: 0.5rem; --esp-3: 0.75rem; --esp-4: 1rem; --esp-5: 1.5rem; --esp-6: 2rem; --esp-8: 3rem; } /* --------------------------------------------------------------------------- Tokens — tema escuro --------------------------------------------------------------------------- O projeto já tinha alternância de tema (`data-theme` + localStorage, ver base.html), então os tokens precisam das duas variantes desde o início: uma paleta que só funcionasse no claro quebraria metade das telas para quem usa o modo escuro. O `DESIGN.md` traz apenas o esquema claro. O escuro abaixo foi derivado dele mantendo os papéis (primária continua sendo a cor de ação, terciária a de destaque negativo) e clareando as cores de marca para manter contraste legível sobre fundo escuro — o azul #0059c1 sobre #191b22 fica ilegível. ------------------------------------------------------------------------- */ [data-theme="dark"] { --cor-primaria: #adc6ff; --cor-primaria-hover: #d8e2ff; --cor-primaria-container: #004395; --cor-sobre-primaria: #001a42; --cor-secundaria: #60dda2; --cor-secundaria-container: #005234; --cor-sobre-secundaria: #002112; --cor-terciaria: #ffb3b2; --cor-terciaria-container: #92001f; --cor-sobre-terciaria: #410008; --superficie: #111318; --superficie-baixa: #191b22; --superficie-media: #1d1f26; --superficie-alta: #282a31; --superficie-maxima: #33353c; --superficie-cartao: #1d1f26; --cor-texto: #e1e2eb; --cor-texto-suave: #c2c6d5; --cor-borda: #424753; --cor-borda-forte: #8c919e; /* Identicos aos do tema claro: a barra de navegacao nao muda de tom entre temas — ver o comentario no :root. */ --superficie-nav: #16203a; --superficie-nav-hover: #22304f; --superficie-nav-ativa: #e8eeff; --cor-sobre-nav: #b7c4de; --cor-sobre-nav-forte: #ffffff; --cor-sobre-nav-ativa: #0b3f80; --cor-borda-nav: #2b3856; --cor-erro: #ffb4ab; --cor-erro-container: #93000a; --cor-sobre-erro: #690005; --cor-sucesso: #60dda2; --cor-atencao: #ffd28a; --cor-info: #adc6ff; --sombra-1: 0 1px 2px rgba(0, 0, 0, 0.40); --sombra-2: 0 2px 8px rgba(0, 0, 0, 0.45); --sombra-3: 0 8px 24px rgba(0, 0, 0, 0.50); } /* --------------------------------------------------------------------------- Aplicação mínima --------------------------------------------------------------------------- Só o que é global: tipografia base e fundo. Cores de componente ficam para a fatia 12b — aplicá-las aqui recriaria o problema que o fatiamento existe para evitar, com estilo de página espalhado na camada de tokens. ------------------------------------------------------------------------- */ html { background-color: var(--superficie); } body { font-family: var(--fonte-texto); font-size: var(--texto-base); color: var(--cor-texto); background-color: var(--superficie); } .title, .subtitle, h1, h2, h3, h4, h5, h6 { font-family: var(--fonte-titulo); color: var(--cor-texto); } /* Números de chamado, IDs e horários: tabular para as colunas não "dançarem" entre linhas na listagem. */ .dash-mono, .is-family-monospace { font-family: var(--fonte-mono); font-variant-numeric: tabular-nums; }