/* Study.io — tema claro/escuro compartilhado entre todas as páginas. */
html {
  color-scheme: dark;
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #f3f2ee;
  --bg-2: #eceee9;
  --bg-3: #e4e8e5;
  --card: #faf9f6;
  --card-2: #f4f3ef;
  --line: #d8d9d4;
  --text: #172033;
  --muted: #64748b;
  --soft: #718096;
  --shadow: 0 28px 80px rgba(15, 23, 42, .12);
}

/* Alternador de tema */
.site-theme-toggle {
  position: fixed;
  left: 18px;
  right: auto;
  bottom: 18px;
  z-index: 9999;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 13px;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 14px;
  background: rgba(10, 16, 32, .88);
  color: #e2e8f0;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .24);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  font-family: "Plus Jakarta Sans", Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 11px;
  font-weight: 750;
  line-height: 1;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
}
.site-theme-toggle:hover {
  transform: translateY(-2px);
  border-color: rgba(34, 211, 238, .42);
}
.site-theme-toggle:focus-visible {
  outline: 3px solid rgba(34, 211, 238, .24);
  outline-offset: 3px;
}
.site-theme-toggle__icon {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  color: #67e8f9;
  font-size: 15px;
}
html[data-theme="light"] .site-theme-toggle {
  border-color: rgba(99, 102, 241, .18);
  background: rgba(255, 255, 255, .92);
  color: #273449;
  box-shadow: 0 12px 34px rgba(15, 23, 42, .13);
}
html[data-theme="light"] .site-theme-toggle__icon { color: #6366f1; }

/* Páginas que usam main.css */
html[data-theme="light"] body {
  background:
    radial-gradient(circle at 10% 7%, rgba(99, 102, 241, .10), transparent 28rem),
    radial-gradient(circle at 90% 32%, rgba(34, 211, 238, .08), transparent 27rem),
    radial-gradient(circle at 65% 85%, rgba(244, 114, 182, .06), transparent 25rem),
    linear-gradient(180deg, #f3f2ee, #efefeb 42%, #e9ece9 100%) !important;
  color: var(--text) !important;
}
html[data-theme="light"] body::before {
  background-image:
    linear-gradient(rgba(100, 116, 139, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(100, 116, 139, .055) 1px, transparent 1px);
}
html[data-theme="light"] .nav-shell {
  background: rgba(250, 249, 246, .86);
  border-bottom-color: rgba(15, 23, 42, .09);
  box-shadow: 0 8px 28px rgba(15, 23, 42, .045);
}
html[data-theme="light"] .btn-secondary,
html[data-theme="light"] .mobile-toggle {
  background: rgba(250, 249, 246, .86);
  border-color: rgba(71, 85, 105, .18);
  color: #253248;
}
html[data-theme="light"] .btn-secondary:hover { border-color: rgba(34, 211, 238, .55); }
html[data-theme="light"] .btn-ghost { color: #64748b; }
html[data-theme="light"] .panel,
html[data-theme="light"] .simple-card {
  border-color: rgba(71, 85, 105, .13);
  background: rgba(250, 249, 246, .90);
  box-shadow: 0 22px 65px rgba(15, 23, 42, .09), inset 0 1px 0 rgba(255,255,255,.75);
}
html[data-theme="light"] .subscription-main {
  border-color: rgba(99, 102, 241, .18);
  background: linear-gradient(135deg, rgba(99,102,241,.075), rgba(34,211,238,.035));
}
html[data-theme="light"] .detail-box,
html[data-theme="light"] .stat-card,
html[data-theme="light"] .mini-plan {
  border-color: rgba(71, 85, 105, .11);
  background: #f1f1ed;
}
html[data-theme="light"] .info-line { border-bottom-color: rgba(71, 85, 105, .10); }
html[data-theme="light"] .download-card {
  border-color: rgba(8, 145, 178, .20);
  background: linear-gradient(135deg, rgba(34,211,238,.07), rgba(99,102,241,.06));
}
html[data-theme="light"] .toast {
  background: rgba(250, 249, 246, .97);
  color: #172033;
  border-color: rgba(71, 85, 105, .15);
  box-shadow: 0 18px 50px rgba(15, 23, 42, .14);
}
html[data-theme="light"] .field label { color: #334155; }
html[data-theme="light"] .field input,
html[data-theme="light"] .field select {
  border-color: rgba(99,102,241,.20);
  background-color: #faf9f6;
  color: #172033;
}
html[data-theme="light"] .field input::placeholder { color: #94a3b8; }
html[data-theme="light"] .field select option { background: #fff; color: #172033; }

/* Login / cadastro (auth-gustavo.css) */
html[data-theme="light"] .auth-page {
  background:
    radial-gradient(circle at 15% 10%, rgba(99,102,241,.10), transparent 28%),
    radial-gradient(circle at 88% 88%, rgba(34,211,238,.07), transparent 28%),
    #f3f2ee;
}
html[data-theme="light"] .auth-page::before {
  background-image:
    linear-gradient(rgba(15,23,42,.035) 1px, transparent 1px),
    linear-gradient(90deg,rgba(15,23,42,.035) 1px, transparent 1px);
}
html[data-theme="light"] .auth-back {
  border-color: rgba(71,85,105,.15);
  background: rgba(250,249,246,.88);
  color: #475569;
  box-shadow: 0 8px 24px rgba(15,23,42,.06);
}
html[data-theme="light"] .auth-back:hover { color: #172033; }
html[data-theme="light"] .auth-shell {
  border-color: rgba(71,85,105,.13);
  background: rgba(250,249,246,.92);
  box-shadow: 0 38px 90px rgba(15,23,42,.14);
}
html[data-theme="light"] .auth-showcase {
  border-right-color: rgba(71,85,105,.12);
  background: linear-gradient(145deg, rgba(99,102,241,.08), rgba(248,250,252,.88) 52%, rgba(34,211,238,.05));
}
html[data-theme="light"] .brand { color: #172033; }
html[data-theme="light"] .showcase-copy p,
html[data-theme="light"] .auth-subheading { color: #64748b; }
html[data-theme="light"] .preview-card,
html[data-theme="light"] .auth-chip {
  border-color: rgba(71,85,105,.12);
  background: rgba(250,249,246,.76);
  box-shadow: 0 16px 44px rgba(15,23,42,.07);
}
html[data-theme="light"] .preview-stat {
  border-color: rgba(71,85,105,.10);
  background: #eceee9;
}
html[data-theme="light"] .auth-tabs {
  border-color: rgba(71,85,105,.11);
  background: #eceee9;
}
html[data-theme="light"] .auth-tab { color: #64748b; }
html[data-theme="light"] .auth-tab.active {
  color: #172033;
  background: linear-gradient(135deg, rgba(99,102,241,.13), rgba(34,211,238,.06));
}
html[data-theme="light"] .auth-form-side { background: rgba(255,255,255,.36); }
html[data-theme="light"] .auth-card .brand { color: #172033; }
html[data-theme="light"] .auth-card .field label { color: #334155; }
html[data-theme="light"] .auth-card .field input,
html[data-theme="light"] .auth-card .field select {
  border-color: rgba(99,102,241,.18);
  background: #faf9f6;
  color: #172033;
}
html[data-theme="light"] .auth-card .field select option { background: #fff; color: #172033; }
html[data-theme="light"] .auth-card .field input::placeholder { color: #94a3b8; }
html[data-theme="light"] .auth-security,
html[data-theme="light"] .field-help { color: #64748b; }

/* Landing page gerada pelo bundle do Gustavo. */
html[data-theme="light"] #root { background: #f3f2ee !important; color: #172033 !important; }

/* Mantém as texturas de grade/pontos no tema claro, usando cinza suave. */
html[data-theme="light"] #root .bg-grid-pattern {
  background-image:
    linear-gradient(90deg, rgba(100, 116, 139, .10) 1px, transparent 1px),
    linear-gradient(rgba(100, 116, 139, .10) 1px, transparent 1px) !important;
  background-size: 32px 32px !important;
}
html[data-theme="light"] #root .bg-dot-pattern {
  background-image: radial-gradient(rgba(100, 116, 139, .15) 1px, transparent 1px) !important;
  background-size: 24px 24px !important;
}
html[data-theme="light"] #root [class*="bg-[#05070c]"],
html[data-theme="light"] #root [class*="bg-[#07090e]"] { background-color: #f3f2ee !important; }
html[data-theme="light"] #root [class*="bg-[#090d18]"],
html[data-theme="light"] #root [class*="bg-[#090e1b]"],
html[data-theme="light"] #root [class*="bg-[#0a0f1d]"],
html[data-theme="light"] #root [class*="bg-[#0b0e17]"],
html[data-theme="light"] #root [class*="bg-[#0b101e]"],
html[data-theme="light"] #root [class*="bg-[#0b1222]"],
html[data-theme="light"] #root [class*="bg-[#0c101c]"],
html[data-theme="light"] #root [class*="bg-[#0c1222]"],
html[data-theme="light"] #root [class*="bg-[#111624]"],
html[data-theme="light"] #root [class*="bg-[#111a30]"] {
  background-color: #faf9f6 !important;
}
html[data-theme="light"] #root [class*="bg-[#2b123d]"] { background-color: #fff7fd !important; }
html[data-theme="light"] #root [class*="text-[#e2e8f0]"] { color: #172033 !important; }
html[data-theme="light"] #root [class*="text-slate-100"],
html[data-theme="light"] #root [class*="text-slate-200"],
html[data-theme="light"] #root [class*="text-slate-300"] { color: #334155 !important; }
html[data-theme="light"] #root [class*="text-slate-400"] { color: #64748b !important; }
html[data-theme="light"] #root [class*="text-slate-500"] { color: #718096 !important; }
html[data-theme="light"] #root h1[class*="text-white"],
html[data-theme="light"] #root h2[class*="text-white"],
html[data-theme="light"] #root h3[class*="text-white"],
html[data-theme="light"] #root h4[class*="text-white"],
html[data-theme="light"] #root p[class*="text-white"],
html[data-theme="light"] #root div[class*="text-white"]:not([class*="bg-"]),
html[data-theme="light"] #root span[class*="text-white"]:not([class*="bg-"]),
html[data-theme="light"] #root a[class*="text-white"]:not([class*="bg-"]) { color: #172033 !important; }
html[data-theme="light"] #root [class*="border-white/"] { border-color: rgba(71,85,105,.13) !important; }
html[data-theme="light"] #root [class*="bg-white/"] { background-color: rgba(71,85,105,.045) !important; }
html[data-theme="light"] #root [class*="shadow-black"] { --tw-shadow-color: rgba(15,23,42,.13) !important; }
html[data-theme="light"] #root [class*="from-[#07090e]"] { --tw-gradient-from: #f3f2ee !important; }
html[data-theme="light"] #root [class*="via-[#090d18]"],
html[data-theme="light"] #root [class*="via-[#090e1c]"],
html[data-theme="light"] #root [class*="via-[#0b1022]"] { --tw-gradient-via: #eceee9 !important; }
html[data-theme="light"] #root [class*="to-[#05070c]"],
html[data-theme="light"] #root [class*="to-[#07090e]"],
html[data-theme="light"] #root [class*="to-[#090e1a]"],
html[data-theme="light"] #root [class*="to-[#0e122b]"] { --tw-gradient-to: #e9ece9 !important; }
html[data-theme="light"] #root [class*="from-[#170a24]"],
html[data-theme="light"] #root [class*="from-[#170e2a]"] { --tw-gradient-from: #fff5fb !important; }
html[data-theme="light"] #root [class*="via-[#1b1236]"],
html[data-theme="light"] #root [class*="via-[#241138]"] { --tw-gradient-via: #f8f4ff !important; }
html[data-theme="light"] #root [class*="to-[#12061c]"] { --tw-gradient-to: #fff7fd !important; }


/* Gradientes escuros que viram superfícies claras no modo off-white. */
html[data-theme="light"] #root [class*="from-[#0c1424]"] {
  --tw-gradient-from: #edf3f1 !important;
  --tw-gradient-from-position: 0% !important;
}

/*
 * A área de demonstração de temas é uma "ilha visual": ela mostra como os
 * próprios temas do Study.io são de verdade. O tema claro do site não deve
 * recolorir essas prévias, senão o contraste e as paletas deixam de representar
 * o aplicativo.
 */
html[data-theme="light"] #personalizacao .grid button[class*="bg-[#0a0f1d]"] {
  background-color: #0a0f1d !important;
}
html[data-theme="light"] #personalizacao .grid button[class*="bg-white/10"] {
  background-color: rgba(255, 255, 255, .10) !important;
}
html[data-theme="light"] #personalizacao .grid button [class*="text-white"] {
  color: #ffffff !important;
}
html[data-theme="light"] #personalizacao .grid button [class*="text-slate-400"] {
  color: #94a3b8 !important;
}
html[data-theme="light"] #personalizacao [class*="max-w-4xl"][style*="background-color"] [class*="text-white"] {
  color: #ffffff !important;
}
html[data-theme="light"] #personalizacao [class*="max-w-4xl"][style*="background-color"] [class*="text-slate-300"] {
  color: #cbd5e1 !important;
}
html[data-theme="light"] #personalizacao [class*="max-w-4xl"][style*="background-color"] [class*="text-slate-400"] {
  color: #94a3b8 !important;
}
html[data-theme="light"] #personalizacao [class*="max-w-4xl"][style*="background-color"] [class*="bg-white/10"] {
  background-color: rgba(255, 255, 255, .10) !important;
}
html[data-theme="light"] #personalizacao [class*="max-w-4xl"][style*="background-color"] [class*="border-white/"] {
  border-color: rgba(255, 255, 255, .10) !important;
}

/* Componentes injetados pelo landing-integration.js */
html[data-theme="light"] .studyio-auth-entry {
  border-color: rgba(71,85,105,.15);
  background: rgba(250,249,246,.88);
  color: #334155;
  box-shadow: 0 8px 24px rgba(15,23,42,.06);
}
html[data-theme="light"] .studyio-auth-entry:hover { color: #172033; background: #faf9f6; }
html[data-theme="light"] .studyio-developer-footer,
html[data-theme="light"] .studyio-pricing-section {
  background: #f3f2ee;
  color: #172033;
  border-color: rgba(71,85,105,.10);
}
html[data-theme="light"] .studyio-pricing-section::before {
  background-image:
    linear-gradient(rgba(100,116,139,.075) 1px, transparent 1px),
    linear-gradient(90deg,rgba(100,116,139,.075) 1px, transparent 1px);
}
html[data-theme="light"] .studyio-pricing-heading h2,
html[data-theme="light"] .studyio-price-card-top h3,
html[data-theme="light"] .studyio-price,
html[data-theme="light"] .studyio-pricing-guarantee strong { color: #172033; }
html[data-theme="light"] .studyio-pricing-heading p,
html[data-theme="light"] .studyio-price-card-top p,
html[data-theme="light"] .studyio-price-card li,
html[data-theme="light"] .studyio-pricing-footnote,
html[data-theme="light"] .studyio-pricing-guarantee span:not(.studyio-guarantee-icon) { color: #64748b; }
html[data-theme="light"] .studyio-price-card {
  border-color: rgba(71,85,105,.12);
  background: linear-gradient(145deg, #faf9f6, #f1f1ed);
  box-shadow: 0 24px 70px rgba(15,23,42,.09);
}
html[data-theme="light"] .studyio-price-card.featured {
  border-color: rgba(99,102,241,.42);
  box-shadow:
    0 24px 70px rgba(15,23,42,.09),
    0 0 0 1px rgba(129,140,248,.16),
    0 0 34px rgba(99,102,241,.18);
}
html[data-theme="light"] .studyio-price-card.featured::before {
  background: linear-gradient(130deg,
      rgba(99,102,241,.72),
      transparent 38%,
      rgba(34,211,238,.42));
  filter: blur(14px);
  opacity: .72;
}
html[data-theme="light"] .studyio-price-badge {
  color: #8b5cf6;
  background: rgba(139, 92, 246, .12);
  border-color: rgba(139, 92, 246, .24);
}
html[data-theme="light"] .studyio-plan-button.secondary {
  border-color: rgba(71,85,105,.15);
  background: #e7e9e5;
  color: #253248;
}
html[data-theme="light"] .studyio-plan-button.secondary:hover { background: #dde2de; }
html[data-theme="light"] .studyio-pricing-guarantee {
  border-color: rgba(22, 163, 74, .20);
  background: rgba(22, 163, 74, .08);
}
html[data-theme="light"] .studyio-guarantee-icon {
  border-color: rgba(22, 163, 74, .26);
  color: #15803d;
  background: rgba(34, 197, 94, .10);
}

@media (max-width: 560px) {
  .site-theme-toggle {
    left: 12px;
    right: auto;
    bottom: 12px;
    min-width: 42px;
    padding: 0 11px;
  }
  .site-theme-toggle__label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .site-theme-toggle { transition: none; }
}

/* Contraste levemente maior para elementos verdes e vermelhos no tema claro. */
html[data-theme="light"] #root [class*="text-emerald-300"],
html[data-theme="light"] #root [class*="text-emerald-400"],
html[data-theme="light"] #root [class*="text-emerald-500"],
html[data-theme="light"] #root [class*="text-green-400"],
html[data-theme="light"] #root [class*="text-green-500"] {
  color: #0f9f6e !important;
}
html[data-theme="light"] #root [class*="bg-emerald-400/20"],
html[data-theme="light"] #root [class*="bg-emerald-500/15"],
html[data-theme="light"] #root [class*="bg-green-500/15"],
html[data-theme="light"] #root [class*="bg-green-500/10"] {
  background-color: rgba(16, 185, 129, .16) !important;
}
html[data-theme="light"] #root [class*="border-emerald-400/"],
html[data-theme="light"] #root [class*="border-emerald-500/"],
html[data-theme="light"] #root [class*="border-green-500/"] {
  border-color: rgba(16, 185, 129, .28) !important;
}
html[data-theme="light"] #root [class*="text-rose-300"],
html[data-theme="light"] #root [class*="text-rose-400"],
html[data-theme="light"] #root [class*="text-rose-500"],
html[data-theme="light"] #root [class*="text-red-400"],
html[data-theme="light"] #root [class*="text-red-500"],
html[data-theme="light"] #root [class*="text-pink-400"] {
  color: #e25574 !important;
}
html[data-theme="light"] #root [class*="bg-rose-400/20"],
html[data-theme="light"] #root [class*="bg-rose-500/15"],
html[data-theme="light"] #root [class*="bg-red-500/10"],
html[data-theme="light"] #root [class*="bg-pink-500/10"] {
  background-color: rgba(244, 114, 182, .14) !important;
}
html[data-theme="light"] #root [class*="border-rose-400/"],
html[data-theme="light"] #root [class*="border-rose-500/"],
html[data-theme="light"] #root [class*="border-red-500/"],
html[data-theme="light"] #root [class*="border-pink-500/"] {
  border-color: rgba(244, 114, 182, .24) !important;
}


/* Azul mais legível para destaques ciano no tema claro. */
html[data-theme="light"] #root [class*="text-cyan-200"],
html[data-theme="light"] #root [class*="text-cyan-300"],
html[data-theme="light"] #root [class*="text-cyan-400"],
html[data-theme="light"] #root [class*="text-cyan-500"] {
  color: #2563eb !important;
}
html[data-theme="light"] #root [class*="border-cyan-200/"],
html[data-theme="light"] #root [class*="border-cyan-300/"],
html[data-theme="light"] #root [class*="border-cyan-400/"],
html[data-theme="light"] #root [class*="border-cyan-500/"] {
  border-color: rgba(37, 99, 235, .30) !important;
}
html[data-theme="light"] #root [class*="bg-cyan-200/"],
html[data-theme="light"] #root [class*="bg-cyan-300/"],
html[data-theme="light"] #root [class*="bg-cyan-400/"],
html[data-theme="light"] #root [class*="bg-cyan-500/"] {
  background-color: rgba(37, 99, 235, .12) !important;
}
html[data-theme="light"] #root [class*="from-cyan-400"],
html[data-theme="light"] #root [class*="from-cyan-500"] {
  --tw-gradient-from: #2563eb !important;
}
html[data-theme="light"] #root [class*="to-cyan-400"],
html[data-theme="light"] #root [class*="to-cyan-500"] {
  --tw-gradient-to: #3b82f6 !important;
}