/* ============================================================================= JOBSITE DESIGN SYSTEM — Traffio Construction OS tokens.css · Rev. 02 ESTE ARQUIVO É A ÚNICA FONTE DE VERDADE PARA COR, TIPOGRAFIA, GEOMETRIA, ELEVAÇÃO E ESPAÇAMENTO DA PLATAFORMA INTEIRA. Regras (ver DESIGN_SYSTEM.md, seção A-12): · Nenhum valor hexadecimal pode existir fora deste arquivo. · Componentes consomem exclusivamente var(--token). · CSS de feature (gantt, permits, daily-logs...) não declara cor alguma. · Toda combinação nova de cores precisa ser medida antes de entrar aqui. Contraste: paleta calculada em OKLCH e verificada contra WCAG 2.2 nos dois temas. Piso adotado: 7:1 (AAA) para texto, 3:1 para contorno de controle. Carregar SEMPRE depois de main.css. ============================================================================= */ /* ============================================================================= CAMADA 1 — PRIMITIVAS Rampas cruas. Não dependem de tema. Nunca use direto em componente: use os tokens semânticos da camada 2. ============================================================================= */ :root { /* --- Graphite · neutro quente de croma baixa (matiz 80°, C 0.004–0.012) -- Substitui a rampa `slate`. Quente o bastante para não ser o cinza-azulado de framework; neutro o bastante para nunca ler como bege rústico. */ --g-0: #ffffff; --g-25: #fbfaf7; --g-50: #f0eeeb; --g-100: #e2dfdb; --g-150: #d4d0cb; --g-200: #c7c4be; --g-300: #a8a49d; --g-400: #8d8881; --g-500: #726e67; --g-600: #58554f; --g-650: #504c46; /* micro-label no tema claro: 7.36:1 sobre --ground */ --g-700: #433f3a; --g-800: #302d29; --g-850: #272420; --g-900: #1c1a16; --g-950: #13110e; --g-1000: #0a0907; /* --- Oxide · âncora de marca (matiz 48°) ------------------------------- Primer de óxido de ferro / caneta de redline. Puxado do vermelho para o âmbar-bronze de propósito, para se afastar do vermelho de perigo. */ --ox-50: #fef0e9; --ox-100: #ffdecd; --ox-200: #fec2a4; --ox-300: #f09b6e; --ox-400: #df7940; --ox-500: #c45a10; --ox-550: #b04a00; --ox-600: #a34300; --ox-650: #913900; --ox-700: #833500; --ox-800: #602500; --ox-900: #401800; /* --- Hi-Vis · exclusivo do app de campo -------------------------------- Amarelo-esverdeado do colete refletivo. Sempre com tinta quase preta por cima. PROIBIDO no desktop. */ --hv-300: #cde079; --hv-400: #bbd243; --hv-500: #a8be1d; --hv-600: #7f9110; --hv-700: #596504; /* --- Crimson · destrutivo (matiz 16°) ---------------------------------- */ --cr-500: #8c1830; --cr-600: #6d1226; --cr-300: #e05a6e; --cr-200: #f1878f; /* --- Twilight · ação principal (matiz 280°) ---------------------------- Rev. 04. O concreto curando ao entardecer — substitui o preto/tinta que o botão primário usava antes. Sentado no meio matemático exato do maior vão livre de matiz do sistema: 30° do azul de status "In Progress", 25° do roxo de "On Hold". Preto lia como marca de moda; esta cor não colide com nenhuma outra semântica do produto. */ --tw-300: #b6bcf6; --tw-400: #9ea4e8; --tw-600: #42418f; --tw-700: #33317a; /* ========================================================================= GEOMETRIA Desenho técnico é ortogonal. Raio base 3px; zero em tudo que é tabular. ========================================================================= */ --r-0: 0; /* tabela, Gantt, sidebar, divisória — onde vive o dado. Não muda na Rev. 03: é o que ainda lê como planilha de obra em vez de app genérico. */ --r-xs: 4px; /* badge, chip, quadrado de status, tag */ --r-sm: 8px; /* botão, input, select, textarea — o raio padrão */ --r-md: 12px; /* card, modal, dropdown, popover, toast */ --r-lg: 16px; /* painel de destaque e drawer. Nada mais. */ --r-pill: 9999px;/* somente avatar e contador numérico circular */ /* ========================================================================= TIPOGRAFIA Archivo (display e números) · Barlow (interface) · Plex Mono (dados). Piso absoluto: 11.5px. Nenhum texto do produto pode ser menor. ========================================================================= */ --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif; --font-ui: 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-data: 'IBM Plex Mono', 'JetBrains Mono', 'Consolas', ui-monospace, monospace; --fs-micro: 0.719rem; /* 11.5px — micro-label, piso do sistema */ --fs-xs: 0.75rem; /* 12px — legenda, timestamp */ --fs-data: 0.813rem; /* 13px — Plex Mono em tabela */ --fs-sm: 0.906rem; /* 14.5px — célula de tabela, botão */ --fs-base: 0.969rem; /* 15.5px — corpo */ --fs-lg: 1rem; /* 16px — card-title */ --fs-xl: 1.25rem; /* 20px — H2 */ --fs-2xl: 1.75rem; /* 28px — H1 de página */ --fs-3xl: 2rem; /* 32px — valor de KPI */ --fs-4xl: 2.5rem; /* 40px — display */ --lh-tight: 1.15; --lh-snug: 1.3; --lh-normal: 1.5; --lh-relaxed: 1.62; --ls-display: -0.024em; --ls-heading: -0.014em; --ls-body: 0; --ls-label: 0.1em; /* micro-label em caixa alta */ --fw-regular: 400; --fw-medium: 500; --fw-semibold:600; --fw-bold: 700; --fw-black: 800; /* ========================================================================= ESPAÇAMENTO — escala única. Nenhum valor fora dela. ========================================================================= */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; /* --- Alturas de componente (alvo de toque mínimo 40px) ------------------ */ --h-btn-xs: 30px; --h-btn-sm: 34px; --h-btn: 40px; --h-btn-field: 52px; --h-control: 44px; /* input, select, textarea de uma linha */ --h-row: 48px; /* linha de tabela */ --h-row-head: 40px; /* header de tabela */ --h-nav-item: 40px; --h-card-head: 52px; /* ========================================================================= LAYOUT E EMPILHAMENTO ========================================================================= */ --sidebar-width: 260px; --header-height: 60px; --content-max-width: 1440px; --z-dropdown: 1000; --z-sticky: 1020; --z-fixed: 1030; --z-modal-backdrop: 1040; --z-modal: 1050; --z-popover: 1060; --z-tooltip: 1070; --z-toast: 1080; /* ========================================================================= IMPRESSAO Papel e sempre branco e tinta sempre preta, independente do tema da tela. Unico contexto do sistema em que a cor nao acompanha o tema. ========================================================================= */ --print-paper: #ffffff; --print-ink: #000000; --print-rule: #cccccc; --print-tint: #f3f4f6; /* ========================================================================= SUPERFICIES CONSTANTES Nao acompanham o tema porque nao repousam sobre uma superficie do tema: o scrim fica sobre foto, e o console e sempre escuro por convencao. ========================================================================= */ --scrim: rgba(10, 9, 7, 0.78); /* rotulo sobre foto, lightbox */ --scrim-ink: #ffffff; /* 15.6:1 sobre o scrim */ --console-bg: var(--g-950); --console-rule: var(--g-700); --console-panel:var(--g-850); /* faixa interna: --console-ink da 7.4:1 */ --console-ink: var(--g-300); /* 10.4:1 */ --console-accent: var(--ox-300); /* 8.7:1 */ /* --- Marcas de terceiros · identidade fixa, nao acompanha tema --------- Cor oficial da marca externa; nunca reescalada nem tonalizada. */ --brand-whatsapp: #25d366; --brand-whatsapp-ink: #000000; /* --- Field Check-in · pagina publica standalone (views/field/checkin.php) Link de campo de uso unico enviado por SMS/WhatsApp para o operario. Sempre escura, nunca acompanha o tema do desktop — o mesmo motivo do --console-*: nao repousa sobre a superficie do app, e a propria tela. */ --field-bg: #0d1117; --field-card-bg: #161b22; --field-surface-raised: #21262d; --field-border: #30363d; --field-border-strong: #484f58; --field-text: #f0f6fc; --field-text-strong: #ffffff; --field-text-secondary: #c9d1d9; --field-text-muted: #8b949e; --field-accent: #238636; --field-accent-hover: #2ea043; --field-success: #3fb950; --field-danger: #da3633; --field-danger-bg: #ffebe9; --field-danger-bright: #f85149; --field-danger-surface: #261618; --field-warning: #d29922; --field-warning-text: #e3b341; --field-info: #58a6ff; --field-cyan: #38bdf8; --field-overlay-subtle: rgba(255, 255, 255, 0.04); /* --- Movimento --------------------------------------------------------- */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 120ms; --dur-normal: 200ms; --dur-slow: 320ms; } /* ============================================================================= CAMADA 2 — SEMÂNTICOS · TEMA CLARO (padrão) Contrastes medidos (contra --surface #fff8f4, Rev. 03): ink 16.53:1 ink-2 9.94:1 ink-3 7.36:1 (vs --ground) accent 6.25:1 accent-text 7.53:1 control-border 3.31:1 `:root:root` eleva a especificidade para (0,2,0) para que este arquivo vença qualquer `:root` declarado em CSS de feature carregado depois. ============================================================================= */ :root:root { /* --- Superfícies --------------------------------------------------------- Pastel Oxide: mesmo matiz da marca (48°), croma quase zero — em vez de branco puro. Testado com usuários mais velhos: branco absoluto lia como "tela apagada" sob luz forte. Contraste medido contra --ink: 16,53:1. */ --ground: var(--g-50); /* fundo da aplicação — nunca branco puro */ --surface: #fff8f4; /* card, tabela, modal, topbar ink 16.53:1 */ --surface-2: #fff3ed; /* header de tabela, hover, sidebar */ --surface-3: #f9e3d8; /* botão secundário, chip, trilha de barra */ --surface-hover: rgba(28, 26, 22, 0.05); --surface-active:rgba(28, 26, 22, 0.09); /* --- Traços ------------------------------------------------------------ */ --rule: var(--g-200); /* borda de card e divisória de tabela */ --rule-soft: var(--g-100); /* separador interno */ --control-border: #8d8982; /* 3.48:1 — contorno de input e outline */ /* --- Texto ------------------------------------------------------------- */ --ink: var(--g-900); /* título, valor, texto de tabela */ --ink-2: var(--g-700); /* texto corrido, metadado */ --ink-3: var(--g-650); /* micro-label, placeholder, legenda 7.36:1 */ --ink-on-accent: #ffffff; --ink-on-dark: var(--g-25); /* --- Marca ------------------------------------------------------------- */ --accent: var(--ox-600); /* preenchimento de commit, foco, nav ativa*/ --accent-hover: var(--ox-700); --accent-text: var(--ox-650); /* link, ícone e número em destaque */ --accent-soft: var(--ox-50); /* fundo tonalizado */ --accent-border: var(--ox-200); --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); --focus-ring-inset: 0 0 0 3px var(--accent-soft); /* --- Ação primária · Twilight Indigo. 8,81:1 com tinta branca. --------- */ --btn-primary-bg: var(--tw-600); --btn-primary-ink: #ffffff; --btn-primary-hover: var(--tw-700); /* --- Destrutivo -------------------------------------------------------- */ --danger: var(--cr-500); --danger-hover: var(--cr-600); --danger-text: var(--cr-500); --danger-ink: #ffffff; /* --- Aprovação preenchida (.btn-success) · branco sobre verde 6.96:1 ---- */ --success-fill: #00682c; --success-fill-hover: #005a1d; --success-fill-ink: #ffffff; /* --- Campo (.btn-field) · tinta escura sobre hi-vis 9.52:1 ------------- Precisa de contorno no tema claro: o hi-vis tem só 2.09:1 contra branco. */ --field-fill: var(--hv-500); --field-fill-hover: var(--hv-400); --field-fill-ink: var(--g-1000); --field-fill-border:var(--hv-700); /* --- Status · código APWA de marcação de utilidades --------------------- Approved=verde/esgoto · In Progress=azul/água · Pending=amarelo/gás Critical=vermelho/elétrica · Draft=rosa/topografia · Hold=roxo/reúso Todos entre 7.48:1 e 8.62:1 (AAA). */ --ok-bg: #e5f5e8; --ok-br: #a8dbb4; --ok-tx: #005a1d; --ok-dot: #007a34; --go-bg: #e5f2ff; --go-br: #a7d1fc; --go-tx: #00488c; --go-dot: #0065b4; --wt-bg: #f8efdf; --wt-br: #e5c894; --wt-tx: #6b3c00; --wt-dot: #8d5600; --st-bg: #ffeaeb; --st-br: #f9b9bb; --st-tx: #801b2e; --st-dot: #a73445; --dr-bg: #feeaf2; --dr-br: #f4b9d1; --dr-tx: #7a1e4f; --dr-dot: #9f366c; --hd-bg: #f4ecfe; --hd-br: #d7c0f4; --hd-tx: #592e81; --hd-dot: #7847a6; /* --- Especialidades de obra · paleta categorica ------------------------- Oito oficios + neutro. Matizes de 100 a 335: a faixa quente (0-60) fica reservada a marca e ao destrutivo, entao especialidade nunca e confundida com acao ou alerta. Croma reduzida em ~20% frente aos status, para lerem como categoria e nao como estado. Todos entre 7.1:1 e 8.2:1. */ --tr-permits-bg: #f3eefd; --tr-permits-br: #d5c7f0; --tr-permits-tx: #543b7a; --tr-permits-dot: #7457a3; --tr-demolition-bg: #faecf7; --tr-demolition-br: #e8c2df; --tr-demolition-tx: #6c3161; --tr-demolition-dot: #924b84; --tr-structure-bg: #ebf4e7; --tr-structure-br: #bfd8b3; --tr-structure-tx: #2f5613; --tr-structure-dot: #49782a; --tr-plumbing-bg: #e3f6f6; --tr-plumbing-br: #a3dbde; --tr-plumbing-tx: #005a61; --tr-plumbing-dot: #007c84; --tr-electrical-bg: #ebf1ff; --tr-electrical-br: #bdd0f6; --tr-electrical-tx: #2e4783; --tr-electrical-dot: #4665ae; --tr-drywall-bg: #e5f6ef; --tr-drywall-br: #aadcca; --tr-drywall-tx: #005c41; --tr-drywall-dot: #007e5e; --tr-finishes-bg: #e5f4fd; --tr-finishes-br: #aad7ef; --tr-finishes-tx: #005279; --tr-finishes-dot: #0073a1; --tr-inspection-bg: #f4f2e3; --tr-inspection-br: #d8d1a5; --tr-inspection-tx: #584a00; --tr-inspection-dot: #796900; --tr-general-bg: var(--surface-3); --tr-general-br: var(--rule); --tr-general-tx: var(--ink-2); --tr-general-dot: var(--ink-3); /* --- Cronograma / timeline --------------------------------------------- Barra padrao = azul APWA (em andamento) · concluida = verde APWA caminho critico = accent · nao iniciada = neutro. Marco e losango preto, como na prancha de CPM impressa. */ --bar-default: var(--go-dot); --bar-default-ink: #ffffff; /* 5.97:1 */ --bar-done: var(--ok-dot); --bar-done-ink: #ffffff; /* 5.48:1 */ --bar-critical: var(--accent); --bar-critical-ink: var(--ink-on-accent); --bar-idle: var(--g-400); --bar-overlay: rgba(255, 255, 255, 0.30); --bar-handle: rgba(255, 255, 255, 0.45); --milestone: var(--ink); --today-line: var(--danger); --today-tag-ink: var(--danger-ink); /* --- Elevação · Rev. 03 — sombra suave e rasa, nunca a "poça" pesada do Material. Todas com tinta quente (--g-900), nunca preto puro. */ --elev-0: none; --elev-card: 0 1px 2px rgba(20, 18, 14, 0.04), 0 10px 24px -14px rgba(20, 18, 14, 0.14); --elev-1: 0 2px 4px -1px rgba(20, 18, 14, 0.08), 0 10px 20px -10px rgba(20, 18, 14, 0.12); --elev-2: 0 20px 44px -20px rgba(20, 18, 14, 0.18), 0 4px 12px -6px rgba(20, 18, 14, 0.10); --elev-btn-hover: 0 4px 10px -4px rgba(163, 67, 0, 0.28); /* .btn-accent */ --elev-btn-primary-hover: 0 4px 10px -4px rgba(66, 65, 143, 0.30); /* .btn-primary — na cor do proprio botao (Twilight), nao mais no laranja da marca */ --glow-accent: 0 20px 50px -14px rgba(163, 67, 0, 0.22); /* halo estatico de destaque de marketing, ex.: card "Popular" */ --elev-hairline: 0 1px 0 0 rgba(20, 18, 14, 0.04); --backdrop: rgba(20, 18, 14, 0.55); } /* ============================================================================= CAMADA 2 — SEMÂNTICOS · TEMA ESCURO Calibrado separadamente, não invertido. Fundo em #13110E — afastado do preto puro para evitar halo nas letras, que piora com astigmatismo (comum em quem usa óculos). Contrastes: ink 15.00:1 · ink-2 10.03:1 · ink-3 7.00:1 · accent 6.58:1 ============================================================================= */ :root:root[data-theme="dark"] { --ground: var(--g-950); --surface: var(--g-900); --surface-2: var(--g-850); --surface-3: var(--g-800); --surface-hover: rgba(240, 238, 235, 0.06); --surface-active:rgba(240, 238, 235, 0.10); --rule: #45423d; --rule-soft: #332f2b; --control-border: #6f6b65; /* 3.28:1 */ --ink: var(--g-50); --ink-2: var(--g-200); --ink-3: var(--g-300); --ink-on-accent: var(--g-1000); --ink-on-dark: var(--g-25); --accent: var(--ox-400); --accent-hover: var(--ox-300); --accent-text: var(--ox-300); --accent-soft: rgba(223, 121, 64, 0.18); --accent-border: rgba(223, 121, 64, 0.38); --btn-primary-bg: var(--tw-400); /* 8,46:1 com tinta escura */ --btn-primary-ink: var(--g-1000); --btn-primary-hover: var(--tw-300); --danger: var(--cr-300); --danger-hover: #c9445a; --danger-text: var(--cr-200); --danger-ink: var(--g-1000); --success-fill: var(--ok-dot); /* tinta escura 7.91:1 */ --success-fill-hover: #6bc78a; --success-fill-ink: var(--g-1000); --field-fill-border: var(--hv-600); --ok-bg: #16311e; --ok-br: #235734; --ok-tx: #8cd59f; --ok-dot: #4fb772; --go-bg: #162c41; --go-br: #254d74; --go-tx: #8cc6ff; --go-dot: #53a3f2; --wt-bg: #36270a; --wt-br: #604509; --wt-tx: #e3ba6f; --wt-dot: #c99414; --st-bg: #3f2022; --st-br: #6f373b; --st-tx: #fda5aa; --st-dot: #e87780; --dr-bg: #3c202d; --dr-br: #6b374f; --dr-tx: #f6a5c8; --dr-dot: #df77a7; --hd-bg: #30243d; --hd-br: #553e6d; --hd-tx: #d1b0f8; --hd-dot: #b386e4; /* --- Especialidades de obra (escuro) ----------------------------------- */ --tr-permits-bg: #2d253b; --tr-permits-br: #504268; --tr-permits-tx: #c6b2ed; --tr-permits-dot: #a98ed9; --tr-demolition-bg: #362232; --tr-demolition-br: #603c58; --tr-demolition-tx: #e1a9d4; --tr-demolition-dot: #c984ba; --tr-structure-bg: #212f1a; --tr-structure-br: #3b522e; --tr-structure-tx: #a6ca93; --tr-structure-dot: #80ae67; --tr-plumbing-bg: #0c3032; --tr-plumbing-br: #0e5558; --tr-plumbing-tx: #77cfd3; --tr-plumbing-dot: #2bb3b9; --tr-electrical-bg: #202a3e; --tr-electrical-br: #39496e; --tr-electrical-tx: #a3bdf5; --tr-electrical-dot: #7d9de3; --tr-drywall-bg: #133127; --tr-drywall-br: #1e5645; --tr-drywall-tx: #84d0b5; --tr-drywall-dot: #4ab494; --tr-finishes-bg: #132e3b; --tr-finishes-br: #1f5068; --tr-finishes-tx: #84c8eb; --tr-finishes-dot: #4caad7; --tr-inspection-bg: #2f2b12; --tr-inspection-br: #534b1e; --tr-inspection-tx: #cabf7f; --tr-inspection-dot: #aea048; /* --- Cronograma / timeline (escuro): barras claras, tinta escura -------- */ --bar-default-ink: var(--g-1000); /* 7.48:1 */ --bar-done-ink: var(--g-1000); /* 7.91:1 */ --bar-idle: var(--g-500); --bar-overlay: rgba(10, 9, 7, 0.26); --bar-handle: rgba(10, 9, 7, 0.40); --elev-card: inset 0 1px 0 rgba(240, 238, 235, 0.04), 0 1px 2px rgba(0, 0, 0, 0.35), 0 12px 28px -16px rgba(0, 0, 0, 0.55); --elev-1: 0 2px 4px -1px rgba(0, 0, 0, 0.40), 0 12px 24px -12px rgba(0, 0, 0, 0.42); --elev-2: 0 22px 48px -20px rgba(0, 0, 0, 0.50), 0 4px 14px -6px rgba(0, 0, 0, 0.30); --elev-btn-hover: 0 4px 12px -4px rgba(223, 121, 64, 0.35); --elev-btn-primary-hover: 0 4px 12px -4px rgba(158, 164, 232, 0.40); --glow-accent: 0 20px 50px -14px rgba(223, 121, 64, 0.28); --elev-hairline: 0 1px 0 0 rgba(0, 0, 0, 0.40); --backdrop: rgba(10, 9, 7, 0.72); } /* ============================================================================= CAMADA 3 — PONTE DE COMPATIBILIDADE Traduz todos os nomes de token legados (Tailwind renomeado) para o novo sistema. Existe para que a plataforma inteira — 66 views — troque de identidade e passe a cumprir contraste sem que nenhuma view seja tocada. Esta camada é TEMPORÁRIA. Cada nome aqui é dívida a ser eliminada quando os componentes forem reescritos (etapa 4) e as views limpas (etapa 5). NÃO use nenhum destes nomes em código novo. ============================================================================= */ :root:root { /* --- Rampa "primary" (era Tailwind blue) → Oxide ------------------------ */ --primary-50: var(--ox-50); --primary-100: var(--ox-100); --primary-200: var(--ox-200); --primary-300: var(--ox-300); --primary-400: var(--ox-650); /* usado como `color` — 7.53:1 no claro */ --primary-500: var(--ox-600); /* fundo E borda E texto — 6.25:1 */ --primary-600: var(--ox-600); /* .btn-primary com texto branco — 6.25:1 */ --primary-700: var(--ox-700); /* hover */ --primary-800: var(--ox-800); --primary-900: var(--ox-900); --primary: var(--accent); --primary-color: var(--accent); --primary-glow: rgba(163, 67, 0, 0.28); /* --- Rampa "secondary" (era amber, colidia com warning) → Oxide --------- */ --secondary-50: var(--ox-50); --secondary-100: var(--ox-100); --secondary-200: var(--ox-200); --secondary-300: var(--ox-300); --secondary-400: var(--ox-500); --secondary-500: var(--accent); --secondary-600: var(--accent-hover); --secondary-700: var(--ox-700); --secondary-800: var(--ox-800); --secondary-900: var(--ox-900); /* --- Feedback → status APWA -------------------------------------------- */ --success-50: var(--ok-bg); --success-100: var(--ok-br); --success-500: var(--ok-dot); --success-600: var(--ok-tx); --success-700: var(--ok-tx); --success: var(--ok-dot); --warning-50: var(--wt-bg); --warning-100: var(--wt-br); --warning-200: var(--wt-br); --warning-500: var(--wt-dot); --warning-600: var(--wt-tx); --warning-700: var(--wt-tx); --warning-800: var(--wt-tx); --error-50: var(--st-bg); --error-100: var(--st-br); --error-200: var(--st-br); --error-400: var(--st-dot); --error-500: var(--st-dot); --error-600: var(--st-tx); --error-700: var(--st-tx); --error-800: var(--st-tx); --danger-color: var(--danger-text); /* --- "info" era consumido sem nunca ter sido definido ------------------- */ --info-50: var(--go-bg); --info-100: var(--go-br); --info-200: var(--go-br); --info-500: var(--go-dot); --info-700: var(--go-tx); --info-800: var(--go-tx); /* --- Rampa neutra ------------------------------------------------------ */ --gray-50: var(--g-50); --gray-100: var(--g-100); --gray-200: var(--g-200); --gray-300: var(--g-300); --gray-400: var(--g-400); --gray-500: var(--g-500); --gray-600: var(--g-600); --gray-700: var(--g-700); --gray-800: var(--g-800); --gray-900: var(--g-900); /* --- Superfícies ------------------------------------------------------- */ --bg-primary: var(--surface); --bg-secondary: var(--ground); --bg-tertiary: var(--surface-3); --bg-elevated: var(--surface); --bg-card: var(--surface); /* consumido sem definição */ --bg-muted: var(--surface-2); /* consumido sem definição */ --bg-dark: var(--g-950); --bg-hover: var(--surface-hover); --bg-active: var(--surface-active); --card-glass: var(--surface-2); --border-glass: var(--rule); /* --- Texto — corrige as duas falhas de contraste do sistema antigo ------ --text-tertiary era #94a3b8 (2.6:1 sobre branco). Agora 7.43:1. --text-muted era consumido 80x sem jamais ter sido definido. */ --text-primary: var(--ink); --text-main: var(--ink); --text-secondary: var(--ink-2); --text-tertiary: var(--ink-3); --text-muted: var(--ink-3); --text-dim: var(--ink-3); --text-inverse: var(--ink-on-dark); /* --- Bordas ------------------------------------------------------------ */ --border-color: var(--rule); --border-light: var(--rule-soft); --divider: var(--rule); /* --- Campos — corrige o contorno de 1.4:1 para 3.48:1 ------------------ */ --input-bg: var(--surface); --input-border: var(--control-border); --input-focus-border: var(--accent); /* --- Tipografia -------------------------------------------------------- */ --font-family: var(--font-ui); --font-mono: var(--font-data); --text-xs: var(--fs-xs); /* 12px — mantido acima do piso de 11.5 */ --text-sm: var(--fs-sm); /* 14px → 14.5px */ --text-base: 1rem; /* 16px */ --text-md: 1rem; /* consumido sem definição */ --text-lg: 1.125rem; /* 18px */ --text-xl: var(--fs-xl); /* 20px */ --text-2xl: var(--fs-2xl); /* 24px → 28px */ --text-3xl: 2.25rem; /* 30px → 36px */ --text-4xl: 2.75rem; /* 36px → 44px */ /* --- Espaçamento — a escala legada já coincide com a nova --------------- */ --space-1: var(--sp-1); --space-2: var(--sp-2); --space-3: var(--sp-3); --space-4: var(--sp-4); --space-5: var(--sp-5); --space-6: var(--sp-6); --space-8: var(--sp-8); --space-10: var(--sp-10); --space-12: var(--sp-12); --space-16: var(--sp-16); /* --- Raio — do arredondamento macio (8–12px) para a geometria ortogonal - */ --radius-sm: var(--r-xs); /* 4px → 2px */ --radius-md: var(--r-sm); /* 6px → 3px (inputs) */ --radius-lg: var(--r-sm); /* 8px → 3px (botões) */ --radius-xl: var(--r-md); /* 12px → 4px (cards) */ --radius-2xl: var(--r-lg); /* 16px → 6px */ --radius-full: var(--r-pill); /* avatar e contador. Badge vira 2px na etapa 4 */ /* --- Elevação — sombra difusa sai; fio de 1px entra -------------------- */ --shadow-sm: var(--elev-hairline); --shadow-md: var(--elev-1); --shadow-lg: var(--elev-1); --shadow-xl: var(--elev-2); --shadow-2xl: var(--elev-2); /* --- Transições -------------------------------------------------------- */ --transition-fast: var(--dur-fast) var(--ease); --transition-normal: var(--dur-normal) var(--ease); --transition-slow: var(--dur-slow) var(--ease); /* --- Gantt — remove os overrides fora do sistema em gantt.css ----------- */ --gantt-today-color: var(--danger-text); --gantt-critical-color: var(--accent); /* --- Painel dev -------------------------------------------------------- */ --dev-bg: var(--ground); --dev-surface: var(--surface); --dev-border: var(--rule); --dev-text: var(--ink); --dev-muted: var(--ink-3); --dev-primary: var(--accent); } /* --- Ponte · sobrescritas do tema escuro ---------------------------------- */ :root:root[data-theme="dark"] { /* No escuro o accent clareia (ox-600 → ox-400) para manter contraste sobre o fundo. Mas .btn-primary aplica texto branco sobre --primary-600 nos dois temas, então este degrau precisa continuar escuro o bastante: ox-550 entrega 5.49:1 com branco e 3.43:1 de contorno contra o fundo. */ --primary-400: var(--ox-300); /* usado como `color` — 7.96:1 */ --primary-500: var(--ox-400); /* fundo/borda/texto — 5.75:1 */ --primary-600: var(--ox-550); /* .btn-primary com branco — 5.49:1 */ --primary-700: var(--ox-500); /* hover clareia, direção correta no escuro*/ --primary-800: var(--ox-600); --primary-900: var(--ox-200); --primary-50: var(--accent-soft); --primary-100: var(--accent-border); --primary-glow: rgba(223, 121, 64, 0.32); --secondary-400: var(--ox-300); --secondary-500: var(--accent); --secondary-600: var(--accent-hover); --gray-50: var(--g-900); --gray-100: var(--g-850); --gray-200: var(--g-800); --gray-300: var(--g-700); --gray-700: var(--g-200); --gray-800: var(--g-100); --gray-900: var(--g-50); } /* ============================================================================= CAMADA 4 — CORREÇÕES DE ACESSIBILIDADE DE APLICAÇÃO IMEDIATA O que a ponte de tokens não alcança sozinha. ============================================================================= */ /* O foco nunca pode ser suprimido. Regra R-07 do contrato de legibilidade. */ :root:root :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-sm); } /* Numeral tabular onde dígitos se alinham em coluna. */ :root:root :is(.stat-value, .num, .table td.text-right, .metric-chip-value) { font-variant-numeric: tabular-nums; } /* Respeita quem pede menos movimento. */ @media (prefers-reduced-motion: reduce) { :root:root *, :root:root *::before, :root:root *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }