:root {
  --primary-600: #4f46e5;
  --primary-500: #6366f1;
  --primary-100: #eef2ff;
  --bg-50: #f8fafc;
  --bg-100: #f1f5f9;
  --surface: #ffffff;
  --surface-alt: #f8fafc;
  --surface-strong: #e2e8f0;
  --text-800: #1e293b;
  --text-600: #475569;
  --text-500: #64748b;
  --success: #10b981;
  --danger: #ef4444;
  --shadow-soft: 0 18px 45px rgba(15, 23, 42, 0.08);
}

body {
  background: var(--bg-50);
  color: var(--text-800);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.bg-primary {
  background-color: var(--primary-600);
}

.bg-primary-50 {
  background-color: var(--primary-100);
}

.text-primary {
  color: var(--primary-600);
}

.text-slate-800 { color: var(--text-800); }
.text-slate-600 { color: var(--text-600); }
.text-slate-500 { color: var(--text-500); }

.card-surface {
  background: var(--surface);
  border: 1px solid rgba(148, 163, 184, 0.18);
  box-shadow: var(--shadow-soft);
}

.button-primary {
  background: linear-gradient(135deg, var(--primary-600), var(--primary-500));
  color: white;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.button-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 23px rgba(79, 70, 229, 0.2);
}

.input-shell {
  background-color: white;
  border: 1px solid rgba(148, 163, 184, 0.4);
  color: var(--text-800);
}

.input-shell:focus {
  outline: none;
  border-color: rgba(79, 70, 229, 0.55);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.14);
}

.skeleton {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, rgba(148,163,184,0.08), rgba(148,163,184,0.18), rgba(148,163,184,0.08));
  background-size: 200% 100%;
  animation: shimmer 1.15s infinite linear;
  border-radius: 0.75rem;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}