:root {
  color-scheme: light;
  --page-bg: #f4f8fc;
  --surface: #ffffff;
  --surface-soft: #eef5fc;
  --ink: #13243a;
  --muted: #5c6f87;
  --line: #d7e2ee;
  --blue: #2563eb;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: var(--page-bg);
  color: var(--ink);
}

.card {
  background-color: var(--surface);
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  box-shadow: 0 1px 3px rgb(19 36 58 / 6%);
}

.btn-primary {
  background-color: var(--blue);
  color: #ffffff;
  font-weight: 600;
  border-radius: 0.5rem;
  transition: background-color 0.2s;
}

.btn-primary:hover {
  background-color: #1d4ed8;
}

.btn-secondary {
  background-color: #eaf2fc;
  border: 1px solid #c7d9ee;
  color: #1d4ed8;
  border-radius: 0.5rem;
}

.btn-secondary:hover {
  background-color: #dceafb;
}

.nav-tab {
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
}

.nav-tab:hover {
  background-color: #eaf2fc;
  color: #1d4ed8;
}

.nav-tab.active {
  background-color: #eaf2fc;
  color: #1d4ed8;
  border-bottom: 2px solid var(--blue);
}

.input-field {
  background-color: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 0.5rem;
  padding: 0.625rem;
  color: var(--ink);
  outline: none;
}

.input-field:focus {
  border-color: #3b82f6;
}

.badge {
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
}

body.bg-slate-50 {
  background-color: var(--page-bg) !important;
  color: var(--ink) !important;
}

body.bg-slate-50 .bg-slate-950 {
  background-color: var(--surface) !important;
}

body.bg-slate-50 [class~="bg-slate-950/60"] {
  background-color: #f8fbff !important;
}

body.bg-slate-50 .bg-slate-900 {
  background-color: var(--surface-soft) !important;
}

body.bg-slate-50 .bg-slate-800 {
  background-color: #e7f0fb !important;
}

body.bg-slate-50 .bg-gradient-to-r {
  background-image: none !important;
  background-color: var(--surface-soft) !important;
}

body.bg-slate-50 .bg-amber-950,
body.bg-slate-50 [class~="bg-amber-950/40"] {
  background-color: #fff7e6 !important;
}

body.bg-slate-50 .bg-emerald-950 {
  background-color: #e8f8ef !important;
}

body.bg-slate-50 .bg-red-950 {
  background-color: #fff0f0 !important;
}

body.bg-slate-50 .text-slate-100,
body.bg-slate-50 .text-slate-200 {
  color: var(--ink) !important;
}

body.bg-slate-50 .text-slate-300 {
  color: #334155 !important;
}

body.bg-slate-50 .text-slate-400,
body.bg-slate-50 .text-slate-500 {
  color: var(--muted) !important;
}

body.bg-slate-50 .text-emerald-400 {
  color: #047857 !important;
}

body.bg-slate-50 .text-blue-400 {
  color: #1d4ed8 !important;
}

body.bg-slate-50 .text-amber-400 {
  color: #a16207 !important;
}

body.bg-slate-50 .text-orange-400 {
  color: #c2410c !important;
}

body.bg-slate-50 .text-purple-400 {
  color: #7e22ce !important;
}

body.bg-slate-50 .text-indigo-400 {
  color: #4338ca !important;
}

body.bg-slate-50 .text-red-400 {
  color: #b91c1c !important;
}

body.bg-slate-50 .border-slate-800,
body.bg-slate-50 .border-slate-700 {
  border-color: var(--line) !important;
}

body.bg-slate-50 .border-slate-600,
body.bg-slate-50 .border-slate-500 {
  border-color: #b8c9dc !important;
}

body.bg-slate-50 .border-emerald-800 {
  border-color: #86d5a8 !important;
}

body.bg-slate-50 .border-amber-800 {
  border-color: #e8c66d !important;
}

body.bg-slate-50 .border-red-800 {
  border-color: #e5a1a1 !important;
}

body.bg-slate-50 [class~="border-blue-900/50"] {
  border-color: #c5d9f3 !important;
}

body.bg-slate-50 [class~="border-amber-800/60"] {
  border-color: #e8c66d !important;
}