/* * tokens.css — Design tokens do sistema * * 2026-04-24: REESTRUTURADO pra suportar 3 TEMAS × 4 PRIMARIES (feature aprovada na Fase A). * * Dois atributos no : * - data-theme="claro|tradicional|escuro" (controla fundo/superfícies) * - data-primary="azul|verde|roxo|vermelho" (controla cor de ação) * * Bootstrap compat: `data-bs-theme="light|dark"` também é mapeado. * CLARO e TRADICIONAL → data-bs-theme="light" * ESCURO → data-bs-theme="dark" * * Para alternar, mudar o atributo — nenhum componente precisa saber qual * combinação ativa; todos consomem `var(--primary)`, `var(--bg)` etc. * * Documentação: docs/DESIGN_SYSTEM.md * Mockup de referência: public/mockups/shared.css */ /* ================================================================ * TEMA CLARO (default) — inspirado no WhatsApp Web light * ================================================================ */ :root, :root[data-theme="claro"] { /* Superfícies */ --bg: #f0f2f5; --surface: #ffffff; --surface-2: #f7f8fa; --surface-3: #eff2f5; --overlay: rgba(11, 20, 26, .55); /* Conteúdo */ --on-surface: #111b21; --on-surface-muted: #667781; --on-surface-subtle: #8696a0; --border: #e9edef; --border-strong: #d1d7db; /* Marca — primary default é AZUL; overrides via [data-primary] abaixo. Também seta --bs-primary + --bs-primary-rgb pra Bootstrap respeitar (classes .btn-primary, .text-primary, .border-primary etc). */ --primary: #2563eb; --primary-on: #ffffff; --primary-muted: #dbeafe; --bs-primary: #2563eb; --bs-primary-rgb: 37, 99, 235; /* Estados semânticos */ --success: #16a34a; --success-on: #ffffff; --success-muted: #dcfce7; --warning: #d97706; --warning-on: #ffffff; --warning-muted: #fef3c7; --danger: #dc2626; --danger-on: #ffffff; --danger-muted: #fee2e2; --info: #0891b2; --info-on: #ffffff; --info-muted: #cffafe; /* Espaçamento (escala 4px) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; /* Raio */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px; /* Sombra */ --shadow-sm: 0 1px 2px rgba(11, 20, 26, 0.06); --shadow-md: 0 4px 10px rgba(11, 20, 26, 0.08); --shadow-lg: 0 10px 24px rgba(11, 20, 26, 0.12); --shadow-focus: 0 0 0 3px var(--primary-muted); /* Tipografia */ --font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-lg: 18px; --text-xl: 24px; --text-2xl: 32px; --line-height-tight: 1.2; --line-height-base: 1.5; /* Alturas de toque */ --touch-sm: 36px; --touch-md: 44px; --touch-lg: 56px; /* Breakpoints (uso em JS via matchMedia) */ --bp-sm: 640px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px; /* Z-index layering */ --z-dropdown: 10; --z-sticky: 20; --z-bottomnav: 30; --z-overlay: 40; --z-modal: 50; --z-toast: 60; /* dsConfirm/dsPrompt/dsHelp FICAM ACIMA do toast E do modal do Bootstrap. Bootstrap usa z-index 1055 nos .modal — se --z-modal-confirm for menor, dsHelp abre atrás do modal de cadastro (usuário clica no ? e "nada acontece" visualmente). 1080 garante sobreposição correta. */ --z-modal-confirm: 1080; /* Popover de tema/primary no header — acima dos modais */ --z-theme-popover: 1090; /* Transições */ --transition-fast: 150ms ease; --transition-base: 250ms ease; color-scheme: light; } /* ================================================================ * TEMA TRADICIONAL — inspirado em destaxa.com.br (fintech light) * Corporate, limpo, slate azulado. Primary mantém azul Comanda. * ================================================================ */ :root[data-theme="tradicional"] { --bg: #f5f7fa; --surface: #ffffff; --surface-2: #f9fbfd; --surface-3: #eef2f7; --overlay: rgba(15, 23, 42, .5); --on-surface: #0f172a; --on-surface-muted: #475569; --on-surface-subtle: #94a3b8; --border: #e2e8f0; --border-strong: #cbd5e1; --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08); --shadow-lg: 0 14px 28px rgba(15, 23, 42, 0.14); color-scheme: light; } /* ================================================================ * TEMA ESCURO — inspirado no WhatsApp Web dark * Compat com legacy `data-bs-theme="dark"` e antigo `data-theme="dark"`. * ================================================================ */ :root[data-theme="escuro"], :root[data-theme="dark"], :root[data-bs-theme="dark"] { color-scheme: dark; --bg: #0b141a; --surface: #111b21; --surface-2: #202c33; --surface-3: #2a3942; --overlay: rgba(0, 0, 0, .8); --on-surface: #e9edef; --on-surface-muted: #aebac1; --on-surface-subtle: #8696a0; --border: #2a3942; --border-strong: #374248; --primary: #3b82f6; --primary-on: #ffffff; --primary-muted: #1e3a8a; --bs-primary: #3b82f6; --bs-primary-rgb: 59, 130, 246; --success: #22c55e; --success-on: #ffffff; --success-muted: #14532d; --warning: #f59e0b; --warning-on: #0b141a; --warning-muted: #78350f; --danger: #ef4444; --danger-on: #ffffff; --danger-muted: #7f1d1d; --info: #06b6d4; --info-on: #0b141a; --info-muted: #164e63; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.5); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.6); --shadow-focus: 0 0 0 3px var(--primary-muted); } /* ================================================================ * OVERRIDES de PRIMARY — independente do tema * * AZUL é default (não há override — usa --primary do tema). * Overrides específicos por tema ajustam o brilho quando necessário * (ex: roxo no escuro fica mais claro pra contrastar). * ================================================================ */ /* VERDE WhatsApp */ :root[data-primary="verde"] { --primary: #00a884; --primary-on: #ffffff; --primary-muted: #d4f4ea; --bs-primary: #00a884; --bs-primary-rgb: 0, 168, 132; } :root[data-theme="escuro"][data-primary="verde"], :root[data-theme="dark"][data-primary="verde"], :root[data-bs-theme="dark"][data-primary="verde"] { --primary-muted: #103d33; } /* ROXO */ :root[data-primary="roxo"] { --primary: #7c3aed; --primary-on: #ffffff; --primary-muted: #ede9fe; --bs-primary: #7c3aed; --bs-primary-rgb: 124, 58, 237; } :root[data-theme="escuro"][data-primary="roxo"], :root[data-theme="dark"][data-primary="roxo"], :root[data-bs-theme="dark"][data-primary="roxo"] { --primary: #a78bfa; --primary-muted: #3c2e78; --bs-primary: #a78bfa; --bs-primary-rgb: 167, 139, 250; } /* VERMELHO (rose — distinto do danger #dc2626/#ef4444) */ :root[data-primary="vermelho"] { --primary: #e11d48; --primary-on: #ffffff; --primary-muted: #ffe4e6; --bs-primary: #e11d48; --bs-primary-rgb: 225, 29, 72; } :root[data-theme="escuro"][data-primary="vermelho"], :root[data-theme="dark"][data-primary="vermelho"], :root[data-bs-theme="dark"][data-primary="vermelho"] { --primary: #fb7185; --primary-muted: #4a1c24; --bs-primary: #fb7185; --bs-primary-rgb: 251, 113, 133; } /* ================================================================ * OS PREFERENCE — fallback quando user ainda não escolheu * Se não há `data-theme` declarado, usa escuro se SO prefere dark. * ================================================================ */ @media (prefers-color-scheme: dark) { :root:not([data-theme]):not([data-bs-theme]) { color-scheme: dark; --bg: #0b141a; --surface: #111b21; --surface-2: #202c33; --surface-3: #2a3942; --overlay: rgba(0, 0, 0, .8); --on-surface: #e9edef; --on-surface-muted: #aebac1; --on-surface-subtle: #8696a0; --border: #2a3942; --border-strong: #374248; --primary: #3b82f6; --primary-muted: #1e3a8a; --bs-primary: #3b82f6; --bs-primary-rgb: 59, 130, 246; --success: #22c55e; --success-muted: #14532d; --warning: #f59e0b; --warning-muted: #78350f; --danger: #ef4444; --danger-muted: #7f1d1d; --info: #06b6d4; --info-muted: #164e63; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.5); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.6); } } /* ================================================================ * RESET MÍNIMO * ================================================================ */ body { margin: 0; font-family: var(--font-family); font-size: var(--text-base); line-height: var(--line-height-base); color: var(--on-surface); background: var(--bg); -webkit-font-smoothing: antialiased; }