@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

html,
body {
  font-family: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
}

body {
  transition: background-color 0.2s ease, color 0.2s ease;
}

.theme-choice-btn {
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 6px;
  color: #475569;
}

.theme-choice-btn:hover {
  background: #f1f5f9;
}

.theme-choice-btn[aria-pressed="true"] {
  border-color: #94a3b8;
  color: #0f172a;
}

html.theme-dark .theme-choice-btn {
  color: #cbd5e1;
}

html.theme-dark .theme-choice-btn:hover {
  background: #1e293b;
}

html.theme-dark .theme-choice-btn[aria-pressed="true"] {
  border-color: #64748b;
  color: #f8fafc;
}

html.theme-dark body {
  background-color: #020617;
  color: #e2e8f0;
}

html.theme-dark .bg-slate-50 {
  background-color: #020617 !important;
}

html.theme-dark .bg-white {
  background-color: #0b1220 !important;
}

html.theme-dark [class*='bg-white/'] {
  background-color: rgba(11, 18, 32, 0.88) !important;
}

html.theme-dark .bg-slate-100 {
  background-color: #1e293b !important;
}

html.theme-dark .bg-slate-900,
html.theme-dark .bg-slate-950 {
  background-color: #020617 !important;
}

html.theme-dark .border-slate-200 {
  border-color: #334155 !important;
}

html.theme-dark .border-slate-300 {
  border-color: #475569 !important;
}

html.theme-dark .border-slate-700,
html.theme-dark .border-slate-800 {
  border-color: #334155 !important;
}

html.theme-dark .text-slate-900 {
  color: #f1f5f9 !important;
}

html.theme-dark .text-slate-800 {
  color: #e2e8f0 !important;
}

html.theme-dark .text-slate-700 {
  color: #cbd5e1 !important;
}

html.theme-dark .text-slate-600 {
  color: #94a3b8 !important;
}

html.theme-dark .text-slate-500,
html.theme-dark .text-slate-400 {
  color: #64748b !important;
}

html.theme-dark .text-white {
  color: #f8fafc !important;
}

html.theme-dark .hover\:bg-slate-100:hover,
html.theme-dark .hover\:bg-slate-200:hover,
html.theme-dark .hover\:bg-slate-700:hover,
html.theme-dark .hover\:bg-slate-800:hover {
  background-color: #1e293b !important;
}

html.theme-dark .hover\:text-slate-900:hover,
html.theme-dark .hover\:text-slate-100:hover {
  color: #f8fafc !important;
}

html.theme-dark .hover\:text-slate-700:hover {
  color: #cbd5e1 !important;
}

html.theme-dark .hover\:bg-rose-50:hover {
  background-color: rgba(127, 29, 29, 0.35) !important;
}

html.theme-dark input,
html.theme-dark textarea,
html.theme-dark select {
  background-color: #0f172a !important;
  color: #e2e8f0 !important;
}

html.theme-dark pre {
  background-color: #0f172a !important;
}

html.theme-dark .force-dark-text {
  color: #0f172a !important;
}

html.theme-dark .hover-dark-text:hover {
  color: #0f172a !important;
}

html.theme-dark #plans {
  background-image: linear-gradient(135deg, rgba(113, 63, 18, 0.32) 0%, #0b1220 100%) !important;
  border-color: rgba(234, 179, 8, 0.7) !important;
}

/* Package cards use bright gradients in light mode and quieter panels in dark mode. */
html.theme-dark .package-card {
  background-image: linear-gradient(135deg, #0b1220 0%, #111827 100%) !important;
  border-color: #334155 !important;
}

html.theme-dark .package-card-lite {
  background-image: linear-gradient(135deg, rgba(113, 63, 18, 0.34) 0%, #0b1220 100%) !important;
  border-color: rgba(234, 179, 8, 0.7) !important;
}

html.theme-dark .package-card-pro {
  background-image: linear-gradient(135deg, rgba(146, 64, 14, 0.38) 0%, rgba(113, 63, 18, 0.32) 55%, #0b1220 100%) !important;
  border-color: rgba(245, 158, 11, 0.65) !important;
}

html.theme-dark .package-card-studio {
  background-image: linear-gradient(135deg, rgba(234, 179, 8, 0.78) 0%, rgba(180, 83, 9, 0.72) 100%) !important;
  border-color: rgba(250, 204, 21, 0.85) !important;
}

html.theme-dark .package-text {
  color: #f1f5f9 !important;
}

html.theme-dark .package-card-studio .package-text {
  color: #0f172a !important;
}

/* Keep dark text on yellow surfaces in both light and dark themes */
[class*='bg-yellow-'],
[class*='from-yellow-'],
[class*='to-yellow-'] {
  color: #0f172a !important;
}

[class*='bg-yellow-'] .text-white,
[class*='from-yellow-'] .text-white,
[class*='to-yellow-'] .text-white {
  color: #0f172a !important;
}

html.theme-dark [class*='bg-yellow-'],
html.theme-dark [class*='from-yellow-'],
html.theme-dark [class*='to-yellow-'] {
  color: #0f172a !important;
}

html.theme-dark [class*='bg-yellow-'] .text-white,
html.theme-dark [class*='from-yellow-'] .text-white,
html.theme-dark [class*='to-yellow-'] .text-white {
  color: #0f172a !important;
}

/* Keep logo mark yellow across themes */
.logo-mark {
  color: #eab308 !important;
}

html.theme-dark .logo-mark {
  color: #eab308 !important;
}

/* Profile initials knob */
.profile-knob {
  background-color: #64748b;
  transition: background-color 0.2s ease;
}

.profile-knob:hover {
  background-color: #475569;
}

html.theme-dark .profile-knob {
  background-color: #020617;
}

html.theme-dark .profile-knob:hover {
  background-color: #0f172a;
}

/* Avatar usage ring base colors: lighter in light mode, darker in dark mode */
.usage-ring-base-outer {
  color: #e2e8f0;
}

.usage-ring-base-inner {
  color: #f1f5f9;
}

html.theme-dark .usage-ring-base-outer {
  color: #0f172a;
}

html.theme-dark .usage-ring-base-inner {
  color: #020617;
}

/* Unified upgrade CTA */
.upgrade-cta {
  background-image: linear-gradient(135deg, #eab308 0%, #facc15 45%, #eab308 100%);
  background-size: 220% 220%;
  color: #0f172a !important;
  border: 1px solid rgba(234, 179, 8, 0.95);
  border-radius: 0.7rem;
  font-weight: 700;
  transition: transform 0.18s ease, box-shadow 0.25s ease, background-position 0.35s ease;
  box-shadow: 0 8px 18px rgba(234, 179, 8, 0.28);
}

.upgrade-cta:hover {
  transform: translateY(-1px) scale(1.01);
  background-position: 100% 0%;
  box-shadow: 0 12px 24px rgba(234, 179, 8, 0.36);
  color: #0f172a !important;
}

.upgrade-cta:active {
  transform: translateY(0);
}

.upgrade-cta:focus-visible {
  outline: 2px solid #facc15;
  outline-offset: 2px;
}

.upgrade-cta:disabled,
.upgrade-cta[aria-disabled='true'] {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Keep "Current plan" disabled button colors identical in light/dark */
.current-plan-btn {
  background-color: #f1f5f9 !important;
  color: #64748b !important;
  border: 1px solid #cbd5e1;
}

html.theme-dark .current-plan-btn {
  background-color: #1e293b !important;
  color: #94a3b8 !important;
  border: 1px solid #475569 !important;
}