/* ============================================================ SOULIX — Rebrand Dark + Ember (padrão) Camada de re-skin que remapeia as superfícies antigas (#04040A) para a nova paleta grafite, sem tocar na marcação das páginas. Tokens: bg #0A0A0C · surface #141418 · surface2 #1C1C22 ember #FF5A1F · glow #FF8A3D · texto #F5F5F7/#8A8A93 ============================================================ */ :root { color-scheme: dark; } body { background: #0A0A0C !important; } /* superfície dos cards/blocos: grafite que "pop" contra o fundo quase-preto */ [class*="bg-[#04040A]"] { background-color: #141418 !important; box-shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 12px 30px -18px rgba(0,0,0,.7) !important; } /* hairlines discretas no lugar das bordas transparentes */ .border-transparent { border-color: rgba(255,255,255,.06) !important; } /* acento ember: gradientes e glows */ .bg-gradient-to-r.from-soul { background-image: linear-gradient(90deg, #FF8A3D, #FF5A1F) !important; } .card-glow:hover { box-shadow: 0 0 0 1px rgba(255,90,31,.35), 0 20px 50px -24px rgba(255,90,31,.45) !important; } ::-webkit-scrollbar-thumb { background: #26262c !important; } /* números com Space Grotesk e tracking apertado (stat blocks) */ .font-display { font-family: "Space Grotesk", sans-serif; } /* ---- utilitários da marca (usar em qualquer página) ---- */ .ember-text { background:linear-gradient(90deg,#FF8A3D,#FF5A1F); -webkit-background-clip:text; background-clip:text; color:transparent; } .hairline { border:1px solid rgba(255,255,255,.06); } .eyebrow { letter-spacing:.22em; text-transform:uppercase; } .num { font-family:"Space Grotesk",sans-serif; font-weight:700; letter-spacing:-.03em; line-height:.9; } .btn-ember { background:linear-gradient(90deg,#FF6A2B,#FF5A1F); box-shadow:0 8px 30px -8px rgba(255,90,31,.6), inset 0 1px 0 rgba(255,255,255,.22); color:#fff; } .btn-ember:hover { filter:brightness(1.08); } .glow-hero { background:radial-gradient(60% 60% at 70% 20%, rgba(255,90,31,.22), transparent 70%); } .card-hover { transition:transform .2s, border-color .2s, box-shadow .2s; } .card-hover:hover { transform:translateY(-3px); border-color:rgba(255,90,31,.35); } .det-toggle.open .det-chev { transform:rotate(180deg); } .soul-orb { background:radial-gradient(circle at 35% 30%,#FFB980,#FF5A1F 45%,#8f2a06 100%); box-shadow:0 0 60px rgba(255,90,31,.5); } /* logo oficial: mostra a versão branca no dark (padrão) e a escura no tema claro */ .lg-dark { display:none; } html[data-theme="light"] .lg-white { display:none; } html[data-theme="light"] .lg-dark { display:inline-block; } /* wordmark reutilizável */ .wm { font-family:"Space Grotesk",sans-serif; font-weight:700; letter-spacing:-.01em; } .wm .ix { background:linear-gradient(90deg,#FF8A3D,#FF5A1F); -webkit-background-clip:text; background-clip:text; color:transparent; } .wm-orb { display:grid; place-items:center; border-radius:.5rem; background:radial-gradient(circle at 30% 30%,#FF8A3D,#E24408); color:#fff; } html[data-theme="light"] .wm { color:#0f172a; } /* ============================================================ SOULIX — Tema claro (item 5.4) O app é dark por padrão (cores hardcoded). Aqui remapeamos as principais superfícies/textos quando . ============================================================ */ /* superfícies */ html[data-theme="light"] body { background: #eef2f7 !important; } html[data-theme="light"] [class*="bg-[#04040A]"] { background: #ffffff !important; box-shadow: 0 1px 2px rgba(15,23,42,.06), 0 4px 14px rgba(15,23,42,.06) !important; } html[data-theme="light"] .bg-black { background: #ffffff !important; } html[data-theme="light"] [class*="bg-black/"] { background: #f1f5f9 !important; } html[data-theme="light"] .bg-white\/5 { background: rgba(15,23,42,.045) !important; } html[data-theme="light"] .bg-white\/10 { background: rgba(15,23,42,.08) !important; } html[data-theme="light"] .backdrop-blur-md, html[data-theme="light"] .backdrop-blur { background: rgba(255,255,255,.7) !important; } /* textos */ html[data-theme="light"] .text-white { color: #0f172a !important; } html[data-theme="light"] .text-slate-100 { color: #1e293b !important; } html[data-theme="light"] .text-slate-200 { color: #334155 !important; } html[data-theme="light"] .text-slate-300 { color: #475569 !important; } html[data-theme="light"] .text-slate-400 { color: #64748b !important; } html[data-theme="light"] .text-slate-500 { color: #64748b !important; } html[data-theme="light"] .text-slate-600 { color: #94a3b8 !important; } /* textos de badges (aumenta contraste no claro) */ html[data-theme="light"] .text-amber-300 { color: #b45309 !important; } html[data-theme="light"] .text-green-300 { color: #15803d !important; } html[data-theme="light"] .text-red-300 { color: #b91c1c !important; } html[data-theme="light"] .text-cyan-300 { color: #0e7490 !important; } html[data-theme="light"] .text-rose-300 { color: #be123c !important; } html[data-theme="light"] .text-orange-300, html[data-theme="light"] .text-orange-200 { color: #c2410c !important; } /* bordas */ html[data-theme="light"] [class*="border-white/"] { border-color: rgba(15,23,42,.10) !important; } html[data-theme="light"] .border-transparent { border-color: rgba(15,23,42,.08) !important; } /* scrollbar + inputs */ html[data-theme="light"] ::-webkit-scrollbar-thumb { background: #cbd5e1 !important; } html[data-theme="light"] input::placeholder, html[data-theme="light"] textarea::placeholder { color: #94a3b8 !important; } /* botão flutuante de tour e toasts continuam com a marca (laranja) */