:root {
  /* ── Colors (HSL values) ── */
  --background: 222 55% 6%;
  --foreground: 210 40% 98%;
  --primary: 152 84% 52%;
  --primary-foreground: 222 47% 11%;
  --secondary: 222 40% 12%;
  --secondary-foreground: 210 40% 98%;
  --accent: 204 90% 55%;
  --accent-foreground: 222 47% 11%;
  --muted: 222 35% 14%;
  --muted-foreground: 215 18% 70%;
  --destructive: 0 84% 60%;
  --border: 222 28% 18%;
  --ring: 152 84% 52%;
  --card: 222 45% 9%;
  --card-foreground: 210 40% 98%;

  /* ── Shadows ── */
  --shadow-sm: 0 1px 2px 0 hsl(var(--foreground) / 0.05);
  --shadow-md: 0 6px 14px -8px hsl(var(--foreground) / 0.12), 0 2px 6px -3px hsl(var(--foreground) / 0.06);
  --shadow-lg: 0 18px 30px -18px hsl(var(--foreground) / 0.18), 0 10px 18px -14px hsl(var(--foreground) / 0.08);
  --shadow-elegant: 0 18px 50px -22px hsl(var(--primary) / 0.35);

  /* ── Gradients ── */
  --gradient-primary: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--accent) / 0.95));
  --gradient-subtle: linear-gradient(135deg, hsl(var(--background)), hsl(var(--secondary)));
  --gradient-glow: radial-gradient(1200px 600px at 20% -10%, hsl(var(--primary) / 0.18), transparent 55%), radial-gradient(900px 500px at 90% 0%, hsl(var(--accent) / 0.14), transparent 60%);

  /* ── Transitions ── */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Border Radius ── */
  --radius-sm: 0.375rem;
  --radius-md: 0.6rem;
  --radius-lg: 0.9rem;
  --radius-xl: 1.15rem;
  --radius-full: 9999px;

  /* ── Typography ── */
  --font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.dark, [data-theme="dark"] {
  --background: 222 55% 6%;
  --foreground: 210 40% 98%;
  --secondary: 222 40% 12%;
  --muted: 222 35% 14%;
  --border: 222 28% 18%;
  --card: 222 45% 9%;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: var(--font-sans);
  background: hsl(var(--background));
  color: hsl(var(--foreground));
}

::selection {
  background: hsl(var(--primary) / 0.25);
}

/* Subtle premium background */
.app-bg {
  background-image: var(--gradient-glow);
}

.card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}

.card:hover {
  box-shadow: var(--shadow-elegant);
  transition: box-shadow var(--transition-smooth);
}

.btn {
  border-radius: var(--radius-lg);
  transition: transform var(--transition-fast), filter var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}

.btn:active { transform: translateY(1px) scale(0.99); }

.btn-primary {
  background-image: var(--gradient-primary);
  color: hsl(var(--primary-foreground));
  box-shadow: var(--shadow-elegant);
}

.btn-primary:hover { filter: brightness(1.05); }

.btn-ghost {
  background: hsl(var(--muted) / 0.35);
  border: 1px solid hsl(var(--border));
}

.btn-ghost:hover { background: hsl(var(--muted) / 0.55); }

.input {
  background: hsl(var(--secondary) / 0.55);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-lg);
  color: hsl(var(--foreground));
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.input:focus {
  border-color: hsl(var(--ring));
  box-shadow: 0 0 0 3px hsl(var(--ring) / 0.18);
}

.mono { font-family: var(--font-mono); }

.kbd {
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  border: 1px solid hsl(var(--border));
  background: hsl(var(--muted) / 0.35);
  color: hsl(var(--muted-foreground));
}

/* Toast */
.toast-wrap {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 18px;
  width: min(520px, calc(100% - 24px));
  z-index: 50;
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: 12px 14px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.toast-title { font-weight: 700; }
.toast-desc { color: hsl(var(--muted-foreground)); font-size: 13px; }

@keyframes toastIn {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.toast-anim { animation: toastIn var(--transition-smooth) both; }

/* Spinner */
@keyframes spin { to { transform: rotate(360deg); } }

.spinner {
  width: 18px;
  height: 18px;
  border-radius: var(--radius-full);
  border: 2px solid hsl(var(--border));
  border-top-color: hsl(var(--primary));
  animation: spin 0.8s linear infinite;
}

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

.skeleton {
  background: linear-gradient(90deg, hsl(var(--muted) / 0.35), hsl(var(--muted) / 0.6), hsl(var(--muted) / 0.35));
  background-size: 200% 100%;
  animation: shimmer 1.2s linear infinite;
  border-radius: var(--radius-md);
}

/* Focus ring */
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px hsl(var(--ring) / 0.22);
  border-radius: var(--radius-md);
}