@import "tailwindcss";

:root {
  --color-primary: #7c3aed;
  --color-primary-light: #a78bfa;
  --color-primary-dark: #5b21b6;
  --color-accent: #ec4899;
  --color-accent-light: #f9a8d4;
  --color-accent-dark: #be185d;
  --color-bg: #fafafa;
  --color-surface: #f5f3ff;
  --color-text: #1f1f2e;
  --color-text-muted: #6b7280;
}

[data-theme="dark"] {
  --color-bg: #0f0e17;
  --color-surface: #1a1730;
  --color-text: #fffffe;
  --color-text-muted: #a7a9be;
}

@layer base {
  body {
    background-color: var(--color-bg);
    color: var(--color-text);
  }
}

@keyframes lila-pop {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.03);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes lila-shake {
  0%,
  100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-3px);
  }
  40% {
    transform: translateX(3px);
  }
  60% {
    transform: translateX(-2px);
  }
  80% {
    transform: translateX(2px);
  }
}

@keyframes lila-confetti {
  0% {
    transform: translate(var(--x0), var(--y0)) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  100% {
    transform: translate(var(--x1), var(--y1)) rotate(540deg);
    opacity: 0;
  }
}

.lila-pop {
  animation: lila-pop 220ms ease-out;
}

.lila-shake {
  animation: lila-shake 260ms ease-in-out;
}

.lila-confetti-piece {
  position: absolute;
  width: 8px;
  height: 12px;
  border-radius: 3px;
  animation: lila-confetti 900ms ease-out forwards;
  will-change: transform, opacity;
}