/* Fonte única dos tokens do design system (Identidade Visual §6.1). Escrito à mão, versionado. Consumido por: - templates/base.html e templates/base_error.html (shell e telas legadas) - as páginas React, pelo mesmo do base.html, dentro do qual elas montam — o bundle NÃO importa este arquivo, que viraria uma segunda cópia com hash no S3 - o alias `@tokens` do Vite, para quem não tem base.html (Storybook) Este arquivo declara TOKENS e nada mais: nenhum nome `--bs-*` mora aqui. A tradução dos tokens para o vocabulário do Bootstrap é do `bootstrap-bridge.css`, que carrega depois do `bootstrap.min.css` e explica por quê. Misturar as duas coisas fazia este arquivo ser dono de nomes que não define. Nenhum valor aqui é inventado: cada bloco aponta a seção do design system que o define. Cor nova não nasce neste arquivo; nasce lá. */ @font-face { font-family: "Jost"; /* Caminho RELATIVO ao CSS — nunca /static/, que em produção é resolvido contra o domínio da aplicação, que não serve estáticos (§4.3). Sem `tech(variations)`: é sintaxe do CSS Fonts 4, e o navegador que não a conhece descarta o componente inteiro — sobrando nenhum, o `@font-face` fica sem fonte e a página cai no stack do sistema, sem erro e sem 404. O `format("woff2")` sozinho já serve uma fonte variável. */ src: url("../fonts/jost-variable.woff2") format("woff2"); font-weight: 400 700; /* faixa da variável usada pelo design system */ font-display: swap; /* texto visível já no primeiro paint */ font-style: normal; } :root { /* ─── Escala primária — verde (§3.3) ─────────────────────────────────── */ --color-primary-50: #f9fced; --color-primary-100: #f0f9d2; --color-primary-200: #e2f2a6; --color-primary-300: #cded4a; /* marca */ --color-primary-400: #bde336; --color-primary-500: #9dc11b; /* marca */ --color-primary-600: #83a117; --color-primary-700: #6d8613; --color-primary-800: #627911; /* mínimo para texto verde sobre branco */ --color-primary-900: #42510b; /* ─── Escala neutra — cinza (§3.4) ───────────────────────────────────── */ --color-neutral-0: #ffffff; --color-neutral-25: #fafafa; --color-neutral-50: #f6f6f6; --color-neutral-100: #ededed; --color-neutral-200: #dedede; --color-neutral-300: #bfbfbf; --color-neutral-400: #999999; --color-neutral-500: #757575; --color-neutral-600: #575757; --color-neutral-900: #303030; /* marca */ --color-neutral-950: #1f1f1f; /* ─── Escala de erro — vermelho (§3.5) ───────────────────────────────── */ --color-danger-50: #fdf0ef; --color-danger-100: #f9d5d2; --color-danger-500: #e44134; --color-danger-600: #b42318; --color-danger-700: #901c13; --color-danger-800: #71160f; /* ─── Escala de aviso — amarelo (§3.6) ───────────────────────────────── */ --color-warning-50: #fffaeb; --color-warning-100: #fff2cc; --color-warning-300: #ffe699; --color-warning-500: #ffc107; --color-warning-700: #a37a00; --color-warning-800: #8f6b00; /* ─── Escala de andamento — azul (§3.7) ──────────────────────────────── */ --color-progress-50: #edf4fc; --color-progress-100: #d8e6f9; --color-progress-300: #9fc2ef; --color-progress-500: #3a81df; --color-progress-600: #2068c5; --color-progress-700: #1b58a7; --color-progress-800: #164788; --color-progress-900: #103360; /* ─── Tokens semânticos (§3.9) ─────────────────────────────────────────── Componente nenhum referencia a escala acima diretamente: usa os papéis abaixo. É isso que permite acrescentar tema escuro sem tocar em componente. */ /* Superfícies */ --surface-app: var(--color-neutral-50); /* fundo da página */ --surface-raised: var(--color-neutral-0); /* card, modal, input */ --surface-sunken: var(--color-neutral-100); /* thead, área inativa */ --surface-inverse: var(--color-neutral-950); /* sidebar, tooltip */ --surface-hover: var(--color-neutral-25); --surface-selected: var(--color-primary-50); --surface-inverse-hover: rgb(255 255 255 / 0.06); --surface-inverse-selected: rgb(157 193 27 / 0.15); --overlay-backdrop: rgb(48 48 48 / 0.5); /* Texto */ --text-primary: var(--color-neutral-900); --text-secondary: var(--color-neutral-600); --text-tertiary: var(--color-neutral-500); --text-disabled: var(--color-neutral-400); --text-on-primary: var(--color-neutral-900); /* sobre verde */ --text-on-danger: var(--color-neutral-0); /* sobre vermelho */ --text-on-warning: var(--color-neutral-900); /* sobre amarelo */ --text-on-inverse: var(--color-neutral-0); /* sobre sidebar */ --text-link: var(--color-primary-800); --text-error: var(--color-danger-600); /* Bordas */ --border-default: var(--color-neutral-200); --border-strong: var(--color-neutral-500); --border-input: var(--color-neutral-500); --border-hover: var(--color-neutral-600); --border-focus: var(--color-neutral-900); --border-error: var(--color-danger-500); /* Borda do próprio botão preenchido: um degrau escuro da cor que ele já tem, para o botão ter aresta definida sem depender do fundo da página. Espelha `--text-on-primary`/`--text-on-danger`: "sobre" a cor, não a cor. Decisão de 24/09/2026 (§3.2): todo botão tem borda, menos o `link`. */ --border-on-primary: var(--color-primary-700); --border-on-danger: var(--color-danger-800); /* A variante de aviso nasceu na ponte do Bootstrap legado, para as telas que ainda pedem um botão amarelo. Mesmo papel dos dois acima: "sobre" a cor, não a cor. `--status-warning-icon` tem o pixel idêntico, mas é papel de ÍCONE — usá-lo como borda amarraria duas famílias sem motivo. */ --border-on-warning: var(--color-warning-700); /* Ações O preenchido verde CLAREIA no hover e no active, e o vermelho escurece: cada um se move na direção que preserva o contraste com o texto da própria variante. O verde é claro e leva texto escuro (`--text-on-primary`), então descer a escala apagava o texto — medido em 24/09/2026, `--color-primary-600` dava 4,45:1 e `--color-primary-700`, 3,19:1, os dois abaixo do mínimo de 4,5:1. Subindo, dão 8,93:1 e 9,94:1. O vermelho leva texto branco e continua descendo, onde já estava certo (8,89:1 e 11,51:1). Decisão da §3.2 da Identidade Visual. */ --action-primary: var(--color-primary-500); --action-primary-hover: var(--color-primary-400); --action-primary-active: var(--color-primary-300); --action-danger: var(--color-danger-600); --action-danger-hover: var(--color-danger-700); --action-danger-active: var(--color-danger-800); /* Estados — cinco papéis, sete tokens cada surface fundo de alerta muted fundo de badge border borda de alerta fg texto sobre surface/muted solid pílula, evento, marcador on-solid texto sobre solid icon ícone sobre surface */ /* Um degrau mais fundo que as demais variantes, de propósito. O verde da marca é um verde-AMARELO (matiz 72°) e o aviso é amarelo (45°): nos tints mais claros os dois viram o mesmo creme. Medido em 24/09/2026, sucesso contra aviso: com `primary-50` a diferença é ΔE2000 3,7 — a faixa em que só se percebe comparando lado a lado; com `primary-100` sobe para 10,2. Decisão da §3.2 da Identidade Visual. */ --status-success-surface: var(--color-primary-100); --status-success-muted: var(--color-primary-100); --status-success-border: var(--color-primary-300); --status-success-fg: var(--color-primary-900); --status-success-solid: var(--color-primary-500); --status-success-on-solid: var(--color-neutral-900); --status-success-icon: var(--color-primary-800); --status-progress-surface: var(--color-progress-50); --status-progress-muted: var(--color-progress-100); --status-progress-border: var(--color-progress-300); --status-progress-fg: var(--color-progress-800); --status-progress-solid: var(--color-progress-600); --status-progress-on-solid: var(--color-neutral-0); --status-progress-icon: var(--color-progress-600); --status-warning-surface: var(--color-warning-50); --status-warning-muted: var(--color-warning-100); --status-warning-border: var(--color-warning-300); --status-warning-fg: var(--color-neutral-900); --status-warning-solid: var(--color-warning-500); --status-warning-on-solid: var(--color-neutral-900); --status-warning-icon: var(--color-warning-700); --status-danger-surface: var(--color-danger-50); --status-danger-muted: var(--color-danger-100); --status-danger-border: var(--color-danger-100); --status-danger-fg: var(--color-danger-800); --status-danger-solid: var(--color-danger-600); --status-danger-on-solid: var(--color-neutral-0); --status-danger-icon: var(--color-danger-600); --status-info-surface: var(--color-neutral-50); --status-info-muted: var(--color-neutral-100); --status-info-border: var(--color-neutral-200); --status-info-fg: var(--color-neutral-600); /* Um degrau mais escuro que as demais superfícies neutras, e com texto BRANCO. Em `--color-neutral-400` o badge "Sem definição" ficava sem destaque nenhum — saltava só 2,85:1 da linha branca da tabela — e a fonte branca nem era possível ali (2,85:1, reprova). No degrau 500 o branco lê em 4,61:1 e o badge salta o mesmo tanto. Conserta também a barra de 4px do alerta informativo, que estava em 2,64:1 contra a própria superfície e agora vai a 4,26:1. Decisão de 27/09/2026 (§3.2). */ --status-info-solid: var(--color-neutral-500); --status-info-on-solid: var(--color-neutral-0); --status-info-icon: var(--color-neutral-600); /* Foco — cinza-escuro sobre fundo claro, verde claro sobre escuro: um anel verde sobre botão verde seria invisível (§3.9). */ --focus-ring: var(--color-neutral-900); --focus-ring-inverse: var(--color-primary-300); --focus-ring-width: 2px; --focus-ring-offset: 2px; /* ─── Tipografia (§4.2) ────────────────────────────────────────────────── A fallback é o stack de sistema: se a Jost falhar, a página continua legível sem mudança de layout perceptível. */ --font-sans: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* Escala de tamanho (§4.5) — base 16px, com o line-height já pareado. `--font-size-*` é tamanho; `--text-*`, acima, é cor. */ --font-size-xs: 0.75rem; /* 12px */ --font-size-sm: 0.875rem; /* 14px */ --font-size-base: 1rem; /* 16px */ --font-size-lg: 1.125rem; /* 18px */ --font-size-xl: 1.25rem; /* 20px */ --font-size-2xl: 1.5rem; /* 24px */ --font-size-3xl: 1.875rem; /* 30px */ --font-size-4xl: 2.25rem; /* 36px */ --line-height-xs: 1rem; /* 16px */ --line-height-sm: 1.25rem; /* 20px */ --line-height-base: 1.5rem; /* 24px */ --line-height-lg: 1.75rem; /* 28px */ --line-height-xl: 1.75rem; /* 28px */ --line-height-2xl: 2rem; /* 32px */ --line-height-3xl: 2.375rem; /* 38px */ --line-height-4xl: 2.75rem; /* 44px */ /* ─── Ícones (§5.2) ──────────────────────────────────────────────────── */ --icon-sm: 16px; --icon-md: 20px; /* padrão */ --icon-lg: 24px; --icon-xl: 48px; /* ─── Espaçamento — base 4px (§6.2) ──────────────────────────────────── */ --space-0: 0; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ /* ─── Raio (§6.2) ────────────────────────────────────────────────────── */ --radius-sm: 0.25rem; /* 4px — checkbox, pílula de calendário */ --radius-md: 0.375rem; /* 6px — PADRÃO dos controles */ --radius-lg: 0.5rem; /* 8px — card, modal, popover */ --radius-xl: 0.75rem; /* 12px — card de destaque */ --radius-full: 9999px; /* — badge, pill, avatar */ /* ─── Sombra (§6.2) — tingida com o carvão da marca, não preto puro ──── */ --shadow-sm: 0 1px 2px 0 rgb(48 48 48 / 0.06); --shadow-md: 0 2px 4px -1px rgb(48 48 48 / 0.08), 0 1px 2px -1px rgb(48 48 48 / 0.06); --shadow-lg: 0 8px 16px -4px rgb(48 48 48 / 0.10), 0 2px 4px -2px rgb(48 48 48 / 0.06); --shadow-xl: 0 16px 32px -8px rgb(48 48 48 / 0.14), 0 4px 8px -4px rgb(48 48 48 / 0.08); /* ─── Transição (§6.2) ───────────────────────────────────────────────── */ --duration-fast: 120ms; /* hover, foco */ --duration-normal: 200ms; /* abrir/fechar, expandir */ --duration-slow: 320ms; /* drawer, sheet */ --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* ─── Alvos de toque e altura de controle (§6.2) ─────────────────────── */ --tap-target-min: 44px; /* mínimo absoluto de qualquer alvo tocável */ /* Medidas que a especificação fixa em px, e que estavam escritas à mão nos componentes — o que a regra do §6 proíbe e o teste de cada componente deveria ter pego. Tokenizadas em 4/10/2026, depois de um review achar nove delas. */ --size-choice-box: 18px; /* caixa do Checkbox e do RadioGroup — §9 e §10 */ --size-choice-dot: 8px; /* ponto do RadioGroup marcado — §10 */ --size-list-max-h: 320px; /* lista do Combobox — §7 */ --size-tooltip-max-w: 280px; /* §23 */ --size-dialog-sm: 400px; /* §24 */ --size-dialog-md: 560px; --size-dialog-lg: 720px; --size-dialog-xl: 960px; --size-switch-track-w: 36px; /* trilho do Switch — §11 */ --size-switch-track-h: 20px; --size-switch-thumb: 16px; /* botão do Switch */ --size-filter-field-min: 192px; /* base (flex-basis) de um campo do FilterBar — §31 */ --row-height-comfortable: 48px; /* linha de tabela confortável — §12 */ --control-height-sm: 32px; /* compacto — só em densidade alta, desktop */ --control-height-md: 40px; /* PADRÃO no desktop (ponteiro fino) */ --control-height-lg: 44px; /* PADRÃO no touch (ponteiro grosso) */ /* ─── Camadas (§6.2) ───────────────────────────────────────────────────── Valores COPIADOS do Bootstrap 5.2.2 deste projeto, para que um popover React e um modal Bootstrap possam coexistir na mesma página. Uma escala "parecida" põe um Dialog React na camada do backdrop do Bootstrap. */ --z-dropdown: 1000; /* .dropdown-menu */ --z-sticky: 1020; /* .sticky-top */ --z-fixed: 1030; /* .fixed-top */ --z-drawer-backdrop: 1040; /* .offcanvas-backdrop */ --z-drawer: 1045; /* .offcanvas */ --z-backdrop: 1050; /* .modal-backdrop */ --z-modal: 1055; /* .modal */ --z-popover: 1070; /* .popover */ --z-tooltip: 1080; /* .tooltip */ --z-toast: 1090; /* .toast-container */ /* ─── Medidas de layout (Layout §3.3) ──────────────────────────────────── Declaradas como alvo. O shell legado ainda não as consome: adotar os 256px move o menu inteiro e é trabalho da migração React. */ --layout-sidebar-width: 16rem; /* 256px */ --layout-topbar-height: 3.5rem; /* 56px — só < lg */ --layout-content-max: 80rem; /* 1280px */ --layout-content-max-wide: none; /* listagens e dashboard */ }