:root {
  --bg: #f8fafc;
  --card: #ffffff;
  --text: #0f172a;
  --muted: #64748b;
  --accent: #3b82f6;
  --positive: #16a34a;
  --negative: #dc2626;
  --ring: rgba(59,130,246,.3);
}
html.dark {
  --bg: #0b1220;
  --card: #0f172a;
  --text: #e5e7eb;
  --muted: #94a3b8;
  --accent: #60a5fa;
  --positive: #22c55e;
  --negative: #ef4444;
  --ring: rgba(96,165,250,.35);
}
.card {
  background: var(--card);
  box-shadow: var(--tw-shadow),
    var(--tw-ring-offset-shadow, 0 0 #0000),
    var(--tw-ring-shadow, 0 0 #0000);
}
.btn {
  @apply inline-flex items-center gap-2 rounded-2xl px-4 py-2 font-medium shadow-soft transition;
}
.btn-primary {
  @apply text-white;
  background: var(--accent);
}
.btn-ghost {
  @apply border border-slate-200 dark:border-slate-700;
}
.btn-danger {
  color: #fff;
  background: var(--negative);
}
.input, .select, .textarea {
  @apply w-full rounded-xl border border-slate-200 dark:border-slate-700 bg-transparent px-3 py-2 outline-none;
}
.input:focus, .select:focus, .textarea:focus {
  box-shadow: 0 0 0 4px var(--ring);
}
.badge {
  @apply rounded-full px-2.5 py-1 text-xs font-semibold;
}

/* --- Footer Styling --- */
footer {
  position: fixed;       
  bottom: 0;
  left: 0;
  width: 100%;
  background: #f3f4f6;   /* light mode background */
  color: #374151;        /* text color */
  text-align: center;
  padding: 10px;
  font-size: 14px;
  z-index: 1000;        
}

.dark footer {
  background: #1f2937;   /* dark mode background */
  color: #d1d5db;        /* text color in dark */
}