:root {
  --color-primary: #1E3A8A; /* blue */
  --color-secondary: #6D28D9; /* purple */
  --color-bg: #F6F7FB;
  --color-surface: #FFFFFF;
  --color-text: #0F172A;
  --color-muted: #374151;
  --color-subtle: #9CA3AF;
  --color-soft: #EEF2F7;
  --color-success: #10B981;
  --color-warn: #F59E0B;
  --color-error: #EF4444;
  --radius-md: 12px;
  --radius-lg: 20px;
  --shadow: 0 8px 24px rgba(0,0,0,.08);
}
[data-theme="dark"] {
  --color-bg: #0B1020;
  --color-surface: #111738;
  --color-text: #E2E8F0;
  --color-muted: #A3AED0;
  --color-subtle: #7F8AB2;
  --color-soft: #0F1535;
}

/* Buttons helpers (used alongside Tailwind) */
.btn { border-radius: var(--radius-md); padding: .5rem .75rem; transition: transform .15s ease, background .15s ease; }
.btn:active { transform: translateY(0.5px); }
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:hover { filter: brightness(0.95); }
.btn-secondary { background: var(--color-secondary); color: #fff; }
.btn-ghost { background: transparent; border: 1px solid var(--color-soft); color: var(--color-text); }
.btn-danger { background: var(--color-error); color: #fff; }

/* Toasts */
.toast { box-shadow: var(--shadow); border-radius: var(--radius-md); }

/* Skeletons */
.skeleton { position: relative; overflow: hidden; background: var(--color-soft); }
.skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); transform: translateX(-100%); animation: shimmer 1.2s infinite; }
@media (prefers-reduced-motion: reduce) { .skeleton::after { animation: none; } }
@keyframes shimmer { to { transform: translateX(100%); } }

/* SweetAlert2 theming */
.swal2-popup { border-radius: var(--radius-md) !important; background: var(--color-bg) !important; color: var(--color-text) !important; }
.swal2-title { color: var(--color-text) !important; }
.swal2-confirm { background: var(--color-primary) !important; border-radius: var(--radius-md) !important; }
.swal2-cancel { background: var(--color-soft) !important; color: var(--color-text) !important; border-radius: var(--radius-md) !important; }

/* Prevent oversized inline SVGs: default to 1em unless overridden */
svg { width: 1em; height: 1em; vertical-align: middle; }
svg.icon { width: 1rem; height: 1rem; }
.icon-md { width: 1.25rem; height: 1.25rem; }
.icon-lg { width: 1.5rem; height: 1.5rem; }