/* centralcom-design-system v0.16.0 (1c4a53a) — cópia carimbada, não edite */ /* ============================================================================ CentralCom · TOKENS — os VALORES (a fonte que você edita no dia a dia) ---------------------------------------------------------------------------- CSS puro, sem framework. `theme.css` importa este arquivo e faz a ponte com o Tailwind. Cor/espaço/fonte nova nasce AQUI. 3 camadas: 1) BRAND / NICHE → a fonte. `--brand-*`; cada nicho troca só isto. 2) SHADCN CONTRACT → deriva da marca. Nomes que o shadcn espera. 3) THEME → light (:root) e dark (.dark) trocam só superfícies. Trocar nicho: Trocar tema: Só existem os nichos declarados aqui embaixo. `data-niche` com valor desconhecido não é erro em CSS: a subárvore simplesmente fica com a marca master, em silêncio. O slug é contrato com o consumidor — ele vem de `clientes.nicho`. ============================================================================ */ :root { --radius: 0.75rem; --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); /* ───────── 1. BRAND / NICHE (a fonte — só isto muda por nicho) ───────── Croma de 4 casas em alguns degraus não é preciosismo: é a borda do sRGB. Acima dela o navegador reduz croma e pinta OUTRA cor, e aí o valor escrito deixa de ser o valor medido — que é o chão de toda a régua da regra 6. `node scripts/check-tokens.mjs` reprova quem passar da borda. */ --brand-100: oklch(0.93 0.0333 264); --brand-300: oklch(0.68 0.13 264); --brand-500: oklch(0.34 0.13 266); /* CentralCom ultramarine #18307A */ --brand-700: oklch(0.27 0.11 266); /* signal — a onda do mark: presença viva. FIXO como o chrome: não muda com tema nem com nicho. h352 é o único corredor de matiz livre do sistema (âmbar colide com warning 1.08:1, ciano com clinicas/info, h0 com destructive 1.07:1, h340 com chart-4 1.01:1). Regra de uso no AGENTS.md: sinal marca presença viva — nunca status, nunca botão primário. */ --signal-100: oklch(0.94 0.0348 352); --signal-300: oklch(0.72 0.18 352); --signal-500: oklch(0.62 0.22 352); /* magenta #E03694 */ --signal-700: oklch(0.5 0.2 352); /* ───────── 2. SHADCN CONTRACT (deriva da marca + neutros) ───────── */ --background: oklch(0.96 0.008 95); /* cream */ --foreground: oklch(0.16 0.012 270); /* ink */ --card: oklch(1 0 0); --card-foreground: var(--foreground); --popover: oklch(1 0 0); --popover-foreground: var(--foreground); --primary: var(--brand-500); /* botão primário = marca */ --primary-foreground: oklch(0.99 0.005 95); /* a marca COMO texto/ícone sobre superfície de conteúdo: aba ativa, link inline, ícone de ação. Existe separado de --primary-foreground porque aquele é o contrato shadcn e aponta para o lado contrário — é a tinta DENTRO do botão. Direção no nome, de propósito: o sufixo -foreground já carrega os dois sentidos neste arquivo, e "on-surface" só se lê de um jeito (`bg-primary-on-surface` sai obviamente errado). Por que não usar --primary: o --brand-500 dos nichos foi validado para BRANCO SOBRE ELE (fill), nunca para ele como texto — caía a 4.25 (portaria) e 4.28 (clinicas) no cream, issue #5. O degrau 700 é o que o repo já usa como marca em forma de tinta (--secondary-foreground, --accent-foreground); ele passa a matriz inteira: cream 13.71 master / 7.98 portaria / 8.76 clinicas, pior célula 12.15 / 7.07 / 7.77. Deriva de --brand-* para o white-label por tenant continuar trocando só a camada 1. */ --primary-on-surface: var(--brand-700); --secondary: oklch(0.92 0.01 95); --secondary-foreground: var(--brand-700); --muted: oklch(0.94 0.008 95); --muted-foreground: oklch(0.48 0.015 265); --accent: var(--brand-100); /* hover/realce suave */ --accent-foreground: var(--brand-700); --destructive: oklch(0.58 0.2 28); --destructive-foreground: oklch(0.487 0.19 28); /* 6.24:1 no cream; 4.84 na pior */ --border: oklch(0.89 0.008 90); --input: oklch(0.89 0.008 90); --ring: var(--brand-500); /* semânticos extra (além do shadcn) — status tem DOIS tokens, no precedente do --live/--live-foreground: a base é chão (dot, barra, fundo de chip); o -foreground é a variante AA-segura para texto e ícone. Texto de status usa SEMPRE o -foreground — as bases falham AA como texto no light (2.80/1.81/4.21). A validação roda na MATRIZ de superfícies de conteúdo (v0.13, ver AGENTS.md): --background, --card/--popover, --muted, --secondary e --accent (nas três variantes de marca), cada uma CRUA e com o tint do chip `bg-/10` por cima. Esse tint é o que o texto do chip realmente enxerga, e é o que a v0.12 não modelou: ela mediu sobre a superfície nua e o chip sobre o cream derrubava success a 4.36. Número à direita = pior célula da matriz. */ --success: oklch(0.64 0.16 150); --success-foreground: oklch(0.46 0.126 150); /* 5.99:1 no cream; 4.86 na pior */ --warning: oklch(0.78 0.13 75); --warning-foreground: oklch(0.49 0.103 75); /* 5.68:1 no cream; 4.80 na pior. Ainda âmbar (h75) — 1.78:1 de distância do --chart-2 laranja, longe da zona de colisão do corredor (1.01–1.08:1) */ --info: oklch(0.66 0.14 260); --info-foreground: oklch(0.48 0.14 260); /* 5.92:1 no cream; 4.83 na pior */ --overlay: oklch(0.16 0.012 270 / 50%); /* scrim atrás de dialogs */ --live: var(--signal-500); /* presença viva: Ao vivo, item ativo, badge de fila */ --live-foreground: var(--signal-700); /* texto/ícone "vivo" sobre superfície clara: 5.99:1 no cream, 4.69 na pior — passa a matriz sem lift próprio, então segue alias do signal-700 */ /* séries de gráfico — ordem categórica FIXA (nunca ciclar; 6º grupo vira "Outros"). Validada CVD/contraste ≥3:1 contra card light E dark (validate_palette.js da skill dataviz, 2026-07-14; chart-5 recortada rosa→teal em 2026-08-04 para não colidir com --signal, revalidada nos 6 checks). Cor de STATUS em gráfico continua sendo --success/--warning/--destructive — chart-* é só para IDENTIDADE de série. */ --chart-1: oklch(0.62 0.118 238); /* azul */ --chart-2: oklch(0.64 0.166 47); /* laranja */ --chart-3: oklch(0.61 0.129 163); /* verde */ --chart-4: oklch(0.61 0.219 293); /* violeta */ --chart-5: oklch(0.6 0.1024 205); /* teal — na borda do sRGB */ /* chrome — superfície de navegação (sidebar/shell). ULTRAMARINE MASTER fixo: não muda com tema nem com nicho (o nicho aparece só nos accents). */ --chrome: oklch(0.25 0.075 264); --chrome-foreground: oklch(0.93 0.01 95); --chrome-muted: oklch(0.7 0.045 264); --chrome-border: oklch(1 0 0 / 10%); --chrome-active: oklch(1 0 0 / 8%); /* tipografia */ --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* ───────── ESCALA TIPOGRÁFICA — primitivos + papéis ───────── Primitivos: só os degraus que faltam no Tailwind — a faixa densa 10–11px, que o consumo inventava na mão (text-[10px]/text-[11px]). Papéis: a API. Nomeiam intenção (page-title, kpi…), não tamanho, e carregam size/leading/tracking/weight. Papel NÃO carrega família — paree no consumo: hero e page-title + `font-display`; kpi + `font-mono tabular-nums`; code + `font-mono`; micro + `uppercase`. */ --type-3xs: 0.625rem; /* 10px */ --type-3xs-leading: 1.4; --type-2xs: 0.6875rem; /* 11px */ --type-2xs-leading: 1.45; --type-hero: clamp(2.25rem, 1.4rem + 3.4vw, 4.25rem); /* landing/marketing */ --type-hero-leading: 1.05; --type-hero-tracking: -0.03em; --type-hero-weight: 600; /* papéis de MARKETING (v0.16) — a landing precisava de dois degraus entre o hero e o corpo do produto e inventava clamp() na mão. headline = título de seção de página pública; lead = o parágrafo que acompanha hero/headline (lê-se de longe: 17–20px, não os 14px do produto). Pareamento: headline + font-display; lead + font-sans + --muted-foreground. */ --type-headline: clamp(1.5rem, 1.15rem + 1.6vw, 2.25rem); --type-headline-leading: 1.15; --type-headline-tracking: -0.02em; --type-headline-weight: 600; --type-lead: clamp(1.0625rem, 0.95rem + 0.5vw, 1.25rem); --type-lead-leading: 1.55; --type-page-title: 1.25rem; --type-page-title-leading: 1.3; --type-page-title-tracking: -0.025em; --type-page-title-weight: 600; --type-section-title: 0.875rem; --type-section-title-leading: 1.4; --type-section-title-weight: 600; --type-dialog-title: 1rem; --type-dialog-title-leading: 1.4; --type-dialog-title-tracking: -0.01em; --type-dialog-title-weight: 600; --type-body: 0.875rem; --type-body-leading: 1.5; --type-support: 0.75rem; /* texto de apoio — paree com --muted-foreground */ --type-support-leading: 1.45; --type-micro: var(--type-2xs); /* micro-label/overline em caps */ --type-micro-leading: 1.3; --type-micro-tracking: 0.06em; --type-micro-weight: 500; --type-nav: 0.8125rem; /* 13px — item de navegação */ --type-nav-leading: 1.4; --type-nav-weight: 500; --type-badge: var(--type-2xs); --type-badge-leading: 1.2; --type-badge-tracking: 0.01em; --type-badge-weight: 600; --type-kpi: 1.875rem; /* número glanceável */ --type-kpi-leading: 1; --type-kpi-tracking: -0.025em; --type-kpi-weight: 600; --type-code: 0.75rem; --type-code-leading: 1.5; /* ───────── ESPAÇAMENTO SEMÂNTICO + CONTROLE ───────── Nomeia o ritmo que o consumo já convergiu. Consumo Tailwind por sintaxe de var: p-(--space-page), gap-(--space-section), h-(--control-h) — ver comentário no theme.css sobre por que não há ponte @theme. Os valores abaixo são o modo COMPACT (default do sistema — telas de configurador); [data-density="comfortable"] os redefine, exceto --space-page, --space-modal-* e --space-field, que não variam. */ --space-page: 1.5rem; /* padding de página */ --space-section: 1rem; /* ritmo vertical entre blocos */ --space-card: 1rem; /* padding de card */ --space-modal-x: 1.25rem; /* dialog/drawer: header, body e footer */ --space-modal-y: 1rem; --space-field: 0.375rem; /* label ↔ controle */ --space-cell-x: 0.75rem; /* célula de tabela e toolbar — mesma coluna óptica */ --space-cell-y: 0.625rem; --control-h-sm: 2rem; --control-h: 2.25rem; /* input, select, button md */ --control-h-lg: 2.5rem; /* ───────── ELEVAÇÃO ───────── 5 degraus por intenção (não por tamanho) + 1 inset. Tint frio de ink (h270) em vez de preto puro — sombra da mesma família do chão. No dark a sombra some contra o fundo: cada degrau ganha hairline ring (ver .dark). */ --elevation-raised: 0 1px 2px 0 oklch(0.2 0.03 270 / 0.06); /* campo, superfície densa */ --elevation-card: 0 1px 3px 0 oklch(0.2 0.03 270 / 0.08), 0 1px 2px -1px oklch(0.2 0.03 270 / 0.06); --elevation-dropdown: 0 4px 12px -2px oklch(0.2 0.03 270 / 0.12), 0 2px 6px -2px oklch(0.2 0.03 270 / 0.08); --elevation-floating: 0 12px 28px -6px oklch(0.2 0.03 270 / 0.16), 0 4px 10px -4px oklch(0.2 0.03 270 / 0.08); /* picker, toast */ --elevation-modal: 0 24px 56px -12px oklch(0.2 0.03 270 / 0.24), 0 8px 16px -8px oklch(0.2 0.03 270 / 0.1); --elevation-sunken: inset 0 1px 2px 0 oklch(0.2 0.03 270 / 0.06); /* ───────── Z-INDEX ───────── Escada única — resolve a colisão real de tudo-em-z-50. Dropdown ACIMA de modal de propósito: menu aberto dentro de dialog é o caso comum (escada Radix); pressupõe overlay em portal. */ --z-raised: 10; /* destaque in-canvas: tooltip de chart, badge de editor */ --z-sticky: 20; /* header sticky de tabela/página */ --z-chrome: 30; /* sidebar, topbar */ --z-overlay: 40; /* scrim + painel lateral não-modal */ --z-modal: 50; /* dialog, drawer */ --z-dropdown: 60; /* menu, select, popover */ --z-toast: 70; --z-tooltip: 80; /* ───────── MOTION ───────── Curva da marca: saída rápida, chegada firme — resposta imediata, sem teatro. fast = micro-feedback (hover, cor); base = default do sistema; slow = entrada/saída de overlay e colapso. Reduced-motion zera os três no fim deste arquivo. */ --motion-fast: 100ms; --motion-base: 150ms; --motion-slow: 250ms; --motion-ease: cubic-bezier(0.2, 0, 0, 1); --motion-ease-exit: cubic-bezier(0.4, 0, 1, 1); /* acelera para fora de cena */ /* REVEAL (v0.16) — entrada de bloco em página pública (landing): o conteúdo sobe um pouco e aparece; itens irmãos entram em escada. É o único "teatro" que a marca admite, e mesmo assim curto: 500 ms, 16 px, 60 ms entre irmãos. Produto NÃO usa (lá é --motion-slow). Reduced-motion zera junto com os outros, no fim deste arquivo. */ --motion-reveal: 500ms; --motion-reveal-y: 16px; --motion-stagger: 60ms; } /* ───────── 3. DARK — sobrescreve só superfícies + lift do brand ───────── Aceita os dois mecanismos: classe `.dark` (padrão shadcn/next-themes) e atributo `[data-theme="dark"]`. Use o que preferir no app. */ .dark, [data-theme="dark"] { --background: oklch(0.16 0.012 270); --foreground: oklch(0.96 0.008 95); --card: oklch(0.2 0.014 268); --card-foreground: var(--foreground); --popover: oklch(0.2 0.014 268); --popover-foreground: var(--foreground); --primary: var(--brand-300); /* clareia no escuro pra contraste */ --primary-foreground: oklch(0.18 0.02 262); --primary-on-surface: var(--brand-300); /* no escuro o degrau que serve de tinta é o mesmo do fill: fundo 6.66 master / 9.34 portaria / 8.63 clinicas; pior célula 4.68 / 6.56 / 6.07 (o --accent, que na forma canônica hospeda --accent-foreground, não marca) */ --secondary: oklch(0.26 0.014 268); --secondary-foreground: oklch(0.96 0.008 95); --muted: oklch(0.26 0.014 268); --muted-foreground: oklch(0.7 0.015 265); --accent: oklch(0.3 0.03 262); --accent-foreground: oklch(0.96 0.008 95); --border: oklch(1 0 0 / 10%); --input: oklch(1 0 0 / 12%); --ring: var(--brand-300); /* status como texto no escuro: na matriz completa a pior superfície é o chip sobre --accent (o hover de linha/menu), que clareia o fundo em 0.30 de L. Ali as bases de success e info caem para 3.80/3.76 — só warning aguenta e segue apontando para a própria cor. Número à direita = pior célula. */ --destructive-foreground: oklch(0.72 0.17 28); /* 7.28:1 no fundo; 4.83 na pior */ --success-foreground: oklch(0.7 0.16 150); /* 7.75:1 no fundo; 4.77 na pior */ --warning-foreground: var(--warning); /* 9.53:1 no fundo; 5.55 na pior */ --info-foreground: oklch(0.725 0.14 260); /* 7.91:1 no fundo; 4.81 na pior */ --chrome: oklch(0.2 0.06 264); --chrome-border: oklch(1 0 0 / 8%); --overlay: oklch(0 0 0 / 60%); --live: var(--signal-300); /* aqui o .dark redefine as DUAS pontas do par, e é o único caso: o chip `bg-live/10` no escuro é tintado com o signal-300, a mesma cor do texto. Alias com a base, então, se derruba sozinho — 4.37 sobre --accent. Lift próprio, como destructive/success/info neste mesmo bloco. --live (o chão) não muda. */ --live-foreground: oklch(0.75 0.17 352); /* 8.05:1 no fundo; 4.91 na pior */ /* elevação no escuro: sombra preta mais forte + hairline ring — a sombra sozinha some contra o fundo; o anel devolve o contorno */ --elevation-raised: 0 0 0 1px oklch(1 0 0 / 0.06), 0 1px 2px 0 oklch(0 0 0 / 0.4); --elevation-card: 0 0 0 1px oklch(1 0 0 / 0.06), 0 1px 3px 0 oklch(0 0 0 / 0.5); --elevation-dropdown: 0 0 0 1px oklch(1 0 0 / 0.08), 0 4px 12px -2px oklch(0 0 0 / 0.55); --elevation-floating: 0 0 0 1px oklch(1 0 0 / 0.08), 0 12px 28px -6px oklch(0 0 0 / 0.6); --elevation-modal: 0 0 0 1px oklch(1 0 0 / 0.1), 0 24px 56px -12px oklch(0 0 0 / 0.7); --elevation-sunken: inset 0 1px 2px 0 oklch(0 0 0 / 0.5); /* séries de gráfico no escuro: passos próprios (revalidados contra o card dark), NÃO um flip automático do light */ --chart-1: oklch(0.64 0.113 239); --chart-2: oklch(0.65 0.158 50); --chart-3: oklch(0.63 0.125 166); --chart-4: oklch(0.66 0.184 294); --chart-5: oklch(0.65 0.1 207); } /* ───────── NICHOS — trocam APENAS a marca; o resto deriva sozinho ───────── Os aliases derivados precisam ser RE-DECLARADOS onde o data-niche é aplicado: var() resolve no elemento onde a propriedade é declarada, então `--primary: var(--brand-500)` do :root não re-resolve em subárvore. Este bloco faz o data-niche funcionar em QUALQUER subárvore (não só no html). */ [data-niche] { --primary: var(--brand-500); --primary-on-surface: var(--brand-700); --secondary-foreground: var(--brand-700); --accent: var(--brand-100); --accent-foreground: var(--brand-700); --ring: var(--brand-500); } /* as QUATRO combinações: classe ou atributo, no ancestral ou no mesmo elemento. A última faltava, e `` — que o README documenta — pegava fundo escuro com a marca do tema claro. */ .dark [data-niche], [data-theme="dark"] [data-niche], [data-niche].dark, [data-niche][data-theme="dark"] { --primary: var(--brand-300); --primary-foreground: oklch(0.18 0.02 262); --primary-on-surface: var(--brand-300); --secondary-foreground: oklch(0.96 0.008 95); /* desfaz o brand-700 do bloco claro acima: os dois têm a mesma especificidade e ele vinha DEPOIS do .dark, então botão secundário de nicho no escuro ficava com tinta escura sobre chão escuro (1.74:1) */ --accent: oklch(0.3 0.03 262); --accent-foreground: oklch(0.96 0.008 95); --ring: var(--brand-300); } [data-niche="portaria"] { /* Laranja segurança · operação 24/7. Marca/tile segue #F26A1F (SVGs); o 500 de UI é mais escuro (#C05008) desde a v0.12: botão primário light é branco sobre brand-500 e o laranja vivo ficava em 3.24:1 — agora AA 4.64:1. */ --brand-100: oklch(0.94 0.0355 55); --brand-300: oklch(0.78 0.13 50); --brand-500: oklch(0.57 0.16 45); --brand-700: oklch(0.42 0.1267 42); } [data-niche="clinicas"] { /* Teal-azul clínico · acolhimento técnico. Marca/tile segue #0E8FAE (SVGs); o 500 de UI é mais escuro (#1F7C94) desde a v0.12: branco sobre brand-500 ficava em 3.43:1 no light — agora AA 4.67:1. */ --brand-100: oklch(0.93 0.03 220); --brand-300: oklch(0.74 0.08 218); --brand-500: oklch(0.545 0.09 220); --brand-700: oklch(0.38 0.06 225); } /* ───────── DENSIDADE — dois modos, mecanismo no molde do data-niche ───────── Default do sistema (sem atributo) = compact: telas de configurador, padrão Linear/Stripe. Operador/NOC declara comfortable (glanceável) na subárvore. O bloco compact explícito existe para aninhar painel denso dentro de tela comfortable. Densidade toca só espaço/controle — texto não varia. */ [data-density="comfortable"] { --control-h: 2.5rem; --space-section: 1.5rem; --space-card: 1.25rem; --space-cell-x: 1rem; --space-cell-y: 0.75rem; } [data-density="compact"] { --control-h: 2.25rem; --space-section: 1rem; --space-card: 1rem; --space-cell-x: 0.75rem; --space-cell-y: 0.625rem; } /* ───────── REDUCED-MOTION — vale para todo consumidor de tokens.css ───────── 0.01ms, não 0: transitionend/animationend ainda disparam (lógica que espera o fim da transição não trava). animate-spin/pulse de loading não passam por estas vars — spinner continua girando, como deve. */ @media (prefers-reduced-motion: reduce) { :root { --motion-fast: 0.01ms; --motion-base: 0.01ms; --motion-slow: 0.01ms; --motion-reveal: 0.01ms; --motion-reveal-y: 0px; --motion-stagger: 0ms; } }