@import "tailwindcss";

@theme {
  --color-brand-50: oklch(0.97 0.02 270);
  --color-brand-100: oklch(0.93 0.04 270);
  --color-brand-200: oklch(0.87 0.07 270);
  --color-brand-300: oklch(0.78 0.11 270);
  --color-brand-400: oklch(0.68 0.15 270);
  --color-brand-500: oklch(0.55 0.18 270);
  --color-brand-600: oklch(0.47 0.18 270);
  --color-brand-700: oklch(0.40 0.16 270);
  --color-brand-800: oklch(0.33 0.13 270);
  --color-brand-900: oklch(0.27 0.10 270);

  --color-reward-50: oklch(0.97 0.01 85);
  --color-reward-100: oklch(0.94 0.03 85);
  --color-reward-200: oklch(0.89 0.06 85);
  --color-reward-300: oklch(0.82 0.08 80);
  --color-reward-400: oklch(0.74 0.10 80);
  --color-reward-500: oklch(0.66 0.10 75);
  --color-reward-600: oklch(0.55 0.09 75);

  --color-xp-green: oklch(0.68 0.10 160);
  --color-xp-green-light: oklch(0.95 0.03 160);

  --color-rarity-common: oklch(0.65 0.01 260);
  --color-rarity-uncommon: oklch(0.65 0.10 160);
  --color-rarity-rare: oklch(0.55 0.18 270);
  --color-rarity-epic: oklch(0.55 0.20 300);
  --color-rarity-legendary: oklch(0.66 0.10 75);

  --font-display: "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

/* Flashcard flip */
.flip-card { perspective: 800px; }
.flip-card-inner {
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner,
.flip-card.flipped .flip-card-inner {
  transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
  backface-visibility: hidden;
}
.flip-card-back {
  transform: rotateY(180deg);
}

/* Checkmark burst animation */
@keyframes check-pop {
  0% { transform: scale(0.8); opacity: 0; }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes check-ring {
  0% { transform: scale(0.8); opacity: 1; }
  100% { transform: scale(2.2); opacity: 0; }
}
.check-pop { animation: check-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.check-ring {
  animation: check-ring 0.5s cubic-bezier(0, 0, 0.2, 1) forwards;
}

/* XP bar fill */
@keyframes fill-bar {
  from { width: 0%; }
}
.animate-fill { animation: fill-bar 1.2s cubic-bezier(0.25, 0, 0.2, 1) forwards; }

/* Streak pulse */
@keyframes pulse-subtle {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}
.animate-pulse-subtle { animation: pulse-subtle 2s ease-in-out infinite; }

/* Progress bar shimmer */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.shimmer {
  background: linear-gradient(90deg, transparent 30%, oklch(1 0 0 / 0.25) 50%, transparent 70%);
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
}

/* Badge unlock glow */
@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 0 0 oklch(0.66 0.10 75 / 0.3); }
  50% { box-shadow: 0 0 12px 3px oklch(0.66 0.10 75 / 0.15); }
}
.animate-glow { animation: glow-pulse 2.5s ease-in-out infinite; }

/* Counter tick up */
@keyframes count-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-count { animation: count-up 0.4s ease-out forwards; }

/* Legendary card shimmer border */
@keyframes legendary-border {
  0%, 100% { border-color: oklch(0.66 0.10 75); }
  33% { border-color: oklch(0.70 0.08 60); }
  66% { border-color: oklch(0.72 0.09 90); }
}
.animate-legendary { animation: legendary-border 3s ease-in-out infinite; }

/* Button hover lift */
.btn-lift {
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.btn-lift:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -2px oklch(0 0 0 / 0.08);
}
.btn-lift:active {
  transform: translateY(0.5px);
  box-shadow: none;
}

/* Button press ripple */
@keyframes btn-press {
  0% { transform: scale(1); }
  40% { transform: scale(0.97); }
  100% { transform: scale(1); }
}
.btn-press:active {
  animation: btn-press 0.25s ease-out;
}

/* Subtle gradient shift on hover */
.btn-gradient {
  background-size: 200% 100%;
  background-position: 0% 0%;
  transition: background-position 0.4s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
}
.btn-gradient:hover {
  background-position: 100% 0%;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px -3px oklch(0.55 0.18 270 / 0.3);
}
.btn-gradient:active {
  transform: translateY(0.5px);
  box-shadow: none;
}