/** * ============================================================ * StockMVP - Design Tokens (Variáveis Globais de Tema) * ============================================================ * Fonte única de verdade para cores, tipografia, sombras e raios * de borda de todo o sistema. Para mudar uma cor no projeto INTEIRO * (ex: tom de roxo do botão principal), mude APENAS aqui. * * Como funciona a troca de tema: * - Tema claro (padrão): sem atributo, ou data-theme="light" * - Tema escuro: * - A troca é feita por /shared/js/theme-toggle.js, que salva a * escolha em localStorage e aplica o atributo em . * * Qualquer CSS de página específica (dashboard.css, login.css, etc) * deve usar estas variáveis em vez de cores fixas, para funcionar * automaticamente nos dois temas. * ============================================================ */ :root, :root[data-theme="light"] { /* Paleta principal (roxo + azul) */ --color-primary: #6C4CE0; --color-primary-dark: #5636C4; --color-secondary: #2F5DFF; --gradient-primary: linear-gradient(135deg, #6C4CE0 0%, #2F5DFF 100%); /* Fundo e superfícies */ --color-bg: #F4F6FB; --color-surface: #FFFFFF; --color-surface-alt: #EEF1FA; --color-border: #E2E6F0; /* Texto */ --color-text: #1D2233; --color-text-muted: #6B7280; --color-text-inverse: #FFFFFF; /* Estados semânticos */ --color-success: #22C55E; --color-success-bg: #E9FBF0; --color-warning: #F59E0B; --color-warning-bg: #FEF6E7; --color-danger: #E63946; --color-danger-bg: #FCEAEC; --color-info: #2F5DFF; --color-info-bg: #EAF0FF; /* Sombra e raio de borda */ --shadow-sm: 0 2px 6px rgba(29, 34, 51, 0.06); --shadow-md: 0 6px 16px rgba(29, 34, 51, 0.08); --shadow-lg: 0 12px 28px rgba(29, 34, 51, 0.18); --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; /* Tipografia */ --font-display: 'Poppins', sans-serif; --font-body: 'Inter', sans-serif; } :root[data-theme="dark"] { --color-primary: #8567FF; --color-primary-dark: #6C4CE0; --color-secondary: #5B8CFF; --gradient-primary: linear-gradient(135deg, #8567FF 0%, #5B8CFF 100%); --color-bg: #0F1220; --color-surface: #171B2E; --color-surface-alt: #1F2438; --color-border: #2B3150; --color-text: #EDEFF7; --color-text-muted: #9096B3; --color-text-inverse: #0F1220; --color-success: #34D399; --color-success-bg: rgba(52, 211, 153, 0.14); --color-warning: #FBBF24; --color-warning-bg: rgba(251, 191, 36, 0.14); --color-danger: #F87171; --color-danger-bg: rgba(248, 113, 113, 0.14); --color-info: #5B8CFF; --color-info-bg: rgba(91, 140, 255, 0.14); --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.35); --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.4); --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.55); }