/* * Tokens de cor do design system. * Fonte: docs/knowledge-base/design-system/spec.md, seção 1. * * Aplicados via atributo `data-theme` no elemento raiz (), setado exclusivamente por * `Cortefy.Web.Theme.ThemeService` (via JS interop em js/theme.js) — nenhum outro ponto do * código deve ler/escrever esse atributo ou o localStorage do tema diretamente. * * - data-theme="light" -> tema claro forçado (seção 1.1). * - data-theme="dark" -> tema escuro forçado (seção 1.2). * - data-theme="auto" (ou -> segue a preferência do sistema operacional * ausência do atributo, (`prefers-color-scheme`). "auto" é o valor padrão * antes do primeiro paint) quando o usuário nunca escolheu manualmente. * * Regra dura da spec: nenhuma tela usa cor fixa fora destes tokens. */ :root, :root[data-theme='light'] { --bg: #FFFFFF; --bg-subtle: #F5F7FA; --text: #111827; --text-muted: #6B7280; --border: #E5E7EB; --primary: #2563EB; --primary-hover: #1D4ED8; --primary-subtle: #EFF6FF; --success: #16A34A; --danger: #DC2626; --warning: #D97706; } :root[data-theme='dark'] { --bg: #18181B; --bg-subtle: #27272A; --text: #F4F4F5; --text-muted: #A1A1AA; --border: #3F3F46; --primary: #F97316; --primary-hover: #EA580C; --primary-subtle: #431407; --success: #22C55E; --danger: #F87171; --warning: #FBBF24; } @media (prefers-color-scheme: dark) { :root[data-theme='auto'], :root:not([data-theme]) { --bg: #18181B; --bg-subtle: #27272A; --text: #F4F4F5; --text-muted: #A1A1AA; --border: #3F3F46; --primary: #F97316; --primary-hover: #EA580C; --primary-subtle: #431407; --success: #22C55E; --danger: #F87171; --warning: #FBBF24; } }