/* ============================================================================ * PONTE DE TOKENS — vsx-financeiro <- VSX Design System * ============================================================================ * Carrega os tokens novos (vendor/vsx-design-system/tokens.css, copia literal * de E:\projetos\vsx-design-system\tokens\css\tokens.css) e re-mapeia as * variaveis ANTIGAS de custom.css para os tokens semanticos novos. * * Nenhuma regra de custom.css muda: todas ja consomem var(--bg), var(--accent), * var(--radius) etc. Redefinindo esses nomes aqui (depois de custom.css no * , por causa da ordem de import abaixo), toda a folha antiga passa a * herdar os valores/refinamentos novos automaticamente (sombras mais ricas, * mesma paleta de cor) sem tocar em nenhuma linha de layout. * * --blue (#3B82F6) nao tem token semantico equivalente no design system (nao * faz parte do piso de marca formalizado) — fica de fora do escopo, sem alias, * exatamente como esta hoje em custom.css. * ============================================================================ */ @import '/vendor/vsx-design-system/tokens.css'; :root { /* Backgrounds */ --bg: var(--color-bg-canvas); --bg-card: var(--color-bg-surface); --bg-card2: var(--color-bg-surface-alt); --bg-hover: var(--color-bg-surface-hover); --border: var(--color-border-default); /* Accent */ --accent: var(--color-accent-default); --accent-dim: var(--color-accent-tint); --accent2: var(--color-accent-hover); /* Status */ --green: var(--color-status-success); --green-dim: color-mix(in srgb, var(--color-status-success) 12%, transparent); --red: var(--color-status-error); --red-dim: color-mix(in srgb, var(--color-status-error) 12%, transparent); --yellow: var(--color-status-warning); --yellow-dim: color-mix(in srgb, var(--color-status-warning) 12%, transparent); --pink: var(--color-status-highlight); /* --blue mantido como estava (#3B82F6) — sem token semantico equivalente */ /* Text */ --text-1: var(--color-text-primary); --text-2: var(--color-text-secondary); --text-3: var(--color-text-tertiary); /* Layout (valores identicos, so trocando a fonte de verdade) */ --sidebar-w: var(--layout-sidebar-width); --topbar-h: var(--layout-topbar-height); --radius: var(--radius-default); /* --radius-sm ja tem o mesmo nome no design system (--radius-sm: var(--radius-100), 8px) — nao precisa de alias, o @import acima ja o define neste :root. Redeclarar aqui como var(--radius-sm) seria uma referencia circular (valor invalido). */ /* Misc — sombras mais ricas que as atuais (0 1px 8px / 0 4px 20px) */ --transition: var(--transition-default); --shadow-sm: var(--shadow-sm); --shadow-md: var(--shadow-md); /* Novos tokens sem equivalente antigo, disponiveis para os arquivos de refinamento (10/20/30/40) usarem em estados de foco e conteudo semantico sobre fundo tint. */ --focus-ring: var(--color-focus-ring); --accent-on-dark: var(--color-accent-on-dark); }