:root {
  --background: 32 60% 98%;
  --foreground: 271 20% 16%;
  --primary: 277 56% 54%;
  --secondary: 338 55% 78%;
  --muted: 24 28% 91%;
  --destructive: 0 72% 54%;
  --border: 271 23% 84%;
  --card: 0 0% 100%;
  --shadow-sm: 0 8px 18px rgba(54, 35, 74, 0.08);
  --shadow-md: 0 14px 34px rgba(72, 41, 99, 0.14);
  --shadow-lg: 0 24px 60px rgba(98, 53, 131, 0.2);
  --transition-fast: 180ms ease;
  --transition-smooth: 340ms cubic-bezier(0.22, 1, 0.36, 1);
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 32px;
}

.dark {
  --background: 262 24% 10%;
  --foreground: 24 42% 96%;
  --primary: 281 70% 66%;
  --secondary: 335 45% 38%;
  --muted: 261 18% 18%;
  --destructive: 0 72% 62%;
  --border: 262 16% 24%;
  --card: 262 24% 14%;
  --shadow-sm: 0 8px 18px rgba(0, 0, 0, 0.18);
  --shadow-md: 0 16px 36px rgba(0, 0, 0, 0.28);
  --shadow-lg: 0 26px 60px rgba(0, 0, 0, 0.36);
}

* {
  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));
}

button,
a,
input {
  transition: all var(--transition-fast);
}

button:focus-visible,
a:focus-visible,
input:focus-visible {
  outline: 2px solid hsl(var(--primary));
  outline-offset: 2px;
}

.story-bubble {
  animation: bubbleIn 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.animated-scene {
  position: relative;
}

.animated-scene::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.08) 30%, transparent 60%);
  transform: translateX(-120%);
  animation: sweep 5.2s ease-in-out infinite;
  pointer-events: none;
}

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

@keyframes sweep {
  0% {
    transform: translateX(-120%);
  }
  55%, 100% {
    transform: translateX(120%);
  }
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-thumb {
  background: hsl(var(--border));
  border-radius: 999px;
}

::-webkit-scrollbar-track {
  background: transparent;
}