/* =========================================================================== TOKENS DO SISTEMA DE GESTÃO --------------------------------------------------------------------------- 🔴 ESTE É O ÚNICO ARQUIVO DO PROJETO COM VALOR LITERAL. Nenhum `#hex`, nenhum `px` e nenhuma família de fonte pode ser escrita fora daqui, em nenhum componente, em nenhuma página e em nenhuma história. Para trocar uma cor no sistema inteiro: ache o token na seção 1, troque o valor, salve. A mudança alcança todas as telas, todos os componentes e o Storybook, porque ninguém mais guarda esse valor. Contrato: `docs/08-design-system.md`. Origem da identidade: `Diretrizes/50_Identidade/Sistema/sistema.css` e `docs/03-spec.md`, seções 5 e 5b. Nenhum valor foi aproximado. =========================================================================== */ :root { /* Dimensões das cinco composições da E1, ainda em avaliação. */ --e1-lateral-contexto: 208px; --e1-coluna-contexto: 208px; --e1-lateral-caderno: 176px; --e1-medida-ampla: 1440px; --e1-titulo-editorial: 48px; --e1-titulo-amplo: 56px; --e1-veu: rgb(28 35 33 / 0.4); color-scheme: light; /* 🔴 tema fixo, claro: nunca segue o navegador */ /* ------------------------------------------------------------------------- 1. COR. Curta de propósito: tinta, papel, fio, uma ação e um alarme. 🔴 Cinza novo, verde de sucesso e amarelo de aviso NÃO EXISTEM. O sistema diz sucesso com palavra e com posição, nunca com cor nova. ------------------------------------------------------------------------- */ --tinta: #1c2321; --tinta-fraca: #5b6360; --papel: #f5f6f4; --papel-alto: #ffffff; --fio: #dcdddc; /* 🔴 Conserto QA-B, 20/09/2026. Não é cor nova: é o `--tinta-fraca` de sempre, com um papel novo. `--fio` continua fino e claro como separador de conteúdo (tabela, cartão, gaveta); `--fio-campo` é a borda do campo de verdade (`input`, `select`, `textarea`), que a seção 7 do contrato exige a 3:1 e `--fio` sozinho não alcançava (medido: 1.26 a 1.36:1). */ --fio-campo: var(--tinta-fraca); --acao: #1b4f8a; --acao-press: #184679; --acao-fraca: #e8eff7; --alarme: #b3261e; --alarme-press: #9e211a; --alarme-fraco: #f0e5e3; /* ------------------------------------------------------------------------- 2. TIPOGRAFIA, por função. A grotesca conduz a interface; a serifa só aparece em leitura longa de verdade; a mono só em número, data, código e caminho de arquivo. ------------------------------------------------------------------------- */ --fonte-interface: "Bricolage Grotesque", "Archivo", ui-sans-serif, system-ui, sans-serif; --fonte-leitura: "Faustina", Charter, Georgia, serif; --fonte-dado: "Spline Sans Mono", ui-monospace, Menlo, monospace; --fonte-mao: "Caveat", cursive; /* A escala, com altura de linha e tracking travados por degrau. */ --t-0: 11px; --lh-0: 1.3; --tr-0: 0.01em; --t-1: 12px; --lh-1: 1.35; --tr-1: 0.06em; --t-2: 14px; --lh-2: 1.45; --tr-2: 0; --t-3: 16px; --lh-3: 1.55; --tr-3: 0; --t-4: 20px; --lh-4: 1.3; --tr-4: -0.01em; --t-5: 28px; --lh-5: 1.15; --tr-5: -0.02em; --t-6: 40px; --lh-6: 1.05; --tr-6: -0.03em; --peso-normal: 400; --peso-medio: 500; --peso-forte: 600; /* ------------------------------------------------------------------------- 3. ESPAÇO. Ritmo de 4px para o respiro interno. O módulo de 80px da identidade continua governando a grade, logo abaixo. ------------------------------------------------------------------------- */ --e-0: 4px; --e-1: 8px; --e-2: 12px; --e-3: 16px; --e-4: 24px; --e-5: 40px; --e-6: 64px; --e-7: 80px; /* ------------------------------------------------------------------------- 4. GRADE ------------------------------------------------------------------------- */ --modulo: 80px; --medida: 1120px; --calha: 24px; --lateral: 240px; --medida-leitura: 720px; --indice-leitura: 192px; --altura-indice: 72vh; --altura-indice-movel: 45dvh; --lh-leitura: 1.7; --respiro-secao-leitura: 100px; --respiro-secao-leitura-movel: 172px; --colunas: 12; /* ------------------------------------------------------------------------- 5. FORMA, FIO E ELEVAÇÃO. O padrão é canto reto: raio só no que flutua. 🔴 Sombra nunca separa conteúdo, isso é trabalho do fio. ------------------------------------------------------------------------- */ --raio-0: 0px; --raio-1: 4px; --raio-2: 8px; --fio-largura: 1px; --foco-largura: 2px; --foco-respiro: 2px; --sombra-flutuante: 0 8px 24px -8px rgb(28 35 33 / 0.18), 0 2px 6px -2px rgb(28 35 33 / 0.1); /* ------------------------------------------------------------------------- 6. MOVIMENTO. Curva da identidade. Tudo cai para 0ms em `prefers-reduced-motion`, no fim deste arquivo. ------------------------------------------------------------------------- */ --rapido: 120ms; --normal: 200ms; --curva: cubic-bezier(0.6, 0, 0.3, 1); /* ------------------------------------------------------------------------- 7. CAMADA ------------------------------------------------------------------------- */ --z-base: 0; --z-barra: 10; --z-gaveta: 20; --z-menu: 30; --z-dialogo: 40; --z-dica: 50; /* ------------------------------------------------------------------------- 8. ALVO. Acessibilidade: 44px é o mínimo de toque, e o alvo denso de 32px só vale dentro de linha, nunca como única forma de agir. ------------------------------------------------------------------------- */ --alvo: 44px; --alvo-denso: 32px; /* =========================================================================== 9. APELIDOS DE COMPATIBILIDADE --------------------------------------------------------------------------- 🔴 Estes não guardam valor: apontam para os tokens acima. Existem só enquanto o código antigo migra para os nomes em português, e saem quando a migração terminar. NÃO use nenhum deles em código novo. =========================================================================== */ --ink: var(--tinta); --muted: var(--tinta-fraca); --paper: var(--papel); --paper-raised: var(--papel-alto); --line: var(--fio); --accent: var(--acao); --accent-press: var(--acao-press); --accent-soft: var(--acao-fraca); --red: var(--alarme); --red-press: var(--alarme-press); --red-soft: var(--alarme-fraco); --sans: var(--fonte-interface); --serif: var(--fonte-leitura); --mono: var(--fonte-dado); --hand: var(--fonte-mao); --module: var(--modulo); --measure: var(--medida); --gutter: var(--calha); --radius: var(--raio-2); /* =========================================================================== 10. A PONTE PARA O SHADCN. Cada papel semântico aponta para um token acima, sem inventar cor nova. Onde o shadcn queria mais papéis do que a nossa tabela tem, o papel reusa `--acao-fraca`, nunca um cinza novo. =========================================================================== */ --background: var(--papel); --foreground: var(--tinta); --card: var(--papel-alto); --card-foreground: var(--tinta); --popover: var(--papel-alto); --popover-foreground: var(--tinta); --primary: var(--acao); --primary-foreground: var(--papel-alto); --secondary: var(--acao-fraca); --secondary-foreground: var(--acao-press); --muted-background: var(--papel-alto); --muted-foreground: var(--tinta-fraca); --accent-background: var(--acao-fraca); --accent-foreground: var(--acao-press); --destructive: var(--alarme); --destructive-foreground: var(--papel-alto); --border: var(--fio); --input: var(--fio-campo); --ring: var(--acao); --sidebar: var(--papel-alto); --sidebar-foreground: var(--tinta); --sidebar-primary: var(--acao); --sidebar-primary-foreground: var(--papel-alto); --sidebar-accent: var(--acao-fraca); --sidebar-accent-foreground: var(--acao-press); --sidebar-border: var(--fio); --sidebar-ring: var(--acao); } /* 🔴 Quem pede menos movimento recebe menos movimento, e o estado final aparece na hora. Não é enfeite: é a regra 7 do contrato. */ @media (prefers-reduced-motion: reduce) { :root { --rapido: 0ms; --normal: 0ms; } }