*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { /* Tokens base — servem de fallback pra qualquer coisa fora de um wrapper .{pagina}-page. Valores aqui = tema CLARO (era o tema original do app, antes do reskin dark/glass). html.dark (abaixo) sobrescreve pro escuro, que é o padrão real do app (ver index.html: ). */ --primary: #2563eb; --primary-dark: #1d4ed8; --primary-light: #dbeafe; --primary-muted: #eff6ff; --bg: #f1f5f9; --surface: #ffffff; --surface-2:#f8fafc; --border: #e2e8f0; --text: #0f172a; --text-2: #475569; --text-3: #94a3b8; --success: #10b981; --success-bg: #ecfdf5; --success-border: #a7f3d0; --warning: #f59e0b; --warning-bg: #fffbeb; --warning-border: #fde68a; --danger: #ef4444; --danger-bg: #fef2f2; --danger-border: #fecaca; --info: #3b82f6; --info-bg: #eff6ff; --info-border:#bfdbfe; --shadow-sm: 0 1px 2px rgba(0,0,0,.06); --shadow: 0 1px 3px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.06); --shadow-md: 0 4px 6px -1px rgba(0,0,0,.10), 0 2px 4px -1px rgba(0,0,0,.06); --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.10), 0 4px 6px -2px rgba(0,0,0,.05); /* Sidebar/Topbar/Toast — Design System Nova Promotora. Continuam com tokens próprios (não usam --bg/--surface/--text genéricos) porque já eram assim antes do tema light/dark existir; agora ficam duplicados em html.dark/html.light também, igual o resto. */ --sidebar-width: 16rem; /* 256px — igual nos dois temas */ --sidebar-width-collapsed: 4.75rem; /* ~76px — igual nos dois temas */ --header-h: 64px; --radius-sm: 6px; --radius: 10px; --radius-lg: 14px; --t: .18s ease; } html.dark { --primary: #3D7BFF; --primary-dark: #2E63DB; --primary-light: rgba(61,123,255,.16); --primary-muted: rgba(61,123,255,.10); --bg: #080B12; --surface: rgba(255,255,255,.05); --surface-2: rgba(255,255,255,.035); --border: rgba(255,255,255,.10); --text: #EEF2F8; --text-2: #9AA6BA; --text-3: #5D6880; --success: #4ADE80; --success-bg: rgba(74,222,128,.12); --success-border: rgba(74,222,128,.30); --warning: #FBBF24; --warning-bg: rgba(251,191,36,.12); --warning-border: rgba(251,191,36,.30); --danger: #FF6B6B; --danger-bg: rgba(255,107,107,.12); --danger-border: rgba(255,107,107,.30); --info: #6F9BFF; --info-bg: rgba(111,155,255,.12); --info-border: rgba(111,155,255,.30); --shadow-sm: 0 1px 2px rgba(0,0,0,.35); --shadow: 0 8px 20px rgba(0,0,0,.35); --shadow-md: 0 8px 20px rgba(0,0,0,.35); --shadow-lg: 0 16px 32px rgba(0,0,0,.40); /* Sidebar — Design System Nova Promotora (fixa, position:fixed sobrepõe conteúdo — precisa de fundo SÓLIDO, não translúcido; ver nota "painel position:fixed" no CLAUDE.md). */ --sidebar-bg: #0E1421; /* nova-bg-elev */ --sidebar-border: #22304A; /* nova-border */ --sidebar-hover: rgba(255,255,255,.05); /* glass hover */ --sidebar-active-bg: rgba(255,255,255,.08); /* glass ativo */ --sidebar-active-brd: rgba(255,255,255,.12); --sidebar-accent: #3D7BFF; /* nova-blue */ --sidebar-text: #9AA6BA; /* nova-text-muted */ --sidebar-text-act: #EEF2F8; /* nova-text */ /* Topbar */ --topbar-bg: #0E1421; --topbar-border: #22304A; --topbar-text-muted: #9AA6BA; --topbar-blue: #3D7BFF; --topbar-blue-bg: rgba(61,123,255,.16); --topbar-blue-border: rgba(61,123,255,.35); /* Toast — tokens dark */ --toast-bg: #1A2B40; --toast-border: #22304A; --toast-text: #EEF2F8; --toast-text-muted: #9AA6BA; --toast-success: #4ADE80; --toast-warning: #FBBF24; --toast-danger: #CF190F; --toast-info: #FF6B6B; } html.light { --primary: #2B62D6; --primary-dark: #1F4FB8; --primary-light: rgba(43,98,214,.14); --primary-muted: rgba(43,98,214,.08); --bg: #EEF1F7; --surface: #FFFFFF; --surface-2: #F7F9FC; --border: #D9DFEA; --text: #10182A; --text-2: #4A586E; --text-3: #8A93A6; --success: #15803D; --success-bg: rgba(21,128,61,.10); --success-border: rgba(21,128,61,.28); --warning: #B45309; --warning-bg: rgba(180,83,9,.10); --warning-border: rgba(180,83,9,.28); --danger: #DC2626; --danger-bg: rgba(220,38,38,.10); --danger-border: rgba(220,38,38,.28); --info: #2B62D6; --info-bg: rgba(43,98,214,.10); --info-border: rgba(43,98,214,.28); --shadow-sm: 0 1px 2px rgba(16,24,42,.06); --shadow: 0 8px 20px rgba(16,24,42,.08); --shadow-md: 0 8px 20px rgba(16,24,42,.08); --shadow-lg: 0 16px 32px rgba(16,24,42,.10); /* Sidebar — no claro, vira um painel branco com sombra sutil (ainda position:fixed, ainda precisa de fundo sólido). */ --sidebar-bg: #FFFFFF; --sidebar-border: #D9DFEA; --sidebar-hover: rgba(16,24,42,.04); --sidebar-active-bg: rgba(43,98,214,.08); /* tinta azul — "ativo" usa a cor de marca com parcimônia */ --sidebar-active-brd: rgba(43,98,214,.25); --sidebar-accent: #2B62D6; --sidebar-text: #4A586E; --sidebar-text-act: #10182A; /* Topbar */ --topbar-bg: #FFFFFF; --topbar-border: #D9DFEA; --topbar-text-muted: #4A586E; --topbar-blue: #2B62D6; --topbar-blue-bg: rgba(43,98,214,.10); --topbar-blue-border: rgba(43,98,214,.30); /* Toast — tokens light. --toast-danger fica igual ao dark (é o vermelho de marca --nova-red, não varia por tema); --toast-info usa outro vermelho pra continuar distinguível de --toast-danger, decisão já tomada antes (ver nota em html.dark) — só ajustado de tom pra manter contraste em fundo claro. */ --toast-bg: #FFFFFF; --toast-border: #D9DFEA; --toast-text: #10182A; --toast-text-muted: #4A586E; --toast-success: #15803D; --toast-warning: #B45309; --toast-danger: #CF190F; --toast-info: #E11D48; } html { font-size: 16px; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--bg); color: var(--text); line-height: 1.5; -webkit-font-smoothing: antialiased; } h1,h2,h3,h4,h5,h6 { font-weight: 600; line-height: 1.25; color: var(--text); } a { color: var(--primary); text-decoration: none; } ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-3); } /* Utilities */ .flex { display: flex; } .flex-col { flex-direction: column; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .justify-end { justify-content: flex-end; } .flex-1 { flex: 1; } .flex-wrap { flex-wrap: wrap; } .gap-1 { gap: .25rem; } .gap-2 { gap: .5rem; } .gap-3 { gap: .75rem; } .gap-4 { gap: 1rem; } .gap-6 { gap: 1.5rem; } .w-full { width: 100%; } .hidden { display: none !important; } .mt-1 { margin-top: .25rem; } .mt-2 { margin-top: .5rem; } .mt-4 { margin-top: 1rem; } .mt-6 { margin-top: 1.5rem; } .mt-8 { margin-top: 2rem; } .mb-4 { margin-bottom: 1rem; } .mb-6 { margin-bottom: 1.5rem; } .text-sm { font-size: .875rem; } .text-xs { font-size: .75rem; } .text-lg { font-size: 1.125rem; } .font-medium { font-weight: 500; } .font-semibold { font-weight: 600; } .font-bold { font-weight: 700; } .text-muted { color: var(--text-3); } .text-2 { color: var(--text-2); } .text-right { text-align: right; } .text-center { text-align: center; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }