/* ============================================================ Sulco Gestão — Design Tokens (tema claro + escuro) Fonte única de cores/tipografia da v2. Importar antes de tudo. Troca de tema: ou data-theme="light". ============================================================ */ /* ---------- CLARO (corporativo) — tema padrão ---------- */ :root, [data-theme="light"] { /* superfícies (neutros frios) */ --bg: #F5F7F8; --bg-2: #FFFFFF; --surface: #FFFFFF; --surface-2: #EEF1F2; /* chips/inputs/cards internos */ --line: #E6EAEC; --line-2: #D5DBDD; /* marca / acento */ --accent: #12A36A; /* verde de ação */ --accent-strong: #0B5A38; /* verde da marca (profundo) */ --on-accent: #FFFFFF; --accent-2: #7C3AED; /* roxo de destaque (visita presencial, novidades, realces) */ /* status */ --ok: #0B5A38; --warn: #B7791F; --danger: #C0392B; --info: #2563EB; /* texto */ --txt: #0F1A1E; --muted: #5A6A70; --dim: #8A969C; /* marca (auxiliares) */ --sulco-green: #0B5A38; --sulco-green-2: #12A36A; --sulco-yellow: #F5B301; --shadow: 0 8px 28px rgba(16,24,28,.10); --elev: 0 1px 2px rgba(16,24,28,.05); } /* ---------- ESCURO (corporativo, sem neon) ---------- */ [data-theme="dark"] { --bg: #0E1512; --bg-2: #121A16; --surface: #16201C; --surface-2: #101713; --line: #24332C; --line-2: #33453B; --accent: #2BC48A; /* emerald calibrado (não neon) */ --accent-strong: #6FE0B4; /* claro p/ texto/links no escuro */ --on-accent: #06231A; --accent-2: #A78BFA; /* roxo de destaque legível no escuro */ --ok: #2BC48A; --warn: #E0A52E; --danger: #FF6B6B; --info: #5B9BF0; --txt: #E7ECEA; --muted: #8FA39A; --dim: #6E827A; --sulco-green: #15412F; /* card-herói profundo no escuro */ --sulco-green-2: #2BC48A; --sulco-yellow: #F5B301; --shadow: 0 24px 60px rgba(0,0,0,.5); --elev: 0 1px 2px rgba(0,0,0,.35); } :root { --font-brand: 'Manrope', 'Inter', system-ui, sans-serif; --font-display: 'Manrope', 'Inter', system-ui, sans-serif; --font-ui: 'Inter', system-ui, sans-serif; --radius-sm: 8px; --radius: 12px; --radius-lg: 16px; } /* Primeiro acesso sem preferência salva: segue o SO */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { color-scheme: light; } } html, body { background: var(--bg); color: var(--txt); font-family: var(--font-ui); }