/* ========================================================================== Design tokens - "sala de controle de operacoes" Tema claro (padrao) e escuro via [data-theme="dark"] no . ========================================================================== */ :root { /* Neutros - superficies e texto */ --bg: #F6F8F9; --surface: #FFFFFF; --surface-2: #F1F4F6; --border: #E2E8EC; --text: #17242C; --text-muted: #5C6B74; /* Marca / acao */ --brand: #0D9488; --brand-strong: #0B7D72; --brand-soft: #D9F2EE; --brand-contrast: #FFFFFF; /* Status (uma por coluna do Kanban) */ --status-backlog: #64748B; --status-backlog-soft: #EEF1F4; --status-aguardando-dev: #D97706; --status-aguardando-dev-soft: #FDF0DD; --status-em-dev: #2563EB; --status-em-dev-soft: #E4ECFD; --status-em-teste: #7C3AED; --status-em-teste-soft: #EEE7FC; --status-aguardando-homolog: #0891B2; --status-aguardando-homolog-soft: #DBF1F6; --status-em-homolog: #4F46E5; --status-em-homolog-soft: #E6E5FB; --status-concluido: #059669; --status-concluido-soft: #DCF3EA; --status-bloqueado: #DC2626; --status-bloqueado-soft: #FBE3E3; /* Prioridade / risco (heat) */ --heat-baixa: #059669; --heat-media: #2563EB; --heat-alta: #D97706; --heat-critica: #DC2626; /* Tipografia */ --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --font-display: 'Space Grotesk', 'Inter', sans-serif; --font-mono: 'JetBrains Mono', 'IBM Plex Mono', monospace; --fs-2xs: 0.75rem; --fs-xs: 0.8125rem; --fs-sm: 0.875rem; --fs-base: 1rem; --fs-md: 1.125rem; --fs-lg: 1.375rem; --fs-xl: 1.75rem; --fs-2xl: 2.25rem; /* Espacamento */ --sp-1: 2px; --sp-2: 4px; --sp-3: 8px; --sp-4: 12px; --sp-5: 16px; --sp-6: 20px; --sp-7: 24px; --sp-8: 32px; --sp-9: 48px; /* Raio */ --radius-sm: 8px; --radius-md: 12px; --radius-pill: 999px; /* Elevacao */ --shadow-1: 0 1px 2px rgba(0, 0, 0, .06); --shadow-2: 0 8px 24px rgba(0, 0, 0, .06); /* Motion */ --ease: cubic-bezier(.2, .7, .2, 1); --dur-fast: 120ms; --dur-base: 200ms; /* Layout */ --sidebar-w: 248px; --topbar-h: 32px; /* Assinatura visual - cabecalho/rodape/destaques (fixa, independe do tema: e o "instrumento" colorido da sala de controle, os paineis de conteudo que trocam de tema claro/escuro ao redor dela). */ --signature-grad: linear-gradient(120deg, #0B7D72 0%, #0D9488 45%, #4F46E5 100%); --footer-bg: #0B1220; --footer-text: #A9BAC4; } [data-theme="dark"] { --bg: #0E141A; --surface: #161F27; --surface-2: #1E2A34; --border: #2A3A46; --text: #E7EEF2; --text-muted: #93A4AF; --brand-soft: rgba(13, 148, 136, .16); --status-backlog-soft: rgba(100, 116, 139, .18); --status-aguardando-dev-soft: rgba(217, 119, 6, .18); --status-em-dev-soft: rgba(37, 99, 235, .2); --status-em-teste-soft: rgba(124, 58, 237, .2); --status-aguardando-homolog-soft: rgba(8, 145, 178, .2); --status-em-homolog-soft: rgba(79, 70, 229, .2); --status-concluido-soft: rgba(5, 150, 105, .18); --status-bloqueado-soft: rgba(220, 38, 38, .2); --shadow-1: 0 1px 2px rgba(0, 0, 0, .3); --shadow-2: 0 8px 24px rgba(0, 0, 0, .35); } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }