:root {
  --background: 330 100% 98%;
  --foreground: 0 0% 20%;
  --primary: 350 100% 88%;
  --secondary: 73 100% 50%;
  --muted: 330 35% 93%;
  --destructive: 0 75% 62%;
  --border: 330 25% 86%;
  --card: 0 0% 100%;
  --shadow-sm: 0 6px 16px rgba(219, 154, 180, 0.12);
  --shadow-md: 0 12px 28px rgba(219, 154, 180, 0.18);
  --shadow-lg: 0 18px 42px rgba(170, 202, 32, 0.18);
  --transition-fast: 160ms ease;
  --transition-smooth: 280ms ease;
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 26px;
}

.dark {
  --background: 330 18% 10%;
  --foreground: 330 20% 95%;
  --primary: 350 72% 68%;
  --secondary: 73 95% 48%;
  --muted: 330 14% 18%;
  --destructive: 0 70% 58%;
  --border: 330 12% 24%;
  --card: 330 14% 14%;
  --shadow-sm: 0 8px 16px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 16px 30px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 18px 44px rgba(0, 0, 0, 0.4);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
input,
textarea,
select {
  outline: none;
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
a:focus-visible {
  box-shadow: 0 0 0 3px hsl(var(--secondary) / 0.35);
}

.app-shell {
  min-height: 100vh;
  background:
    radial-gradient(circle at top right, hsl(var(--secondary) / 0.18), transparent 28%),
    radial-gradient(circle at top left, hsl(var(--primary) / 0.35), transparent 30%),
    hsl(var(--background));
}

.glass-card {
  background: hsl(var(--card) / 0.92);
  border: 1px solid hsl(var(--border));
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(10px);
}

.soft-ring {
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

.soft-ring:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.fade-in {
  animation: fadeIn 240ms ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.skeleton {
  background: linear-gradient(90deg, hsl(var(--muted)) 25%, hsl(var(--primary) / 0.35) 50%, hsl(var(--muted)) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}

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

.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}