/* ============================================================ DESIGN SYSTEM — TOKENS GLOBAIS frontend/static/css/tokens.css Hierarquia de carregamento em base.html: 1. tokens.css ← este arquivo (variáveis brutas) 2. components.css ← componentes que consomem os tokens 3. style.css ← shell global existente (não alterado) 4. [module].css ← CSS modular de cada página CONVENÇÃO: Todas as variáveis usam o prefixo "--ds-" para isolamento total do legado. Nenhuma variável existente é sobrescrita. CATEGORIAS: 1. Backgrounds 2. Bordas 3. Texto 4. Cores Primárias / Accent 5. Estados Semânticos (success, warning, danger, info) 6. Gradientes 7. Tipografia 8. Espaçamentos 9. Border Radius 10. Sombras 11. Foco 12. Transições 13. Z-Index ============================================================ */ :root { /* ══════════════════════════════════════════════════════════ 1. BACKGROUNDS Calibrados contra os valores reais do sistema: style.css → body: #0f172a | deep: #020617 rentabilidade → surface: rgba(15,23,42,.98) despesas → rgba(255,255,255,.05) surface analises → rgba(17,24,39,.72) card-bg ══════════════════════════════════════════════════════════ */ --ds-bg-deep: #020617; /* fundo mais escuro (login, overlays) */ --ds-bg-base: #0f172a; /* fundo do body */ --ds-bg-surface: rgba(15, 23, 42, 0.98); /* surface primária: cards, modais, topbar */ --ds-bg-surface-2: rgba(15, 23, 42, 0.80); /* surface secundária: painéis internos */ --ds-bg-hover: rgba(255, 255, 255, 0.05); /* hover sobre qualquer superfície */ --ds-bg-active: rgba(255, 255, 255, 0.08); /* estado pressionado / active */ --ds-bg-input: rgba(255, 255, 255, 0.04); /* fundo padrão de inputs */ --ds-bg-input-focus: #020617; /* fundo de input com foco */ --ds-bg-overlay: rgba(2, 6, 23, 0.75); /* overlay de modal (escurecimento) */ /* ══════════════════════════════════════════════════════════ 2. BORDAS Calibradas contra: style.css → rgba(148,163,184,.25 / .40) rentabilidade → rgba(148,163,184,.18 / .55) despesas → rgba(255,255,255,.10 / .16) ══════════════════════════════════════════════════════════ */ --ds-border: rgba(148, 163, 184, 0.18); /* borda padrão — sutil */ --ds-border-md: rgba(148, 163, 184, 0.35); /* borda média — inputs, cards */ --ds-border-strong: rgba(148, 163, 184, 0.55); /* borda de destaque / separadores */ --ds-border-input: rgba(255, 255, 255, 0.08); /* borda específica de input repouso */ --ds-border-input-hover: rgba(255, 255, 255, 0.22); /* borda de input com hover */ /* ══════════════════════════════════════════════════════════ 3. TEXTO Extraído de style.css, rentabilidade.css, despesas.css. Escala: title → body → muted → faint → link ══════════════════════════════════════════════════════════ */ --ds-text-title: #f9fafb; /* h1, h2, h3, valores KPI, rótulos principais */ --ds-text-body: #e5e7eb; /* parágrafos, td, nav, conteúdo geral */ --ds-text-muted: #9ca3af; /* labels, captions, th, placeholder, .muted */ --ds-text-faint: #6b7280; /* texto muito discreto, rodapé, dicas */ --ds-text-link: #bfdbfe; /* links em contexto de tabela */ --ds-text-inverse: #020617; /* texto sobre fundo claro (botão degradê) */ /* ══════════════════════════════════════════════════════════ 4. CORES PRIMÁRIAS / ACCENT Indigo (#4f46e5) como primário — consistente com: style.css → btn-primary, focus ring, login input rentabilidade → --rent-accent: #3b82f6 (azul mais leve) Ciano (#06b6d4) como secundário do gradiente. ══════════════════════════════════════════════════════════ */ --ds-color-primary: #4f46e5; /* indigo — botão primário */ --ds-color-primary-hover: #4338ca; /* indigo escuro — hover */ --ds-color-secondary: #06b6d4; /* ciano — gradiente, realce */ --ds-color-secondary-hover: #0891b2; /* ciano escuro — hover */ --ds-color-accent-blue: #3b82f6; /* azul — links, badges info */ --ds-color-accent-subtle: rgba(79, 70, 229, 0.15); /* indigo suave — chip bg */ --ds-color-accent-ring: rgba(79, 70, 229, 0.45); /* anel de foco indigo */ /* ══════════════════════════════════════════════════════════ 5. ESTADOS SEMÂNTICOS Calibrados contra os 3 sistemas existentes: despesas → #FF4D6D danger | #2BE6A4 ok | #FFB020 warn rentabilidade → #f87171 danger | #22c55e ok | #facc15 warn style.css → rgba(248,113,113,...) danger Unificamos na família Tailwind 400/500, que é majoritária. ══════════════════════════════════════════════════════════ */ /* Sucesso */ --ds-color-success: #22c55e; --ds-color-success-bg: rgba(34, 197, 94, 0.12); --ds-color-success-border: rgba(34, 197, 94, 0.45); /* Aviso */ --ds-color-warning: #facc15; --ds-color-warning-bg: rgba(250, 204, 21, 0.12); --ds-color-warning-border: rgba(250, 204, 21, 0.45); /* Perigo / Erro */ --ds-color-danger: #f87171; --ds-color-danger-bg: rgba(248, 113, 113, 0.12); --ds-color-danger-border: rgba(248, 113, 113, 0.45); /* Informação */ --ds-color-info: #38bdf8; --ds-color-info-bg: rgba(56, 189, 248, 0.12); --ds-color-info-border: rgba(56, 189, 248, 0.45); /* ══════════════════════════════════════════════════════════ 6. GRADIENTES Padrão do sistema: indigo → ciano (style.css btn-primary). Gradiente de página: radial azul navy (login, dashboard). ══════════════════════════════════════════════════════════ */ --ds-gradient-primary: linear-gradient(135deg, #4f46e5, #06b6d4); --ds-gradient-primary-hover: linear-gradient(135deg, #4338ca, #0891b2); --ds-gradient-page: radial-gradient(circle at top left, #1d4ed8 0, #020617 45%, #020617 100%); /* ══════════════════════════════════════════════════════════ 7. TIPOGRAFIA Fonte: Inter — já carregada no style.css existente. Escala calibrada contra font-sizes reais do sistema. ══════════════════════════════════════════════════════════ */ --ds-font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* Escala de tamanho (referência: 16px base) */ --ds-font-xs: 0.70rem; /* 11.2px — eyebrow, badge, chip */ --ds-font-sm: 0.78rem; /* 12.5px — label, caption, th, .muted */ --ds-font-base: 0.85rem; /* 13.6px — corpo padrão, td, parágrafo */ --ds-font-md: 0.95rem; /* 15.2px — nav, card-text, botão */ --ds-font-lg: 1.05rem; /* 16.8px — card title, filtro */ --ds-font-xl: 1.35rem; /* 21.6px — section heading */ --ds-font-kpi: 1.60rem; /* 25.6px — kpi-value */ --ds-font-hero: 2.20rem; /* 35.2px — hero heading, login title */ /* Pesos */ --ds-weight-normal: 400; --ds-weight-medium: 500; --ds-weight-semibold: 600; --ds-weight-bold: 700; /* Line-height */ --ds-leading-tight: 1.25; --ds-leading-base: 1.50; /* Letter-spacing */ --ds-tracking-wide: 0.04em; /* uppercase de labels e badges */ /* ══════════════════════════════════════════════════════════ 8. ESPAÇAMENTOS Escala de 4px. Baseada nos gaps/paddings mais comuns encontrados nos módulos (0.25rem, 0.5rem, 0.75rem, 1rem…). ══════════════════════════════════════════════════════════ */ --ds-space-1: 0.25rem; /* 4px */ --ds-space-2: 0.50rem; /* 8px */ --ds-space-3: 0.75rem; /* 12px */ --ds-space-4: 1.00rem; /* 16px */ --ds-space-5: 1.25rem; /* 20px */ --ds-space-6: 1.50rem; /* 24px */ --ds-space-8: 2.00rem; /* 32px */ --ds-space-10: 2.50rem; /* 40px */ --ds-space-12: 3.00rem; /* 48px */ /* ══════════════════════════════════════════════════════════ 9. BORDER RADIUS Valores encontrados no sistema: style.css → 0.75rem (btn) | 1rem (card) | 1.5rem (modal) analises.css → 12px, 14px, 16px rentabilidade → 999px (chips) ══════════════════════════════════════════════════════════ */ --ds-radius-sm: 0.50rem; /* 8px — badge, tag, alerta inline */ --ds-radius-md: 0.75rem; /* 12px — botão, input, select */ --ds-radius-lg: 1.00rem; /* 16px — card padrão, filter-bar */ --ds-radius-xl: 1.50rem; /* 24px — modal, card hero */ --ds-radius-full: 999px; /* pill — chip, avatar, spinner */ /* ══════════════════════════════════════════════════════════ 10. SOMBRAS Todas usam #0f172a (navy escuro) como cor de sombra, espelhando o padrão encontrado em style.css e rentabilidade. ══════════════════════════════════════════════════════════ */ --ds-shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.40); /* chip, badge */ --ds-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.55); /* botão primário */ --ds-shadow-lg: 0 18px 45px rgba(15, 23, 42, 0.70); /* card de módulo */ --ds-shadow-xl: 0 28px 70px rgba(15, 23, 42, 0.85); /* modal */ /* ══════════════════════════════════════════════════════════ 11. FOCO (acessibilidade) Anel de foco usando a cor --ds-color-primary (indigo). Aplicar em :focus-visible em todos os elementos interativos. ══════════════════════════════════════════════════════════ */ --ds-focus-ring: 0 0 0 3px var(--ds-color-accent-ring); /* ══════════════════════════════════════════════════════════ 12. TRANSIÇÕES ══════════════════════════════════════════════════════════ */ --ds-transition-fast: 0.10s ease; /* micro-interações (transform) */ --ds-transition-base: 0.15s ease; /* padrão (cor, border, background) */ --ds-transition-slow: 0.25s ease; /* modais, overlays */ /* ══════════════════════════════════════════════════════════ 13. Z-INDEX (camadas) Garante que modal > dropdown, toast > modal, topbar no topo. ══════════════════════════════════════════════════════════ */ --ds-z-dropdown: 100; --ds-z-modal: 200; --ds-z-toast: 300; --ds-z-topbar: 400; }