/* ============================================================= Adsumus — tokens.css Fonte única de cor, tipografia, espaçamento, raio e sombra. Nenhuma tela pode declarar valor próprio. Se falta um valor, ele nasce aqui, com nome e papel. Origem das cores: brand-spec.md (bundle CSS de grupoadsumus.com.br). ============================================================= */ :root{ /* ---- PAPEL 1 · ESTRUTURA — marinho ------------------------- Onde aparece: sidebar, cabeçalho de tabela, rodapé, topo de diálogo. Onde NUNCA aparece: preenchimento decorativo, fundo de card. */ --navy: oklch(0.302 0.061 257); --navy-nav: oklch(0.246 0.049 257); --navy-hi: oklch(0.360 0.061 257); --navy-line: oklch(0.330 0.045 257); --nav-fg: oklch(0.880 0.018 245); --nav-muted: oklch(0.720 0.028 240); --nav-section: oklch(0.640 0.032 240); /* ---- PAPEL 2 · DADO E ESTADO ATIVO — ciano ----------------- Onde aparece: trilho do item ativo, anel de foco, aba selecionada, série principal de gráfico, linha selecionada, "pendente de validação". Onde NUNCA aparece: botão primário, alerta. */ --cyan: oklch(0.627 0.104 225); --cyan-text: oklch(0.505 0.092 231); --cyan-dim: oklch(0.545 0.098 225); --cyan-soft: oklch(0.955 0.021 225); --cyan-border: oklch(0.880 0.045 225); /* ---- PAPEL 3 · AÇÃO — laranja ------------------------------ Onde aparece: o único botão sólido primário da tela; badge de contagem que exige ação. Onde NUNCA aparece: chip de status, fundo de tabela, gráfico decorativo. Laranja é botão — estado usa âmbar. */ --accent: oklch(0.706 0.186 48 ); --accent-hi: oklch(0.772 0.150 55 ); /* hover: +0.066 L, texto escuro segue legível */ --accent-down: oklch(0.660 0.170 46 ); --accent-text: oklch(0.498 0.148 42 ); /* texto laranja sobre claro — 4,5:1+ */ --accent-ink: oklch(0.215 0.045 45 ); /* tinta sobre preenchimento laranja */ --accent-soft: oklch(0.960 0.033 60 ); /* ---- PAPEL 4 · CRÍTICO — vermelho -------------------------- Onde aparece: vencido, reprovado, ocorrência crítica, posto descoberto, falha de integração, ação destrutiva. Onde NUNCA aparece: qualquer coisa que não seja risco real. Nunca é o único sinal — sempre com ícone e rótulo. */ --critical: oklch(0.577 0.208 27); --critical-text: oklch(0.492 0.186 27); --critical-hi: oklch(0.517 0.198 27); --critical-soft: oklch(0.962 0.024 25); --critical-border: oklch(0.878 0.070 25); --critical-ink: oklch(0.995 0.004 25); /* ---- ESTADO · ATENÇÃO — âmbar ----------------------------- Onde aparece: "a vencer", prazo se aproximando, pendência não bloqueante. Deliberadamente mais escuro e menos saturado que o laranja de ação, para nunca parecer clicável. Onde NUNCA aparece: botão, link, chamada para ação. */ --warning: oklch(0.505 0.096 75); --warning-soft: oklch(0.960 0.035 82); --warning-border: oklch(0.885 0.060 82); /* ---- ESTADO · REGULAR — verde discreto --------------------- Onde aparece: regular, ativo, conectado, aprovado. Onde NUNCA aparece: botão de sucesso, faixa decorativa, gráfico. */ --ok: oklch(0.520 0.098 160); --ok-soft: oklch(0.955 0.026 160); --ok-border: oklch(0.880 0.048 160); /* ---- ESTADO · INATIVO — cinza ------------------------------ Onde aparece: inativo, desligado, arquivado, módulo futuro. Onde NUNCA aparece: texto de corpo, rótulo de campo ativo, estado de hover (baixar contraste em hover é proibido). */ --muted: oklch(0.528 0.030 257); --muted-strong: oklch(0.452 0.032 257); --muted-soft: oklch(0.955 0.005 257); --muted-border: oklch(0.888 0.008 257); /* ---- SUPERFÍCIES ------------------------------------------ */ --bg: oklch(0.975 0.004 250); --surface: oklch(1 0 0 ); --surface-2: oklch(0.968 0.006 250); --surface-3: oklch(0.940 0.008 250); --fg: oklch(0.262 0.026 257); --fg-soft: oklch(0.380 0.028 257); --border: oklch(0.895 0.010 254); /* Fundo neutro que PRECISA ser visto sobre --surface: esqueleto de carregamento e trilha de barra (o "resto" que dá a proporção). Mais escuro que --surface-2 de propósito — em 0.968 o esqueleto virava card em branco e a barra perdia a referência de total. Onde NUNCA aparece: fundo de conteúdo real, faixa decorativa. */ --track: oklch(0.918 0.009 252); --border-strong: oklch(0.820 0.014 254); /* Card = borda de 1px, sem sombra. Sombra existe só para camadas que flutuam (drawer, modal, tooltip, toast, menu). */ --shadow-float: 0 18px 48px oklch(0.262 0.026 257 / .22); --shadow-pop: 0 4px 14px oklch(0.262 0.026 257 / .18); /* ---- TIPOGRAFIA ------------------------------------------- Display = Montserrat · Corpo = IBM Plex Sans · Números = IBM Plex Mono. Todo número que se compara verticalmente é mono. */ --f-display: "Montserrat", system-ui, sans-serif; --f-body: "IBM Plex Sans", system-ui, sans-serif; --f-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace; --t-page: 22px; /* título de tela */ --t-sect: 15px; /* título de card */ --t-body: 14px; /* corpo */ --t-dense: 13px; /* tabela densa */ --t-label: 12px; /* rótulo, apoio */ --t-eyebrow:11px; /* caixa alta */ --t-kpi: 31px; /* valor de KPI */ /* ---- ESPAÇAMENTO — múltiplos de 4px ----------------------- */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s10:40px; /* ---- RAIO -------------------------------------------------- */ --r-sm: 6px; --r: 8px; --r-lg: 12px; --r-pill: 999px; /* ---- LAYOUT ------------------------------------------------ */ --topbar-h: 66px; --rail: 248px; --rail-collapsed: 64px; --row-h: 42px; /* linha de tabela: densidade alta */ }