:root { --primary-color: #3c6fff; --primary-dark: #2a50c7; --primary-light: #e8efff; --secondary-color: #f0f3ff; --tertiary-color: #f8faff; --text-color: #1a1d1f; --text-light: #6f767e; --border-color: #e4e9f0; --accent-purple: #9e7cff; --accent-orange: #ffb774; --accent-green: #83bf6e; --accent-red: #ff6a55; --bg-light: #edf0f7; --white: #fff; /* Branco literal: texto/ícone sobre cor sólida (botões, badges). NUNCA muda com o tema — --white é "superfície" e escurece no dark. */ --static-white: #fff; --border-radius: 16px; --card-shadow: 0px 4px 16px rgba(0, 0, 0, 0.07); --transition: all 0.3s ease; --sidebar-width: 280px; --color-success: #22c55e; --color-danger: #ef4444; --color-indigo: #4338ca; /* Escala tipográfica */ --fs-xs: 11px; /* labels, badges, captions */ --fs-sm: 13px; /* texto secundário, células de tabela */ --fs-base: 14px; /* corpo padrão */ --fs-md: 16px; /* títulos de card, subheadings */ --fs-lg: 20px; /* títulos de seção */ --fs-xl: 28px; /* números KPI */ /* Espaçamento (múltiplos de 4) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; /* Neutral gray scale (substitui hardcodes Tailwind Slate) */ --gray-50: #f8fafc; --gray-100: #f1f5f9; --gray-200: #e2e8f0; --gray-300: #cbd5e1; --gray-400: #94a3b8; --gray-500: #64748b; --gray-600: #475569; --gray-700: #334155; --gray-800: #1e293b; /* Sistema de status semântico */ --status-danger-bg: #fef2f2; --status-danger-border: #fecaca; --status-danger-text: #dc2626; --status-warning-bg: #fffbeb; --status-warning-border: #fde68a; --status-warning-text: #d97706; --status-success-bg: #f0fdf4; --status-success-border: #bbf7d0; --status-success-text: #16a34a; --status-info-bg: #eff6ff; --status-info-border: #bfdbfe; --status-info-text: #2563eb; --status-alto-bg: #f5f3ff; --status-alto-border: #ddd6fe; --status-alto-text: #7c3aed; /* Tons de marca dos marketplaces (usados nos headers/gradientes dos cards de integração) */ --brand-meli-50: #e3f2fd; --brand-meli-100: #bbdefb; --brand-meli-border: rgba(33, 150, 243, 0.2); --brand-magalu-50: #e3f2fd; --brand-magalu-100: #bbdefb; --brand-magalu-border: rgba(33, 150, 243, 0.2); --brand-shopee-50: #fff0f0; --brand-shopee-100: #ffe4e1; --brand-shopee-200: #fff5f5; --brand-shopee-300: #ffebee; --brand-shopee: #ee4d2d; --brand-shopee-border: rgba(238, 77, 45, 0.2); --brand-shopee-border-soft: rgba(238, 77, 45, 0.15); --brand-amazon-50: #fff3e0; --brand-amazon-100: #ffe0b2; --brand-amazon-border: rgba(255, 152, 0, 0.2); --brand-shein-50: #fce4ec; --brand-shein-100: #f8bbd0; --brand-shein-border: rgba(233, 30, 99, 0.2); /* Verde usado nos blocos de frete "obrigatório/auto-incluído" */ --frete-included-bg-start: #e8f5e9; --frete-included-bg-end: #c8e6c9; --frete-included-accent: #4caf50; --frete-included-border-soft: rgba(76, 175, 80, 0.15); /* Variação suave de warning usada em formulários de CNPJ pendente */ --status-warning-bg-alt: #fff8e1; --status-warning-border-alt: rgba(255, 193, 7, 0.3); --status-warning-icon: #f57c00; --status-warning-text-alt: #e65100; } /* * Modo escuro — só re-declara tokens; componentes não são reescritos aqui. * O atributo data-theme é aplicado no por js/theme-init.js antes do * primeiro paint. Ajustes de componentes que tokens não resolvem ficam em * css/theme-dark.css. */ :root[data-theme="dark"] { color-scheme: dark; --primary-color: #5b82ff; --primary-dark: #7d9bff; /* hover clareia no dark (escurecer some no fundo) */ --primary-light: #1d2a4a; --secondary-color: #232a38; --tertiary-color: #1a212e; --text-color: #e7eaee; --text-light: #9aa4b1; --border-color: #2c3442; --bg-light: #10141b; --white: #191f29; /* superfície de card — ver --static-white */ --card-shadow: 0px 4px 16px rgba(0, 0, 0, 0.5); --color-indigo: #818cf8; /* Escala neutra invertida: 50 continua "fundo sutil", 800 continua "texto forte" */ --gray-50: #1b212c; --gray-100: #212836; --gray-200: #2c3442; --gray-300: #3d4757; --gray-400: #77828f; --gray-500: #93a0ae; --gray-600: #b4bec9; --gray-700: #d2d9e0; --gray-800: #e9edf1; --status-danger-bg: #2d1b1e; --status-danger-border: #59292f; --status-danger-text: #f87171; --status-warning-bg: #2c2312; --status-warning-border: #5a451a; --status-warning-text: #fbbf24; --status-success-bg: #12271a; --status-success-border: #1f4d30; --status-success-text: #4ade80; --status-info-bg: #14222f; --status-info-border: #1e3a5f; --status-info-text: #60a5fa; --status-alto-bg: #221b33; --status-alto-border: #3c3060; --status-alto-text: #a78bfa; --status-warning-bg-alt: #2c2312; --status-warning-border-alt: rgba(255, 193, 7, 0.25); --status-warning-icon: #fbbf24; --status-warning-text-alt: #fcd34d; /* Tons de marca: versões escuras dos fundos claros dos cards de integração */ --brand-meli-50: #14222f; --brand-meli-100: #1c3247; --brand-magalu-50: #14222f; --brand-magalu-100: #1c3247; --brand-shopee-50: #2d1b1e; --brand-shopee-100: #3a2124; --brand-shopee-200: #251a1c; --brand-shopee-300: #33201f; --brand-amazon-50: #2c2312; --brand-amazon-100: #3d3016; --brand-shein-50: #2d1a22; --brand-shein-100: #40202c; --frete-included-bg-start: #12271a; --frete-included-bg-end: #1a3a24; } /* * Modo compacto para notebooks. Windows em 125%/150% de escala reporta * viewport de 1536px/1280px numa tela Full HD — o layout desktop (feito * para ~1920px) fica gigante nessas máquinas. `zoom` é a única alavanca * que compacta os font-sizes hardcoded em px do app inteiro. * O min-width preserva os breakpoints de tablet/mobile (≤992px). */ @media (min-width: 993px) and (max-width: 1536px) { :root { zoom: 0.9; --sidebar-width: 232px; } } @media (min-width: 993px) and (max-width: 1366px) { :root { zoom: 0.85; } }