:root { --syn-color-bg-app: #EEF3FB; --syn-color-bg-surface: #FFFFFF; --syn-color-bg-surface-soft: #F7FAFF; --syn-color-bg-sidebar-start: #031133; --syn-color-bg-sidebar-end: #0A1F55; --syn-color-bg-topbar-start: #031133; --syn-color-bg-topbar-end: #354965; --syn-color-text-primary: #18233D; --syn-color-text-secondary: #6D7C97; --syn-color-text-muted: #95A3BC; --syn-color-text-inverse: #FFFFFF; --syn-color-border-soft: #D9E2F0; --syn-color-border-default: #C8D4E6; --syn-color-border-strong: #B4C3DA; --syn-color-primary-50: #EEF3FF; --syn-color-primary-100: #DCE7FF; --syn-color-primary-500: #4E63FF; --syn-color-primary-600: #3E56F5; --syn-color-primary-700: #3048D8; --syn-color-success-50: #EAF8EF; --syn-color-success-100: #D5F1DF; --syn-color-success-500: #18A957; --syn-color-success-600: #12924A; --syn-color-warning-50: #FFF5D9; --syn-color-warning-100: #FFE9AF; --syn-color-warning-500: #F2B01E; --syn-color-warning-600: #DA9B10; --syn-color-danger-50: #FFECEE; --syn-color-danger-100: #FFDADD; --syn-color-danger-500: #EF5A67; --syn-color-danger-600: #DB4653; --syn-color-info-50: #EEF4FF; --syn-color-info-100: #DCE8FF; --syn-color-info-500: #4F7DFF; --syn-font-family-base: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --syn-font-size-xxs: 11px; --syn-font-size-xs: 12px; --syn-font-size-sm: 14px; --syn-font-size-md: 16px; --syn-font-size-lg: 18px; --syn-font-size-xl: 24px; --syn-font-size-2xl: 32px; --syn-font-size-3xl: 40px; --syn-font-weight-regular: 400; --syn-font-weight-medium: 500; --syn-font-weight-semibold: 600; --syn-font-weight-bold: 700; --syn-space-1: 4px; --syn-space-2: 8px; --syn-space-3: 12px; --syn-space-4: 16px; --syn-space-5: 20px; --syn-space-6: 24px; --syn-space-8: 32px; --syn-space-10: 40px; --syn-space-12: 48px; --syn-radius-xs: 8px; --syn-radius-sm: 12px; --syn-radius-md: 16px; --syn-radius-lg: 20px; --syn-radius-pill: 999px; --syn-shadow-soft: 0 8px 24px rgba(24, 35, 61, 0.06); --syn-shadow-card: 0 10px 30px rgba(18, 31, 61, 0.08); --syn-shadow-floating: 0 16px 40px rgba(17, 26, 46, 0.12); --syn-sidebar-width: 240px; --syn-topbar-height: 86px; /* Workbench operacional compacto (detalhe de processo: CRM / ATS / tickets) */ --syn-space-compact-1: 6px; --syn-space-compact-2: 10px; --syn-space-compact-3: 14px; --syn-space-compact-4: 18px; --syn-radius-compact-sm: 10px; --syn-radius-compact-md: 12px; --syn-radius-compact-lg: 14px; --syn-shadow-workbench: 0 8px 24px rgba(18, 31, 61, 0.06); --syn-shadow-panel-soft: 0 6px 18px rgba(18, 31, 61, 0.05); --syn-color-rail-bg: #F8FBFF; --syn-color-rail-border: #DCE6F3; --syn-color-timeline-bg: #FFFFFF; --syn-color-timeline-item: #F7FAFF; --syn-color-timeline-line: #D7E1EF; /* * Nomes curtos legados (--syn-*) � mesmos identificadores antes definidos em base.css. * Mantidos aqui para pontes em base.css e folhas legadas (styles.css, components.css). * N�o redeclarar chaves j� definidas acima (--syn-space-1�--syn-radius-* can�nicos). */ --syn-bg: var(--syn-color-rail-bg); --syn-surface: var(--syn-color-bg-surface); --syn-surface-soft: var(--syn-color-bg-surface-soft); --syn-border: var(--syn-color-border-soft); --syn-text: var(--syn-color-text-primary); --syn-text-strong: var(--syn-color-text-primary); --syn-text-muted: var(--syn-color-text-muted); --syn-text-soft: var(--syn-color-text-secondary); --syn-primary-900: #0b1530; --syn-primary-800: #122248; --syn-primary-700: #1f376a; --syn-primary-gradient: linear-gradient(135deg, #0b1530 0%, #223a68 100%); --syn-accent-blue: #315efb; --syn-accent-blue-soft: #e8edff; --syn-success: #16a34a; --syn-success-soft: #dcfce7; --syn-warning: #d97706; --syn-warning-soft: #fef3c7; --syn-danger: #ef4444; --syn-danger-soft: #fee2e2; --syn-purple: #7c3aed; --syn-purple-soft: #ede9fe; --syn-shadow-xs: 0 2px 6px rgba(15, 23, 42, 0.04); --syn-shadow-sm: 0 4px 12px rgba(15, 23, 42, 0.05); --syn-shadow-md: 0 10px 24px rgba(15, 23, 42, 0.08); --syn-shadow-lg: 0 18px 36px rgba(15, 23, 42, 0.1); --syn-shadow-green: 0 14px 28px rgba(22, 163, 74, 0.18); --syn-space-7: 28px; --syn-space-9: 40px; --syn-ease: all 0.2s ease; /* ─── Wave 1 - Bridge aliases (additive only, nenhum token existente removido) ─── */ /* radius-card: recrutamento usa fallback 16px/14px; canônico = md = 16px */ --syn-radius-card: var(--syn-radius-md); /* aliases de superfície: usados por radar-estoque.css com fallback correto */ --syn-color-surface: var(--syn-color-bg-surface); --syn-color-surface-raised: var(--syn-color-bg-surface-soft); /* foco e acento: usados por radar-estoque.css */ --syn-color-focus-ring: var(--syn-color-primary-500); --syn-color-accent: var(--syn-color-primary-500); /* atalhos semânticos de status: usados por radar-estoque.css */ --syn-color-danger: var(--syn-color-danger-500); --syn-color-warning: var(--syn-color-warning-500); --syn-color-success: var(--syn-color-success-500); /* ─── Wave 2 - Density & Spacing Aliases (Fase 5a - apenas aditivo) ─── */ /* Gap semânticos: slot por contexto operacional (mapeados à escala existente) */ --syn-gap-section: var(--syn-space-compact-2); /* 10px - gap entre seções/painéis */ --syn-gap-card: var(--syn-space-2); /* 8px - gap interno de card */ --syn-gap-row: var(--syn-space-compact-1); /* 6px - gap entre elementos de row */ --syn-gap-micro: var(--syn-space-1); /* 4px - gap ultra-denso (rail/cell)*/ /* Padding semânticos: slot por tipo de superfície operacional */ --syn-padding-section: 10px 12px; /* container / painel operacional padrão */ --syn-padding-card: 12px 14px; /* card com conteúdo interno */ --syn-padding-card-lg: 14px 16px; /* card com header + corpo */ --syn-padding-row: 6px 8px; /* table row padrão */ --syn-padding-row-dense: 4px 8px; /* table row compacto */ --syn-padding-pill: 2px 6px; /* badge / pill inline */ /* Raízes globais para tokens locais do Hub Comercial - resolvem fallbacks hardcoded sem alterar nenhum valor computado (fallbacks coincidem exatamente) */ --syn-density-canonical-section-gap: var(--syn-gap-section); /* 10px */ --syn-density-canonical-metrics-gap: var(--syn-gap-section); /* 10px */ --syn-density-canonical-metric-padding: var(--syn-padding-section); /* 10px 12px */ --syn-density-canonical-results-gap: var(--syn-gap-card); /* 8px */ } /* * ─── TOKENS CONTEXTUAIS - NÃO DEFINIR EM :root ────────────────────────────── * * Os tokens abaixo NÃO estão declarados em :root e isso é intencional. * Eles aparecem em módulos com semânticas de superfície INCOMPATÍVEIS entre si: * * --syn-border-subtle * --syn-surface-elevated * --syn-surface-hover * --syn-surface-selected * * CONTEXTO DARK - drawers e listas sobre fundos escuros: * módulos: acessos, empresa, contratos-recorrentes, operational-triage-chat * fallbacks usados: rgba(255,255,255,0.04–0.08) para bordas e hover * #151821 para superfície elevada (drawer) * * CONTEXTO LIGHT - tabelas e layouts sobre fundos claros: * módulos: precificacao-raiox, radar-carteiras, radar-giro-comercial * fallbacks usados: rgba(148,163,184,0.12–0.35) para bordas e hover * #f8fafc para superfície elevada (header de tabela) * * RISCO CRÍTICO: * Definir qualquer valor único para esses tokens em :root quebraria * imediatamente metade dos módulos - o valor dark destrói os light e * vice-versa. Não fazer isso. * * CAMINHO CORRETO (fase futura - fora do escopo da Foundation Cleanup): * 1. Introduzir uma classe de contexto CSS local, ex.: .syn-surface-dark, * que defina esses tokens apenas no escopo dos drawers e painéis escuros. * 2. Os módulos light (precificacao-raiox, radar-carteiras, radar-giro-comercial) * devem migrar seus usos para tokens canônicos já existentes: * --syn-color-border-soft (substitui --syn-border-subtle em light) * --syn-color-bg-surface-soft (substitui --syn-surface-elevated em light) * --syn-color-bg-surface (substitui --syn-surface-hover em light) * ───────────────────────────────────────────────────────────────────────────── */