/* ============================================================ UbiSafe — FONTE ÚNICA dos tokens de design (--g-*) ============================================================ Por que este arquivo existe --------------------------- Até 11/08/2026 os tokens eram declarados DUAS vezes, em `styles.css` e em `app.css`, com NOVE deles carregando valores diferentes. Como `base.html` carrega o styles.css e o `{% block head %}` vem depois, o app.css sempre vencia — ou seja, quem decidia a aparência do sistema não era uma decisão de design, era a ordem dos no . Os nove conflitos foram resolvidos com o valor do `app.css`, e isso NÃO é escolha estética: é o valor que já vencia em 100% das páginas servidas. Congelar o vencedor atual é a única forma de fazer esta consolidação sem mudar um pixel. Trocar qualquer um deles depois (em especial `--g-ease` e `--g-font`, que mudam animação e métrica de texto em toda a aplicação) é decisão de design, separada, com comparação visual antes/depois. | token | styles.css antigo | escolhido (app.css) | |--------------------|---------------------------|------------------------| | --g-ease | cubic-bezier(.4,0,.2,1) | cubic-bezier(.2,.7,.3,1) | --g-font | incluía "Segoe UI Variable"/"Inter" | "Segoe UI" comum | --g-mono | "Cascadia Mono"… | ui-monospace… | --g-surface-3 | #eef2f7 | #f1f4f9 | --g-border-strong | #cbd2dc | #cfd6e2 | --g-success-soft | #dcfce7 | #e7f4ec | --g-warn-soft | #fef3c7 | #fbf0e2 | --g-danger-soft | #fee2e2 | #fbeaea | --g-topbar-2 | #131c2e | #111c30 Quem carrega ------------ `base.html` (47 telas) e, na mão, as 7 telas que não estendem base.html: login, criar_conta, criar_conta_ok, esqueci_senha, primeiro_acesso, alterar_senha. Sempre ANTES de styles.css/app.css. Regras ------ - Nenhum outro arquivo pode declarar `--g-*`. Travado por tests/test_css_tokens.py. - AS DUAS ESCALAS DE ESPAÇAMENTO NÃO SÃO INTERCAMBIÁVEIS. Elas coincidem só até o 4 (e no 6). `--g-8` é 32px e `--g-space-8` é 40px; `--g-12` é 48px e `--g-space-9` é 48px. Aliasar por número muda espaçamento na aplicação inteira, e quase mil atributos `style=""` nos templates dependem dos nomes atuais — nada disso aparece em grep de CSS. Também travado por teste. ============================================================ */ :root{ /* ---- Superfícies ---- */ --g-bg: #f5f7fa; --g-surface: #ffffff; --g-surface-2: #f8fafc; --g-surface-3: #f1f4f9; --g-border: #e3e7ee; --g-border-strong:#cfd6e2; /* aliases de sufixo "1" — usados por .g-lote-card/.g-timer-value/.g-radio-pill mas faltavam no :root (cards/cronômetros do operador apareciam sem fundo) */ --g-surface-1: var(--g-surface); /* ---- Texto ---- */ --g-text: #0f1a2b; /* primário */ --g-text-2: #4b5565; /* secundário */ /* #8c95a4 dava 3,02:1 no branco e 2,89:1 no surface-2 — reprovava no mínimo 4,5:1 da WCAG AA, e este token pinta hint, .dim, .muted, .g-helper, .g-card-sub, .g-empty-desc e o th das tabelas. #636D7A dá 5,25:1 / 5,02:1 e continua claramente abaixo do --g-text-2. */ --g-text-3: #636D7A; /* terciário / placeholder */ --g-text-inv: #e6eaf2; /* sobre navy */ --g-text-1: var(--g-text); /* ---- Marca ---- */ --g-brand: #1e40af; --g-brand-600: #1d4ed8; --g-brand-2: #1d4ed8; /* mesmo valor do -600, vocabulário do styles.css */ --g-brand-700: #1a37a0; --g-brand-soft: #eef2ff; --g-brand-ring: rgba(29,78,216,.32); /* ---- Status (semáforo) ---- */ --g-success: #15803d; --g-success-soft: #e7f4ec; --g-success-bd: #bfe3cc; --g-warn: #b45309; --g-warn-soft: #fbf0e2; --g-warn-bd: #f0d6b3; --g-danger: #b91c1c; --g-danger-soft: #fbeaea; --g-danger-bd: #f0cccc; --g-info: #1d4ed8; --g-info-soft: #eef2ff; --g-info-bd: #d4ddfb; --g-neutral: #4b5565; --g-neutral-soft: #eef1f6; --g-neutral-bd: #dde2ec; /* ---- Topbar ---- */ --g-topbar: #0b1320; --g-topbar-2: #111c30; --g-topbar-bd: #1e2a40; --g-topbar-border:#1a2436; /* vocabulário do styles.css (.g-topbar) */ --g-topbar-text: #e6eaf2; --g-topbar-text-2:#9aa3b3; --g-topbar-dim: #8893a8; /* ---- Tipografia ---- */ --g-font: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, Helvetica, Arial, sans-serif; --g-mono: ui-monospace, "SF Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Consolas, monospace; /* escala numérica (app.css) */ --g-fs-11: 11px; --g-fs-12: 12px; --g-fs-13: 13px; --g-fs-14: 14px; --g-fs-16: 16px; --g-fs-18: 18px; --g-fs-22: 22px; --g-fs-28: 28px; --g-fs-34: 34px; /* escala nominal (styles.css) — NÃO é a mesma coisa que a de cima */ --g-text-xs: 11px; --g-text-sm: 12.5px; --g-text-base: 14px; --g-text-md: 15px; --g-text-lg: 17px; --g-text-xl: 20px; --g-text-2xl: 26px; --g-text-3xl: 34px; --g-w-400: 400; --g-w-500: 500; --g-w-600: 600; --g-w-700: 700; --g-weight-regular: 400; --g-weight-medium: 500; --g-weight-semi: 600; --g-weight-bold: 700; /* ---- Espaçamento ---- DUAS escalas, de propósito. Coincidem até o 4 e no 6; divergem depois. Ver o aviso no cabeçalho: não aliasar uma na outra. */ --g-1: 4px; --g-2: 8px; --g-3: 12px; --g-4: 16px; --g-5: 20px; /* faltava: login/criar_conta_ok/retrabalho pediam e não tinham */ --g-6: 24px; --g-8: 32px; /* != --g-space-8 (40px) */ --g-12: 48px; /* == --g-space-9 */ --g-space-1: 4px; --g-space-2: 8px; --g-space-3: 12px; --g-space-4: 16px; --g-space-5: 20px; --g-space-6: 24px; --g-space-7: 32px; --g-space-8: 40px; --g-space-9: 48px; --g-space-10:64px; /* ---- Raio ---- */ --g-r-4: 4px; --g-r-8: 8px; --g-r-12: 12px; --g-r-16: 16px; --g-r-pill: 999px; --g-radius-xs: 4px; --g-radius-sm: 6px; --g-radius: 8px; --g-radius-lg: 12px; --g-radius-xl: 16px; --g-radius-pill:999px; /* ---- Alturas ---- */ --g-h-btn: 40px; --g-h-touch: 48px; --g-h-topbar: 56px; --g-h-input: 40px; /* mínimo 40px pra atender melhor touch — WCAG 2.5.5 */ --g-h-button: 40px; --g-h-button-touch: 48px; /* ---- Sombra ---- */ --g-sh-1: 0 1px 2px rgba(15,26,43,.06), 0 1px 1px rgba(15,26,43,.04); --g-sh-2: 0 1px 3px rgba(15,26,43,.08), 0 4px 12px rgba(15,26,43,.06); --g-sh-3: 0 8px 24px rgba(15,26,43,.12), 0 2px 6px rgba(15,26,43,.08); --g-sh-pop: 0 12px 32px rgba(11,19,32,.18); --g-shadow-xs: 0 1px 1px rgba(15,23,42,.04); --g-shadow-sm: 0 1px 2px rgba(15,23,42,.05), 0 1px 1px rgba(15,23,42,.03); --g-shadow: 0 1px 3px rgba(15,23,42,.07), 0 1px 2px rgba(15,23,42,.04); --g-shadow-md: 0 4px 8px rgba(15,23,42,.06), 0 2px 4px rgba(15,23,42,.04); /* ---- Motion ---- */ --g-ease: cubic-bezier(.2,.7,.3,1); --g-dur: 150ms; --g-fast: 120ms; --g-normal: 180ms; /* ---- Aliases de compatibilidade ---- Nomes que templates já usavam mas que NUNCA existiram em CSS nenhum, então a declaração inteira era descartada pelo browser. Viram alias em vez de cor nova: preserva a intenção de quem escreveu, sem inventar valor. --g-text-muted usado como texto secundário em retrabalho/materiais. --g-primary escrito com fallback #1E40AF, que é exatamente --g-brand. --g-warning escrito com fallback #D97706, o âmbar de atenção. (--g-5 subiu para a escala de espaçamento, onde é o lugar dele.) */ --g-text-muted: var(--g-text-2); --g-primary: var(--g-brand); --g-warning: var(--g-warn); }