/* ===================================================================================================================== assets/css/seed-tema.css — Pilot Educação (POC OM SEED) · SPEC-20 · tema claro sobre o escuro que já existe --------------------------------------------------------------------------------------------------------------------- COMO FUNCIONA - . Escuro = padrão e NÃO é alterado por este arquivo (só define variáveis e o botão). - Tokens: copiados de .projeto/referencias/om-pilot-design-system.html (Tema claro e escuro). - O claro é uma CAMADA DE TRADUÇÃO: as views continuam escritas com classes do Tailwind para o escuro (bg-gray-900, text-white, border-gray-700…); aqui, sob :root[data-theme="light"], cada uma vira o token equivalente. Seletores de alta especificidade (:root[data-theme] + classe) vencem as utilidades que o Tailwind CDN injeta depois. - Texto branco sobre fundo colorido/sólido/gradiente continua branco (seção 7) — classe de escape: .keep-white. - Para uma cor/classe nova: ver "Como acrescentar" em .projeto/PADRAO-DE-TELA.md (seção Temas). ===================================================================================================================== */ /* ---------- 0. Tokens ---------- */ :root[data-theme="light"] { --primary: #0891B2; --primary-hover: #0E7490; --primary-text: #0E7490; --primary-soft: #ECFEFF; --primary-ring: rgba(8, 145, 178, .25); --logo-a: #38BDF8; --logo-b: #3B82F6; --bg: #F1F5F9; --bg-alt: #E2E8F0; --surface: #FFFFFF; --surface-2: #F8FAFC; --surface-card: #FFFFFF; --sidebar: #FFFFFF; --topbar: #FFFFFF; --border: #E2E8F0; --border-strong: #CBD5E1; --track: #E2E8F0; --ink: #0F172A; --text: #1E293B; --text-muted: #64748B; --text-subtle: #94A3B8; --success: #059669; --success-bg: #D1FAE5; --warning: #D97706; --warning-bg: #FEF3C7; --danger: #DC2626; --danger-bg: #FEE2E2; --danger-border: #FCA5A5; --info: #2563EB; --info-bg: #DBEAFE; --c-cyan: #0891B2; --c-emerald: #059669; --c-violet: #7C3AED; --c-orange: #EA580C; --c-blue: #2563EB; --c-yellow: #CA8A04; --c-pink: #DB2777; --c-teal: #0D9488; /* extensão desta POC (mesma escala -600 do Tailwind): famílias que o design system não nomeia */ --c-red: #DC2626; --c-amber: #D97706; --c-sky: #0284C7; --c-indigo: #4F46E5; --c-rose: #E11D48; --c-lime: #65A30D; --c-purple: #9333EA; --c-green: #16A34A; --tint: .10; --placeholder: #7B8AA0; --text-2: #586780; --text-3: #63728A; --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06); --shadow: 0 6px 18px rgba(15, 23, 42, .08); --shadow-lg: 0 14px 40px rgba(15, 23, 42, .14); color-scheme: light; } /* No escuro NÃO se declara color-scheme: a POC nunca declarou, e declarar mudaria os controles nativos (escuro idêntico). */ :root[data-theme="dark"] { --primary: #0891B2; --primary-hover: #0E7490; --primary-text: #22D3EE; --primary-soft: rgba(34, 211, 238, .10); --primary-ring: rgba(34, 211, 238, .25); --bg: #0F172A; --bg-alt: #131C2F; --surface: #1E293B; --surface-2: #172033; --surface-card: #182334; --sidebar: #0F172A; --topbar: #0F172A; --border: #263345; --border-strong: #334155; --track: #334155; --ink: #FFFFFF; --text: #E2E8F0; --text-muted: #9CA3AF; --text-subtle: #6B7280; --success: #4ADE80; --success-bg: rgba(74, 222, 128, .12); --warning: #FBBF24; --warning-bg: rgba(251, 191, 36, .12); --danger: #F87171; --danger-bg: rgba(248, 113, 113, .12); --danger-border: #4F242D; --info: #60A5FA; --info-bg: rgba(96, 165, 250, .12); --c-cyan: #22D3EE; --c-emerald: #34D399; --c-violet: #A78BFA; --c-orange: #FB923C; --c-blue: #60A5FA; --c-yellow: #FACC15; --c-pink: #F472B6; --c-teal: #2DD4BF; --c-red: #F87171; --c-amber: #FBBF24; --c-sky: #38BDF8; --c-indigo: #818CF8; --c-rose: #FB7185; --c-lime: #A3E635; --c-purple: #C084FC; --c-green: #4ADE80; --tint: .12; --placeholder: #9CA3AF; --text-2: #9CA3AF; --text-3: #6B7280; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3); --shadow: 0 8px 24px rgba(0, 0, 0, .35); --shadow-lg: 0 18px 48px rgba(0, 0, 0, .5); } /* ---------- 0b. Base ---------- */ [x-cloak] { display: none !important; } /* Alpine: nada de piscar antes de iniciar */ :root[data-theme="light"] ::selection { background: rgba(8, 145, 178, .22); color: var(--ink); } :root[data-theme="light"] :focus-visible { outline-color: var(--primary); } :root[data-theme="light"] ::placeholder { color: var(--placeholder); opacity: 1; } :root[data-theme="light"] .custom-scrollbar::-webkit-scrollbar-thumb { background: var(--border-strong); } /* ---------- 0c. Botão do tema (visual do design system: .theme-toggle) ---------- */ .theme-toggle { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border-strong); cursor: pointer; font-family: inherit; color: var(--text-muted); flex-shrink: 0; line-height: 1.55; } .theme-toggle > span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 999px; font-size: 12.5px; font-weight: 700; transition: .18s; } .theme-toggle svg { width: 15px; height: 15px; flex-shrink: 0; } .theme-toggle .tt-lbl { display: none; } @media (min-width: 1024px) { .theme-toggle > span { padding: 6px 11px; } .theme-toggle .tt-lbl { display: inline; } } :root[data-theme="dark"] .theme-toggle .t-dark, :root[data-theme="light"] .theme-toggle .t-light { background: var(--primary); color: #fff; } .theme-toggle:hover { border-color: var(--text-subtle); } .theme-toggle:focus-visible { outline: 2px solid var(--primary-text); outline-offset: 2px; } @media (max-width: 400px) { .theme-toggle > span { padding: 6px 7px; } .theme-toggle svg { width: 14px; height: 14px; } } /* ---------- 0d. Estrutura (hooks) ---------- */ :root[data-theme="light"] :is(aside.bg-gray-900, .om-sidebar) { background-color: var(--sidebar); } :root[data-theme="light"] .om-topbar { background-color: var(--topbar); } :root[data-theme="light"] .om-login-fade { background-image: linear-gradient(to top, var(--bg), rgb(241 245 249 / .9), rgb(241 245 249 / .8)); } /* ===================================================================================================================== TRADUÇÃO DAS CLASSES (só no claro). Seções 1-7 geradas do levantamento de classes de cor usadas em views/, includes/, actions/. ===================================================================================================================== */ /* >>> GERADO por gen.php (SPEC-20) — manter à mão daqui em diante <<< */ /* ---------- 1. Fundos neutros (gray) — escuro → claro ---------- */ :root[data-theme="light"] .bg-gray-950 { background-color: var(--surface); } :root[data-theme="light"] .bg-gray-900 { background-color: var(--bg); } :root[data-theme="light"] :is(.shadow-lg, .shadow-xl, .shadow-2xl).bg-gray-900 { background-color: var(--surface); } :root[data-theme="light"] :is(.bg-gray-900\/20, .bg-gray-900\/30) { background-color: var(--surface-2); } :root[data-theme="light"] :is(.bg-gray-900\/40, .bg-gray-900\/50, .bg-gray-900\/60, .bg-gray-900\/70, .bg-gray-900\/80, .bg-gray-900\/90) { background-color: var(--bg); } :root[data-theme="light"] .inset-0:is(.bg-gray-900\/80, .bg-gray-900\/90, .bg-gray-900\/70, .bg-gray-900\/60) { background-color: rgb(15 23 42 / .45); } :root[data-theme="light"] .bg-gray-800 { background-color: var(--surface); } :root[data-theme="light"] .bg-gray-800:not([class*="shadow"]):not([class*="ring"]) { box-shadow: var(--shadow-sm); } :root[data-theme="light"] :is(.bg-gray-800\/50, .bg-gray-800\/60, .bg-gray-800\/70, .bg-gray-800\/80) { background-color: var(--surface); } :root[data-theme="light"] :is(.bg-gray-800\/30, .bg-gray-800\/40) { background-color: var(--surface-2); } :root[data-theme="light"] .bg-gray-700 { background-color: var(--bg-alt); } :root[data-theme="light"] :is(.bg-gray-700\/70, .bg-gray-700\/60, .bg-gray-700\/50) { background-color: var(--bg-alt); } :root[data-theme="light"] :is(.bg-gray-700\/40, .bg-gray-700\/30, .bg-gray-700\/20) { background-color: var(--surface-2); } :root[data-theme="light"] .bg-gray-600 { background-color: var(--border-strong); } :root[data-theme="light"] .bg-gray-600\/30 { background-color: var(--surface-2); } :root[data-theme="light"] .bg-gray-500 { background-color: var(--text-subtle); } :root[data-theme="light"] .before\:bg-gray-700::before { background-color: var(--bg-alt); } :root[data-theme="light"] .file\:bg-gray-700::file-selector-button { background-color: var(--bg-alt); } :root[data-theme="light"] .file\:text-white::file-selector-button { color: var(--ink); } /* ---------- 1b. Fundos neutros em :hover / group-hover ---------- */ :root[data-theme="light"] .hover\:bg-gray-800:hover { background-color: var(--surface-2); } :root[data-theme="light"] :is(.hover\:bg-gray-800\/70):hover { background-color: var(--surface-2); } :root[data-theme="light"] .hover\:bg-gray-700:hover { background-color: var(--bg-alt); } :root[data-theme="light"] :is(.hover\:bg-gray-700\/50, .hover\:bg-gray-700\/40, .hover\:bg-gray-700\/30, .hover\:bg-gray-700\/20):hover { background-color: var(--surface-2); } :root[data-theme="light"] .hover\:bg-gray-600:hover { background-color: var(--border-strong); } :root[data-theme="light"] :is(.hover\:bg-gray-900\/40, .hover\:bg-gray-900\/60, .hover\:bg-gray-900\/70):hover { background-color: var(--bg); } :root[data-theme="light"] .hover\:bg-white\/5:hover { background-color: rgb(15 23 42 / .05); } :root[data-theme="light"] .group:hover .group-hover\:bg-gray-700 { background-color: var(--bg-alt); } /* ---------- 2. Bordas neutras ---------- */ :root[data-theme="light"] :is(.border-gray-800, .border-gray-700, .border-gray-700\/30, .border-gray-700\/40, .border-gray-700\/50, .border-gray-700\/60, .border-gray-700\/70, .xl\:border-gray-700) { border-color: var(--border); } :root[data-theme="light"] :is(.border-gray-600, .border-gray-600\/50, .border-gray-500, .border-gray-500\/70, .border-gray-400) { border-color: var(--border-strong); } :root[data-theme="light"] .border-slate-800 { border-color: var(--border-strong); } :root[data-theme="light"] :is(.border-slate-500, .border-slate-400) { border-color: var(--border-strong); } :root[data-theme="light"] :is(.divide-gray-700, .divide-gray-700\/50, .divide-gray-700\/60, .divide-gray-700\/70, .divide-gray-800) > :not([hidden]) ~ :not([hidden]) { border-color: var(--border); } :root[data-theme="light"] :is(.hover\:border-gray-600, .hover\:border-gray-500):hover { border-color: var(--text-subtle); } :root[data-theme="light"] .hover\:border-gray-400:hover { border-color: var(--text-muted); } :root[data-theme="light"] .last\:border-0:last-child { border-width: 0; } :root[data-theme="light"] :is(.ring-gray-800, .ring-gray-900) { --tw-ring-color: var(--surface); } :root[data-theme="light"] :is(.ring-gray-600, .ring-gray-700) { --tw-ring-color: var(--border-strong); } :root[data-theme="light"] .ring-offset-gray-900 { --tw-ring-offset-color: var(--surface); } :root[data-theme="light"] .decoration-gray-600 { text-decoration-color: var(--text-subtle); } /* ---------- 3. Texto neutro (usa var(--kw-*, fallback) para a exceção do branco — ver seção 7) ---------- */ :root[data-theme="light"] .text-white { color: var(--kw-white, var(--ink)); } :root[data-theme="light"] .text-white\/70 { color: var(--kw-white70, rgb(15 23 42 / .70)); } :root[data-theme="light"] .text-white\/80 { color: var(--kw-white80, rgb(15 23 42 / .80)); } :root[data-theme="light"] .text-white\/90 { color: var(--kw-white90, rgb(15 23 42 / .90)); } :root[data-theme="light"] :is(.text-gray-100, .text-gray-200, .text-gray-300) { color: var(--kw-gray, var(--text)); } :root[data-theme="light"] :is(.text-gray-400, .text-gray-500) { color: var(--text-2); } :root[data-theme="light"] :is(.text-gray-600, .text-gray-700) { color: var(--text-3); } :root[data-theme="light"] :is(.text-slate-200, .text-slate-300, .text-slate-400) { color: #475569; } :root[data-theme="light"] .marker\:text-gray-600 ::marker, :root[data-theme="light"] .marker\:text-gray-600::marker { color: var(--text-subtle); } :root[data-theme="light"] :is(.hover\:text-white, .group-hover\:text-white):hover { color: var(--ink); } :root[data-theme="light"] .group:hover .group-hover\:text-white { color: var(--ink); } :root[data-theme="light"] :is(.hover\:text-gray-300, .hover\:text-gray-200):hover { color: var(--text); } :root[data-theme="light"] :is(.placeholder-gray-600, .placeholder-gray-500, .placeholder-gray-400)::placeholder { color: var(--placeholder); } /* ---------- 4. Texto colorido: -100..-500 do escuro → tom escuro legível no branco (famílias claras usam -700). Alfas: só os usados hoje ---------- */ :root[data-theme="light"] :is(.text-red-500, .text-red-400) { color: #dc2626; } :root[data-theme="light"] .text-red-400\/70 { color: rgb(153 27 27 / .8); } :root[data-theme="light"] :is(.hover\:text-red-500, .hover\:text-red-400):hover { color: #dc2626; } :root[data-theme="light"] .group:hover :is(.group-hover\:text-red-500, .group-hover\:text-red-400) { color: #dc2626; } :root[data-theme="light"] .text-red-300 { color: rgb(var(--kw-red-300, 185 28 28)); } :root[data-theme="light"] .text-red-300\/80 { color: rgb(var(--kw-red-300, 153 27 27) / .80); } :root[data-theme="light"] .text-red-300\/90 { color: rgb(var(--kw-red-300, 153 27 27) / .90); } :root[data-theme="light"] :is(.hover\:text-red-300):hover { color: #b91c1c; } :root[data-theme="light"] .group:hover :is(.group-hover\:text-red-300) { color: #b91c1c; } :root[data-theme="light"] .text-red-200 { color: rgb(var(--kw-red-200, 153 27 27)); } :root[data-theme="light"] .text-red-200\/80 { color: rgb(var(--kw-red-200, 127 29 29) / .80); } :root[data-theme="light"] :is(.hover\:text-red-200):hover { color: #991b1b; } :root[data-theme="light"] .group:hover :is(.group-hover\:text-red-200) { color: #991b1b; } :root[data-theme="light"] .text-red-100 { color: rgb(var(--kw-red-100, 127 29 29)); } :root[data-theme="light"] :is(.hover\:text-red-100):hover { color: #7f1d1d; } :root[data-theme="light"] .group:hover :is(.group-hover\:text-red-100) { color: #7f1d1d; } :root[data-theme="light"] :is(.text-orange-500, .text-orange-400) { color: #c2410c; } :root[data-theme="light"] :is(.hover\:text-orange-500, .hover\:text-orange-400):hover { color: #c2410c; } :root[data-theme="light"] .group:hover :is(.group-hover\:text-orange-500, .group-hover\:text-orange-400) { color: #c2410c; } :root[data-theme="light"] .text-orange-300 { color: rgb(var(--kw-orange-300, 154 52 18)); } :root[data-theme="light"] :is(.hover\:text-orange-300):hover { color: #9a3412; } :root[data-theme="light"] .group:hover :is(.group-hover\:text-orange-300) { color: #9a3412; } :root[data-theme="light"] .text-orange-200 { color: rgb(var(--kw-orange-200, 124 45 18)); } :root[data-theme="light"] .text-orange-100 { color: rgb(var(--kw-orange-100, 124 45 18)); } :root[data-theme="light"] :is(.hover\:text-orange-200, .hover\:text-orange-100):hover { color: #7c2d12; } :root[data-theme="light"] .group:hover :is(.group-hover\:text-orange-200, .group-hover\:text-orange-100) { color: #7c2d12; } :root[data-theme="light"] :is(.text-amber-500, .text-amber-400) { color: #b45309; } :root[data-theme="light"] .text-amber-400\/70 { color: rgb(120 53 15 / .8); } :root[data-theme="light"] .text-amber-400\/80 { color: rgb(146 64 14 / .80); } :root[data-theme="light"] :is(.hover\:text-amber-500, .hover\:text-amber-400):hover { color: #b45309; } :root[data-theme="light"] .group:hover :is(.group-hover\:text-amber-500, .group-hover\:text-amber-400) { color: #b45309; } :root[data-theme="light"] .text-amber-300 { color: rgb(var(--kw-amber-300, 146 64 14)); } :root[data-theme="light"] .text-amber-300\/70 { color: rgb(var(--kw-amber-300, 120 53 15) / .8); } :root[data-theme="light"] :is(.hover\:text-amber-300):hover { color: #92400e; } :root[data-theme="light"] .group:hover :is(.group-hover\:text-amber-300) { color: #92400e; } :root[data-theme="light"] .text-amber-200 { color: rgb(var(--kw-amber-200, 120 53 15)); } :root[data-theme="light"] .text-amber-200\/80 { color: rgb(var(--kw-amber-200, 120 53 15) / .80); } :root[data-theme="light"] .text-amber-100 { color: rgb(var(--kw-amber-100, 120 53 15)); } :root[data-theme="light"] .text-amber-100\/80 { color: rgb(var(--kw-amber-100, 120 53 15) / .80); } :root[data-theme="light"] :is(.hover\:text-amber-200, .hover\:text-amber-100):hover { color: #78350f; } :root[data-theme="light"] .group:hover :is(.group-hover\:text-amber-200, .group-hover\:text-amber-100) { color: #78350f; } :root[data-theme="light"] :is(.text-yellow-500, .text-yellow-400) { color: #a16207; } :root[data-theme="light"] :is(.hover\:text-yellow-500, .hover\:text-yellow-400):hover { color: #a16207; } :root[data-theme="light"] .group:hover :is(.group-hover\:text-yellow-500, .group-hover\:text-yellow-400) { color: #a16207; } :root[data-theme="light"] .text-yellow-300 { color: rgb(var(--kw-yellow-300, 133 77 14)); } :root[data-theme="light"] :is(.hover\:text-yellow-300):hover { color: #854d0e; } :root[data-theme="light"] .group:hover :is(.group-hover\:text-yellow-300) { color: #854d0e; } :root[data-theme="light"] .text-yellow-200 { color: rgb(var(--kw-yellow-200, 113 63 18)); } :root[data-theme="light"] .text-yellow-100 { color: rgb(var(--kw-yellow-100, 113 63 18)); } :root[data-theme="light"] :is(.hover\:text-yellow-200, .hover\:text-yellow-100):hover { color: #713f12; } :root[data-theme="light"] .group:hover :is(.group-hover\:text-yellow-200, .group-hover\:text-yellow-100) { color: #713f12; } :root[data-theme="light"] :is(.text-lime-500, .text-lime-400) { color: #4d7c0f; } :root[data-theme="light"] :is(.hover\:text-lime-500, .hover\:text-lime-400):hover { color: #4d7c0f; } :root[data-theme="light"] .group:hover :is(.group-hover\:text-lime-500, .group-hover\:text-lime-400) { color: #4d7c0f; } :root[data-theme="light"] .text-lime-300 { color: rgb(var(--kw-lime-300, 63 98 18)); } :root[data-theme="light"] :is(.hover\:text-lime-300):hover { color: #3f6212; } :root[data-theme="light"] .group:hover :is(.group-hover\:text-lime-300) { color: #3f6212; } :root[data-theme="light"] .text-lime-200 { color: rgb(var(--kw-lime-200, 54 83 20)); } :root[data-theme="light"] .text-lime-100 { color: rgb(var(--kw-lime-100, 54 83 20)); } :root[data-theme="light"] :is(.hover\:text-lime-200, .hover\:text-lime-100):hover { color: #365314; } :root[data-theme="light"] .group:hover :is(.group-hover\:text-lime-200, .group-hover\:text-lime-100) { color: #365314; } :root[data-theme="light"] :is(.text-green-500, .text-green-400) { color: #15803d; } :root[data-theme="light"] :is(.hover\:text-green-500, .hover\:text-green-400):hover { color: #15803d; } :root[data-theme="light"] .group:hover :is(.group-hover\:text-green-500, .group-hover\:text-green-400) { color: #15803d; } :root[data-theme="light"] .text-green-300 { color: rgb(var(--kw-green-300, 22 101 52)); } :root[data-theme="light"] :is(.hover\:text-green-300):hover { color: #166534; } :root[data-theme="light"] .group:hover :is(.group-hover\:text-green-300) { color: #166534; } :root[data-theme="light"] .text-green-200 { color: rgb(var(--kw-green-200, 20 83 45)); } :root[data-theme="light"] .text-green-100 { color: rgb(var(--kw-green-100, 20 83 45)); } :root[data-theme="light"] :is(.hover\:text-green-200, .hover\:text-green-100):hover { color: #14532d; } :root[data-theme="light"] .group:hover :is(.group-hover\:text-green-200, .group-hover\:text-green-100) { color: #14532d; } :root[data-theme="light"] :is(.text-emerald-500, .text-emerald-400) { color: #047857; } :root[data-theme="light"] :is(.hover\:text-emerald-500, .hover\:text-emerald-400):hover { color: #047857; } :root[data-theme="light"] .group:hover :is(.group-hover\:text-emerald-500, .group-hover\:text-emerald-400) { color: #047857; } :root[data-theme="light"] .text-emerald-300 { color: rgb(var(--kw-emerald-300, 6 95 70)); } :root[data-theme="light"] :is(.hover\:text-emerald-300):hover { color: #065f46; } :root[data-theme="light"] .group:hover :is(.group-hover\:text-emerald-300) { color: #065f46; } :root[data-theme="light"] .text-emerald-200 { color: rgb(var(--kw-emerald-200, 6 78 59)); } :root[data-theme="light"] .text-emerald-100 { color: rgb(var(--kw-emerald-100, 6 78 59)); } :root[data-theme="light"] .text-emerald-100\/80 { color: rgb(var(--kw-emerald-100, 6 78 59) / .80); } :root[data-theme="light"] :is(.hover\:text-emerald-200, .hover\:text-emerald-100):hover { color: #064e3b; } :root[data-theme="light"] .group:hover :is(.group-hover\:text-emerald-200, .group-hover\:text-emerald-100) { color: #064e3b; } :root[data-theme="light"] :is(.text-teal-500, .text-teal-400) { color: #0f766e; } :root[data-theme="light"] :is(.hover\:text-teal-500, .hover\:text-teal-400):hover { color: #0f766e; } :root[data-theme="light"] .group:hover :is(.group-hover\:text-teal-500, .group-hover\:text-teal-400) { color: #0f766e; } :root[data-theme="light"] .text-teal-300 { color: rgb(var(--kw-teal-300, 17 94 89)); } :root[data-theme="light"] :is(.hover\:text-teal-300):hover { color: #115e59; } :root[data-theme="light"] .group:hover :is(.group-hover\:text-teal-300) { color: #115e59; } :root[data-theme="light"] .text-teal-200 { color: rgb(var(--kw-teal-200, 19 78 74)); } :root[data-theme="light"] .text-teal-100 { color: rgb(var(--kw-teal-100, 19 78 74)); } :root[data-theme="light"] :is(.hover\:text-teal-200, .hover\:text-teal-100):hover { color: #134e4a; } :root[data-theme="light"] .group:hover :is(.group-hover\:text-teal-200, .group-hover\:text-teal-100) { color: #134e4a; } :root[data-theme="light"] :is(.text-cyan-500, .text-cyan-400) { color: #0e7490; } :root[data-theme="light"] :is(.hover\:text-cyan-500, .hover\:text-cyan-400):hover { color: #0e7490; } :root[data-theme="light"] .group:hover :is(.group-hover\:text-cyan-500, .group-hover\:text-cyan-400) { color: #0e7490; } :root[data-theme="light"] .text-cyan-300 { color: rgb(var(--kw-cyan-300, 21 94 117)); } :root[data-theme="light"] .text-cyan-300\/60 { color: rgb(var(--kw-cyan-300, 22 78 99) / .8); } :root[data-theme="light"] .text-cyan-300\/80 { color: rgb(var(--kw-cyan-300, 22 78 99) / .80); } :root[data-theme="light"] :is(.hover\:text-cyan-300):hover { color: #155e75; } :root[data-theme="light"] .group:hover :is(.group-hover\:text-cyan-300) { color: #155e75; } :root[data-theme="light"] .text-cyan-200 { color: rgb(var(--kw-cyan-200, 22 78 99)); } :root[data-theme="light"] .text-cyan-100 { color: rgb(var(--kw-cyan-100, 22 78 99)); } :root[data-theme="light"] .text-cyan-100\/90 { color: rgb(var(--kw-cyan-100, 22 78 99) / .90); } :root[data-theme="light"] :is(.hover\:text-cyan-200, .hover\:text-cyan-100):hover { color: #164e63; } :root[data-theme="light"] .group:hover :is(.group-hover\:text-cyan-200, .group-hover\:text-cyan-100) { color: #164e63; } :root[data-theme="light"] :is(.text-sky-500, .text-sky-400) { color: #0369a1; } :root[data-theme="light"] :is(.hover\:text-sky-500, .hover\:text-sky-400):hover { color: #0369a1; } :root[data-theme="light"] .group:hover :is(.group-hover\:text-sky-500, .group-hover\:text-sky-400) { color: #0369a1; } :root[data-theme="light"] .text-sky-300 { color: rgb(var(--kw-sky-300, 7 89 133)); } :root[data-theme="light"] :is(.hover\:text-sky-300):hover { color: #075985; } :root[data-theme="light"] .group:hover :is(.group-hover\:text-sky-300) { color: #075985; } :root[data-theme="light"] .text-sky-200 { color: rgb(var(--kw-sky-200, 12 74 110)); } :root[data-theme="light"] .text-sky-100 { color: rgb(var(--kw-sky-100, 12 74 110)); } :root[data-theme="light"] :is(.hover\:text-sky-200, .hover\:text-sky-100):hover { color: #0c4a6e; } :root[data-theme="light"] .group:hover :is(.group-hover\:text-sky-200, .group-hover\:text-sky-100) { color: #0c4a6e; } :root[data-theme="light"] :is(.text-blue-500, .text-blue-400) { color: #2563eb; } :root[data-theme="light"] :is(.hover\:text-blue-500, .hover\:text-blue-400):hover { color: #2563eb; } :root[data-theme="light"] .group:hover :is(.group-hover\:text-blue-500, .group-hover\:text-blue-400) { color: #2563eb; } :root[data-theme="light"] .text-blue-300 { color: rgb(var(--kw-blue-300, 29 78 216)); } :root[data-theme="light"] :is(.hover\:text-blue-300):hover { color: #1d4ed8; } :root[data-theme="light"] .group:hover :is(.group-hover\:text-blue-300) { color: #1d4ed8; } :root[data-theme="light"] .text-blue-200 { color: rgb(var(--kw-blue-200, 30 64 175)); } :root[data-theme="light"] :is(.hover\:text-blue-200):hover { color: #1e40af; } :root[data-theme="light"] .group:hover :is(.group-hover\:text-blue-200) { color: #1e40af; } :root[data-theme="light"] .text-blue-100 { color: rgb(var(--kw-blue-100, 30 58 138)); } :root[data-theme="light"] :is(.hover\:text-blue-100):hover { color: #1e3a8a; } :root[data-theme="light"] .group:hover :is(.group-hover\:text-blue-100) { color: #1e3a8a; } :root[data-theme="light"] :is(.text-indigo-500, .text-indigo-400) { color: #4f46e5; } :root[data-theme="light"] :is(.hover\:text-indigo-500, .hover\:text-indigo-400):hover { color: #4f46e5; } :root[data-theme="light"] .group:hover :is(.group-hover\:text-indigo-500, .group-hover\:text-indigo-400) { color: #4f46e5; } :root[data-theme="light"] .text-indigo-300 { color: rgb(var(--kw-indigo-300, 67 56 202)); } :root[data-theme="light"] :is(.hover\:text-indigo-300):hover { color: #4338ca; } :root[data-theme="light"] .group:hover :is(.group-hover\:text-indigo-300) { color: #4338ca; } :root[data-theme="light"] .text-indigo-200 { color: rgb(var(--kw-indigo-200, 55 48 163)); } :root[data-theme="light"] :is(.hover\:text-indigo-200):hover { color: #3730a3; } :root[data-theme="light"] .group:hover :is(.group-hover\:text-indigo-200) { color: #3730a3; } :root[data-theme="light"] .text-indigo-100 { color: rgb(var(--kw-indigo-100, 49 46 129)); } :root[data-theme="light"] :is(.hover\:text-indigo-100):hover { color: #312e81; } :root[data-theme="light"] .group:hover :is(.group-hover\:text-indigo-100) { color: #312e81; } :root[data-theme="light"] :is(.text-violet-500, .text-violet-400) { color: #7c3aed; } :root[data-theme="light"] :is(.hover\:text-violet-500, .hover\:text-violet-400):hover { color: #7c3aed; } :root[data-theme="light"] .group:hover :is(.group-hover\:text-violet-500, .group-hover\:text-violet-400) { color: #7c3aed; } :root[data-theme="light"] .text-violet-300 { color: rgb(var(--kw-violet-300, 109 40 217)); } :root[data-theme="light"] .text-violet-300\/80 { color: rgb(var(--kw-violet-300, 91 33 182) / .80); } :root[data-theme="light"] :is(.hover\:text-violet-300):hover { color: #6d28d9; } :root[data-theme="light"] .group:hover :is(.group-hover\:text-violet-300) { color: #6d28d9; } :root[data-theme="light"] .text-violet-200 { color: rgb(var(--kw-violet-200, 91 33 182)); } :root[data-theme="light"] :is(.hover\:text-violet-200):hover { color: #5b21b6; } :root[data-theme="light"] .group:hover :is(.group-hover\:text-violet-200) { color: #5b21b6; } :root[data-theme="light"] .text-violet-100 { color: rgb(var(--kw-violet-100, 76 29 149)); } :root[data-theme="light"] :is(.hover\:text-violet-100):hover { color: #4c1d95; } :root[data-theme="light"] .group:hover :is(.group-hover\:text-violet-100) { color: #4c1d95; } :root[data-theme="light"] :is(.text-purple-500, .text-purple-400) { color: #9333ea; } :root[data-theme="light"] :is(.hover\:text-purple-500, .hover\:text-purple-400):hover { color: #9333ea; } :root[data-theme="light"] .group:hover :is(.group-hover\:text-purple-500, .group-hover\:text-purple-400) { color: #9333ea; } :root[data-theme="light"] .text-purple-300 { color: rgb(var(--kw-purple-300, 126 34 206)); } :root[data-theme="light"] :is(.hover\:text-purple-300):hover { color: #7e22ce; } :root[data-theme="light"] .group:hover :is(.group-hover\:text-purple-300) { color: #7e22ce; } :root[data-theme="light"] .text-purple-200 { color: rgb(var(--kw-purple-200, 107 33 168)); } :root[data-theme="light"] :is(.hover\:text-purple-200):hover { color: #6b21a8; } :root[data-theme="light"] .group:hover :is(.group-hover\:text-purple-200) { color: #6b21a8; } :root[data-theme="light"] .text-purple-100 { color: rgb(var(--kw-purple-100, 88 28 135)); } :root[data-theme="light"] :is(.hover\:text-purple-100):hover { color: #581c87; } :root[data-theme="light"] .group:hover :is(.group-hover\:text-purple-100) { color: #581c87; } :root[data-theme="light"] :is(.text-pink-500, .text-pink-400) { color: #db2777; } :root[data-theme="light"] :is(.hover\:text-pink-500, .hover\:text-pink-400):hover { color: #db2777; } :root[data-theme="light"] .group:hover :is(.group-hover\:text-pink-500, .group-hover\:text-pink-400) { color: #db2777; } :root[data-theme="light"] .text-pink-300 { color: rgb(var(--kw-pink-300, 190 24 93)); } :root[data-theme="light"] :is(.hover\:text-pink-300):hover { color: #be185d; } :root[data-theme="light"] .group:hover :is(.group-hover\:text-pink-300) { color: #be185d; } :root[data-theme="light"] .text-pink-200 { color: rgb(var(--kw-pink-200, 157 23 77)); } :root[data-theme="light"] :is(.hover\:text-pink-200):hover { color: #9d174d; } :root[data-theme="light"] .group:hover :is(.group-hover\:text-pink-200) { color: #9d174d; } :root[data-theme="light"] .text-pink-100 { color: rgb(var(--kw-pink-100, 131 24 67)); } :root[data-theme="light"] :is(.hover\:text-pink-100):hover { color: #831843; } :root[data-theme="light"] .group:hover :is(.group-hover\:text-pink-100) { color: #831843; } :root[data-theme="light"] :is(.text-rose-500, .text-rose-400) { color: #e11d48; } :root[data-theme="light"] :is(.hover\:text-rose-500, .hover\:text-rose-400):hover { color: #e11d48; } :root[data-theme="light"] .group:hover :is(.group-hover\:text-rose-500, .group-hover\:text-rose-400) { color: #e11d48; } :root[data-theme="light"] .text-rose-300 { color: rgb(var(--kw-rose-300, 190 18 60)); } :root[data-theme="light"] :is(.hover\:text-rose-300):hover { color: #be123c; } :root[data-theme="light"] .group:hover :is(.group-hover\:text-rose-300) { color: #be123c; } :root[data-theme="light"] .text-rose-200 { color: rgb(var(--kw-rose-200, 159 18 57)); } :root[data-theme="light"] :is(.hover\:text-rose-200):hover { color: #9f1239; } :root[data-theme="light"] .group:hover :is(.group-hover\:text-rose-200) { color: #9f1239; } :root[data-theme="light"] .text-rose-100 { color: rgb(var(--kw-rose-100, 136 19 55)); } :root[data-theme="light"] :is(.hover\:text-rose-100):hover { color: #881337; } :root[data-theme="light"] .group:hover :is(.group-hover\:text-rose-100) { color: #881337; } /* ---------- 5. bg-*-900 (tinta escura do escuro) → tinta clara; /70+ continua sólido escuro (toast de erro) ---------- */ :root[data-theme="light"] :is(.bg-red-900, .bg-red-900\/60, .bg-red-900\/50, .bg-red-900\/40) { background-color: rgb(220 38 38 / .14); } :root[data-theme="light"] :is(.bg-red-900\/30, .bg-red-900\/25, .bg-red-900\/20) { background-color: rgb(220 38 38 / .10); } :root[data-theme="light"] :is(.bg-red-900\/15, .bg-red-900\/10) { background-color: rgb(220 38 38 / .07); } :root[data-theme="light"] .hover\:bg-red-900\/30:hover { background-color: rgb(220 38 38 / .16); } :root[data-theme="light"] :is(.border-red-900, .border-red-900\/40, .border-red-900\/50, .border-red-900\/60) { border-color: rgb(220 38 38 / .35); } :root[data-theme="light"] :is(.bg-amber-900, .bg-amber-900\/60, .bg-amber-900\/50, .bg-amber-900\/40) { background-color: rgb(217 119 6 / .14); } :root[data-theme="light"] :is(.bg-amber-900\/30, .bg-amber-900\/25, .bg-amber-900\/20) { background-color: rgb(217 119 6 / .10); } :root[data-theme="light"] :is(.bg-amber-900\/15, .bg-amber-900\/10) { background-color: rgb(217 119 6 / .07); } :root[data-theme="light"] .hover\:bg-amber-900\/30:hover { background-color: rgb(217 119 6 / .16); } :root[data-theme="light"] :is(.border-amber-900, .border-amber-900\/40, .border-amber-900\/50, .border-amber-900\/60) { border-color: rgb(217 119 6 / .35); } :root[data-theme="light"] :is(.bg-orange-900, .bg-orange-900\/60, .bg-orange-900\/50, .bg-orange-900\/40) { background-color: rgb(234 88 12 / .14); } :root[data-theme="light"] :is(.bg-orange-900\/30, .bg-orange-900\/25, .bg-orange-900\/20) { background-color: rgb(234 88 12 / .10); } :root[data-theme="light"] :is(.bg-orange-900\/15, .bg-orange-900\/10) { background-color: rgb(234 88 12 / .07); } :root[data-theme="light"] .hover\:bg-orange-900\/30:hover { background-color: rgb(234 88 12 / .16); } :root[data-theme="light"] :is(.border-orange-900, .border-orange-900\/40, .border-orange-900\/50, .border-orange-900\/60) { border-color: rgb(234 88 12 / .35); } :root[data-theme="light"] :is(.bg-emerald-900, .bg-emerald-900\/60, .bg-emerald-900\/50, .bg-emerald-900\/40) { background-color: rgb(5 150 105 / .14); } :root[data-theme="light"] :is(.bg-emerald-900\/30, .bg-emerald-900\/25, .bg-emerald-900\/20) { background-color: rgb(5 150 105 / .10); } :root[data-theme="light"] :is(.bg-emerald-900\/15, .bg-emerald-900\/10) { background-color: rgb(5 150 105 / .07); } :root[data-theme="light"] .hover\:bg-emerald-900\/30:hover { background-color: rgb(5 150 105 / .16); } :root[data-theme="light"] :is(.border-emerald-900, .border-emerald-900\/40, .border-emerald-900\/50, .border-emerald-900\/60) { border-color: rgb(5 150 105 / .35); } :root[data-theme="light"] :is(.bg-cyan-900, .bg-cyan-900\/60, .bg-cyan-900\/50, .bg-cyan-900\/40) { background-color: rgb(8 145 178 / .14); } :root[data-theme="light"] :is(.bg-cyan-900\/30, .bg-cyan-900\/25, .bg-cyan-900\/20) { background-color: rgb(8 145 178 / .10); } :root[data-theme="light"] :is(.bg-cyan-900\/15, .bg-cyan-900\/10) { background-color: rgb(8 145 178 / .07); } :root[data-theme="light"] .hover\:bg-cyan-900\/30:hover { background-color: rgb(8 145 178 / .16); } :root[data-theme="light"] :is(.border-cyan-900, .border-cyan-900\/40, .border-cyan-900\/50, .border-cyan-900\/60) { border-color: rgb(8 145 178 / .35); } :root[data-theme="light"] :is(.bg-sky-900, .bg-sky-900\/60, .bg-sky-900\/50, .bg-sky-900\/40) { background-color: rgb(2 132 199 / .14); } :root[data-theme="light"] :is(.bg-sky-900\/30, .bg-sky-900\/25, .bg-sky-900\/20) { background-color: rgb(2 132 199 / .10); } :root[data-theme="light"] :is(.bg-sky-900\/15, .bg-sky-900\/10) { background-color: rgb(2 132 199 / .07); } :root[data-theme="light"] .hover\:bg-sky-900\/30:hover { background-color: rgb(2 132 199 / .16); } :root[data-theme="light"] :is(.border-sky-900, .border-sky-900\/40, .border-sky-900\/50, .border-sky-900\/60) { border-color: rgb(2 132 199 / .35); } :root[data-theme="light"] :is(.bg-violet-900, .bg-violet-900\/60, .bg-violet-900\/50, .bg-violet-900\/40) { background-color: rgb(124 58 237 / .14); } :root[data-theme="light"] :is(.bg-violet-900\/30, .bg-violet-900\/25, .bg-violet-900\/20) { background-color: rgb(124 58 237 / .10); } :root[data-theme="light"] :is(.bg-violet-900\/15, .bg-violet-900\/10) { background-color: rgb(124 58 237 / .07); } :root[data-theme="light"] .hover\:bg-violet-900\/30:hover { background-color: rgb(124 58 237 / .16); } :root[data-theme="light"] :is(.border-violet-900, .border-violet-900\/40, .border-violet-900\/50, .border-violet-900\/60) { border-color: rgb(124 58 237 / .35); } :root[data-theme="light"] :is(.bg-yellow-900, .bg-yellow-900\/60, .bg-yellow-900\/50, .bg-yellow-900\/40) { background-color: rgb(202 138 4 / .14); } :root[data-theme="light"] :is(.bg-yellow-900\/30, .bg-yellow-900\/25, .bg-yellow-900\/20) { background-color: rgb(202 138 4 / .10); } :root[data-theme="light"] :is(.bg-yellow-900\/15, .bg-yellow-900\/10) { background-color: rgb(202 138 4 / .07); } :root[data-theme="light"] .hover\:bg-yellow-900\/30:hover { background-color: rgb(202 138 4 / .16); } :root[data-theme="light"] :is(.border-yellow-900, .border-yellow-900\/40, .border-yellow-900\/50, .border-yellow-900\/60) { border-color: rgb(202 138 4 / .35); } :root[data-theme="light"] :is(.bg-blue-900, .bg-blue-900\/60, .bg-blue-900\/50, .bg-blue-900\/40) { background-color: rgb(37 99 235 / .14); } :root[data-theme="light"] :is(.bg-blue-900\/30, .bg-blue-900\/25, .bg-blue-900\/20) { background-color: rgb(37 99 235 / .10); } :root[data-theme="light"] :is(.bg-blue-900\/15, .bg-blue-900\/10) { background-color: rgb(37 99 235 / .07); } :root[data-theme="light"] .hover\:bg-blue-900\/30:hover { background-color: rgb(37 99 235 / .16); } :root[data-theme="light"] :is(.border-blue-900, .border-blue-900\/40, .border-blue-900\/50, .border-blue-900\/60) { border-color: rgb(37 99 235 / .35); } :root[data-theme="light"] :is(.bg-teal-900, .bg-teal-900\/60, .bg-teal-900\/50, .bg-teal-900\/40) { background-color: rgb(13 148 136 / .14); } :root[data-theme="light"] :is(.bg-teal-900\/30, .bg-teal-900\/25, .bg-teal-900\/20) { background-color: rgb(13 148 136 / .10); } :root[data-theme="light"] :is(.bg-teal-900\/15, .bg-teal-900\/10) { background-color: rgb(13 148 136 / .07); } :root[data-theme="light"] .hover\:bg-teal-900\/30:hover { background-color: rgb(13 148 136 / .16); } :root[data-theme="light"] :is(.border-teal-900, .border-teal-900\/40, .border-teal-900\/50, .border-teal-900\/60) { border-color: rgb(13 148 136 / .35); } :root[data-theme="light"] :is(.bg-rose-900, .bg-rose-900\/60, .bg-rose-900\/50, .bg-rose-900\/40) { background-color: rgb(225 29 72 / .14); } :root[data-theme="light"] :is(.bg-rose-900\/30, .bg-rose-900\/25, .bg-rose-900\/20) { background-color: rgb(225 29 72 / .10); } :root[data-theme="light"] :is(.bg-rose-900\/15, .bg-rose-900\/10) { background-color: rgb(225 29 72 / .07); } :root[data-theme="light"] .hover\:bg-rose-900\/30:hover { background-color: rgb(225 29 72 / .16); } :root[data-theme="light"] :is(.border-rose-900, .border-rose-900\/40, .border-rose-900\/50, .border-rose-900\/60) { border-color: rgb(225 29 72 / .35); } /* ---------- 5b. bg-*-{400,500}/{10..30} (chips, ícones, faixas) → mesmo matiz com alfa menor sobre o branco ---------- */ :root[data-theme="light"] .bg-red-500\/5 { background-color: rgb(239 68 68 / .04); } :root[data-theme="light"] .bg-red-500\/10 { background-color: rgb(239 68 68 / .07); } :root[data-theme="light"] .bg-red-500\/15 { background-color: rgb(239 68 68 / .10); } :root[data-theme="light"] .bg-red-500\/20 { background-color: rgb(239 68 68 / .13); } :root[data-theme="light"] .bg-red-500\/25 { background-color: rgb(239 68 68 / .16); } :root[data-theme="light"] .bg-red-500\/30 { background-color: rgb(239 68 68 / .19); } :root[data-theme="light"] .bg-red-400\/5 { background-color: rgb(248 113 113 / .04); } :root[data-theme="light"] .bg-red-400\/10 { background-color: rgb(248 113 113 / .07); } :root[data-theme="light"] .bg-red-400\/15 { background-color: rgb(248 113 113 / .10); } :root[data-theme="light"] .bg-red-400\/20 { background-color: rgb(248 113 113 / .13); } :root[data-theme="light"] .bg-red-400\/25 { background-color: rgb(248 113 113 / .16); } :root[data-theme="light"] .bg-red-400\/30 { background-color: rgb(248 113 113 / .19); } :root[data-theme="light"] .bg-orange-500\/5 { background-color: rgb(249 115 22 / .04); } :root[data-theme="light"] .bg-orange-500\/10 { background-color: rgb(249 115 22 / .07); } :root[data-theme="light"] .bg-orange-500\/15 { background-color: rgb(249 115 22 / .10); } :root[data-theme="light"] .bg-orange-500\/20 { background-color: rgb(249 115 22 / .13); } :root[data-theme="light"] .bg-orange-500\/25 { background-color: rgb(249 115 22 / .16); } :root[data-theme="light"] .bg-orange-500\/30 { background-color: rgb(249 115 22 / .19); } :root[data-theme="light"] .bg-orange-400\/5 { background-color: rgb(251 146 60 / .04); } :root[data-theme="light"] .bg-orange-400\/10 { background-color: rgb(251 146 60 / .07); } :root[data-theme="light"] .bg-orange-400\/15 { background-color: rgb(251 146 60 / .10); } :root[data-theme="light"] .bg-orange-400\/20 { background-color: rgb(251 146 60 / .13); } :root[data-theme="light"] .bg-orange-400\/25 { background-color: rgb(251 146 60 / .16); } :root[data-theme="light"] .bg-orange-400\/30 { background-color: rgb(251 146 60 / .19); } :root[data-theme="light"] .bg-amber-500\/5 { background-color: rgb(245 158 11 / .04); } :root[data-theme="light"] .bg-amber-500\/10 { background-color: rgb(245 158 11 / .07); } :root[data-theme="light"] .bg-amber-500\/15 { background-color: rgb(245 158 11 / .10); } :root[data-theme="light"] .bg-amber-500\/20 { background-color: rgb(245 158 11 / .13); } :root[data-theme="light"] .bg-amber-500\/25 { background-color: rgb(245 158 11 / .16); } :root[data-theme="light"] .bg-amber-500\/30 { background-color: rgb(245 158 11 / .19); } :root[data-theme="light"] .bg-amber-400\/5 { background-color: rgb(251 191 36 / .04); } :root[data-theme="light"] .bg-amber-400\/10 { background-color: rgb(251 191 36 / .07); } :root[data-theme="light"] .bg-amber-400\/15 { background-color: rgb(251 191 36 / .10); } :root[data-theme="light"] .bg-amber-400\/20 { background-color: rgb(251 191 36 / .13); } :root[data-theme="light"] .bg-amber-400\/25 { background-color: rgb(251 191 36 / .16); } :root[data-theme="light"] .bg-amber-400\/30 { background-color: rgb(251 191 36 / .19); } :root[data-theme="light"] .bg-yellow-500\/5 { background-color: rgb(234 179 8 / .04); } :root[data-theme="light"] .bg-yellow-500\/10 { background-color: rgb(234 179 8 / .07); } :root[data-theme="light"] .bg-yellow-500\/15 { background-color: rgb(234 179 8 / .10); } :root[data-theme="light"] .bg-yellow-500\/20 { background-color: rgb(234 179 8 / .13); } :root[data-theme="light"] .bg-yellow-500\/25 { background-color: rgb(234 179 8 / .16); } :root[data-theme="light"] .bg-yellow-500\/30 { background-color: rgb(234 179 8 / .19); } :root[data-theme="light"] .bg-yellow-400\/5 { background-color: rgb(250 204 21 / .04); } :root[data-theme="light"] .bg-yellow-400\/10 { background-color: rgb(250 204 21 / .07); } :root[data-theme="light"] .bg-yellow-400\/15 { background-color: rgb(250 204 21 / .10); } :root[data-theme="light"] .bg-yellow-400\/20 { background-color: rgb(250 204 21 / .13); } :root[data-theme="light"] .bg-yellow-400\/25 { background-color: rgb(250 204 21 / .16); } :root[data-theme="light"] .bg-yellow-400\/30 { background-color: rgb(250 204 21 / .19); } :root[data-theme="light"] .bg-lime-500\/5 { background-color: rgb(132 204 22 / .04); } :root[data-theme="light"] .bg-lime-500\/10 { background-color: rgb(132 204 22 / .07); } :root[data-theme="light"] .bg-lime-500\/15 { background-color: rgb(132 204 22 / .10); } :root[data-theme="light"] .bg-lime-500\/20 { background-color: rgb(132 204 22 / .13); } :root[data-theme="light"] .bg-lime-500\/25 { background-color: rgb(132 204 22 / .16); } :root[data-theme="light"] .bg-lime-500\/30 { background-color: rgb(132 204 22 / .19); } :root[data-theme="light"] .bg-lime-400\/5 { background-color: rgb(163 230 53 / .04); } :root[data-theme="light"] .bg-lime-400\/10 { background-color: rgb(163 230 53 / .07); } :root[data-theme="light"] .bg-lime-400\/15 { background-color: rgb(163 230 53 / .10); } :root[data-theme="light"] .bg-lime-400\/20 { background-color: rgb(163 230 53 / .13); } :root[data-theme="light"] .bg-lime-400\/25 { background-color: rgb(163 230 53 / .16); } :root[data-theme="light"] .bg-lime-400\/30 { background-color: rgb(163 230 53 / .19); } :root[data-theme="light"] .bg-green-500\/5 { background-color: rgb(34 197 94 / .04); } :root[data-theme="light"] .bg-green-500\/10 { background-color: rgb(34 197 94 / .07); } :root[data-theme="light"] .bg-green-500\/15 { background-color: rgb(34 197 94 / .10); } :root[data-theme="light"] .bg-green-500\/20 { background-color: rgb(34 197 94 / .13); } :root[data-theme="light"] .bg-green-500\/25 { background-color: rgb(34 197 94 / .16); } :root[data-theme="light"] .bg-green-500\/30 { background-color: rgb(34 197 94 / .19); } :root[data-theme="light"] .bg-green-400\/5 { background-color: rgb(74 222 128 / .04); } :root[data-theme="light"] .bg-green-400\/10 { background-color: rgb(74 222 128 / .07); } :root[data-theme="light"] .bg-green-400\/15 { background-color: rgb(74 222 128 / .10); } :root[data-theme="light"] .bg-green-400\/20 { background-color: rgb(74 222 128 / .13); } :root[data-theme="light"] .bg-green-400\/25 { background-color: rgb(74 222 128 / .16); } :root[data-theme="light"] .bg-green-400\/30 { background-color: rgb(74 222 128 / .19); } :root[data-theme="light"] .bg-emerald-500\/5 { background-color: rgb(16 185 129 / .04); } :root[data-theme="light"] .bg-emerald-500\/10 { background-color: rgb(16 185 129 / .07); } :root[data-theme="light"] .bg-emerald-500\/15 { background-color: rgb(16 185 129 / .10); } :root[data-theme="light"] .bg-emerald-500\/20 { background-color: rgb(16 185 129 / .13); } :root[data-theme="light"] .bg-emerald-500\/25 { background-color: rgb(16 185 129 / .16); } :root[data-theme="light"] .bg-emerald-500\/30 { background-color: rgb(16 185 129 / .19); } :root[data-theme="light"] .bg-emerald-400\/5 { background-color: rgb(52 211 153 / .04); } :root[data-theme="light"] .bg-emerald-400\/10 { background-color: rgb(52 211 153 / .07); } :root[data-theme="light"] .bg-emerald-400\/15 { background-color: rgb(52 211 153 / .10); } :root[data-theme="light"] .bg-emerald-400\/20 { background-color: rgb(52 211 153 / .13); } :root[data-theme="light"] .bg-emerald-400\/25 { background-color: rgb(52 211 153 / .16); } :root[data-theme="light"] .bg-emerald-400\/30 { background-color: rgb(52 211 153 / .19); } :root[data-theme="light"] .bg-teal-500\/5 { background-color: rgb(20 184 166 / .04); } :root[data-theme="light"] .bg-teal-500\/10 { background-color: rgb(20 184 166 / .07); } :root[data-theme="light"] .bg-teal-500\/15 { background-color: rgb(20 184 166 / .10); } :root[data-theme="light"] .bg-teal-500\/20 { background-color: rgb(20 184 166 / .13); } :root[data-theme="light"] .bg-teal-500\/25 { background-color: rgb(20 184 166 / .16); } :root[data-theme="light"] .bg-teal-500\/30 { background-color: rgb(20 184 166 / .19); } :root[data-theme="light"] .bg-teal-400\/5 { background-color: rgb(45 212 191 / .04); } :root[data-theme="light"] .bg-teal-400\/10 { background-color: rgb(45 212 191 / .07); } :root[data-theme="light"] .bg-teal-400\/15 { background-color: rgb(45 212 191 / .10); } :root[data-theme="light"] .bg-teal-400\/20 { background-color: rgb(45 212 191 / .13); } :root[data-theme="light"] .bg-teal-400\/25 { background-color: rgb(45 212 191 / .16); } :root[data-theme="light"] .bg-teal-400\/30 { background-color: rgb(45 212 191 / .19); } :root[data-theme="light"] .bg-cyan-500\/5 { background-color: rgb(6 182 212 / .04); } :root[data-theme="light"] .bg-cyan-500\/10 { background-color: rgb(6 182 212 / .07); } :root[data-theme="light"] .bg-cyan-500\/15 { background-color: rgb(6 182 212 / .10); } :root[data-theme="light"] .bg-cyan-500\/20 { background-color: rgb(6 182 212 / .13); } :root[data-theme="light"] .bg-cyan-500\/25 { background-color: rgb(6 182 212 / .16); } :root[data-theme="light"] .bg-cyan-500\/30 { background-color: rgb(6 182 212 / .19); } :root[data-theme="light"] .bg-cyan-400\/5 { background-color: rgb(34 211 238 / .04); } :root[data-theme="light"] .bg-cyan-400\/10 { background-color: rgb(34 211 238 / .07); } :root[data-theme="light"] .bg-cyan-400\/15 { background-color: rgb(34 211 238 / .10); } :root[data-theme="light"] .bg-cyan-400\/20 { background-color: rgb(34 211 238 / .13); } :root[data-theme="light"] .bg-cyan-400\/25 { background-color: rgb(34 211 238 / .16); } :root[data-theme="light"] .bg-cyan-400\/30 { background-color: rgb(34 211 238 / .19); } :root[data-theme="light"] .bg-sky-500\/5 { background-color: rgb(14 165 233 / .04); } :root[data-theme="light"] .bg-sky-500\/10 { background-color: rgb(14 165 233 / .07); } :root[data-theme="light"] .bg-sky-500\/15 { background-color: rgb(14 165 233 / .10); } :root[data-theme="light"] .bg-sky-500\/20 { background-color: rgb(14 165 233 / .13); } :root[data-theme="light"] .bg-sky-500\/25 { background-color: rgb(14 165 233 / .16); } :root[data-theme="light"] .bg-sky-500\/30 { background-color: rgb(14 165 233 / .19); } :root[data-theme="light"] .bg-sky-400\/5 { background-color: rgb(56 189 248 / .04); } :root[data-theme="light"] .bg-sky-400\/10 { background-color: rgb(56 189 248 / .07); } :root[data-theme="light"] .bg-sky-400\/15 { background-color: rgb(56 189 248 / .10); } :root[data-theme="light"] .bg-sky-400\/20 { background-color: rgb(56 189 248 / .13); } :root[data-theme="light"] .bg-sky-400\/25 { background-color: rgb(56 189 248 / .16); } :root[data-theme="light"] .bg-sky-400\/30 { background-color: rgb(56 189 248 / .19); } :root[data-theme="light"] .bg-blue-500\/5 { background-color: rgb(59 130 246 / .04); } :root[data-theme="light"] .bg-blue-500\/10 { background-color: rgb(59 130 246 / .07); } :root[data-theme="light"] .bg-blue-500\/15 { background-color: rgb(59 130 246 / .10); } :root[data-theme="light"] .bg-blue-500\/20 { background-color: rgb(59 130 246 / .13); } :root[data-theme="light"] .bg-blue-500\/25 { background-color: rgb(59 130 246 / .16); } :root[data-theme="light"] .bg-blue-500\/30 { background-color: rgb(59 130 246 / .19); } :root[data-theme="light"] .bg-blue-400\/5 { background-color: rgb(96 165 250 / .04); } :root[data-theme="light"] .bg-blue-400\/10 { background-color: rgb(96 165 250 / .07); } :root[data-theme="light"] .bg-blue-400\/15 { background-color: rgb(96 165 250 / .10); } :root[data-theme="light"] .bg-blue-400\/20 { background-color: rgb(96 165 250 / .13); } :root[data-theme="light"] .bg-blue-400\/25 { background-color: rgb(96 165 250 / .16); } :root[data-theme="light"] .bg-blue-400\/30 { background-color: rgb(96 165 250 / .19); } :root[data-theme="light"] .bg-indigo-500\/5 { background-color: rgb(99 102 241 / .04); } :root[data-theme="light"] .bg-indigo-500\/10 { background-color: rgb(99 102 241 / .07); } :root[data-theme="light"] .bg-indigo-500\/15 { background-color: rgb(99 102 241 / .10); } :root[data-theme="light"] .bg-indigo-500\/20 { background-color: rgb(99 102 241 / .13); } :root[data-theme="light"] .bg-indigo-500\/25 { background-color: rgb(99 102 241 / .16); } :root[data-theme="light"] .bg-indigo-500\/30 { background-color: rgb(99 102 241 / .19); } :root[data-theme="light"] .bg-indigo-400\/5 { background-color: rgb(129 140 248 / .04); } :root[data-theme="light"] .bg-indigo-400\/10 { background-color: rgb(129 140 248 / .07); } :root[data-theme="light"] .bg-indigo-400\/15 { background-color: rgb(129 140 248 / .10); } :root[data-theme="light"] .bg-indigo-400\/20 { background-color: rgb(129 140 248 / .13); } :root[data-theme="light"] .bg-indigo-400\/25 { background-color: rgb(129 140 248 / .16); } :root[data-theme="light"] .bg-indigo-400\/30 { background-color: rgb(129 140 248 / .19); } :root[data-theme="light"] .bg-violet-500\/5 { background-color: rgb(139 92 246 / .04); } :root[data-theme="light"] .bg-violet-500\/10 { background-color: rgb(139 92 246 / .07); } :root[data-theme="light"] .bg-violet-500\/15 { background-color: rgb(139 92 246 / .10); } :root[data-theme="light"] .bg-violet-500\/20 { background-color: rgb(139 92 246 / .13); } :root[data-theme="light"] .bg-violet-500\/25 { background-color: rgb(139 92 246 / .16); } :root[data-theme="light"] .bg-violet-500\/30 { background-color: rgb(139 92 246 / .19); } :root[data-theme="light"] .bg-violet-400\/5 { background-color: rgb(167 139 250 / .04); } :root[data-theme="light"] .bg-violet-400\/10 { background-color: rgb(167 139 250 / .07); } :root[data-theme="light"] .bg-violet-400\/15 { background-color: rgb(167 139 250 / .10); } :root[data-theme="light"] .bg-violet-400\/20 { background-color: rgb(167 139 250 / .13); } :root[data-theme="light"] .bg-violet-400\/25 { background-color: rgb(167 139 250 / .16); } :root[data-theme="light"] .bg-violet-400\/30 { background-color: rgb(167 139 250 / .19); } :root[data-theme="light"] .bg-purple-500\/5 { background-color: rgb(168 85 247 / .04); } :root[data-theme="light"] .bg-purple-500\/10 { background-color: rgb(168 85 247 / .07); } :root[data-theme="light"] .bg-purple-500\/15 { background-color: rgb(168 85 247 / .10); } :root[data-theme="light"] .bg-purple-500\/20 { background-color: rgb(168 85 247 / .13); } :root[data-theme="light"] .bg-purple-500\/25 { background-color: rgb(168 85 247 / .16); } :root[data-theme="light"] .bg-purple-500\/30 { background-color: rgb(168 85 247 / .19); } :root[data-theme="light"] .bg-purple-400\/5 { background-color: rgb(192 132 252 / .04); } :root[data-theme="light"] .bg-purple-400\/10 { background-color: rgb(192 132 252 / .07); } :root[data-theme="light"] .bg-purple-400\/15 { background-color: rgb(192 132 252 / .10); } :root[data-theme="light"] .bg-purple-400\/20 { background-color: rgb(192 132 252 / .13); } :root[data-theme="light"] .bg-purple-400\/25 { background-color: rgb(192 132 252 / .16); } :root[data-theme="light"] .bg-purple-400\/30 { background-color: rgb(192 132 252 / .19); } :root[data-theme="light"] .bg-pink-500\/5 { background-color: rgb(236 72 153 / .04); } :root[data-theme="light"] .bg-pink-500\/10 { background-color: rgb(236 72 153 / .07); } :root[data-theme="light"] .bg-pink-500\/15 { background-color: rgb(236 72 153 / .10); } :root[data-theme="light"] .bg-pink-500\/20 { background-color: rgb(236 72 153 / .13); } :root[data-theme="light"] .bg-pink-500\/25 { background-color: rgb(236 72 153 / .16); } :root[data-theme="light"] .bg-pink-500\/30 { background-color: rgb(236 72 153 / .19); } :root[data-theme="light"] .bg-pink-400\/5 { background-color: rgb(244 114 182 / .04); } :root[data-theme="light"] .bg-pink-400\/10 { background-color: rgb(244 114 182 / .07); } :root[data-theme="light"] .bg-pink-400\/15 { background-color: rgb(244 114 182 / .10); } :root[data-theme="light"] .bg-pink-400\/20 { background-color: rgb(244 114 182 / .13); } :root[data-theme="light"] .bg-pink-400\/25 { background-color: rgb(244 114 182 / .16); } :root[data-theme="light"] .bg-pink-400\/30 { background-color: rgb(244 114 182 / .19); } :root[data-theme="light"] .bg-rose-500\/5 { background-color: rgb(244 63 94 / .04); } :root[data-theme="light"] .bg-rose-500\/10 { background-color: rgb(244 63 94 / .07); } :root[data-theme="light"] .bg-rose-500\/15 { background-color: rgb(244 63 94 / .10); } :root[data-theme="light"] .bg-rose-500\/20 { background-color: rgb(244 63 94 / .13); } :root[data-theme="light"] .bg-rose-500\/25 { background-color: rgb(244 63 94 / .16); } :root[data-theme="light"] .bg-rose-500\/30 { background-color: rgb(244 63 94 / .19); } :root[data-theme="light"] .bg-rose-400\/5 { background-color: rgb(251 113 133 / .04); } :root[data-theme="light"] .bg-rose-400\/10 { background-color: rgb(251 113 133 / .07); } :root[data-theme="light"] .bg-rose-400\/15 { background-color: rgb(251 113 133 / .10); } :root[data-theme="light"] .bg-rose-400\/20 { background-color: rgb(251 113 133 / .13); } :root[data-theme="light"] .bg-rose-400\/25 { background-color: rgb(251 113 133 / .16); } :root[data-theme="light"] .bg-rose-400\/30 { background-color: rgb(251 113 133 / .19); } /* ---------- 6. Gradientes — só o "to-gray-900" (fim do gradiente no fundo da página); from/via-gray-900 são véus sobre foto e ficam escuros ---------- */ :root[data-theme="light"] .to-gray-900 { --tw-gradient-to: var(--bg) var(--tw-gradient-to-position); } /* ---------- 7. Exceção: texto claro sobre fundo colorido/sólido/gradiente continua claro. Um fundo sólido põe as variáveis --kw-*; quem está dentro herda. Classe de escape: .keep-white ---------- */ :root[data-theme="light"] :is(.bg-gray-950, .bg-gray-900, .bg-gray-800, .bg-gray-700, .bg-white, .bg-gray-900\/40, .bg-gray-800\/40, .bg-gray-900\/50, .bg-gray-800\/50, .bg-gray-900\/60, .bg-gray-800\/60, .bg-gray-900\/70, .bg-gray-800\/70, .bg-gray-900\/80, .bg-gray-800\/80, .bg-gray-900\/90, .bg-gray-800\/90, .bg-gray-700\/50, .bg-gray-700\/60, .bg-gray-700\/70) { --kw-white: var(--ink); --kw-white70: rgb(15 23 42 / .7); --kw-white80: rgb(15 23 42 / .8); --kw-white90: rgb(15 23 42 / .9); --kw-gray: var(--text); --kw-red-100: initial; --kw-red-200: initial; --kw-red-300: initial; --kw-orange-100: initial; --kw-orange-200: initial; --kw-orange-300: initial; --kw-amber-100: initial; --kw-amber-200: initial; --kw-amber-300: initial; --kw-yellow-100: initial; --kw-yellow-200: initial; --kw-yellow-300: initial; --kw-lime-100: initial; --kw-lime-200: initial; --kw-lime-300: initial; --kw-green-100: initial; --kw-green-200: initial; --kw-green-300: initial; --kw-emerald-100: initial; --kw-emerald-200: initial; --kw-emerald-300: initial; --kw-teal-100: initial; --kw-teal-200: initial; --kw-teal-300: initial; --kw-cyan-100: initial; --kw-cyan-200: initial; --kw-cyan-300: initial; --kw-sky-100: initial; --kw-sky-200: initial; --kw-sky-300: initial; --kw-blue-100: initial; --kw-blue-200: initial; --kw-blue-300: initial; --kw-indigo-100: initial; --kw-indigo-200: initial; --kw-indigo-300: initial; --kw-violet-100: initial; --kw-violet-200: initial; --kw-violet-300: initial; --kw-purple-100: initial; --kw-purple-200: initial; --kw-purple-300: initial; --kw-pink-100: initial; --kw-pink-200: initial; --kw-pink-300: initial; --kw-rose-100: initial; --kw-rose-200: initial; --kw-rose-300: initial; } :root[data-theme="light"] :is(.keep-white, .bg-black, .bg-cover, .bg-gray-900\/95, .inset-0.bg-gray-900\/60, .inset-0.bg-gray-900\/70, .inset-0.bg-gray-900\/80, .inset-0.bg-gray-900\/90, .bg-red-400, .bg-red-500, .bg-red-600, .bg-red-700, .bg-red-800, .bg-red-500\/70, .bg-red-500\/80, .bg-red-500\/90, .bg-red-500\/95, .bg-red-600\/70, .bg-red-600\/80, .bg-red-600\/90, .bg-red-600\/95, .bg-red-700\/70, .bg-red-700\/80, .bg-red-700\/90, .bg-red-700\/95, .bg-red-800\/70, .bg-red-800\/80, .bg-red-800\/90, .bg-red-800\/95, .bg-red-900\/70, .bg-red-900\/80, .bg-red-900\/90, .bg-red-900\/95, .from-red-300, .from-red-400, .from-red-500, .from-red-600, .from-red-700, .bg-orange-400, .bg-orange-500, .bg-orange-600, .bg-orange-700, .bg-orange-800, .bg-orange-500\/70, .bg-orange-500\/80, .bg-orange-500\/90, .bg-orange-500\/95, .bg-orange-600\/70, .bg-orange-600\/80, .bg-orange-600\/90, .bg-orange-600\/95, .bg-orange-700\/70, .bg-orange-700\/80, .bg-orange-700\/90, .bg-orange-700\/95, .bg-orange-800\/70, .bg-orange-800\/80, .bg-orange-800\/90, .bg-orange-800\/95, .bg-orange-900\/70, .bg-orange-900\/80, .bg-orange-900\/90, .bg-orange-900\/95, .from-orange-300, .from-orange-400, .from-orange-500, .from-orange-600, .from-orange-700, .bg-amber-400, .bg-amber-500, .bg-amber-600, .bg-amber-700, .bg-amber-800, .bg-amber-500\/70, .bg-amber-500\/80, .bg-amber-500\/90, .bg-amber-500\/95, .bg-amber-600\/70, .bg-amber-600\/80, .bg-amber-600\/90, .bg-amber-600\/95, .bg-amber-700\/70, .bg-amber-700\/80, .bg-amber-700\/90, .bg-amber-700\/95, .bg-amber-800\/70, .bg-amber-800\/80, .bg-amber-800\/90, .bg-amber-800\/95, .bg-amber-900\/70, .bg-amber-900\/80, .bg-amber-900\/90, .bg-amber-900\/95, .from-amber-300, .from-amber-400, .from-amber-500, .from-amber-600, .from-amber-700, .bg-yellow-400, .bg-yellow-500, .bg-yellow-600, .bg-yellow-700, .bg-yellow-800, .bg-yellow-500\/70, .bg-yellow-500\/80, .bg-yellow-500\/90, .bg-yellow-500\/95, .bg-yellow-600\/70, .bg-yellow-600\/80, .bg-yellow-600\/90, .bg-yellow-600\/95, .bg-yellow-700\/70, .bg-yellow-700\/80, .bg-yellow-700\/90, .bg-yellow-700\/95, .bg-yellow-800\/70, .bg-yellow-800\/80, .bg-yellow-800\/90, .bg-yellow-800\/95, .bg-yellow-900\/70, .bg-yellow-900\/80, .bg-yellow-900\/90, .bg-yellow-900\/95, .from-yellow-300, .from-yellow-400, .from-yellow-500, .from-yellow-600, .from-yellow-700, .bg-lime-400, .bg-lime-500, .bg-lime-600, .bg-lime-700, .bg-lime-800, .bg-lime-500\/70, .bg-lime-500\/80, .bg-lime-500\/90, .bg-lime-500\/95, .bg-lime-600\/70, .bg-lime-600\/80, .bg-lime-600\/90, .bg-lime-600\/95, .bg-lime-700\/70, .bg-lime-700\/80, .bg-lime-700\/90, .bg-lime-700\/95, .bg-lime-800\/70, .bg-lime-800\/80, .bg-lime-800\/90, .bg-lime-800\/95, .bg-lime-900\/70, .bg-lime-900\/80, .bg-lime-900\/90, .bg-lime-900\/95, .from-lime-300, .from-lime-400, .from-lime-500, .from-lime-600, .from-lime-700, .bg-green-400, .bg-green-500, .bg-green-600, .bg-green-700, .bg-green-800, .bg-green-500\/70, .bg-green-500\/80, .bg-green-500\/90, .bg-green-500\/95, .bg-green-600\/70, .bg-green-600\/80, .bg-green-600\/90, .bg-green-600\/95, .bg-green-700\/70, .bg-green-700\/80, .bg-green-700\/90, .bg-green-700\/95, .bg-green-800\/70, .bg-green-800\/80, .bg-green-800\/90, .bg-green-800\/95, .bg-green-900\/70, .bg-green-900\/80, .bg-green-900\/90, .bg-green-900\/95, .from-green-300, .from-green-400, .from-green-500, .from-green-600, .from-green-700, .bg-emerald-400, .bg-emerald-500, .bg-emerald-600, .bg-emerald-700, .bg-emerald-800, .bg-emerald-500\/70, .bg-emerald-500\/80, .bg-emerald-500\/90, .bg-emerald-500\/95, .bg-emerald-600\/70, .bg-emerald-600\/80, .bg-emerald-600\/90, .bg-emerald-600\/95, .bg-emerald-700\/70, .bg-emerald-700\/80, .bg-emerald-700\/90, .bg-emerald-700\/95, .bg-emerald-800\/70, .bg-emerald-800\/80, .bg-emerald-800\/90, .bg-emerald-800\/95, .bg-emerald-900\/70, .bg-emerald-900\/80, .bg-emerald-900\/90, .bg-emerald-900\/95, .from-emerald-300, .from-emerald-400, .from-emerald-500, .from-emerald-600, .from-emerald-700, .bg-teal-400, .bg-teal-500, .bg-teal-600, .bg-teal-700, .bg-teal-800, .bg-teal-500\/70, .bg-teal-500\/80, .bg-teal-500\/90, .bg-teal-500\/95, .bg-teal-600\/70, .bg-teal-600\/80, .bg-teal-600\/90, .bg-teal-600\/95, .bg-teal-700\/70, .bg-teal-700\/80, .bg-teal-700\/90, .bg-teal-700\/95, .bg-teal-800\/70, .bg-teal-800\/80, .bg-teal-800\/90, .bg-teal-800\/95, .bg-teal-900\/70, .bg-teal-900\/80, .bg-teal-900\/90, .bg-teal-900\/95, .from-teal-300, .from-teal-400, .from-teal-500, .from-teal-600, .from-teal-700, .bg-cyan-400, .bg-cyan-500, .bg-cyan-600, .bg-cyan-700, .bg-cyan-800, .bg-cyan-500\/70, .bg-cyan-500\/80, .bg-cyan-500\/90, .bg-cyan-500\/95, .bg-cyan-600\/70, .bg-cyan-600\/80, .bg-cyan-600\/90, .bg-cyan-600\/95, .bg-cyan-700\/70, .bg-cyan-700\/80, .bg-cyan-700\/90, .bg-cyan-700\/95, .bg-cyan-800\/70, .bg-cyan-800\/80, .bg-cyan-800\/90, .bg-cyan-800\/95, .bg-cyan-900\/70, .bg-cyan-900\/80, .bg-cyan-900\/90, .bg-cyan-900\/95, .from-cyan-300, .from-cyan-400, .from-cyan-500, .from-cyan-600, .from-cyan-700, .bg-sky-400, .bg-sky-500, .bg-sky-600, .bg-sky-700, .bg-sky-800, .bg-sky-500\/70, .bg-sky-500\/80, .bg-sky-500\/90, .bg-sky-500\/95, .bg-sky-600\/70, .bg-sky-600\/80, .bg-sky-600\/90, .bg-sky-600\/95, .bg-sky-700\/70, .bg-sky-700\/80, .bg-sky-700\/90, .bg-sky-700\/95, .bg-sky-800\/70, .bg-sky-800\/80, .bg-sky-800\/90, .bg-sky-800\/95, .bg-sky-900\/70, .bg-sky-900\/80, .bg-sky-900\/90, .bg-sky-900\/95, .from-sky-300, .from-sky-400, .from-sky-500, .from-sky-600, .from-sky-700, .bg-blue-400, .bg-blue-500, .bg-blue-600, .bg-blue-700, .bg-blue-800, .bg-blue-500\/70, .bg-blue-500\/80, .bg-blue-500\/90, .bg-blue-500\/95, .bg-blue-600\/70, .bg-blue-600\/80, .bg-blue-600\/90, .bg-blue-600\/95, .bg-blue-700\/70, .bg-blue-700\/80, .bg-blue-700\/90, .bg-blue-700\/95, .bg-blue-800\/70, .bg-blue-800\/80, .bg-blue-800\/90, .bg-blue-800\/95, .bg-blue-900\/70, .bg-blue-900\/80, .bg-blue-900\/90, .bg-blue-900\/95, .from-blue-300, .from-blue-400, .from-blue-500, .from-blue-600, .from-blue-700, .bg-indigo-400, .bg-indigo-500, .bg-indigo-600, .bg-indigo-700, .bg-indigo-800, .bg-indigo-500\/70, .bg-indigo-500\/80, .bg-indigo-500\/90, .bg-indigo-500\/95, .bg-indigo-600\/70, .bg-indigo-600\/80, .bg-indigo-600\/90, .bg-indigo-600\/95, .bg-indigo-700\/70, .bg-indigo-700\/80, .bg-indigo-700\/90, .bg-indigo-700\/95, .bg-indigo-800\/70, .bg-indigo-800\/80, .bg-indigo-800\/90, .bg-indigo-800\/95, .bg-indigo-900\/70, .bg-indigo-900\/80, .bg-indigo-900\/90, .bg-indigo-900\/95, .from-indigo-300, .from-indigo-400, .from-indigo-500, .from-indigo-600, .from-indigo-700, .bg-violet-400, .bg-violet-500, .bg-violet-600, .bg-violet-700, .bg-violet-800, .bg-violet-500\/70, .bg-violet-500\/80, .bg-violet-500\/90, .bg-violet-500\/95, .bg-violet-600\/70, .bg-violet-600\/80, .bg-violet-600\/90, .bg-violet-600\/95, .bg-violet-700\/70, .bg-violet-700\/80, .bg-violet-700\/90, .bg-violet-700\/95, .bg-violet-800\/70, .bg-violet-800\/80, .bg-violet-800\/90, .bg-violet-800\/95, .bg-violet-900\/70, .bg-violet-900\/80, .bg-violet-900\/90, .bg-violet-900\/95, .from-violet-300, .from-violet-400, .from-violet-500, .from-violet-600, .from-violet-700, .bg-purple-400, .bg-purple-500, .bg-purple-600, .bg-purple-700, .bg-purple-800, .bg-purple-500\/70, .bg-purple-500\/80, .bg-purple-500\/90, .bg-purple-500\/95, .bg-purple-600\/70, .bg-purple-600\/80, .bg-purple-600\/90, .bg-purple-600\/95, .bg-purple-700\/70, .bg-purple-700\/80, .bg-purple-700\/90, .bg-purple-700\/95, .bg-purple-800\/70, .bg-purple-800\/80, .bg-purple-800\/90, .bg-purple-800\/95, .bg-purple-900\/70, .bg-purple-900\/80, .bg-purple-900\/90, .bg-purple-900\/95, .from-purple-300, .from-purple-400, .from-purple-500, .from-purple-600, .from-purple-700, .bg-pink-400, .bg-pink-500, .bg-pink-600, .bg-pink-700, .bg-pink-800, .bg-pink-500\/70, .bg-pink-500\/80, .bg-pink-500\/90, .bg-pink-500\/95, .bg-pink-600\/70, .bg-pink-600\/80, .bg-pink-600\/90, .bg-pink-600\/95, .bg-pink-700\/70, .bg-pink-700\/80, .bg-pink-700\/90, .bg-pink-700\/95, .bg-pink-800\/70, .bg-pink-800\/80, .bg-pink-800\/90, .bg-pink-800\/95, .bg-pink-900\/70, .bg-pink-900\/80, .bg-pink-900\/90, .bg-pink-900\/95, .from-pink-300, .from-pink-400, .from-pink-500, .from-pink-600, .from-pink-700, .bg-rose-400, .bg-rose-500, .bg-rose-600, .bg-rose-700, .bg-rose-800, .bg-rose-500\/70, .bg-rose-500\/80, .bg-rose-500\/90, .bg-rose-500\/95, .bg-rose-600\/70, .bg-rose-600\/80, .bg-rose-600\/90, .bg-rose-600\/95, .bg-rose-700\/70, .bg-rose-700\/80, .bg-rose-700\/90, .bg-rose-700\/95, .bg-rose-800\/70, .bg-rose-800\/80, .bg-rose-800\/90, .bg-rose-800\/95, .bg-rose-900\/70, .bg-rose-900\/80, .bg-rose-900\/90, .bg-rose-900\/95, .from-rose-300, .from-rose-400, .from-rose-500, .from-rose-600, .from-rose-700, .bg-black\/50, .bg-black\/60, .bg-black\/70, .bg-black\/80, .bg-black\/90) { --kw-white: #fff; --kw-white70: rgb(255 255 255 / .7); --kw-white80: rgb(255 255 255 / .8); --kw-white90: rgb(255 255 255 / .9); --kw-gray: #e5e7eb; --kw-red-100: 254 226 226; --kw-red-200: 254 202 202; --kw-red-300: 252 165 165; --kw-orange-100: 255 237 213; --kw-orange-200: 254 215 170; --kw-orange-300: 253 186 116; --kw-amber-100: 254 243 199; --kw-amber-200: 253 230 138; --kw-amber-300: 252 211 77; --kw-yellow-100: 254 249 195; --kw-yellow-200: 254 240 138; --kw-yellow-300: 253 224 71; --kw-lime-100: 236 252 203; --kw-lime-200: 217 249 157; --kw-lime-300: 190 242 100; --kw-green-100: 220 252 231; --kw-green-200: 187 247 208; --kw-green-300: 134 239 172; --kw-emerald-100: 209 250 229; --kw-emerald-200: 167 243 208; --kw-emerald-300: 110 231 183; --kw-teal-100: 204 251 241; --kw-teal-200: 153 246 228; --kw-teal-300: 94 234 212; --kw-cyan-100: 207 250 254; --kw-cyan-200: 165 243 252; --kw-cyan-300: 103 232 249; --kw-sky-100: 224 242 254; --kw-sky-200: 186 230 253; --kw-sky-300: 125 211 252; --kw-blue-100: 219 234 254; --kw-blue-200: 191 219 254; --kw-blue-300: 147 197 253; --kw-indigo-100: 224 231 255; --kw-indigo-200: 199 210 254; --kw-indigo-300: 165 180 252; --kw-violet-100: 237 233 254; --kw-violet-200: 221 214 254; --kw-violet-300: 196 181 253; --kw-purple-100: 243 232 255; --kw-purple-200: 233 213 255; --kw-purple-300: 216 180 254; --kw-pink-100: 252 231 243; --kw-pink-200: 251 207 232; --kw-pink-300: 249 168 212; --kw-rose-100: 255 228 230; --kw-rose-200: 254 205 211; --kw-rose-300: 253 164 175; } :root[data-theme="light"] :is(.hover\:bg-cyan-500, .hover\:bg-cyan-600, .hover\:bg-cyan-700, .hover\:bg-emerald-500, .hover\:bg-emerald-600, .hover\:bg-emerald-700, .hover\:bg-red-500, .hover\:bg-red-600, .hover\:bg-red-700, .hover\:bg-amber-500, .hover\:bg-amber-600, .hover\:bg-amber-700, .hover\:bg-violet-500, .hover\:bg-violet-600, .hover\:bg-violet-700, .hover\:bg-orange-500, .hover\:bg-orange-600, .hover\:bg-orange-700, .hover\:bg-blue-500, .hover\:bg-blue-600, .hover\:bg-blue-700, .hover\:bg-sky-500, .hover\:bg-sky-600, .hover\:bg-sky-700, .hover\:bg-indigo-500, .hover\:bg-indigo-600, .hover\:bg-indigo-700, .hover\:bg-teal-500, .hover\:bg-teal-600, .hover\:bg-teal-700, .hover\:bg-pink-500, .hover\:bg-pink-600, .hover\:bg-pink-700, .hover\:bg-rose-500, .hover\:bg-rose-600, .hover\:bg-rose-700):hover { color: #fff; } :root[data-theme="light"] .peer:checked ~ .peer-checked\:text-white { color: #fff; } :root[data-theme="light"] .after\:bg-white::after { background-color: #fff; } /* ---------- 8. style="" com cor fixa (o inline vence classe: só !important resolve) — cada regra vale para o valor exato do escuro ---------- */ :root[data-theme="light"] :is([style^="color:#f9fafb" i], [style*=";color:#f9fafb" i], [style*=" color:#f9fafb" i], [style^="color: #f9fafb" i], [style*=";color: #f9fafb" i], [style*=" color: #f9fafb" i], [style^="color:#f1f5f9" i], [style*=";color:#f1f5f9" i], [style*=" color:#f1f5f9" i], [style^="color: #f1f5f9" i], [style*=";color: #f1f5f9" i], [style*=" color: #f1f5f9" i], [style^="color:#f8fafc" i], [style*=";color:#f8fafc" i], [style*=" color:#f8fafc" i], [style^="color: #f8fafc" i], [style*=";color: #f8fafc" i], [style*=" color: #f8fafc" i]) { color: var(--ink) !important; } :root[data-theme="light"] :is([style^="color:#e5e7eb" i], [style*=";color:#e5e7eb" i], [style*=" color:#e5e7eb" i], [style^="color: #e5e7eb" i], [style*=";color: #e5e7eb" i], [style*=" color: #e5e7eb" i], [style^="color:#e2e8f0" i], [style*=";color:#e2e8f0" i], [style*=" color:#e2e8f0" i], [style^="color: #e2e8f0" i], [style*=";color: #e2e8f0" i], [style*=" color: #e2e8f0" i], [style^="color:#cbd5e1" i], [style*=";color:#cbd5e1" i], [style*=" color:#cbd5e1" i], [style^="color: #cbd5e1" i], [style*=";color: #cbd5e1" i], [style*=" color: #cbd5e1" i], [style^="color:#d1d5db" i], [style*=";color:#d1d5db" i], [style*=" color:#d1d5db" i], [style^="color: #d1d5db" i], [style*=";color: #d1d5db" i], [style*=" color: #d1d5db" i]) { color: var(--text) !important; } :root[data-theme="light"] :is([style^="color:#9ca3af" i], [style*=";color:#9ca3af" i], [style*=" color:#9ca3af" i], [style^="color: #9ca3af" i], [style*=";color: #9ca3af" i], [style*=" color: #9ca3af" i], [style^="color:#94a3b8" i], [style*=";color:#94a3b8" i], [style*=" color:#94a3b8" i], [style^="color: #94a3b8" i], [style*=";color: #94a3b8" i], [style*=" color: #94a3b8" i], [style^="color:#6b7280" i], [style*=";color:#6b7280" i], [style*=" color:#6b7280" i], [style^="color: #6b7280" i], [style*=";color: #6b7280" i], [style*=" color: #6b7280" i]) { color: var(--text-muted) !important; } :root[data-theme="light"] :is([style^="color:#4b5563" i], [style*=";color:#4b5563" i], [style*=" color:#4b5563" i], [style^="color: #4b5563" i], [style*=";color: #4b5563" i], [style*=" color: #4b5563" i]) { color: var(--text-subtle) !important; } :root[data-theme="light"] :is([style^="color:#a78bfa" i], [style*=";color:#a78bfa" i], [style*=" color:#a78bfa" i], [style^="color: #a78bfa" i], [style*=";color: #a78bfa" i], [style*=" color: #a78bfa" i]) { color: #7c3aed !important; } :root[data-theme="light"] :is([style^="color:#6ee7b7" i], [style*=";color:#6ee7b7" i], [style*=" color:#6ee7b7" i], [style^="color: #6ee7b7" i], [style*=";color: #6ee7b7" i], [style*=" color: #6ee7b7" i], [style^="color:#34d399" i], [style*=";color:#34d399" i], [style*=" color:#34d399" i], [style^="color: #34d399" i], [style*=";color: #34d399" i], [style*=" color: #34d399" i], [style^="color:#4ade80" i], [style*=";color:#4ade80" i], [style*=" color:#4ade80" i], [style^="color: #4ade80" i], [style*=";color: #4ade80" i], [style*=" color: #4ade80" i], [style^="color:#86efac" i], [style*=";color:#86efac" i], [style*=" color:#86efac" i], [style^="color: #86efac" i], [style*=";color: #86efac" i], [style*=" color: #86efac" i]) { color: #047857 !important; } :root[data-theme="light"] :is([style^="color:#fca5a5" i], [style*=";color:#fca5a5" i], [style*=" color:#fca5a5" i], [style^="color: #fca5a5" i], [style*=";color: #fca5a5" i], [style*=" color: #fca5a5" i], [style^="color:#fecaca" i], [style*=";color:#fecaca" i], [style*=" color:#fecaca" i], [style^="color: #fecaca" i], [style*=";color: #fecaca" i], [style*=" color: #fecaca" i], [style^="color:#f87171" i], [style*=";color:#f87171" i], [style*=" color:#f87171" i], [style^="color: #f87171" i], [style*=";color: #f87171" i], [style*=" color: #f87171" i]) { color: #b91c1c !important; } :root[data-theme="light"] :is([style^="color:#22d3ee" i], [style*=";color:#22d3ee" i], [style*=" color:#22d3ee" i], [style^="color: #22d3ee" i], [style*=";color: #22d3ee" i], [style*=" color: #22d3ee" i], [style^="color:#67e8f9" i], [style*=";color:#67e8f9" i], [style*=" color:#67e8f9" i], [style^="color: #67e8f9" i], [style*=";color: #67e8f9" i], [style*=" color: #67e8f9" i]) { color: #0e7490 !important; } :root[data-theme="light"] :is([style^="color:#fbbf24" i], [style*=";color:#fbbf24" i], [style*=" color:#fbbf24" i], [style^="color: #fbbf24" i], [style*=";color: #fbbf24" i], [style*=" color: #fbbf24" i], [style^="color:#facc15" i], [style*=";color:#facc15" i], [style*=" color:#facc15" i], [style^="color: #facc15" i], [style*=";color: #facc15" i], [style*=" color: #facc15" i], [style^="color:#fcd34d" i], [style*=";color:#fcd34d" i], [style*=" color:#fcd34d" i], [style^="color: #fcd34d" i], [style*=";color: #fcd34d" i], [style*=" color: #fcd34d" i]) { color: #b45309 !important; } :root[data-theme="light"] :is([style^="color:#38bdf8" i], [style*=";color:#38bdf8" i], [style*=" color:#38bdf8" i], [style^="color: #38bdf8" i], [style*=";color: #38bdf8" i], [style*=" color: #38bdf8" i], [style^="color:#7dd3fc" i], [style*=";color:#7dd3fc" i], [style*=" color:#7dd3fc" i], [style^="color: #7dd3fc" i], [style*=";color: #7dd3fc" i], [style*=" color: #7dd3fc" i]) { color: #0369a1 !important; } :root[data-theme="light"] :is([style^="color:#fb923c" i], [style*=";color:#fb923c" i], [style*=" color:#fb923c" i], [style^="color: #fb923c" i], [style*=";color: #fb923c" i], [style*=" color: #fb923c" i]) { color: #c2410c !important; } :root[data-theme="light"] :is([style^="color:#f472b6" i], [style*=";color:#f472b6" i], [style*=" color:#f472b6" i], [style^="color: #f472b6" i], [style*=";color: #f472b6" i], [style*=" color: #f472b6" i]) { color: #be185d !important; } :root[data-theme="light"] :is([style^="color:#84cc16" i], [style*=";color:#84cc16" i], [style*=" color:#84cc16" i], [style^="color: #84cc16" i], [style*=";color: #84cc16" i], [style*=" color: #84cc16" i]) { color: #4d7c0f !important; } :root[data-theme="light"] :is([style^="color:#f59e0b" i], [style*=";color:#f59e0b" i], [style*=" color:#f59e0b" i], [style^="color: #f59e0b" i], [style*=";color: #f59e0b" i], [style*=" color: #f59e0b" i]) { color: #b45309 !important; } :root[data-theme="light"] :is([style^="color:#0ea5e9" i], [style*=";color:#0ea5e9" i], [style*=" color:#0ea5e9" i], [style^="color: #0ea5e9" i], [style*=";color: #0ea5e9" i], [style*=" color: #0ea5e9" i]) { color: #0369a1 !important; } :root[data-theme="light"] :is([style^="color:#8b5cf6" i], [style*=";color:#8b5cf6" i], [style*=" color:#8b5cf6" i], [style^="color: #8b5cf6" i], [style*=";color: #8b5cf6" i], [style*=" color: #8b5cf6" i]) { color: #6d28d9 !important; } :root[data-theme="light"] :is([style^="color:#f43f5e" i], [style*=";color:#f43f5e" i], [style*=" color:#f43f5e" i], [style^="color: #f43f5e" i], [style*=";color: #f43f5e" i], [style*=" color: #f43f5e" i]) { color: #be123c !important; } :root[data-theme="light"] :is([style^="color:#10b981" i], [style*=";color:#10b981" i], [style*=" color:#10b981" i], [style^="color: #10b981" i], [style*=";color: #10b981" i], [style*=" color: #10b981" i]) { color: #047857 !important; } :root[data-theme="light"] :is([style^="color:#06b6d4" i], [style*=";color:#06b6d4" i], [style*=" color:#06b6d4" i], [style^="color: #06b6d4" i], [style*=";color: #06b6d4" i], [style*=" color: #06b6d4" i]) { color: #0e7490 !important; } :root[data-theme="light"] :is([style^="color:#f97316" i], [style*=";color:#f97316" i], [style*=" color:#f97316" i], [style^="color: #f97316" i], [style*=";color: #f97316" i], [style*=" color: #f97316" i]) { color: #c2410c !important; } :root[data-theme="light"] :is([style^="background:#0f172a" i], [style*=";background:#0f172a" i], [style*=" background:#0f172a" i], [style^="background: #0f172a" i], [style*=";background: #0f172a" i], [style*=" background: #0f172a" i], [style^="background:#1f2937" i], [style*=";background:#1f2937" i], [style*=" background:#1f2937" i], [style^="background: #1f2937" i], [style*=";background: #1f2937" i], [style*=" background: #1f2937" i]) { background: var(--bg) !important; } :root[data-theme="light"] :is([style^="background:#111827" i], [style*=";background:#111827" i], [style*=" background:#111827" i], [style^="background: #111827" i], [style*=";background: #111827" i], [style*=" background: #111827" i], [style^="background:#1e293b" i], [style*=";background:#1e293b" i], [style*=" background:#1e293b" i], [style^="background: #1e293b" i], [style*=";background: #1e293b" i], [style*=" background: #1e293b" i]) { background: var(--surface) !important; } :root[data-theme="light"] :is([style^="background:#334155" i], [style*=";background:#334155" i], [style*=" background:#334155" i], [style^="background: #334155" i], [style*=";background: #334155" i], [style*=" background: #334155" i], [style^="background:#374151" i], [style*=";background:#374151" i], [style*=" background:#374151" i], [style^="background: #374151" i], [style*=";background: #374151" i], [style*=" background: #374151" i]) { background: var(--bg-alt) !important; } :root[data-theme="light"] :is([style^="background:rgba(255,255,255,0.07)" i], [style*=";background:rgba(255,255,255,0.07)" i], [style*=" background:rgba(255,255,255,0.07)" i], [style^="background: rgba(255,255,255,0.07)" i], [style*=";background: rgba(255,255,255,0.07)" i], [style*=" background: rgba(255,255,255,0.07)" i], [style^="background:rgba(255,255,255,0.05)" i], [style*=";background:rgba(255,255,255,0.05)" i], [style*=" background:rgba(255,255,255,0.05)" i], [style^="background: rgba(255,255,255,0.05)" i], [style*=";background: rgba(255,255,255,0.05)" i], [style*=" background: rgba(255,255,255,0.05)" i], [style^="background:rgba(255,255,255,0.08)" i], [style*=";background:rgba(255,255,255,0.08)" i], [style*=" background:rgba(255,255,255,0.08)" i], [style^="background: rgba(255,255,255,0.08)" i], [style*=";background: rgba(255,255,255,0.08)" i], [style*=" background: rgba(255,255,255,0.08)" i], [style^="background:rgba(255,255,255,.07)" i], [style*=";background:rgba(255,255,255,.07)" i], [style*=" background:rgba(255,255,255,.07)" i], [style^="background: rgba(255,255,255,.07)" i], [style*=";background: rgba(255,255,255,.07)" i], [style*=" background: rgba(255,255,255,.07)" i]) { background: rgb(15 23 42 / .06) !important; } :root[data-theme="light"] :is([style^="background-color:#0f172a" i], [style*=";background-color:#0f172a" i], [style*=" background-color:#0f172a" i], [style^="background-color: #0f172a" i], [style*=";background-color: #0f172a" i], [style*=" background-color: #0f172a" i], [style^="background-color:#1f2937" i], [style*=";background-color:#1f2937" i], [style*=" background-color:#1f2937" i], [style^="background-color: #1f2937" i], [style*=";background-color: #1f2937" i], [style*=" background-color: #1f2937" i]) { background-color: var(--bg) !important; } :root[data-theme="light"] :is([style^="background-color:#1e293b" i], [style*=";background-color:#1e293b" i], [style*=" background-color:#1e293b" i], [style^="background-color: #1e293b" i], [style*=";background-color: #1e293b" i], [style*=" background-color: #1e293b" i], [style^="background-color:#111827" i], [style*=";background-color:#111827" i], [style*=" background-color:#111827" i], [style^="background-color: #111827" i], [style*=";background-color: #111827" i], [style*=" background-color: #111827" i]) { background-color: var(--surface) !important; } :root[data-theme="light"] :is([style^="border:1px solid #334155" i], [style*=";border:1px solid #334155" i], [style*=" border:1px solid #334155" i], [style^="border: 1px solid #334155" i], [style*=";border: 1px solid #334155" i], [style*=" border: 1px solid #334155" i], [style^="border:1px solid #374151" i], [style*=";border:1px solid #374151" i], [style*=" border:1px solid #374151" i], [style^="border: 1px solid #374151" i], [style*=";border: 1px solid #374151" i], [style*=" border: 1px solid #374151" i]) { border-color: var(--border) !important; } :root[data-theme="light"] :is([style^="border:1px solid rgba(255,255,255,0.1)" i], [style*=";border:1px solid rgba(255,255,255,0.1)" i], [style*=" border:1px solid rgba(255,255,255,0.1)" i], [style^="border: 1px solid rgba(255,255,255,0.1)" i], [style*=";border: 1px solid rgba(255,255,255,0.1)" i], [style*=" border: 1px solid rgba(255,255,255,0.1)" i], [style^="border:1px solid rgba(255,255,255,0.12)" i], [style*=";border:1px solid rgba(255,255,255,0.12)" i], [style*=" border:1px solid rgba(255,255,255,0.12)" i], [style^="border: 1px solid rgba(255,255,255,0.12)" i], [style*=";border: 1px solid rgba(255,255,255,0.12)" i], [style*=" border: 1px solid rgba(255,255,255,0.12)" i], [style^="border:1px solid rgba(255,255,255,0.15)" i], [style*=";border:1px solid rgba(255,255,255,0.15)" i], [style*=" border:1px solid rgba(255,255,255,0.15)" i], [style^="border: 1px solid rgba(255,255,255,0.15)" i], [style*=";border: 1px solid rgba(255,255,255,0.15)" i], [style*=" border: 1px solid rgba(255,255,255,0.15)" i], [style^="border:1px solid rgba(255,255,255,0.25)" i], [style*=";border:1px solid rgba(255,255,255,0.25)" i], [style*=" border:1px solid rgba(255,255,255,0.25)" i], [style^="border: 1px solid rgba(255,255,255,0.25)" i], [style*=";border: 1px solid rgba(255,255,255,0.25)" i], [style*=" border: 1px solid rgba(255,255,255,0.25)" i]) { border-color: var(--border-strong) !important; } :root[data-theme="light"] :is([style^="border-top:1px solid #475569" i], [style*=";border-top:1px solid #475569" i], [style*=" border-top:1px solid #475569" i], [style^="border-top: 1px solid #475569" i], [style*=";border-top: 1px solid #475569" i], [style*=" border-top: 1px solid #475569" i], [style^="border-top:1px solid #334155" i], [style*=";border-top:1px solid #334155" i], [style*=" border-top:1px solid #334155" i], [style^="border-top: 1px solid #334155" i], [style*=";border-top: 1px solid #334155" i], [style*=" border-top: 1px solid #334155" i], [style^="border-top:1px solid rgba(255,255,255,0.07)" i], [style*=";border-top:1px solid rgba(255,255,255,0.07)" i], [style*=" border-top:1px solid rgba(255,255,255,0.07)" i], [style^="border-top: 1px solid rgba(255,255,255,0.07)" i], [style*=";border-top: 1px solid rgba(255,255,255,0.07)" i], [style*=" border-top: 1px solid rgba(255,255,255,0.07)" i]) { border-top-color: var(--border) !important; } :root[data-theme="light"] :is([style^="border-bottom:1px solid #334155" i], [style*=";border-bottom:1px solid #334155" i], [style*=" border-bottom:1px solid #334155" i], [style^="border-bottom: 1px solid #334155" i], [style*=";border-bottom: 1px solid #334155" i], [style*=" border-bottom: 1px solid #334155" i], [style^="border-bottom:1px solid rgba(255,255,255,0.07)" i], [style*=";border-bottom:1px solid rgba(255,255,255,0.07)" i], [style*=" border-bottom:1px solid rgba(255,255,255,0.07)" i], [style^="border-bottom: 1px solid rgba(255,255,255,0.07)" i], [style*=";border-bottom: 1px solid rgba(255,255,255,0.07)" i], [style*=" border-bottom: 1px solid rgba(255,255,255,0.07)" i]) { border-bottom-color: var(--border) !important; } :root[data-theme="light"] :is([style^="border-color:#334155" i], [style*=";border-color:#334155" i], [style*=" border-color:#334155" i], [style^="border-color: #334155" i], [style*=";border-color: #334155" i], [style*=" border-color: #334155" i], [style^="border-color:#374151" i], [style*=";border-color:#374151" i], [style*=" border-color:#374151" i], [style^="border-color: #374151" i], [style*=";border-color: #374151" i], [style*=" border-color: #374151" i]) { border-color: var(--border) !important; } :root[data-theme="light"] svg :is([stroke="#334155" i], [stroke="#374151" i]) { stroke: var(--track); } :root[data-theme="light"] svg [stroke="#A78BFA" i] { stroke: #7c3aed; } /* ---------- 9. CSS embutido nas views (escritas para o escuro) — contrapartida clara, sem editar a view ---------- */ :root[data-theme="light"] .wz-step-indicator.pending { background: var(--surface); color: var(--text-muted); border-color: var(--border-strong); } :root[data-theme="light"] .badge-critico { color: #b91c1c; } :root[data-theme="light"] .badge-atencao { color: #b45309; } :root[data-theme="light"] .badge-observacao { color: #1d4ed8; } :root[data-theme="light"] .step-line { background: var(--border-strong); } :root[data-theme="light"] .step-line.done { background: #0e7490; } :root[data-theme="light"] .wz-input { background: var(--surface); border-color: var(--border-strong); color: var(--ink); } :root[data-theme="light"] .wz-input:focus { border-color: #06b6d4; } :root[data-theme="light"] .wz-input::placeholder { color: var(--placeholder); } :root[data-theme="light"] .wz-field-display { background: var(--bg); border-color: var(--border); } :root[data-theme="light"] .lanc-in { background: var(--surface); border-color: var(--border-strong); color: var(--ink); } :root[data-theme="light"] .lanc-in[data-sug="1"] { color: var(--text-muted); background: var(--surface-2); } :root[data-theme="light"] .lanc-in:disabled { background: transparent; border-color: transparent; color: var(--text); } :root[data-theme="light"] .lanc-in.lanc-erro { color: #b91c1c; } :root[data-theme="light"] .lanc-in.lanc-piscou { border-color: #059669; } :root[data-theme="light"] .opo-range { background: var(--border-strong); } :root[data-theme="light"] .opo-range::-webkit-slider-thumb { border-color: #fff; } :root[data-theme="light"] .opo-range::-moz-range-thumb { border-color: #fff; } :root[data-theme="light"] .opo-flash { outline-color: #0891b2; } :root[data-theme="light"] .om-toast { color: var(--ink); background: var(--surface); border-color: var(--border-strong); box-shadow: var(--shadow-lg); } :root[data-theme="light"] .om-toast-ok .om-toast-ico { color: #059669; } :root[data-theme="light"] .om-toast-erro .om-toast-ico { color: #dc2626; } :root[data-theme="light"] .om-toast-info .om-toast-ico { color: #7c3aed; } :root[data-theme="light"] .om-fb-thumb { background: var(--bg); border-color: var(--border-strong); } :root[data-theme="light"] .om-fb-thumb img { background: var(--bg-alt); } :root[data-theme="light"] .om-fb-thumb .om-fb-thumb-nome { color: var(--text); } :root[data-theme="light"] .om-fb-thumb .om-fb-thumb-tam { color: var(--text-muted); } :root[data-theme="light"] #om-feedback-modal { background: rgb(15 23 42 / .5) !important; } :root[data-theme="light"] #om-feedback-modal kbd { background: var(--bg-alt) !important; color: var(--ink); } :root[data-theme="light"] #om-feedback-modal :is(input, textarea)::placeholder { color: var(--placeholder); } :root[data-theme="light"] #om-feedback-modal :is(input:not([type=radio]):not([type=checkbox]), textarea) { color: var(--ink) !important; } /* ---------- 10. ApexCharts (o embrulho de seed-tema.js já traduz opções; aqui o que é HTML/CSS: tooltip, legenda, menu) ---------- */ :root[data-theme="light"] .apexcharts-tooltip { background: var(--surface) !important; border-color: var(--border-strong) !important; color: var(--text) !important; box-shadow: var(--shadow-lg) !important; } :root[data-theme="light"] .apexcharts-tooltip-title { background: var(--surface-2) !important; border-bottom-color: var(--border) !important; color: var(--ink); } :root[data-theme="light"] .apexcharts-tooltip-text, :root[data-theme="light"] .apexcharts-tooltip-text-y-label, :root[data-theme="light"] .apexcharts-tooltip-text-y-value, :root[data-theme="light"] .apexcharts-tooltip-text-goals-value, :root[data-theme="light"] .apexcharts-tooltip-text-z-value { color: var(--text); } :root[data-theme="light"] :is(.apexcharts-xaxistooltip, .apexcharts-yaxistooltip) { background: var(--surface) !important; border-color: var(--border-strong) !important; color: var(--text) !important; } :root[data-theme="light"] .apexcharts-xaxistooltip-bottom::before, :root[data-theme="light"] .apexcharts-xaxistooltip-bottom::after { border-bottom-color: var(--border-strong); } :root[data-theme="light"] .apexcharts-xaxistooltip-top::before, :root[data-theme="light"] .apexcharts-xaxistooltip-top::after { border-top-color: var(--border-strong); } :root[data-theme="light"] .apexcharts-legend-text { color: var(--text) !important; } :root[data-theme="light"] .apexcharts-menu { background: var(--surface) !important; border-color: var(--border-strong) !important; color: var(--text); } :root[data-theme="light"] .apexcharts-menu-item:hover { background: var(--bg) !important; } :root[data-theme="light"] :is(.apexcharts-toolbar .apexcharts-menu-icon, .apexcharts-zoom-icon, .apexcharts-zoomin-icon, .apexcharts-zoomout-icon, .apexcharts-reset-icon, .apexcharts-pan-icon) svg { fill: var(--text-muted); } :root[data-theme="light"] #custoChart .apexcharts-yaxis-label:hover { fill: var(--primary-text); } /* ---------- 11. Leaflet (mapas): fundo, popups, tooltips, controles; tiles claros vêm de seedMapaTiles() em seed-tema.js ---------- */ :root[data-theme="light"] .leaflet-container { background: var(--bg-alt); } :root[data-theme="light"] .leaflet-popup-content-wrapper, :root[data-theme="light"] .leaflet-popup-tip { background: var(--surface); color: var(--text); border: 1px solid var(--border); box-shadow: var(--shadow); } :root[data-theme="light"] .leaflet-popup-content-wrapper a, :root[data-theme="light"] .leaflet-popup-content a { color: var(--primary-text); } :root[data-theme="light"] .leaflet-container a.leaflet-popup-close-button { color: var(--text-muted); } :root[data-theme="light"] .seed-popup a.leaflet-popup-close-button { color: var(--ink); background: rgb(255 255 255 / .85); } :root[data-theme="light"] :is(.leaflet-tooltip.seed-dica, .opo-mapa .leaflet-tooltip) { background: var(--surface); color: var(--ink); border: 1px solid var(--border-strong); box-shadow: var(--shadow); } :root[data-theme="light"] .opo-mapa .leaflet-popup-content-wrapper, :root[data-theme="light"] .opo-mapa .leaflet-popup-tip { background: var(--surface); color: var(--text); border-color: var(--border); } /* ---------- 12. Impressão: FORÇA O CLARO mesmo com data-theme="dark" (seed-tema.js também troca o atributo em beforeprint) ---------- */ @media print { :root[data-theme="dark"] { --primary: #0891B2; --primary-hover: #0E7490; --primary-text: #0E7490; --primary-soft: #ECFEFF; --primary-ring: rgba(8, 145, 178, .25); --logo-a: #38BDF8; --logo-b: #3B82F6; --bg: #F1F5F9; --bg-alt: #E2E8F0; --surface: #FFFFFF; --surface-2: #F8FAFC; --surface-card: #FFFFFF; --sidebar: #FFFFFF; --topbar: #FFFFFF; --border: #E2E8F0; --border-strong: #CBD5E1; --track: #E2E8F0; --ink: #0F172A; --text: #1E293B; --text-muted: #64748B; --text-subtle: #94A3B8; --success: #059669; --success-bg: #D1FAE5; --warning: #D97706; --warning-bg: #FEF3C7; --danger: #DC2626; --danger-bg: #FEE2E2; --danger-border: #FCA5A5; --info: #2563EB; --info-bg: #DBEAFE; --c-cyan: #0891B2; --c-emerald: #059669; --c-violet: #7C3AED; --c-orange: #EA580C; --c-blue: #2563EB; --c-yellow: #CA8A04; --c-pink: #DB2777; --c-teal: #0D9488; /* extensão desta POC (mesma escala -600 do Tailwind): famílias que o design system não nomeia */ --c-red: #DC2626; --c-amber: #D97706; --c-sky: #0284C7; --c-indigo: #4F46E5; --c-rose: #E11D48; --c-lime: #65A30D; --c-purple: #9333EA; --c-green: #16A34A; --tint: .10; --placeholder: #7B8AA0; --text-2: #586780; --text-3: #63728A; --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06); --shadow: 0 6px 18px rgba(15, 23, 42, .08); --shadow-lg: 0 14px 40px rgba(15, 23, 42, .14); color-scheme: light; } /* Fichas, relatórios e o que mais for impresso saem em folha branca: a sidebar, o cabeçalho, as faixas, os botões e os widgets flutuantes somem. (Fichas e o relatório de crise têm regras próprias que continuam valendo por cima.) */ html, body { height: auto !important; overflow: visible !important; display: block !important; background: #fff !important; color: var(--ink); -webkit-print-color-adjust: exact; print-color-adjust: exact; } .om-sidebar, aside, .om-topbar, #om-faixa-perfil, .theme-toggle, #ai-widget, #om-feedback-trigger, #om-feedback-chip, #om-feedback-modal, .om-toast, .no-print { display: none !important; } body > div, body > div > div, main { overflow: visible !important; height: auto !important; position: static !important; display: block !important; padding: 0 !important; background: #fff !important; } .fixed:not(#ficha-cabecalho) { display: none !important; } .sticky { position: static !important; } /* gráficos: seed-tema.js redesenha em claro no beforeprint; estas regras são a rede de segurança se o evento não disparar */ .apexcharts-xaxis-texts-g text, .apexcharts-yaxis-texts-g text { fill: #64748b !important; } .apexcharts-legend-text { color: #1e293b !important; } .apexcharts-gridline { stroke: #e2e8f0 !important; } /* >>> GERADO por gen.php (SPEC-20) — manter à mão daqui em diante <<< */ /* ---------- 1. Fundos neutros (gray) — escuro → claro ---------- */ :root[data-theme="dark"] .bg-gray-950 { background-color: var(--surface); } :root[data-theme="dark"] .bg-gray-900 { background-color: var(--bg); } :root[data-theme="dark"] :is(.shadow-lg, .shadow-xl, .shadow-2xl).bg-gray-900 { background-color: var(--surface); } :root[data-theme="dark"] :is(.bg-gray-900\/20, .bg-gray-900\/30) { background-color: var(--surface-2); } :root[data-theme="dark"] :is(.bg-gray-900\/40, .bg-gray-900\/50, .bg-gray-900\/60, .bg-gray-900\/70, .bg-gray-900\/80, .bg-gray-900\/90) { background-color: var(--bg); } :root[data-theme="dark"] .inset-0:is(.bg-gray-900\/80, .bg-gray-900\/90, .bg-gray-900\/70, .bg-gray-900\/60) { background-color: rgb(15 23 42 / .45); } :root[data-theme="dark"] .bg-gray-800 { background-color: var(--surface); } :root[data-theme="dark"] .bg-gray-800:not([class*="shadow"]):not([class*="ring"]) { box-shadow: var(--shadow-sm); } :root[data-theme="dark"] :is(.bg-gray-800\/50, .bg-gray-800\/60, .bg-gray-800\/70, .bg-gray-800\/80) { background-color: var(--surface); } :root[data-theme="dark"] :is(.bg-gray-800\/30, .bg-gray-800\/40) { background-color: var(--surface-2); } :root[data-theme="dark"] .bg-gray-700 { background-color: var(--bg-alt); } :root[data-theme="dark"] :is(.bg-gray-700\/70, .bg-gray-700\/60, .bg-gray-700\/50) { background-color: var(--bg-alt); } :root[data-theme="dark"] :is(.bg-gray-700\/40, .bg-gray-700\/30, .bg-gray-700\/20) { background-color: var(--surface-2); } :root[data-theme="dark"] .bg-gray-600 { background-color: var(--border-strong); } :root[data-theme="dark"] .bg-gray-600\/30 { background-color: var(--surface-2); } :root[data-theme="dark"] .bg-gray-500 { background-color: var(--text-subtle); } :root[data-theme="dark"] .before\:bg-gray-700::before { background-color: var(--bg-alt); } :root[data-theme="dark"] .file\:bg-gray-700::file-selector-button { background-color: var(--bg-alt); } :root[data-theme="dark"] .file\:text-white::file-selector-button { color: var(--ink); } /* ---------- 1b. Fundos neutros em :hover / group-hover ---------- */ :root[data-theme="dark"] .hover\:bg-gray-800:hover { background-color: var(--surface-2); } :root[data-theme="dark"] :is(.hover\:bg-gray-800\/70):hover { background-color: var(--surface-2); } :root[data-theme="dark"] .hover\:bg-gray-700:hover { background-color: var(--bg-alt); } :root[data-theme="dark"] :is(.hover\:bg-gray-700\/50, .hover\:bg-gray-700\/40, .hover\:bg-gray-700\/30, .hover\:bg-gray-700\/20):hover { background-color: var(--surface-2); } :root[data-theme="dark"] .hover\:bg-gray-600:hover { background-color: var(--border-strong); } :root[data-theme="dark"] :is(.hover\:bg-gray-900\/40, .hover\:bg-gray-900\/60, .hover\:bg-gray-900\/70):hover { background-color: var(--bg); } :root[data-theme="dark"] .hover\:bg-white\/5:hover { background-color: rgb(15 23 42 / .05); } :root[data-theme="dark"] .group:hover .group-hover\:bg-gray-700 { background-color: var(--bg-alt); } /* ---------- 2. Bordas neutras ---------- */ :root[data-theme="dark"] :is(.border-gray-800, .border-gray-700, .border-gray-700\/30, .border-gray-700\/40, .border-gray-700\/50, .border-gray-700\/60, .border-gray-700\/70, .xl\:border-gray-700) { border-color: var(--border); } :root[data-theme="dark"] :is(.border-gray-600, .border-gray-600\/50, .border-gray-500, .border-gray-500\/70, .border-gray-400) { border-color: var(--border-strong); } :root[data-theme="dark"] .border-slate-800 { border-color: var(--border-strong); } :root[data-theme="dark"] :is(.border-slate-500, .border-slate-400) { border-color: var(--border-strong); } :root[data-theme="dark"] :is(.divide-gray-700, .divide-gray-700\/50, .divide-gray-700\/60, .divide-gray-700\/70, .divide-gray-800) > :not([hidden]) ~ :not([hidden]) { border-color: var(--border); } :root[data-theme="dark"] :is(.hover\:border-gray-600, .hover\:border-gray-500):hover { border-color: var(--text-subtle); } :root[data-theme="dark"] .hover\:border-gray-400:hover { border-color: var(--text-muted); } :root[data-theme="dark"] .last\:border-0:last-child { border-width: 0; } :root[data-theme="dark"] :is(.ring-gray-800, .ring-gray-900) { --tw-ring-color: var(--surface); } :root[data-theme="dark"] :is(.ring-gray-600, .ring-gray-700) { --tw-ring-color: var(--border-strong); } :root[data-theme="dark"] .ring-offset-gray-900 { --tw-ring-offset-color: var(--surface); } :root[data-theme="dark"] .decoration-gray-600 { text-decoration-color: var(--text-subtle); } /* ---------- 3. Texto neutro (usa var(--kw-*, fallback) para a exceção do branco — ver seção 7) ---------- */ :root[data-theme="dark"] .text-white { color: var(--kw-white, var(--ink)); } :root[data-theme="dark"] .text-white\/70 { color: var(--kw-white70, rgb(15 23 42 / .70)); } :root[data-theme="dark"] .text-white\/80 { color: var(--kw-white80, rgb(15 23 42 / .80)); } :root[data-theme="dark"] .text-white\/90 { color: var(--kw-white90, rgb(15 23 42 / .90)); } :root[data-theme="dark"] :is(.text-gray-100, .text-gray-200, .text-gray-300) { color: var(--kw-gray, var(--text)); } :root[data-theme="dark"] :is(.text-gray-400, .text-gray-500) { color: var(--text-2); } :root[data-theme="dark"] :is(.text-gray-600, .text-gray-700) { color: var(--text-3); } :root[data-theme="dark"] :is(.text-slate-200, .text-slate-300, .text-slate-400) { color: #475569; } :root[data-theme="dark"] .marker\:text-gray-600 ::marker, :root[data-theme="dark"] .marker\:text-gray-600::marker { color: var(--text-subtle); } :root[data-theme="dark"] :is(.hover\:text-white, .group-hover\:text-white):hover { color: var(--ink); } :root[data-theme="dark"] .group:hover .group-hover\:text-white { color: var(--ink); } :root[data-theme="dark"] :is(.hover\:text-gray-300, .hover\:text-gray-200):hover { color: var(--text); } :root[data-theme="dark"] :is(.placeholder-gray-600, .placeholder-gray-500, .placeholder-gray-400)::placeholder { color: var(--placeholder); } /* ---------- 4. Texto colorido: -100..-500 do escuro → tom escuro legível no branco (famílias claras usam -700). Alfas: só os usados hoje ---------- */ :root[data-theme="dark"] :is(.text-red-500, .text-red-400) { color: #dc2626; } :root[data-theme="dark"] .text-red-400\/70 { color: rgb(153 27 27 / .8); } :root[data-theme="dark"] :is(.hover\:text-red-500, .hover\:text-red-400):hover { color: #dc2626; } :root[data-theme="dark"] .group:hover :is(.group-hover\:text-red-500, .group-hover\:text-red-400) { color: #dc2626; } :root[data-theme="dark"] .text-red-300 { color: rgb(var(--kw-red-300, 185 28 28)); } :root[data-theme="dark"] .text-red-300\/80 { color: rgb(var(--kw-red-300, 153 27 27) / .80); } :root[data-theme="dark"] .text-red-300\/90 { color: rgb(var(--kw-red-300, 153 27 27) / .90); } :root[data-theme="dark"] :is(.hover\:text-red-300):hover { color: #b91c1c; } :root[data-theme="dark"] .group:hover :is(.group-hover\:text-red-300) { color: #b91c1c; } :root[data-theme="dark"] .text-red-200 { color: rgb(var(--kw-red-200, 153 27 27)); } :root[data-theme="dark"] .text-red-200\/80 { color: rgb(var(--kw-red-200, 127 29 29) / .80); } :root[data-theme="dark"] :is(.hover\:text-red-200):hover { color: #991b1b; } :root[data-theme="dark"] .group:hover :is(.group-hover\:text-red-200) { color: #991b1b; } :root[data-theme="dark"] .text-red-100 { color: rgb(var(--kw-red-100, 127 29 29)); } :root[data-theme="dark"] :is(.hover\:text-red-100):hover { color: #7f1d1d; } :root[data-theme="dark"] .group:hover :is(.group-hover\:text-red-100) { color: #7f1d1d; } :root[data-theme="dark"] :is(.text-orange-500, .text-orange-400) { color: #c2410c; } :root[data-theme="dark"] :is(.hover\:text-orange-500, .hover\:text-orange-400):hover { color: #c2410c; } :root[data-theme="dark"] .group:hover :is(.group-hover\:text-orange-500, .group-hover\:text-orange-400) { color: #c2410c; } :root[data-theme="dark"] .text-orange-300 { color: rgb(var(--kw-orange-300, 154 52 18)); } :root[data-theme="dark"] :is(.hover\:text-orange-300):hover { color: #9a3412; } :root[data-theme="dark"] .group:hover :is(.group-hover\:text-orange-300) { color: #9a3412; } :root[data-theme="dark"] .text-orange-200 { color: rgb(var(--kw-orange-200, 124 45 18)); } :root[data-theme="dark"] .text-orange-100 { color: rgb(var(--kw-orange-100, 124 45 18)); } :root[data-theme="dark"] :is(.hover\:text-orange-200, .hover\:text-orange-100):hover { color: #7c2d12; } :root[data-theme="dark"] .group:hover :is(.group-hover\:text-orange-200, .group-hover\:text-orange-100) { color: #7c2d12; } :root[data-theme="dark"] :is(.text-amber-500, .text-amber-400) { color: #b45309; } :root[data-theme="dark"] .text-amber-400\/70 { color: rgb(120 53 15 / .8); } :root[data-theme="dark"] .text-amber-400\/80 { color: rgb(146 64 14 / .80); } :root[data-theme="dark"] :is(.hover\:text-amber-500, .hover\:text-amber-400):hover { color: #b45309; } :root[data-theme="dark"] .group:hover :is(.group-hover\:text-amber-500, .group-hover\:text-amber-400) { color: #b45309; } :root[data-theme="dark"] .text-amber-300 { color: rgb(var(--kw-amber-300, 146 64 14)); } :root[data-theme="dark"] .text-amber-300\/70 { color: rgb(var(--kw-amber-300, 120 53 15) / .8); } :root[data-theme="dark"] :is(.hover\:text-amber-300):hover { color: #92400e; } :root[data-theme="dark"] .group:hover :is(.group-hover\:text-amber-300) { color: #92400e; } :root[data-theme="dark"] .text-amber-200 { color: rgb(var(--kw-amber-200, 120 53 15)); } :root[data-theme="dark"] .text-amber-200\/80 { color: rgb(var(--kw-amber-200, 120 53 15) / .80); } :root[data-theme="dark"] .text-amber-100 { color: rgb(var(--kw-amber-100, 120 53 15)); } :root[data-theme="dark"] .text-amber-100\/80 { color: rgb(var(--kw-amber-100, 120 53 15) / .80); } :root[data-theme="dark"] :is(.hover\:text-amber-200, .hover\:text-amber-100):hover { color: #78350f; } :root[data-theme="dark"] .group:hover :is(.group-hover\:text-amber-200, .group-hover\:text-amber-100) { color: #78350f; } :root[data-theme="dark"] :is(.text-yellow-500, .text-yellow-400) { color: #a16207; } :root[data-theme="dark"] :is(.hover\:text-yellow-500, .hover\:text-yellow-400):hover { color: #a16207; } :root[data-theme="dark"] .group:hover :is(.group-hover\:text-yellow-500, .group-hover\:text-yellow-400) { color: #a16207; } :root[data-theme="dark"] .text-yellow-300 { color: rgb(var(--kw-yellow-300, 133 77 14)); } :root[data-theme="dark"] :is(.hover\:text-yellow-300):hover { color: #854d0e; } :root[data-theme="dark"] .group:hover :is(.group-hover\:text-yellow-300) { color: #854d0e; } :root[data-theme="dark"] .text-yellow-200 { color: rgb(var(--kw-yellow-200, 113 63 18)); } :root[data-theme="dark"] .text-yellow-100 { color: rgb(var(--kw-yellow-100, 113 63 18)); } :root[data-theme="dark"] :is(.hover\:text-yellow-200, .hover\:text-yellow-100):hover { color: #713f12; } :root[data-theme="dark"] .group:hover :is(.group-hover\:text-yellow-200, .group-hover\:text-yellow-100) { color: #713f12; } :root[data-theme="dark"] :is(.text-lime-500, .text-lime-400) { color: #4d7c0f; } :root[data-theme="dark"] :is(.hover\:text-lime-500, .hover\:text-lime-400):hover { color: #4d7c0f; } :root[data-theme="dark"] .group:hover :is(.group-hover\:text-lime-500, .group-hover\:text-lime-400) { color: #4d7c0f; } :root[data-theme="dark"] .text-lime-300 { color: rgb(var(--kw-lime-300, 63 98 18)); } :root[data-theme="dark"] :is(.hover\:text-lime-300):hover { color: #3f6212; } :root[data-theme="dark"] .group:hover :is(.group-hover\:text-lime-300) { color: #3f6212; } :root[data-theme="dark"] .text-lime-200 { color: rgb(var(--kw-lime-200, 54 83 20)); } :root[data-theme="dark"] .text-lime-100 { color: rgb(var(--kw-lime-100, 54 83 20)); } :root[data-theme="dark"] :is(.hover\:text-lime-200, .hover\:text-lime-100):hover { color: #365314; } :root[data-theme="dark"] .group:hover :is(.group-hover\:text-lime-200, .group-hover\:text-lime-100) { color: #365314; } :root[data-theme="dark"] :is(.text-green-500, .text-green-400) { color: #15803d; } :root[data-theme="dark"] :is(.hover\:text-green-500, .hover\:text-green-400):hover { color: #15803d; } :root[data-theme="dark"] .group:hover :is(.group-hover\:text-green-500, .group-hover\:text-green-400) { color: #15803d; } :root[data-theme="dark"] .text-green-300 { color: rgb(var(--kw-green-300, 22 101 52)); } :root[data-theme="dark"] :is(.hover\:text-green-300):hover { color: #166534; } :root[data-theme="dark"] .group:hover :is(.group-hover\:text-green-300) { color: #166534; } :root[data-theme="dark"] .text-green-200 { color: rgb(var(--kw-green-200, 20 83 45)); } :root[data-theme="dark"] .text-green-100 { color: rgb(var(--kw-green-100, 20 83 45)); } :root[data-theme="dark"] :is(.hover\:text-green-200, .hover\:text-green-100):hover { color: #14532d; } :root[data-theme="dark"] .group:hover :is(.group-hover\:text-green-200, .group-hover\:text-green-100) { color: #14532d; } :root[data-theme="dark"] :is(.text-emerald-500, .text-emerald-400) { color: #047857; } :root[data-theme="dark"] :is(.hover\:text-emerald-500, .hover\:text-emerald-400):hover { color: #047857; } :root[data-theme="dark"] .group:hover :is(.group-hover\:text-emerald-500, .group-hover\:text-emerald-400) { color: #047857; } :root[data-theme="dark"] .text-emerald-300 { color: rgb(var(--kw-emerald-300, 6 95 70)); } :root[data-theme="dark"] :is(.hover\:text-emerald-300):hover { color: #065f46; } :root[data-theme="dark"] .group:hover :is(.group-hover\:text-emerald-300) { color: #065f46; } :root[data-theme="dark"] .text-emerald-200 { color: rgb(var(--kw-emerald-200, 6 78 59)); } :root[data-theme="dark"] .text-emerald-100 { color: rgb(var(--kw-emerald-100, 6 78 59)); } :root[data-theme="dark"] .text-emerald-100\/80 { color: rgb(var(--kw-emerald-100, 6 78 59) / .80); } :root[data-theme="dark"] :is(.hover\:text-emerald-200, .hover\:text-emerald-100):hover { color: #064e3b; } :root[data-theme="dark"] .group:hover :is(.group-hover\:text-emerald-200, .group-hover\:text-emerald-100) { color: #064e3b; } :root[data-theme="dark"] :is(.text-teal-500, .text-teal-400) { color: #0f766e; } :root[data-theme="dark"] :is(.hover\:text-teal-500, .hover\:text-teal-400):hover { color: #0f766e; } :root[data-theme="dark"] .group:hover :is(.group-hover\:text-teal-500, .group-hover\:text-teal-400) { color: #0f766e; } :root[data-theme="dark"] .text-teal-300 { color: rgb(var(--kw-teal-300, 17 94 89)); } :root[data-theme="dark"] :is(.hover\:text-teal-300):hover { color: #115e59; } :root[data-theme="dark"] .group:hover :is(.group-hover\:text-teal-300) { color: #115e59; } :root[data-theme="dark"] .text-teal-200 { color: rgb(var(--kw-teal-200, 19 78 74)); } :root[data-theme="dark"] .text-teal-100 { color: rgb(var(--kw-teal-100, 19 78 74)); } :root[data-theme="dark"] :is(.hover\:text-teal-200, .hover\:text-teal-100):hover { color: #134e4a; } :root[data-theme="dark"] .group:hover :is(.group-hover\:text-teal-200, .group-hover\:text-teal-100) { color: #134e4a; } :root[data-theme="dark"] :is(.text-cyan-500, .text-cyan-400) { color: #0e7490; } :root[data-theme="dark"] :is(.hover\:text-cyan-500, .hover\:text-cyan-400):hover { color: #0e7490; } :root[data-theme="dark"] .group:hover :is(.group-hover\:text-cyan-500, .group-hover\:text-cyan-400) { color: #0e7490; } :root[data-theme="dark"] .text-cyan-300 { color: rgb(var(--kw-cyan-300, 21 94 117)); } :root[data-theme="dark"] .text-cyan-300\/60 { color: rgb(var(--kw-cyan-300, 22 78 99) / .8); } :root[data-theme="dark"] .text-cyan-300\/80 { color: rgb(var(--kw-cyan-300, 22 78 99) / .80); } :root[data-theme="dark"] :is(.hover\:text-cyan-300):hover { color: #155e75; } :root[data-theme="dark"] .group:hover :is(.group-hover\:text-cyan-300) { color: #155e75; } :root[data-theme="dark"] .text-cyan-200 { color: rgb(var(--kw-cyan-200, 22 78 99)); } :root[data-theme="dark"] .text-cyan-100 { color: rgb(var(--kw-cyan-100, 22 78 99)); } :root[data-theme="dark"] .text-cyan-100\/90 { color: rgb(var(--kw-cyan-100, 22 78 99) / .90); } :root[data-theme="dark"] :is(.hover\:text-cyan-200, .hover\:text-cyan-100):hover { color: #164e63; } :root[data-theme="dark"] .group:hover :is(.group-hover\:text-cyan-200, .group-hover\:text-cyan-100) { color: #164e63; } :root[data-theme="dark"] :is(.text-sky-500, .text-sky-400) { color: #0369a1; } :root[data-theme="dark"] :is(.hover\:text-sky-500, .hover\:text-sky-400):hover { color: #0369a1; } :root[data-theme="dark"] .group:hover :is(.group-hover\:text-sky-500, .group-hover\:text-sky-400) { color: #0369a1; } :root[data-theme="dark"] .text-sky-300 { color: rgb(var(--kw-sky-300, 7 89 133)); } :root[data-theme="dark"] :is(.hover\:text-sky-300):hover { color: #075985; } :root[data-theme="dark"] .group:hover :is(.group-hover\:text-sky-300) { color: #075985; } :root[data-theme="dark"] .text-sky-200 { color: rgb(var(--kw-sky-200, 12 74 110)); } :root[data-theme="dark"] .text-sky-100 { color: rgb(var(--kw-sky-100, 12 74 110)); } :root[data-theme="dark"] :is(.hover\:text-sky-200, .hover\:text-sky-100):hover { color: #0c4a6e; } :root[data-theme="dark"] .group:hover :is(.group-hover\:text-sky-200, .group-hover\:text-sky-100) { color: #0c4a6e; } :root[data-theme="dark"] :is(.text-blue-500, .text-blue-400) { color: #2563eb; } :root[data-theme="dark"] :is(.hover\:text-blue-500, .hover\:text-blue-400):hover { color: #2563eb; } :root[data-theme="dark"] .group:hover :is(.group-hover\:text-blue-500, .group-hover\:text-blue-400) { color: #2563eb; } :root[data-theme="dark"] .text-blue-300 { color: rgb(var(--kw-blue-300, 29 78 216)); } :root[data-theme="dark"] :is(.hover\:text-blue-300):hover { color: #1d4ed8; } :root[data-theme="dark"] .group:hover :is(.group-hover\:text-blue-300) { color: #1d4ed8; } :root[data-theme="dark"] .text-blue-200 { color: rgb(var(--kw-blue-200, 30 64 175)); } :root[data-theme="dark"] :is(.hover\:text-blue-200):hover { color: #1e40af; } :root[data-theme="dark"] .group:hover :is(.group-hover\:text-blue-200) { color: #1e40af; } :root[data-theme="dark"] .text-blue-100 { color: rgb(var(--kw-blue-100, 30 58 138)); } :root[data-theme="dark"] :is(.hover\:text-blue-100):hover { color: #1e3a8a; } :root[data-theme="dark"] .group:hover :is(.group-hover\:text-blue-100) { color: #1e3a8a; } :root[data-theme="dark"] :is(.text-indigo-500, .text-indigo-400) { color: #4f46e5; } :root[data-theme="dark"] :is(.hover\:text-indigo-500, .hover\:text-indigo-400):hover { color: #4f46e5; } :root[data-theme="dark"] .group:hover :is(.group-hover\:text-indigo-500, .group-hover\:text-indigo-400) { color: #4f46e5; } :root[data-theme="dark"] .text-indigo-300 { color: rgb(var(--kw-indigo-300, 67 56 202)); } :root[data-theme="dark"] :is(.hover\:text-indigo-300):hover { color: #4338ca; } :root[data-theme="dark"] .group:hover :is(.group-hover\:text-indigo-300) { color: #4338ca; } :root[data-theme="dark"] .text-indigo-200 { color: rgb(var(--kw-indigo-200, 55 48 163)); } :root[data-theme="dark"] :is(.hover\:text-indigo-200):hover { color: #3730a3; } :root[data-theme="dark"] .group:hover :is(.group-hover\:text-indigo-200) { color: #3730a3; } :root[data-theme="dark"] .text-indigo-100 { color: rgb(var(--kw-indigo-100, 49 46 129)); } :root[data-theme="dark"] :is(.hover\:text-indigo-100):hover { color: #312e81; } :root[data-theme="dark"] .group:hover :is(.group-hover\:text-indigo-100) { color: #312e81; } :root[data-theme="dark"] :is(.text-violet-500, .text-violet-400) { color: #7c3aed; } :root[data-theme="dark"] :is(.hover\:text-violet-500, .hover\:text-violet-400):hover { color: #7c3aed; } :root[data-theme="dark"] .group:hover :is(.group-hover\:text-violet-500, .group-hover\:text-violet-400) { color: #7c3aed; } :root[data-theme="dark"] .text-violet-300 { color: rgb(var(--kw-violet-300, 109 40 217)); } :root[data-theme="dark"] .text-violet-300\/80 { color: rgb(var(--kw-violet-300, 91 33 182) / .80); } :root[data-theme="dark"] :is(.hover\:text-violet-300):hover { color: #6d28d9; } :root[data-theme="dark"] .group:hover :is(.group-hover\:text-violet-300) { color: #6d28d9; } :root[data-theme="dark"] .text-violet-200 { color: rgb(var(--kw-violet-200, 91 33 182)); } :root[data-theme="dark"] :is(.hover\:text-violet-200):hover { color: #5b21b6; } :root[data-theme="dark"] .group:hover :is(.group-hover\:text-violet-200) { color: #5b21b6; } :root[data-theme="dark"] .text-violet-100 { color: rgb(var(--kw-violet-100, 76 29 149)); } :root[data-theme="dark"] :is(.hover\:text-violet-100):hover { color: #4c1d95; } :root[data-theme="dark"] .group:hover :is(.group-hover\:text-violet-100) { color: #4c1d95; } :root[data-theme="dark"] :is(.text-purple-500, .text-purple-400) { color: #9333ea; } :root[data-theme="dark"] :is(.hover\:text-purple-500, .hover\:text-purple-400):hover { color: #9333ea; } :root[data-theme="dark"] .group:hover :is(.group-hover\:text-purple-500, .group-hover\:text-purple-400) { color: #9333ea; } :root[data-theme="dark"] .text-purple-300 { color: rgb(var(--kw-purple-300, 126 34 206)); } :root[data-theme="dark"] :is(.hover\:text-purple-300):hover { color: #7e22ce; } :root[data-theme="dark"] .group:hover :is(.group-hover\:text-purple-300) { color: #7e22ce; } :root[data-theme="dark"] .text-purple-200 { color: rgb(var(--kw-purple-200, 107 33 168)); } :root[data-theme="dark"] :is(.hover\:text-purple-200):hover { color: #6b21a8; } :root[data-theme="dark"] .group:hover :is(.group-hover\:text-purple-200) { color: #6b21a8; } :root[data-theme="dark"] .text-purple-100 { color: rgb(var(--kw-purple-100, 88 28 135)); } :root[data-theme="dark"] :is(.hover\:text-purple-100):hover { color: #581c87; } :root[data-theme="dark"] .group:hover :is(.group-hover\:text-purple-100) { color: #581c87; } :root[data-theme="dark"] :is(.text-pink-500, .text-pink-400) { color: #db2777; } :root[data-theme="dark"] :is(.hover\:text-pink-500, .hover\:text-pink-400):hover { color: #db2777; } :root[data-theme="dark"] .group:hover :is(.group-hover\:text-pink-500, .group-hover\:text-pink-400) { color: #db2777; } :root[data-theme="dark"] .text-pink-300 { color: rgb(var(--kw-pink-300, 190 24 93)); } :root[data-theme="dark"] :is(.hover\:text-pink-300):hover { color: #be185d; } :root[data-theme="dark"] .group:hover :is(.group-hover\:text-pink-300) { color: #be185d; } :root[data-theme="dark"] .text-pink-200 { color: rgb(var(--kw-pink-200, 157 23 77)); } :root[data-theme="dark"] :is(.hover\:text-pink-200):hover { color: #9d174d; } :root[data-theme="dark"] .group:hover :is(.group-hover\:text-pink-200) { color: #9d174d; } :root[data-theme="dark"] .text-pink-100 { color: rgb(var(--kw-pink-100, 131 24 67)); } :root[data-theme="dark"] :is(.hover\:text-pink-100):hover { color: #831843; } :root[data-theme="dark"] .group:hover :is(.group-hover\:text-pink-100) { color: #831843; } :root[data-theme="dark"] :is(.text-rose-500, .text-rose-400) { color: #e11d48; } :root[data-theme="dark"] :is(.hover\:text-rose-500, .hover\:text-rose-400):hover { color: #e11d48; } :root[data-theme="dark"] .group:hover :is(.group-hover\:text-rose-500, .group-hover\:text-rose-400) { color: #e11d48; } :root[data-theme="dark"] .text-rose-300 { color: rgb(var(--kw-rose-300, 190 18 60)); } :root[data-theme="dark"] :is(.hover\:text-rose-300):hover { color: #be123c; } :root[data-theme="dark"] .group:hover :is(.group-hover\:text-rose-300) { color: #be123c; } :root[data-theme="dark"] .text-rose-200 { color: rgb(var(--kw-rose-200, 159 18 57)); } :root[data-theme="dark"] :is(.hover\:text-rose-200):hover { color: #9f1239; } :root[data-theme="dark"] .group:hover :is(.group-hover\:text-rose-200) { color: #9f1239; } :root[data-theme="dark"] .text-rose-100 { color: rgb(var(--kw-rose-100, 136 19 55)); } :root[data-theme="dark"] :is(.hover\:text-rose-100):hover { color: #881337; } :root[data-theme="dark"] .group:hover :is(.group-hover\:text-rose-100) { color: #881337; } /* ---------- 5. bg-*-900 (tinta escura do escuro) → tinta clara; /70+ continua sólido escuro (toast de erro) ---------- */ :root[data-theme="dark"] :is(.bg-red-900, .bg-red-900\/60, .bg-red-900\/50, .bg-red-900\/40) { background-color: rgb(220 38 38 / .14); } :root[data-theme="dark"] :is(.bg-red-900\/30, .bg-red-900\/25, .bg-red-900\/20) { background-color: rgb(220 38 38 / .10); } :root[data-theme="dark"] :is(.bg-red-900\/15, .bg-red-900\/10) { background-color: rgb(220 38 38 / .07); } :root[data-theme="dark"] .hover\:bg-red-900\/30:hover { background-color: rgb(220 38 38 / .16); } :root[data-theme="dark"] :is(.border-red-900, .border-red-900\/40, .border-red-900\/50, .border-red-900\/60) { border-color: rgb(220 38 38 / .35); } :root[data-theme="dark"] :is(.bg-amber-900, .bg-amber-900\/60, .bg-amber-900\/50, .bg-amber-900\/40) { background-color: rgb(217 119 6 / .14); } :root[data-theme="dark"] :is(.bg-amber-900\/30, .bg-amber-900\/25, .bg-amber-900\/20) { background-color: rgb(217 119 6 / .10); } :root[data-theme="dark"] :is(.bg-amber-900\/15, .bg-amber-900\/10) { background-color: rgb(217 119 6 / .07); } :root[data-theme="dark"] .hover\:bg-amber-900\/30:hover { background-color: rgb(217 119 6 / .16); } :root[data-theme="dark"] :is(.border-amber-900, .border-amber-900\/40, .border-amber-900\/50, .border-amber-900\/60) { border-color: rgb(217 119 6 / .35); } :root[data-theme="dark"] :is(.bg-orange-900, .bg-orange-900\/60, .bg-orange-900\/50, .bg-orange-900\/40) { background-color: rgb(234 88 12 / .14); } :root[data-theme="dark"] :is(.bg-orange-900\/30, .bg-orange-900\/25, .bg-orange-900\/20) { background-color: rgb(234 88 12 / .10); } :root[data-theme="dark"] :is(.bg-orange-900\/15, .bg-orange-900\/10) { background-color: rgb(234 88 12 / .07); } :root[data-theme="dark"] .hover\:bg-orange-900\/30:hover { background-color: rgb(234 88 12 / .16); } :root[data-theme="dark"] :is(.border-orange-900, .border-orange-900\/40, .border-orange-900\/50, .border-orange-900\/60) { border-color: rgb(234 88 12 / .35); } :root[data-theme="dark"] :is(.bg-emerald-900, .bg-emerald-900\/60, .bg-emerald-900\/50, .bg-emerald-900\/40) { background-color: rgb(5 150 105 / .14); } :root[data-theme="dark"] :is(.bg-emerald-900\/30, .bg-emerald-900\/25, .bg-emerald-900\/20) { background-color: rgb(5 150 105 / .10); } :root[data-theme="dark"] :is(.bg-emerald-900\/15, .bg-emerald-900\/10) { background-color: rgb(5 150 105 / .07); } :root[data-theme="dark"] .hover\:bg-emerald-900\/30:hover { background-color: rgb(5 150 105 / .16); } :root[data-theme="dark"] :is(.border-emerald-900, .border-emerald-900\/40, .border-emerald-900\/50, .border-emerald-900\/60) { border-color: rgb(5 150 105 / .35); } :root[data-theme="dark"] :is(.bg-cyan-900, .bg-cyan-900\/60, .bg-cyan-900\/50, .bg-cyan-900\/40) { background-color: rgb(8 145 178 / .14); } :root[data-theme="dark"] :is(.bg-cyan-900\/30, .bg-cyan-900\/25, .bg-cyan-900\/20) { background-color: rgb(8 145 178 / .10); } :root[data-theme="dark"] :is(.bg-cyan-900\/15, .bg-cyan-900\/10) { background-color: rgb(8 145 178 / .07); } :root[data-theme="dark"] .hover\:bg-cyan-900\/30:hover { background-color: rgb(8 145 178 / .16); } :root[data-theme="dark"] :is(.border-cyan-900, .border-cyan-900\/40, .border-cyan-900\/50, .border-cyan-900\/60) { border-color: rgb(8 145 178 / .35); } :root[data-theme="dark"] :is(.bg-sky-900, .bg-sky-900\/60, .bg-sky-900\/50, .bg-sky-900\/40) { background-color: rgb(2 132 199 / .14); } :root[data-theme="dark"] :is(.bg-sky-900\/30, .bg-sky-900\/25, .bg-sky-900\/20) { background-color: rgb(2 132 199 / .10); } :root[data-theme="dark"] :is(.bg-sky-900\/15, .bg-sky-900\/10) { background-color: rgb(2 132 199 / .07); } :root[data-theme="dark"] .hover\:bg-sky-900\/30:hover { background-color: rgb(2 132 199 / .16); } :root[data-theme="dark"] :is(.border-sky-900, .border-sky-900\/40, .border-sky-900\/50, .border-sky-900\/60) { border-color: rgb(2 132 199 / .35); } :root[data-theme="dark"] :is(.bg-violet-900, .bg-violet-900\/60, .bg-violet-900\/50, .bg-violet-900\/40) { background-color: rgb(124 58 237 / .14); } :root[data-theme="dark"] :is(.bg-violet-900\/30, .bg-violet-900\/25, .bg-violet-900\/20) { background-color: rgb(124 58 237 / .10); } :root[data-theme="dark"] :is(.bg-violet-900\/15, .bg-violet-900\/10) { background-color: rgb(124 58 237 / .07); } :root[data-theme="dark"] .hover\:bg-violet-900\/30:hover { background-color: rgb(124 58 237 / .16); } :root[data-theme="dark"] :is(.border-violet-900, .border-violet-900\/40, .border-violet-900\/50, .border-violet-900\/60) { border-color: rgb(124 58 237 / .35); } :root[data-theme="dark"] :is(.bg-yellow-900, .bg-yellow-900\/60, .bg-yellow-900\/50, .bg-yellow-900\/40) { background-color: rgb(202 138 4 / .14); } :root[data-theme="dark"] :is(.bg-yellow-900\/30, .bg-yellow-900\/25, .bg-yellow-900\/20) { background-color: rgb(202 138 4 / .10); } :root[data-theme="dark"] :is(.bg-yellow-900\/15, .bg-yellow-900\/10) { background-color: rgb(202 138 4 / .07); } :root[data-theme="dark"] .hover\:bg-yellow-900\/30:hover { background-color: rgb(202 138 4 / .16); } :root[data-theme="dark"] :is(.border-yellow-900, .border-yellow-900\/40, .border-yellow-900\/50, .border-yellow-900\/60) { border-color: rgb(202 138 4 / .35); } :root[data-theme="dark"] :is(.bg-blue-900, .bg-blue-900\/60, .bg-blue-900\/50, .bg-blue-900\/40) { background-color: rgb(37 99 235 / .14); } :root[data-theme="dark"] :is(.bg-blue-900\/30, .bg-blue-900\/25, .bg-blue-900\/20) { background-color: rgb(37 99 235 / .10); } :root[data-theme="dark"] :is(.bg-blue-900\/15, .bg-blue-900\/10) { background-color: rgb(37 99 235 / .07); } :root[data-theme="dark"] .hover\:bg-blue-900\/30:hover { background-color: rgb(37 99 235 / .16); } :root[data-theme="dark"] :is(.border-blue-900, .border-blue-900\/40, .border-blue-900\/50, .border-blue-900\/60) { border-color: rgb(37 99 235 / .35); } :root[data-theme="dark"] :is(.bg-teal-900, .bg-teal-900\/60, .bg-teal-900\/50, .bg-teal-900\/40) { background-color: rgb(13 148 136 / .14); } :root[data-theme="dark"] :is(.bg-teal-900\/30, .bg-teal-900\/25, .bg-teal-900\/20) { background-color: rgb(13 148 136 / .10); } :root[data-theme="dark"] :is(.bg-teal-900\/15, .bg-teal-900\/10) { background-color: rgb(13 148 136 / .07); } :root[data-theme="dark"] .hover\:bg-teal-900\/30:hover { background-color: rgb(13 148 136 / .16); } :root[data-theme="dark"] :is(.border-teal-900, .border-teal-900\/40, .border-teal-900\/50, .border-teal-900\/60) { border-color: rgb(13 148 136 / .35); } :root[data-theme="dark"] :is(.bg-rose-900, .bg-rose-900\/60, .bg-rose-900\/50, .bg-rose-900\/40) { background-color: rgb(225 29 72 / .14); } :root[data-theme="dark"] :is(.bg-rose-900\/30, .bg-rose-900\/25, .bg-rose-900\/20) { background-color: rgb(225 29 72 / .10); } :root[data-theme="dark"] :is(.bg-rose-900\/15, .bg-rose-900\/10) { background-color: rgb(225 29 72 / .07); } :root[data-theme="dark"] .hover\:bg-rose-900\/30:hover { background-color: rgb(225 29 72 / .16); } :root[data-theme="dark"] :is(.border-rose-900, .border-rose-900\/40, .border-rose-900\/50, .border-rose-900\/60) { border-color: rgb(225 29 72 / .35); } /* ---------- 5b. bg-*-{400,500}/{10..30} (chips, ícones, faixas) → mesmo matiz com alfa menor sobre o branco ---------- */ :root[data-theme="dark"] .bg-red-500\/5 { background-color: rgb(239 68 68 / .04); } :root[data-theme="dark"] .bg-red-500\/10 { background-color: rgb(239 68 68 / .07); } :root[data-theme="dark"] .bg-red-500\/15 { background-color: rgb(239 68 68 / .10); } :root[data-theme="dark"] .bg-red-500\/20 { background-color: rgb(239 68 68 / .13); } :root[data-theme="dark"] .bg-red-500\/25 { background-color: rgb(239 68 68 / .16); } :root[data-theme="dark"] .bg-red-500\/30 { background-color: rgb(239 68 68 / .19); } :root[data-theme="dark"] .bg-red-400\/5 { background-color: rgb(248 113 113 / .04); } :root[data-theme="dark"] .bg-red-400\/10 { background-color: rgb(248 113 113 / .07); } :root[data-theme="dark"] .bg-red-400\/15 { background-color: rgb(248 113 113 / .10); } :root[data-theme="dark"] .bg-red-400\/20 { background-color: rgb(248 113 113 / .13); } :root[data-theme="dark"] .bg-red-400\/25 { background-color: rgb(248 113 113 / .16); } :root[data-theme="dark"] .bg-red-400\/30 { background-color: rgb(248 113 113 / .19); } :root[data-theme="dark"] .bg-orange-500\/5 { background-color: rgb(249 115 22 / .04); } :root[data-theme="dark"] .bg-orange-500\/10 { background-color: rgb(249 115 22 / .07); } :root[data-theme="dark"] .bg-orange-500\/15 { background-color: rgb(249 115 22 / .10); } :root[data-theme="dark"] .bg-orange-500\/20 { background-color: rgb(249 115 22 / .13); } :root[data-theme="dark"] .bg-orange-500\/25 { background-color: rgb(249 115 22 / .16); } :root[data-theme="dark"] .bg-orange-500\/30 { background-color: rgb(249 115 22 / .19); } :root[data-theme="dark"] .bg-orange-400\/5 { background-color: rgb(251 146 60 / .04); } :root[data-theme="dark"] .bg-orange-400\/10 { background-color: rgb(251 146 60 / .07); } :root[data-theme="dark"] .bg-orange-400\/15 { background-color: rgb(251 146 60 / .10); } :root[data-theme="dark"] .bg-orange-400\/20 { background-color: rgb(251 146 60 / .13); } :root[data-theme="dark"] .bg-orange-400\/25 { background-color: rgb(251 146 60 / .16); } :root[data-theme="dark"] .bg-orange-400\/30 { background-color: rgb(251 146 60 / .19); } :root[data-theme="dark"] .bg-amber-500\/5 { background-color: rgb(245 158 11 / .04); } :root[data-theme="dark"] .bg-amber-500\/10 { background-color: rgb(245 158 11 / .07); } :root[data-theme="dark"] .bg-amber-500\/15 { background-color: rgb(245 158 11 / .10); } :root[data-theme="dark"] .bg-amber-500\/20 { background-color: rgb(245 158 11 / .13); } :root[data-theme="dark"] .bg-amber-500\/25 { background-color: rgb(245 158 11 / .16); } :root[data-theme="dark"] .bg-amber-500\/30 { background-color: rgb(245 158 11 / .19); } :root[data-theme="dark"] .bg-amber-400\/5 { background-color: rgb(251 191 36 / .04); } :root[data-theme="dark"] .bg-amber-400\/10 { background-color: rgb(251 191 36 / .07); } :root[data-theme="dark"] .bg-amber-400\/15 { background-color: rgb(251 191 36 / .10); } :root[data-theme="dark"] .bg-amber-400\/20 { background-color: rgb(251 191 36 / .13); } :root[data-theme="dark"] .bg-amber-400\/25 { background-color: rgb(251 191 36 / .16); } :root[data-theme="dark"] .bg-amber-400\/30 { background-color: rgb(251 191 36 / .19); } :root[data-theme="dark"] .bg-yellow-500\/5 { background-color: rgb(234 179 8 / .04); } :root[data-theme="dark"] .bg-yellow-500\/10 { background-color: rgb(234 179 8 / .07); } :root[data-theme="dark"] .bg-yellow-500\/15 { background-color: rgb(234 179 8 / .10); } :root[data-theme="dark"] .bg-yellow-500\/20 { background-color: rgb(234 179 8 / .13); } :root[data-theme="dark"] .bg-yellow-500\/25 { background-color: rgb(234 179 8 / .16); } :root[data-theme="dark"] .bg-yellow-500\/30 { background-color: rgb(234 179 8 / .19); } :root[data-theme="dark"] .bg-yellow-400\/5 { background-color: rgb(250 204 21 / .04); } :root[data-theme="dark"] .bg-yellow-400\/10 { background-color: rgb(250 204 21 / .07); } :root[data-theme="dark"] .bg-yellow-400\/15 { background-color: rgb(250 204 21 / .10); } :root[data-theme="dark"] .bg-yellow-400\/20 { background-color: rgb(250 204 21 / .13); } :root[data-theme="dark"] .bg-yellow-400\/25 { background-color: rgb(250 204 21 / .16); } :root[data-theme="dark"] .bg-yellow-400\/30 { background-color: rgb(250 204 21 / .19); } :root[data-theme="dark"] .bg-lime-500\/5 { background-color: rgb(132 204 22 / .04); } :root[data-theme="dark"] .bg-lime-500\/10 { background-color: rgb(132 204 22 / .07); } :root[data-theme="dark"] .bg-lime-500\/15 { background-color: rgb(132 204 22 / .10); } :root[data-theme="dark"] .bg-lime-500\/20 { background-color: rgb(132 204 22 / .13); } :root[data-theme="dark"] .bg-lime-500\/25 { background-color: rgb(132 204 22 / .16); } :root[data-theme="dark"] .bg-lime-500\/30 { background-color: rgb(132 204 22 / .19); } :root[data-theme="dark"] .bg-lime-400\/5 { background-color: rgb(163 230 53 / .04); } :root[data-theme="dark"] .bg-lime-400\/10 { background-color: rgb(163 230 53 / .07); } :root[data-theme="dark"] .bg-lime-400\/15 { background-color: rgb(163 230 53 / .10); } :root[data-theme="dark"] .bg-lime-400\/20 { background-color: rgb(163 230 53 / .13); } :root[data-theme="dark"] .bg-lime-400\/25 { background-color: rgb(163 230 53 / .16); } :root[data-theme="dark"] .bg-lime-400\/30 { background-color: rgb(163 230 53 / .19); } :root[data-theme="dark"] .bg-green-500\/5 { background-color: rgb(34 197 94 / .04); } :root[data-theme="dark"] .bg-green-500\/10 { background-color: rgb(34 197 94 / .07); } :root[data-theme="dark"] .bg-green-500\/15 { background-color: rgb(34 197 94 / .10); } :root[data-theme="dark"] .bg-green-500\/20 { background-color: rgb(34 197 94 / .13); } :root[data-theme="dark"] .bg-green-500\/25 { background-color: rgb(34 197 94 / .16); } :root[data-theme="dark"] .bg-green-500\/30 { background-color: rgb(34 197 94 / .19); } :root[data-theme="dark"] .bg-green-400\/5 { background-color: rgb(74 222 128 / .04); } :root[data-theme="dark"] .bg-green-400\/10 { background-color: rgb(74 222 128 / .07); } :root[data-theme="dark"] .bg-green-400\/15 { background-color: rgb(74 222 128 / .10); } :root[data-theme="dark"] .bg-green-400\/20 { background-color: rgb(74 222 128 / .13); } :root[data-theme="dark"] .bg-green-400\/25 { background-color: rgb(74 222 128 / .16); } :root[data-theme="dark"] .bg-green-400\/30 { background-color: rgb(74 222 128 / .19); } :root[data-theme="dark"] .bg-emerald-500\/5 { background-color: rgb(16 185 129 / .04); } :root[data-theme="dark"] .bg-emerald-500\/10 { background-color: rgb(16 185 129 / .07); } :root[data-theme="dark"] .bg-emerald-500\/15 { background-color: rgb(16 185 129 / .10); } :root[data-theme="dark"] .bg-emerald-500\/20 { background-color: rgb(16 185 129 / .13); } :root[data-theme="dark"] .bg-emerald-500\/25 { background-color: rgb(16 185 129 / .16); } :root[data-theme="dark"] .bg-emerald-500\/30 { background-color: rgb(16 185 129 / .19); } :root[data-theme="dark"] .bg-emerald-400\/5 { background-color: rgb(52 211 153 / .04); } :root[data-theme="dark"] .bg-emerald-400\/10 { background-color: rgb(52 211 153 / .07); } :root[data-theme="dark"] .bg-emerald-400\/15 { background-color: rgb(52 211 153 / .10); } :root[data-theme="dark"] .bg-emerald-400\/20 { background-color: rgb(52 211 153 / .13); } :root[data-theme="dark"] .bg-emerald-400\/25 { background-color: rgb(52 211 153 / .16); } :root[data-theme="dark"] .bg-emerald-400\/30 { background-color: rgb(52 211 153 / .19); } :root[data-theme="dark"] .bg-teal-500\/5 { background-color: rgb(20 184 166 / .04); } :root[data-theme="dark"] .bg-teal-500\/10 { background-color: rgb(20 184 166 / .07); } :root[data-theme="dark"] .bg-teal-500\/15 { background-color: rgb(20 184 166 / .10); } :root[data-theme="dark"] .bg-teal-500\/20 { background-color: rgb(20 184 166 / .13); } :root[data-theme="dark"] .bg-teal-500\/25 { background-color: rgb(20 184 166 / .16); } :root[data-theme="dark"] .bg-teal-500\/30 { background-color: rgb(20 184 166 / .19); } :root[data-theme="dark"] .bg-teal-400\/5 { background-color: rgb(45 212 191 / .04); } :root[data-theme="dark"] .bg-teal-400\/10 { background-color: rgb(45 212 191 / .07); } :root[data-theme="dark"] .bg-teal-400\/15 { background-color: rgb(45 212 191 / .10); } :root[data-theme="dark"] .bg-teal-400\/20 { background-color: rgb(45 212 191 / .13); } :root[data-theme="dark"] .bg-teal-400\/25 { background-color: rgb(45 212 191 / .16); } :root[data-theme="dark"] .bg-teal-400\/30 { background-color: rgb(45 212 191 / .19); } :root[data-theme="dark"] .bg-cyan-500\/5 { background-color: rgb(6 182 212 / .04); } :root[data-theme="dark"] .bg-cyan-500\/10 { background-color: rgb(6 182 212 / .07); } :root[data-theme="dark"] .bg-cyan-500\/15 { background-color: rgb(6 182 212 / .10); } :root[data-theme="dark"] .bg-cyan-500\/20 { background-color: rgb(6 182 212 / .13); } :root[data-theme="dark"] .bg-cyan-500\/25 { background-color: rgb(6 182 212 / .16); } :root[data-theme="dark"] .bg-cyan-500\/30 { background-color: rgb(6 182 212 / .19); } :root[data-theme="dark"] .bg-cyan-400\/5 { background-color: rgb(34 211 238 / .04); } :root[data-theme="dark"] .bg-cyan-400\/10 { background-color: rgb(34 211 238 / .07); } :root[data-theme="dark"] .bg-cyan-400\/15 { background-color: rgb(34 211 238 / .10); } :root[data-theme="dark"] .bg-cyan-400\/20 { background-color: rgb(34 211 238 / .13); } :root[data-theme="dark"] .bg-cyan-400\/25 { background-color: rgb(34 211 238 / .16); } :root[data-theme="dark"] .bg-cyan-400\/30 { background-color: rgb(34 211 238 / .19); } :root[data-theme="dark"] .bg-sky-500\/5 { background-color: rgb(14 165 233 / .04); } :root[data-theme="dark"] .bg-sky-500\/10 { background-color: rgb(14 165 233 / .07); } :root[data-theme="dark"] .bg-sky-500\/15 { background-color: rgb(14 165 233 / .10); } :root[data-theme="dark"] .bg-sky-500\/20 { background-color: rgb(14 165 233 / .13); } :root[data-theme="dark"] .bg-sky-500\/25 { background-color: rgb(14 165 233 / .16); } :root[data-theme="dark"] .bg-sky-500\/30 { background-color: rgb(14 165 233 / .19); } :root[data-theme="dark"] .bg-sky-400\/5 { background-color: rgb(56 189 248 / .04); } :root[data-theme="dark"] .bg-sky-400\/10 { background-color: rgb(56 189 248 / .07); } :root[data-theme="dark"] .bg-sky-400\/15 { background-color: rgb(56 189 248 / .10); } :root[data-theme="dark"] .bg-sky-400\/20 { background-color: rgb(56 189 248 / .13); } :root[data-theme="dark"] .bg-sky-400\/25 { background-color: rgb(56 189 248 / .16); } :root[data-theme="dark"] .bg-sky-400\/30 { background-color: rgb(56 189 248 / .19); } :root[data-theme="dark"] .bg-blue-500\/5 { background-color: rgb(59 130 246 / .04); } :root[data-theme="dark"] .bg-blue-500\/10 { background-color: rgb(59 130 246 / .07); } :root[data-theme="dark"] .bg-blue-500\/15 { background-color: rgb(59 130 246 / .10); } :root[data-theme="dark"] .bg-blue-500\/20 { background-color: rgb(59 130 246 / .13); } :root[data-theme="dark"] .bg-blue-500\/25 { background-color: rgb(59 130 246 / .16); } :root[data-theme="dark"] .bg-blue-500\/30 { background-color: rgb(59 130 246 / .19); } :root[data-theme="dark"] .bg-blue-400\/5 { background-color: rgb(96 165 250 / .04); } :root[data-theme="dark"] .bg-blue-400\/10 { background-color: rgb(96 165 250 / .07); } :root[data-theme="dark"] .bg-blue-400\/15 { background-color: rgb(96 165 250 / .10); } :root[data-theme="dark"] .bg-blue-400\/20 { background-color: rgb(96 165 250 / .13); } :root[data-theme="dark"] .bg-blue-400\/25 { background-color: rgb(96 165 250 / .16); } :root[data-theme="dark"] .bg-blue-400\/30 { background-color: rgb(96 165 250 / .19); } :root[data-theme="dark"] .bg-indigo-500\/5 { background-color: rgb(99 102 241 / .04); } :root[data-theme="dark"] .bg-indigo-500\/10 { background-color: rgb(99 102 241 / .07); } :root[data-theme="dark"] .bg-indigo-500\/15 { background-color: rgb(99 102 241 / .10); } :root[data-theme="dark"] .bg-indigo-500\/20 { background-color: rgb(99 102 241 / .13); } :root[data-theme="dark"] .bg-indigo-500\/25 { background-color: rgb(99 102 241 / .16); } :root[data-theme="dark"] .bg-indigo-500\/30 { background-color: rgb(99 102 241 / .19); } :root[data-theme="dark"] .bg-indigo-400\/5 { background-color: rgb(129 140 248 / .04); } :root[data-theme="dark"] .bg-indigo-400\/10 { background-color: rgb(129 140 248 / .07); } :root[data-theme="dark"] .bg-indigo-400\/15 { background-color: rgb(129 140 248 / .10); } :root[data-theme="dark"] .bg-indigo-400\/20 { background-color: rgb(129 140 248 / .13); } :root[data-theme="dark"] .bg-indigo-400\/25 { background-color: rgb(129 140 248 / .16); } :root[data-theme="dark"] .bg-indigo-400\/30 { background-color: rgb(129 140 248 / .19); } :root[data-theme="dark"] .bg-violet-500\/5 { background-color: rgb(139 92 246 / .04); } :root[data-theme="dark"] .bg-violet-500\/10 { background-color: rgb(139 92 246 / .07); } :root[data-theme="dark"] .bg-violet-500\/15 { background-color: rgb(139 92 246 / .10); } :root[data-theme="dark"] .bg-violet-500\/20 { background-color: rgb(139 92 246 / .13); } :root[data-theme="dark"] .bg-violet-500\/25 { background-color: rgb(139 92 246 / .16); } :root[data-theme="dark"] .bg-violet-500\/30 { background-color: rgb(139 92 246 / .19); } :root[data-theme="dark"] .bg-violet-400\/5 { background-color: rgb(167 139 250 / .04); } :root[data-theme="dark"] .bg-violet-400\/10 { background-color: rgb(167 139 250 / .07); } :root[data-theme="dark"] .bg-violet-400\/15 { background-color: rgb(167 139 250 / .10); } :root[data-theme="dark"] .bg-violet-400\/20 { background-color: rgb(167 139 250 / .13); } :root[data-theme="dark"] .bg-violet-400\/25 { background-color: rgb(167 139 250 / .16); } :root[data-theme="dark"] .bg-violet-400\/30 { background-color: rgb(167 139 250 / .19); } :root[data-theme="dark"] .bg-purple-500\/5 { background-color: rgb(168 85 247 / .04); } :root[data-theme="dark"] .bg-purple-500\/10 { background-color: rgb(168 85 247 / .07); } :root[data-theme="dark"] .bg-purple-500\/15 { background-color: rgb(168 85 247 / .10); } :root[data-theme="dark"] .bg-purple-500\/20 { background-color: rgb(168 85 247 / .13); } :root[data-theme="dark"] .bg-purple-500\/25 { background-color: rgb(168 85 247 / .16); } :root[data-theme="dark"] .bg-purple-500\/30 { background-color: rgb(168 85 247 / .19); } :root[data-theme="dark"] .bg-purple-400\/5 { background-color: rgb(192 132 252 / .04); } :root[data-theme="dark"] .bg-purple-400\/10 { background-color: rgb(192 132 252 / .07); } :root[data-theme="dark"] .bg-purple-400\/15 { background-color: rgb(192 132 252 / .10); } :root[data-theme="dark"] .bg-purple-400\/20 { background-color: rgb(192 132 252 / .13); } :root[data-theme="dark"] .bg-purple-400\/25 { background-color: rgb(192 132 252 / .16); } :root[data-theme="dark"] .bg-purple-400\/30 { background-color: rgb(192 132 252 / .19); } :root[data-theme="dark"] .bg-pink-500\/5 { background-color: rgb(236 72 153 / .04); } :root[data-theme="dark"] .bg-pink-500\/10 { background-color: rgb(236 72 153 / .07); } :root[data-theme="dark"] .bg-pink-500\/15 { background-color: rgb(236 72 153 / .10); } :root[data-theme="dark"] .bg-pink-500\/20 { background-color: rgb(236 72 153 / .13); } :root[data-theme="dark"] .bg-pink-500\/25 { background-color: rgb(236 72 153 / .16); } :root[data-theme="dark"] .bg-pink-500\/30 { background-color: rgb(236 72 153 / .19); } :root[data-theme="dark"] .bg-pink-400\/5 { background-color: rgb(244 114 182 / .04); } :root[data-theme="dark"] .bg-pink-400\/10 { background-color: rgb(244 114 182 / .07); } :root[data-theme="dark"] .bg-pink-400\/15 { background-color: rgb(244 114 182 / .10); } :root[data-theme="dark"] .bg-pink-400\/20 { background-color: rgb(244 114 182 / .13); } :root[data-theme="dark"] .bg-pink-400\/25 { background-color: rgb(244 114 182 / .16); } :root[data-theme="dark"] .bg-pink-400\/30 { background-color: rgb(244 114 182 / .19); } :root[data-theme="dark"] .bg-rose-500\/5 { background-color: rgb(244 63 94 / .04); } :root[data-theme="dark"] .bg-rose-500\/10 { background-color: rgb(244 63 94 / .07); } :root[data-theme="dark"] .bg-rose-500\/15 { background-color: rgb(244 63 94 / .10); } :root[data-theme="dark"] .bg-rose-500\/20 { background-color: rgb(244 63 94 / .13); } :root[data-theme="dark"] .bg-rose-500\/25 { background-color: rgb(244 63 94 / .16); } :root[data-theme="dark"] .bg-rose-500\/30 { background-color: rgb(244 63 94 / .19); } :root[data-theme="dark"] .bg-rose-400\/5 { background-color: rgb(251 113 133 / .04); } :root[data-theme="dark"] .bg-rose-400\/10 { background-color: rgb(251 113 133 / .07); } :root[data-theme="dark"] .bg-rose-400\/15 { background-color: rgb(251 113 133 / .10); } :root[data-theme="dark"] .bg-rose-400\/20 { background-color: rgb(251 113 133 / .13); } :root[data-theme="dark"] .bg-rose-400\/25 { background-color: rgb(251 113 133 / .16); } :root[data-theme="dark"] .bg-rose-400\/30 { background-color: rgb(251 113 133 / .19); } /* ---------- 6. Gradientes — só o "to-gray-900" (fim do gradiente no fundo da página); from/via-gray-900 são véus sobre foto e ficam escuros ---------- */ :root[data-theme="dark"] .to-gray-900 { --tw-gradient-to: var(--bg) var(--tw-gradient-to-position); } /* ---------- 7. Exceção: texto claro sobre fundo colorido/sólido/gradiente continua claro. Um fundo sólido põe as variáveis --kw-*; quem está dentro herda. Classe de escape: .keep-white ---------- */ :root[data-theme="dark"] :is(.bg-gray-950, .bg-gray-900, .bg-gray-800, .bg-gray-700, .bg-white, .bg-gray-900\/40, .bg-gray-800\/40, .bg-gray-900\/50, .bg-gray-800\/50, .bg-gray-900\/60, .bg-gray-800\/60, .bg-gray-900\/70, .bg-gray-800\/70, .bg-gray-900\/80, .bg-gray-800\/80, .bg-gray-900\/90, .bg-gray-800\/90, .bg-gray-700\/50, .bg-gray-700\/60, .bg-gray-700\/70) { --kw-white: var(--ink); --kw-white70: rgb(15 23 42 / .7); --kw-white80: rgb(15 23 42 / .8); --kw-white90: rgb(15 23 42 / .9); --kw-gray: var(--text); --kw-red-100: initial; --kw-red-200: initial; --kw-red-300: initial; --kw-orange-100: initial; --kw-orange-200: initial; --kw-orange-300: initial; --kw-amber-100: initial; --kw-amber-200: initial; --kw-amber-300: initial; --kw-yellow-100: initial; --kw-yellow-200: initial; --kw-yellow-300: initial; --kw-lime-100: initial; --kw-lime-200: initial; --kw-lime-300: initial; --kw-green-100: initial; --kw-green-200: initial; --kw-green-300: initial; --kw-emerald-100: initial; --kw-emerald-200: initial; --kw-emerald-300: initial; --kw-teal-100: initial; --kw-teal-200: initial; --kw-teal-300: initial; --kw-cyan-100: initial; --kw-cyan-200: initial; --kw-cyan-300: initial; --kw-sky-100: initial; --kw-sky-200: initial; --kw-sky-300: initial; --kw-blue-100: initial; --kw-blue-200: initial; --kw-blue-300: initial; --kw-indigo-100: initial; --kw-indigo-200: initial; --kw-indigo-300: initial; --kw-violet-100: initial; --kw-violet-200: initial; --kw-violet-300: initial; --kw-purple-100: initial; --kw-purple-200: initial; --kw-purple-300: initial; --kw-pink-100: initial; --kw-pink-200: initial; --kw-pink-300: initial; --kw-rose-100: initial; --kw-rose-200: initial; --kw-rose-300: initial; } :root[data-theme="dark"] :is(.keep-white, .bg-black, .bg-cover, .bg-gray-900\/95, .inset-0.bg-gray-900\/60, .inset-0.bg-gray-900\/70, .inset-0.bg-gray-900\/80, .inset-0.bg-gray-900\/90, .bg-red-400, .bg-red-500, .bg-red-600, .bg-red-700, .bg-red-800, .bg-red-500\/70, .bg-red-500\/80, .bg-red-500\/90, .bg-red-500\/95, .bg-red-600\/70, .bg-red-600\/80, .bg-red-600\/90, .bg-red-600\/95, .bg-red-700\/70, .bg-red-700\/80, .bg-red-700\/90, .bg-red-700\/95, .bg-red-800\/70, .bg-red-800\/80, .bg-red-800\/90, .bg-red-800\/95, .bg-red-900\/70, .bg-red-900\/80, .bg-red-900\/90, .bg-red-900\/95, .from-red-300, .from-red-400, .from-red-500, .from-red-600, .from-red-700, .bg-orange-400, .bg-orange-500, .bg-orange-600, .bg-orange-700, .bg-orange-800, .bg-orange-500\/70, .bg-orange-500\/80, .bg-orange-500\/90, .bg-orange-500\/95, .bg-orange-600\/70, .bg-orange-600\/80, .bg-orange-600\/90, .bg-orange-600\/95, .bg-orange-700\/70, .bg-orange-700\/80, .bg-orange-700\/90, .bg-orange-700\/95, .bg-orange-800\/70, .bg-orange-800\/80, .bg-orange-800\/90, .bg-orange-800\/95, .bg-orange-900\/70, .bg-orange-900\/80, .bg-orange-900\/90, .bg-orange-900\/95, .from-orange-300, .from-orange-400, .from-orange-500, .from-orange-600, .from-orange-700, .bg-amber-400, .bg-amber-500, .bg-amber-600, .bg-amber-700, .bg-amber-800, .bg-amber-500\/70, .bg-amber-500\/80, .bg-amber-500\/90, .bg-amber-500\/95, .bg-amber-600\/70, .bg-amber-600\/80, .bg-amber-600\/90, .bg-amber-600\/95, .bg-amber-700\/70, .bg-amber-700\/80, .bg-amber-700\/90, .bg-amber-700\/95, .bg-amber-800\/70, .bg-amber-800\/80, .bg-amber-800\/90, .bg-amber-800\/95, .bg-amber-900\/70, .bg-amber-900\/80, .bg-amber-900\/90, .bg-amber-900\/95, .from-amber-300, .from-amber-400, .from-amber-500, .from-amber-600, .from-amber-700, .bg-yellow-400, .bg-yellow-500, .bg-yellow-600, .bg-yellow-700, .bg-yellow-800, .bg-yellow-500\/70, .bg-yellow-500\/80, .bg-yellow-500\/90, .bg-yellow-500\/95, .bg-yellow-600\/70, .bg-yellow-600\/80, .bg-yellow-600\/90, .bg-yellow-600\/95, .bg-yellow-700\/70, .bg-yellow-700\/80, .bg-yellow-700\/90, .bg-yellow-700\/95, .bg-yellow-800\/70, .bg-yellow-800\/80, .bg-yellow-800\/90, .bg-yellow-800\/95, .bg-yellow-900\/70, .bg-yellow-900\/80, .bg-yellow-900\/90, .bg-yellow-900\/95, .from-yellow-300, .from-yellow-400, .from-yellow-500, .from-yellow-600, .from-yellow-700, .bg-lime-400, .bg-lime-500, .bg-lime-600, .bg-lime-700, .bg-lime-800, .bg-lime-500\/70, .bg-lime-500\/80, .bg-lime-500\/90, .bg-lime-500\/95, .bg-lime-600\/70, .bg-lime-600\/80, .bg-lime-600\/90, .bg-lime-600\/95, .bg-lime-700\/70, .bg-lime-700\/80, .bg-lime-700\/90, .bg-lime-700\/95, .bg-lime-800\/70, .bg-lime-800\/80, .bg-lime-800\/90, .bg-lime-800\/95, .bg-lime-900\/70, .bg-lime-900\/80, .bg-lime-900\/90, .bg-lime-900\/95, .from-lime-300, .from-lime-400, .from-lime-500, .from-lime-600, .from-lime-700, .bg-green-400, .bg-green-500, .bg-green-600, .bg-green-700, .bg-green-800, .bg-green-500\/70, .bg-green-500\/80, .bg-green-500\/90, .bg-green-500\/95, .bg-green-600\/70, .bg-green-600\/80, .bg-green-600\/90, .bg-green-600\/95, .bg-green-700\/70, .bg-green-700\/80, .bg-green-700\/90, .bg-green-700\/95, .bg-green-800\/70, .bg-green-800\/80, .bg-green-800\/90, .bg-green-800\/95, .bg-green-900\/70, .bg-green-900\/80, .bg-green-900\/90, .bg-green-900\/95, .from-green-300, .from-green-400, .from-green-500, .from-green-600, .from-green-700, .bg-emerald-400, .bg-emerald-500, .bg-emerald-600, .bg-emerald-700, .bg-emerald-800, .bg-emerald-500\/70, .bg-emerald-500\/80, .bg-emerald-500\/90, .bg-emerald-500\/95, .bg-emerald-600\/70, .bg-emerald-600\/80, .bg-emerald-600\/90, .bg-emerald-600\/95, .bg-emerald-700\/70, .bg-emerald-700\/80, .bg-emerald-700\/90, .bg-emerald-700\/95, .bg-emerald-800\/70, .bg-emerald-800\/80, .bg-emerald-800\/90, .bg-emerald-800\/95, .bg-emerald-900\/70, .bg-emerald-900\/80, .bg-emerald-900\/90, .bg-emerald-900\/95, .from-emerald-300, .from-emerald-400, .from-emerald-500, .from-emerald-600, .from-emerald-700, .bg-teal-400, .bg-teal-500, .bg-teal-600, .bg-teal-700, .bg-teal-800, .bg-teal-500\/70, .bg-teal-500\/80, .bg-teal-500\/90, .bg-teal-500\/95, .bg-teal-600\/70, .bg-teal-600\/80, .bg-teal-600\/90, .bg-teal-600\/95, .bg-teal-700\/70, .bg-teal-700\/80, .bg-teal-700\/90, .bg-teal-700\/95, .bg-teal-800\/70, .bg-teal-800\/80, .bg-teal-800\/90, .bg-teal-800\/95, .bg-teal-900\/70, .bg-teal-900\/80, .bg-teal-900\/90, .bg-teal-900\/95, .from-teal-300, .from-teal-400, .from-teal-500, .from-teal-600, .from-teal-700, .bg-cyan-400, .bg-cyan-500, .bg-cyan-600, .bg-cyan-700, .bg-cyan-800, .bg-cyan-500\/70, .bg-cyan-500\/80, .bg-cyan-500\/90, .bg-cyan-500\/95, .bg-cyan-600\/70, .bg-cyan-600\/80, .bg-cyan-600\/90, .bg-cyan-600\/95, .bg-cyan-700\/70, .bg-cyan-700\/80, .bg-cyan-700\/90, .bg-cyan-700\/95, .bg-cyan-800\/70, .bg-cyan-800\/80, .bg-cyan-800\/90, .bg-cyan-800\/95, .bg-cyan-900\/70, .bg-cyan-900\/80, .bg-cyan-900\/90, .bg-cyan-900\/95, .from-cyan-300, .from-cyan-400, .from-cyan-500, .from-cyan-600, .from-cyan-700, .bg-sky-400, .bg-sky-500, .bg-sky-600, .bg-sky-700, .bg-sky-800, .bg-sky-500\/70, .bg-sky-500\/80, .bg-sky-500\/90, .bg-sky-500\/95, .bg-sky-600\/70, .bg-sky-600\/80, .bg-sky-600\/90, .bg-sky-600\/95, .bg-sky-700\/70, .bg-sky-700\/80, .bg-sky-700\/90, .bg-sky-700\/95, .bg-sky-800\/70, .bg-sky-800\/80, .bg-sky-800\/90, .bg-sky-800\/95, .bg-sky-900\/70, .bg-sky-900\/80, .bg-sky-900\/90, .bg-sky-900\/95, .from-sky-300, .from-sky-400, .from-sky-500, .from-sky-600, .from-sky-700, .bg-blue-400, .bg-blue-500, .bg-blue-600, .bg-blue-700, .bg-blue-800, .bg-blue-500\/70, .bg-blue-500\/80, .bg-blue-500\/90, .bg-blue-500\/95, .bg-blue-600\/70, .bg-blue-600\/80, .bg-blue-600\/90, .bg-blue-600\/95, .bg-blue-700\/70, .bg-blue-700\/80, .bg-blue-700\/90, .bg-blue-700\/95, .bg-blue-800\/70, .bg-blue-800\/80, .bg-blue-800\/90, .bg-blue-800\/95, .bg-blue-900\/70, .bg-blue-900\/80, .bg-blue-900\/90, .bg-blue-900\/95, .from-blue-300, .from-blue-400, .from-blue-500, .from-blue-600, .from-blue-700, .bg-indigo-400, .bg-indigo-500, .bg-indigo-600, .bg-indigo-700, .bg-indigo-800, .bg-indigo-500\/70, .bg-indigo-500\/80, .bg-indigo-500\/90, .bg-indigo-500\/95, .bg-indigo-600\/70, .bg-indigo-600\/80, .bg-indigo-600\/90, .bg-indigo-600\/95, .bg-indigo-700\/70, .bg-indigo-700\/80, .bg-indigo-700\/90, .bg-indigo-700\/95, .bg-indigo-800\/70, .bg-indigo-800\/80, .bg-indigo-800\/90, .bg-indigo-800\/95, .bg-indigo-900\/70, .bg-indigo-900\/80, .bg-indigo-900\/90, .bg-indigo-900\/95, .from-indigo-300, .from-indigo-400, .from-indigo-500, .from-indigo-600, .from-indigo-700, .bg-violet-400, .bg-violet-500, .bg-violet-600, .bg-violet-700, .bg-violet-800, .bg-violet-500\/70, .bg-violet-500\/80, .bg-violet-500\/90, .bg-violet-500\/95, .bg-violet-600\/70, .bg-violet-600\/80, .bg-violet-600\/90, .bg-violet-600\/95, .bg-violet-700\/70, .bg-violet-700\/80, .bg-violet-700\/90, .bg-violet-700\/95, .bg-violet-800\/70, .bg-violet-800\/80, .bg-violet-800\/90, .bg-violet-800\/95, .bg-violet-900\/70, .bg-violet-900\/80, .bg-violet-900\/90, .bg-violet-900\/95, .from-violet-300, .from-violet-400, .from-violet-500, .from-violet-600, .from-violet-700, .bg-purple-400, .bg-purple-500, .bg-purple-600, .bg-purple-700, .bg-purple-800, .bg-purple-500\/70, .bg-purple-500\/80, .bg-purple-500\/90, .bg-purple-500\/95, .bg-purple-600\/70, .bg-purple-600\/80, .bg-purple-600\/90, .bg-purple-600\/95, .bg-purple-700\/70, .bg-purple-700\/80, .bg-purple-700\/90, .bg-purple-700\/95, .bg-purple-800\/70, .bg-purple-800\/80, .bg-purple-800\/90, .bg-purple-800\/95, .bg-purple-900\/70, .bg-purple-900\/80, .bg-purple-900\/90, .bg-purple-900\/95, .from-purple-300, .from-purple-400, .from-purple-500, .from-purple-600, .from-purple-700, .bg-pink-400, .bg-pink-500, .bg-pink-600, .bg-pink-700, .bg-pink-800, .bg-pink-500\/70, .bg-pink-500\/80, .bg-pink-500\/90, .bg-pink-500\/95, .bg-pink-600\/70, .bg-pink-600\/80, .bg-pink-600\/90, .bg-pink-600\/95, .bg-pink-700\/70, .bg-pink-700\/80, .bg-pink-700\/90, .bg-pink-700\/95, .bg-pink-800\/70, .bg-pink-800\/80, .bg-pink-800\/90, .bg-pink-800\/95, .bg-pink-900\/70, .bg-pink-900\/80, .bg-pink-900\/90, .bg-pink-900\/95, .from-pink-300, .from-pink-400, .from-pink-500, .from-pink-600, .from-pink-700, .bg-rose-400, .bg-rose-500, .bg-rose-600, .bg-rose-700, .bg-rose-800, .bg-rose-500\/70, .bg-rose-500\/80, .bg-rose-500\/90, .bg-rose-500\/95, .bg-rose-600\/70, .bg-rose-600\/80, .bg-rose-600\/90, .bg-rose-600\/95, .bg-rose-700\/70, .bg-rose-700\/80, .bg-rose-700\/90, .bg-rose-700\/95, .bg-rose-800\/70, .bg-rose-800\/80, .bg-rose-800\/90, .bg-rose-800\/95, .bg-rose-900\/70, .bg-rose-900\/80, .bg-rose-900\/90, .bg-rose-900\/95, .from-rose-300, .from-rose-400, .from-rose-500, .from-rose-600, .from-rose-700, .bg-black\/50, .bg-black\/60, .bg-black\/70, .bg-black\/80, .bg-black\/90) { --kw-white: #fff; --kw-white70: rgb(255 255 255 / .7); --kw-white80: rgb(255 255 255 / .8); --kw-white90: rgb(255 255 255 / .9); --kw-gray: #e5e7eb; --kw-red-100: 254 226 226; --kw-red-200: 254 202 202; --kw-red-300: 252 165 165; --kw-orange-100: 255 237 213; --kw-orange-200: 254 215 170; --kw-orange-300: 253 186 116; --kw-amber-100: 254 243 199; --kw-amber-200: 253 230 138; --kw-amber-300: 252 211 77; --kw-yellow-100: 254 249 195; --kw-yellow-200: 254 240 138; --kw-yellow-300: 253 224 71; --kw-lime-100: 236 252 203; --kw-lime-200: 217 249 157; --kw-lime-300: 190 242 100; --kw-green-100: 220 252 231; --kw-green-200: 187 247 208; --kw-green-300: 134 239 172; --kw-emerald-100: 209 250 229; --kw-emerald-200: 167 243 208; --kw-emerald-300: 110 231 183; --kw-teal-100: 204 251 241; --kw-teal-200: 153 246 228; --kw-teal-300: 94 234 212; --kw-cyan-100: 207 250 254; --kw-cyan-200: 165 243 252; --kw-cyan-300: 103 232 249; --kw-sky-100: 224 242 254; --kw-sky-200: 186 230 253; --kw-sky-300: 125 211 252; --kw-blue-100: 219 234 254; --kw-blue-200: 191 219 254; --kw-blue-300: 147 197 253; --kw-indigo-100: 224 231 255; --kw-indigo-200: 199 210 254; --kw-indigo-300: 165 180 252; --kw-violet-100: 237 233 254; --kw-violet-200: 221 214 254; --kw-violet-300: 196 181 253; --kw-purple-100: 243 232 255; --kw-purple-200: 233 213 255; --kw-purple-300: 216 180 254; --kw-pink-100: 252 231 243; --kw-pink-200: 251 207 232; --kw-pink-300: 249 168 212; --kw-rose-100: 255 228 230; --kw-rose-200: 254 205 211; --kw-rose-300: 253 164 175; } :root[data-theme="dark"] :is(.hover\:bg-cyan-500, .hover\:bg-cyan-600, .hover\:bg-cyan-700, .hover\:bg-emerald-500, .hover\:bg-emerald-600, .hover\:bg-emerald-700, .hover\:bg-red-500, .hover\:bg-red-600, .hover\:bg-red-700, .hover\:bg-amber-500, .hover\:bg-amber-600, .hover\:bg-amber-700, .hover\:bg-violet-500, .hover\:bg-violet-600, .hover\:bg-violet-700, .hover\:bg-orange-500, .hover\:bg-orange-600, .hover\:bg-orange-700, .hover\:bg-blue-500, .hover\:bg-blue-600, .hover\:bg-blue-700, .hover\:bg-sky-500, .hover\:bg-sky-600, .hover\:bg-sky-700, .hover\:bg-indigo-500, .hover\:bg-indigo-600, .hover\:bg-indigo-700, .hover\:bg-teal-500, .hover\:bg-teal-600, .hover\:bg-teal-700, .hover\:bg-pink-500, .hover\:bg-pink-600, .hover\:bg-pink-700, .hover\:bg-rose-500, .hover\:bg-rose-600, .hover\:bg-rose-700):hover { color: #fff; } :root[data-theme="dark"] .peer:checked ~ .peer-checked\:text-white { color: #fff; } :root[data-theme="dark"] .after\:bg-white::after { background-color: #fff; } /* ---------- 8. style="" com cor fixa (o inline vence classe: só !important resolve) — cada regra vale para o valor exato do escuro ---------- */ :root[data-theme="dark"] :is([style^="color:#f9fafb" i], [style*=";color:#f9fafb" i], [style*=" color:#f9fafb" i], [style^="color: #f9fafb" i], [style*=";color: #f9fafb" i], [style*=" color: #f9fafb" i], [style^="color:#f1f5f9" i], [style*=";color:#f1f5f9" i], [style*=" color:#f1f5f9" i], [style^="color: #f1f5f9" i], [style*=";color: #f1f5f9" i], [style*=" color: #f1f5f9" i], [style^="color:#f8fafc" i], [style*=";color:#f8fafc" i], [style*=" color:#f8fafc" i], [style^="color: #f8fafc" i], [style*=";color: #f8fafc" i], [style*=" color: #f8fafc" i]) { color: var(--ink) !important; } :root[data-theme="dark"] :is([style^="color:#e5e7eb" i], [style*=";color:#e5e7eb" i], [style*=" color:#e5e7eb" i], [style^="color: #e5e7eb" i], [style*=";color: #e5e7eb" i], [style*=" color: #e5e7eb" i], [style^="color:#e2e8f0" i], [style*=";color:#e2e8f0" i], [style*=" color:#e2e8f0" i], [style^="color: #e2e8f0" i], [style*=";color: #e2e8f0" i], [style*=" color: #e2e8f0" i], [style^="color:#cbd5e1" i], [style*=";color:#cbd5e1" i], [style*=" color:#cbd5e1" i], [style^="color: #cbd5e1" i], [style*=";color: #cbd5e1" i], [style*=" color: #cbd5e1" i], [style^="color:#d1d5db" i], [style*=";color:#d1d5db" i], [style*=" color:#d1d5db" i], [style^="color: #d1d5db" i], [style*=";color: #d1d5db" i], [style*=" color: #d1d5db" i]) { color: var(--text) !important; } :root[data-theme="dark"] :is([style^="color:#9ca3af" i], [style*=";color:#9ca3af" i], [style*=" color:#9ca3af" i], [style^="color: #9ca3af" i], [style*=";color: #9ca3af" i], [style*=" color: #9ca3af" i], [style^="color:#94a3b8" i], [style*=";color:#94a3b8" i], [style*=" color:#94a3b8" i], [style^="color: #94a3b8" i], [style*=";color: #94a3b8" i], [style*=" color: #94a3b8" i], [style^="color:#6b7280" i], [style*=";color:#6b7280" i], [style*=" color:#6b7280" i], [style^="color: #6b7280" i], [style*=";color: #6b7280" i], [style*=" color: #6b7280" i]) { color: var(--text-muted) !important; } :root[data-theme="dark"] :is([style^="color:#4b5563" i], [style*=";color:#4b5563" i], [style*=" color:#4b5563" i], [style^="color: #4b5563" i], [style*=";color: #4b5563" i], [style*=" color: #4b5563" i]) { color: var(--text-subtle) !important; } :root[data-theme="dark"] :is([style^="color:#a78bfa" i], [style*=";color:#a78bfa" i], [style*=" color:#a78bfa" i], [style^="color: #a78bfa" i], [style*=";color: #a78bfa" i], [style*=" color: #a78bfa" i]) { color: #7c3aed !important; } :root[data-theme="dark"] :is([style^="color:#6ee7b7" i], [style*=";color:#6ee7b7" i], [style*=" color:#6ee7b7" i], [style^="color: #6ee7b7" i], [style*=";color: #6ee7b7" i], [style*=" color: #6ee7b7" i], [style^="color:#34d399" i], [style*=";color:#34d399" i], [style*=" color:#34d399" i], [style^="color: #34d399" i], [style*=";color: #34d399" i], [style*=" color: #34d399" i], [style^="color:#4ade80" i], [style*=";color:#4ade80" i], [style*=" color:#4ade80" i], [style^="color: #4ade80" i], [style*=";color: #4ade80" i], [style*=" color: #4ade80" i], [style^="color:#86efac" i], [style*=";color:#86efac" i], [style*=" color:#86efac" i], [style^="color: #86efac" i], [style*=";color: #86efac" i], [style*=" color: #86efac" i]) { color: #047857 !important; } :root[data-theme="dark"] :is([style^="color:#fca5a5" i], [style*=";color:#fca5a5" i], [style*=" color:#fca5a5" i], [style^="color: #fca5a5" i], [style*=";color: #fca5a5" i], [style*=" color: #fca5a5" i], [style^="color:#fecaca" i], [style*=";color:#fecaca" i], [style*=" color:#fecaca" i], [style^="color: #fecaca" i], [style*=";color: #fecaca" i], [style*=" color: #fecaca" i], [style^="color:#f87171" i], [style*=";color:#f87171" i], [style*=" color:#f87171" i], [style^="color: #f87171" i], [style*=";color: #f87171" i], [style*=" color: #f87171" i]) { color: #b91c1c !important; } :root[data-theme="dark"] :is([style^="color:#22d3ee" i], [style*=";color:#22d3ee" i], [style*=" color:#22d3ee" i], [style^="color: #22d3ee" i], [style*=";color: #22d3ee" i], [style*=" color: #22d3ee" i], [style^="color:#67e8f9" i], [style*=";color:#67e8f9" i], [style*=" color:#67e8f9" i], [style^="color: #67e8f9" i], [style*=";color: #67e8f9" i], [style*=" color: #67e8f9" i]) { color: #0e7490 !important; } :root[data-theme="dark"] :is([style^="color:#fbbf24" i], [style*=";color:#fbbf24" i], [style*=" color:#fbbf24" i], [style^="color: #fbbf24" i], [style*=";color: #fbbf24" i], [style*=" color: #fbbf24" i], [style^="color:#facc15" i], [style*=";color:#facc15" i], [style*=" color:#facc15" i], [style^="color: #facc15" i], [style*=";color: #facc15" i], [style*=" color: #facc15" i], [style^="color:#fcd34d" i], [style*=";color:#fcd34d" i], [style*=" color:#fcd34d" i], [style^="color: #fcd34d" i], [style*=";color: #fcd34d" i], [style*=" color: #fcd34d" i]) { color: #b45309 !important; } :root[data-theme="dark"] :is([style^="color:#38bdf8" i], [style*=";color:#38bdf8" i], [style*=" color:#38bdf8" i], [style^="color: #38bdf8" i], [style*=";color: #38bdf8" i], [style*=" color: #38bdf8" i], [style^="color:#7dd3fc" i], [style*=";color:#7dd3fc" i], [style*=" color:#7dd3fc" i], [style^="color: #7dd3fc" i], [style*=";color: #7dd3fc" i], [style*=" color: #7dd3fc" i]) { color: #0369a1 !important; } :root[data-theme="dark"] :is([style^="color:#fb923c" i], [style*=";color:#fb923c" i], [style*=" color:#fb923c" i], [style^="color: #fb923c" i], [style*=";color: #fb923c" i], [style*=" color: #fb923c" i]) { color: #c2410c !important; } :root[data-theme="dark"] :is([style^="color:#f472b6" i], [style*=";color:#f472b6" i], [style*=" color:#f472b6" i], [style^="color: #f472b6" i], [style*=";color: #f472b6" i], [style*=" color: #f472b6" i]) { color: #be185d !important; } :root[data-theme="dark"] :is([style^="color:#84cc16" i], [style*=";color:#84cc16" i], [style*=" color:#84cc16" i], [style^="color: #84cc16" i], [style*=";color: #84cc16" i], [style*=" color: #84cc16" i]) { color: #4d7c0f !important; } :root[data-theme="dark"] :is([style^="color:#f59e0b" i], [style*=";color:#f59e0b" i], [style*=" color:#f59e0b" i], [style^="color: #f59e0b" i], [style*=";color: #f59e0b" i], [style*=" color: #f59e0b" i]) { color: #b45309 !important; } :root[data-theme="dark"] :is([style^="color:#0ea5e9" i], [style*=";color:#0ea5e9" i], [style*=" color:#0ea5e9" i], [style^="color: #0ea5e9" i], [style*=";color: #0ea5e9" i], [style*=" color: #0ea5e9" i]) { color: #0369a1 !important; } :root[data-theme="dark"] :is([style^="color:#8b5cf6" i], [style*=";color:#8b5cf6" i], [style*=" color:#8b5cf6" i], [style^="color: #8b5cf6" i], [style*=";color: #8b5cf6" i], [style*=" color: #8b5cf6" i]) { color: #6d28d9 !important; } :root[data-theme="dark"] :is([style^="color:#f43f5e" i], [style*=";color:#f43f5e" i], [style*=" color:#f43f5e" i], [style^="color: #f43f5e" i], [style*=";color: #f43f5e" i], [style*=" color: #f43f5e" i]) { color: #be123c !important; } :root[data-theme="dark"] :is([style^="color:#10b981" i], [style*=";color:#10b981" i], [style*=" color:#10b981" i], [style^="color: #10b981" i], [style*=";color: #10b981" i], [style*=" color: #10b981" i]) { color: #047857 !important; } :root[data-theme="dark"] :is([style^="color:#06b6d4" i], [style*=";color:#06b6d4" i], [style*=" color:#06b6d4" i], [style^="color: #06b6d4" i], [style*=";color: #06b6d4" i], [style*=" color: #06b6d4" i]) { color: #0e7490 !important; } :root[data-theme="dark"] :is([style^="color:#f97316" i], [style*=";color:#f97316" i], [style*=" color:#f97316" i], [style^="color: #f97316" i], [style*=";color: #f97316" i], [style*=" color: #f97316" i]) { color: #c2410c !important; } :root[data-theme="dark"] :is([style^="background:#0f172a" i], [style*=";background:#0f172a" i], [style*=" background:#0f172a" i], [style^="background: #0f172a" i], [style*=";background: #0f172a" i], [style*=" background: #0f172a" i], [style^="background:#1f2937" i], [style*=";background:#1f2937" i], [style*=" background:#1f2937" i], [style^="background: #1f2937" i], [style*=";background: #1f2937" i], [style*=" background: #1f2937" i]) { background: var(--bg) !important; } :root[data-theme="dark"] :is([style^="background:#111827" i], [style*=";background:#111827" i], [style*=" background:#111827" i], [style^="background: #111827" i], [style*=";background: #111827" i], [style*=" background: #111827" i], [style^="background:#1e293b" i], [style*=";background:#1e293b" i], [style*=" background:#1e293b" i], [style^="background: #1e293b" i], [style*=";background: #1e293b" i], [style*=" background: #1e293b" i]) { background: var(--surface) !important; } :root[data-theme="dark"] :is([style^="background:#334155" i], [style*=";background:#334155" i], [style*=" background:#334155" i], [style^="background: #334155" i], [style*=";background: #334155" i], [style*=" background: #334155" i], [style^="background:#374151" i], [style*=";background:#374151" i], [style*=" background:#374151" i], [style^="background: #374151" i], [style*=";background: #374151" i], [style*=" background: #374151" i]) { background: var(--bg-alt) !important; } :root[data-theme="dark"] :is([style^="background:rgba(255,255,255,0.07)" i], [style*=";background:rgba(255,255,255,0.07)" i], [style*=" background:rgba(255,255,255,0.07)" i], [style^="background: rgba(255,255,255,0.07)" i], [style*=";background: rgba(255,255,255,0.07)" i], [style*=" background: rgba(255,255,255,0.07)" i], [style^="background:rgba(255,255,255,0.05)" i], [style*=";background:rgba(255,255,255,0.05)" i], [style*=" background:rgba(255,255,255,0.05)" i], [style^="background: rgba(255,255,255,0.05)" i], [style*=";background: rgba(255,255,255,0.05)" i], [style*=" background: rgba(255,255,255,0.05)" i], [style^="background:rgba(255,255,255,0.08)" i], [style*=";background:rgba(255,255,255,0.08)" i], [style*=" background:rgba(255,255,255,0.08)" i], [style^="background: rgba(255,255,255,0.08)" i], [style*=";background: rgba(255,255,255,0.08)" i], [style*=" background: rgba(255,255,255,0.08)" i], [style^="background:rgba(255,255,255,.07)" i], [style*=";background:rgba(255,255,255,.07)" i], [style*=" background:rgba(255,255,255,.07)" i], [style^="background: rgba(255,255,255,.07)" i], [style*=";background: rgba(255,255,255,.07)" i], [style*=" background: rgba(255,255,255,.07)" i]) { background: rgb(15 23 42 / .06) !important; } :root[data-theme="dark"] :is([style^="background-color:#0f172a" i], [style*=";background-color:#0f172a" i], [style*=" background-color:#0f172a" i], [style^="background-color: #0f172a" i], [style*=";background-color: #0f172a" i], [style*=" background-color: #0f172a" i], [style^="background-color:#1f2937" i], [style*=";background-color:#1f2937" i], [style*=" background-color:#1f2937" i], [style^="background-color: #1f2937" i], [style*=";background-color: #1f2937" i], [style*=" background-color: #1f2937" i]) { background-color: var(--bg) !important; } :root[data-theme="dark"] :is([style^="background-color:#1e293b" i], [style*=";background-color:#1e293b" i], [style*=" background-color:#1e293b" i], [style^="background-color: #1e293b" i], [style*=";background-color: #1e293b" i], [style*=" background-color: #1e293b" i], [style^="background-color:#111827" i], [style*=";background-color:#111827" i], [style*=" background-color:#111827" i], [style^="background-color: #111827" i], [style*=";background-color: #111827" i], [style*=" background-color: #111827" i]) { background-color: var(--surface) !important; } :root[data-theme="dark"] :is([style^="border:1px solid #334155" i], [style*=";border:1px solid #334155" i], [style*=" border:1px solid #334155" i], [style^="border: 1px solid #334155" i], [style*=";border: 1px solid #334155" i], [style*=" border: 1px solid #334155" i], [style^="border:1px solid #374151" i], [style*=";border:1px solid #374151" i], [style*=" border:1px solid #374151" i], [style^="border: 1px solid #374151" i], [style*=";border: 1px solid #374151" i], [style*=" border: 1px solid #374151" i]) { border-color: var(--border) !important; } :root[data-theme="dark"] :is([style^="border:1px solid rgba(255,255,255,0.1)" i], [style*=";border:1px solid rgba(255,255,255,0.1)" i], [style*=" border:1px solid rgba(255,255,255,0.1)" i], [style^="border: 1px solid rgba(255,255,255,0.1)" i], [style*=";border: 1px solid rgba(255,255,255,0.1)" i], [style*=" border: 1px solid rgba(255,255,255,0.1)" i], [style^="border:1px solid rgba(255,255,255,0.12)" i], [style*=";border:1px solid rgba(255,255,255,0.12)" i], [style*=" border:1px solid rgba(255,255,255,0.12)" i], [style^="border: 1px solid rgba(255,255,255,0.12)" i], [style*=";border: 1px solid rgba(255,255,255,0.12)" i], [style*=" border: 1px solid rgba(255,255,255,0.12)" i], [style^="border:1px solid rgba(255,255,255,0.15)" i], [style*=";border:1px solid rgba(255,255,255,0.15)" i], [style*=" border:1px solid rgba(255,255,255,0.15)" i], [style^="border: 1px solid rgba(255,255,255,0.15)" i], [style*=";border: 1px solid rgba(255,255,255,0.15)" i], [style*=" border: 1px solid rgba(255,255,255,0.15)" i], [style^="border:1px solid rgba(255,255,255,0.25)" i], [style*=";border:1px solid rgba(255,255,255,0.25)" i], [style*=" border:1px solid rgba(255,255,255,0.25)" i], [style^="border: 1px solid rgba(255,255,255,0.25)" i], [style*=";border: 1px solid rgba(255,255,255,0.25)" i], [style*=" border: 1px solid rgba(255,255,255,0.25)" i]) { border-color: var(--border-strong) !important; } :root[data-theme="dark"] :is([style^="border-top:1px solid #475569" i], [style*=";border-top:1px solid #475569" i], [style*=" border-top:1px solid #475569" i], [style^="border-top: 1px solid #475569" i], [style*=";border-top: 1px solid #475569" i], [style*=" border-top: 1px solid #475569" i], [style^="border-top:1px solid #334155" i], [style*=";border-top:1px solid #334155" i], [style*=" border-top:1px solid #334155" i], [style^="border-top: 1px solid #334155" i], [style*=";border-top: 1px solid #334155" i], [style*=" border-top: 1px solid #334155" i], [style^="border-top:1px solid rgba(255,255,255,0.07)" i], [style*=";border-top:1px solid rgba(255,255,255,0.07)" i], [style*=" border-top:1px solid rgba(255,255,255,0.07)" i], [style^="border-top: 1px solid rgba(255,255,255,0.07)" i], [style*=";border-top: 1px solid rgba(255,255,255,0.07)" i], [style*=" border-top: 1px solid rgba(255,255,255,0.07)" i]) { border-top-color: var(--border) !important; } :root[data-theme="dark"] :is([style^="border-bottom:1px solid #334155" i], [style*=";border-bottom:1px solid #334155" i], [style*=" border-bottom:1px solid #334155" i], [style^="border-bottom: 1px solid #334155" i], [style*=";border-bottom: 1px solid #334155" i], [style*=" border-bottom: 1px solid #334155" i], [style^="border-bottom:1px solid rgba(255,255,255,0.07)" i], [style*=";border-bottom:1px solid rgba(255,255,255,0.07)" i], [style*=" border-bottom:1px solid rgba(255,255,255,0.07)" i], [style^="border-bottom: 1px solid rgba(255,255,255,0.07)" i], [style*=";border-bottom: 1px solid rgba(255,255,255,0.07)" i], [style*=" border-bottom: 1px solid rgba(255,255,255,0.07)" i]) { border-bottom-color: var(--border) !important; } :root[data-theme="dark"] :is([style^="border-color:#334155" i], [style*=";border-color:#334155" i], [style*=" border-color:#334155" i], [style^="border-color: #334155" i], [style*=";border-color: #334155" i], [style*=" border-color: #334155" i], [style^="border-color:#374151" i], [style*=";border-color:#374151" i], [style*=" border-color:#374151" i], [style^="border-color: #374151" i], [style*=";border-color: #374151" i], [style*=" border-color: #374151" i]) { border-color: var(--border) !important; } :root[data-theme="dark"] svg :is([stroke="#334155" i], [stroke="#374151" i]) { stroke: var(--track); } :root[data-theme="dark"] svg [stroke="#A78BFA" i] { stroke: #7c3aed; } /* ---------- 9. CSS embutido nas views (escritas para o escuro) — contrapartida clara, sem editar a view ---------- */ :root[data-theme="dark"] .wz-step-indicator.pending { background: var(--surface); color: var(--text-muted); border-color: var(--border-strong); } :root[data-theme="dark"] .badge-critico { color: #b91c1c; } :root[data-theme="dark"] .badge-atencao { color: #b45309; } :root[data-theme="dark"] .badge-observacao { color: #1d4ed8; } :root[data-theme="dark"] .step-line { background: var(--border-strong); } :root[data-theme="dark"] .step-line.done { background: #0e7490; } :root[data-theme="dark"] .wz-input { background: var(--surface); border-color: var(--border-strong); color: var(--ink); } :root[data-theme="dark"] .wz-input:focus { border-color: #06b6d4; } :root[data-theme="dark"] .wz-input::placeholder { color: var(--placeholder); } :root[data-theme="dark"] .wz-field-display { background: var(--bg); border-color: var(--border); } :root[data-theme="dark"] .lanc-in { background: var(--surface); border-color: var(--border-strong); color: var(--ink); } :root[data-theme="dark"] .lanc-in[data-sug="1"] { color: var(--text-muted); background: var(--surface-2); } :root[data-theme="dark"] .lanc-in:disabled { background: transparent; border-color: transparent; color: var(--text); } :root[data-theme="dark"] .lanc-in.lanc-erro { color: #b91c1c; } :root[data-theme="dark"] .lanc-in.lanc-piscou { border-color: #059669; } :root[data-theme="dark"] .opo-range { background: var(--border-strong); } :root[data-theme="dark"] .opo-range::-webkit-slider-thumb { border-color: #fff; } :root[data-theme="dark"] .opo-range::-moz-range-thumb { border-color: #fff; } :root[data-theme="dark"] .opo-flash { outline-color: #0891b2; } :root[data-theme="dark"] .om-toast { color: var(--ink); background: var(--surface); border-color: var(--border-strong); box-shadow: var(--shadow-lg); } :root[data-theme="dark"] .om-toast-ok .om-toast-ico { color: #059669; } :root[data-theme="dark"] .om-toast-erro .om-toast-ico { color: #dc2626; } :root[data-theme="dark"] .om-toast-info .om-toast-ico { color: #7c3aed; } :root[data-theme="dark"] .om-fb-thumb { background: var(--bg); border-color: var(--border-strong); } :root[data-theme="dark"] .om-fb-thumb img { background: var(--bg-alt); } :root[data-theme="dark"] .om-fb-thumb .om-fb-thumb-nome { color: var(--text); } :root[data-theme="dark"] .om-fb-thumb .om-fb-thumb-tam { color: var(--text-muted); } :root[data-theme="dark"] #om-feedback-modal { background: rgb(15 23 42 / .5) !important; } :root[data-theme="dark"] #om-feedback-modal kbd { background: var(--bg-alt) !important; color: var(--ink); } :root[data-theme="dark"] #om-feedback-modal :is(input, textarea)::placeholder { color: var(--placeholder); } :root[data-theme="dark"] #om-feedback-modal :is(input:not([type=radio]):not([type=checkbox]), textarea) { color: var(--ink) !important; } /* ---------- 10. ApexCharts (o embrulho de seed-tema.js já traduz opções; aqui o que é HTML/CSS: tooltip, legenda, menu) ---------- */ :root[data-theme="dark"] .apexcharts-tooltip { background: var(--surface) !important; border-color: var(--border-strong) !important; color: var(--text) !important; box-shadow: var(--shadow-lg) !important; } :root[data-theme="dark"] .apexcharts-tooltip-title { background: var(--surface-2) !important; border-bottom-color: var(--border) !important; color: var(--ink); } :root[data-theme="dark"] .apexcharts-tooltip-text, :root[data-theme="dark"] .apexcharts-tooltip-text-y-label, :root[data-theme="dark"] .apexcharts-tooltip-text-y-value, :root[data-theme="dark"] .apexcharts-tooltip-text-goals-value, :root[data-theme="dark"] .apexcharts-tooltip-text-z-value { color: var(--text); } :root[data-theme="dark"] :is(.apexcharts-xaxistooltip, .apexcharts-yaxistooltip) { background: var(--surface) !important; border-color: var(--border-strong) !important; color: var(--text) !important; } :root[data-theme="dark"] .apexcharts-xaxistooltip-bottom::before, :root[data-theme="dark"] .apexcharts-xaxistooltip-bottom::after { border-bottom-color: var(--border-strong); } :root[data-theme="dark"] .apexcharts-xaxistooltip-top::before, :root[data-theme="dark"] .apexcharts-xaxistooltip-top::after { border-top-color: var(--border-strong); } :root[data-theme="dark"] .apexcharts-legend-text { color: var(--text) !important; } :root[data-theme="dark"] .apexcharts-menu { background: var(--surface) !important; border-color: var(--border-strong) !important; color: var(--text); } :root[data-theme="dark"] .apexcharts-menu-item:hover { background: var(--bg) !important; } :root[data-theme="dark"] :is(.apexcharts-toolbar .apexcharts-menu-icon, .apexcharts-zoom-icon, .apexcharts-zoomin-icon, .apexcharts-zoomout-icon, .apexcharts-reset-icon, .apexcharts-pan-icon) svg { fill: var(--text-muted); } :root[data-theme="dark"] #custoChart .apexcharts-yaxis-label:hover { fill: var(--primary-text); } /* ---------- 11. Leaflet (mapas): fundo, popups, tooltips, controles; tiles claros vêm de seedMapaTiles() em seed-tema.js ---------- */ :root[data-theme="dark"] .leaflet-container { background: var(--bg-alt); } :root[data-theme="dark"] .leaflet-popup-content-wrapper, :root[data-theme="dark"] .leaflet-popup-tip { background: var(--surface); color: var(--text); border: 1px solid var(--border); box-shadow: var(--shadow); } :root[data-theme="dark"] .leaflet-popup-content-wrapper a, :root[data-theme="dark"] .leaflet-popup-content a { color: var(--primary-text); } :root[data-theme="dark"] .leaflet-container a.leaflet-popup-close-button { color: var(--text-muted); } :root[data-theme="dark"] .seed-popup a.leaflet-popup-close-button { color: var(--ink); background: rgb(255 255 255 / .85); } :root[data-theme="dark"] :is(.leaflet-tooltip.seed-dica, .opo-mapa .leaflet-tooltip) { background: var(--surface); color: var(--ink); border: 1px solid var(--border-strong); box-shadow: var(--shadow); } :root[data-theme="dark"] .opo-mapa .leaflet-popup-content-wrapper, :root[data-theme="dark"] .opo-mapa .leaflet-popup-tip { background: var(--surface); color: var(--text); border-color: var(--border); } }