/* ══════════════════════════════════════════════════════════════════════════ Tema do Sistema Aruanda — cores de TODAS as telas (sistema, admin, login). Regra: as páginas não usam cor fixa (#fff, #666, #FDECEC...) — só as variáveis daqui. Assim, trocar uma cor (ou o modo escuro inteiro) é mexer só neste arquivo. Famílias de cor: superfícies ....... --bg (fundo da página), --surface (cartões, modais, campos), --surface-2 (áreas levemente destacadas), --gray (cabeçalho de tabela, hover) texto ............. --ink (principal), --dark, --text-2 (descrições), --muted, --faint linhas ............ --line / --gray2 (divisórias), --border (campos), --border-strong (hover) marca ............. --red, --red-d, --red-l, --red-m, --red-tint avisos/selos ...... --info-..., --warn-..., --danger-..., --ok-bd, --green, --green-l, --neutral-..., --purple-... (bg = fundo, fg = texto, bd = borda) invertido ......... --inverse-bg/--inverse-fg (toast, filtro ativo) O modo escuro é ligado por (ver tema.js). ══════════════════════════════════════════════════════════════════════════ */ :root { color-scheme: light; /* marca */ --red: #C41E1E; --red-d: #A11717; --red-l: #FCEEEE; --red-m: #F2C4C4; --red-tint: #FBF6F6; /* texto */ --ink: #1C1F24; --dark: #343A42; --text-2: #555B63; --muted: #636B75; --faint: #8A929C; /* superfícies */ --bg: #F4F5F7; --surface: #FFFFFF; --surface-2: #FAFAFA; --gray: #F7F8FA; /* linhas e bordas */ --gray2: #E4E7EB; --line: #E4E7EB; --border: #D5D9DF; --border-strong: #BCC2CA; --field: var(--border); /* estados */ --green: #1A7F37; --green-l: #E8F5EC; --ok-bd: #B7E0C3; --info-bg: #EFF6FF; --info-fg: #1D4ED8; --info-strong: #1E3A8A; --info-bd: #BFDBFE; --warn-bg: #FEF4E2; --warn-fg: #92400E; --warn-strong: #C45A00; --warn-bd: #F5C5A0; --danger-bg: #FDECEC; --danger-fg: #B42318; --danger-bd: #F5C2C0; --neutral-bg: #EEF0F3; --neutral-fg: #4B5563; --purple-bg: #F0ECFD; --purple-fg: #6D28D9; --inverse-bg: #1C1F24; --inverse-fg: #FFFFFF; /* sombras e sobreposição */ --overlay: rgba(16, 24, 40, .5); --sh: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .06); --sh-lg: 0 20px 48px rgba(16, 24, 40, .18); --sh-pop: 0 8px 24px rgba(0, 0, 0, .12); /* forma */ --r: 12px; --r-sm: 8px; --focus: 0 0 0 3px rgba(196, 30, 30, .18); } :root[data-theme="dark"] { color-scheme: dark; --red: #D93636; --red-d: #B82828; --red-l: #3A2023; --red-m: #5C2B2E; --red-tint: #2A1E21; --ink: #E7E9EC; --dark: #CDD2D8; --text-2: #B3BAC2; --muted: #9AA2AC; --faint: #7D858F; --bg: #111316; --surface: #1A1D21; --surface-2: #1F2227; --gray: #22262B; --gray2: #2E333A; --line: #2E333A; --border: #3A4048; --border-strong: #4B525B; --green: #4CC262; --green-l: #173222; --ok-bd: #265C3A; --info-bg: #172A45; --info-fg: #8DB6FF; --info-strong: #B5CEFF; --info-bd: #2B4A75; --warn-bg: #33270F; --warn-fg: #EDB35C; --warn-strong: #F59E4B; --warn-bd: #5C4520; --danger-bg: #3A1C1C; --danger-fg: #FF8F85; --danger-bd: #6B2C2C; --neutral-bg: #2A2F36; --neutral-fg: #B3BAC2; --purple-bg: #2C2345; --purple-fg: #BBA2FF; --inverse-bg: #E7E9EC; --inverse-fg: #15171A; --overlay: rgba(0, 0, 0, .65); --sh: 0 1px 2px rgba(0, 0, 0, .4), 0 1px 3px rgba(0, 0, 0, .3); --sh-lg: 0 20px 48px rgba(0, 0, 0, .55); --sh-pop: 0 8px 24px rgba(0, 0, 0, .5); --focus: 0 0 0 3px rgba(217, 54, 54, .35); } /* Logo: versão clara/escura trocada pelo tema */ .logo-escuro { display: none !important; } :root[data-theme="dark"] .logo-claro { display: none !important; } :root[data-theme="dark"] .logo-escuro { display: block !important; } /* Botão de alternar tema (☀️/🌙) */ .tema-toggle { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); width: 32px; height: 30px; display: inline-flex; align-items: center; justify-content: center; font-size: .95rem; line-height: 1; cursor: pointer; color: var(--dark); transition: .15s; flex: none; } .tema-toggle:hover { background: var(--gray); border-color: var(--border-strong); } /* Ajustes gerais do modo escuro que não dependem de cada tela */ :root[data-theme="dark"] ::placeholder { color: #6F7780; } :root[data-theme="dark"] option { background: var(--surface); color: var(--ink); }