@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;
    --radius: 0.5rem;
  }
  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --border: 217.2 32.6% 17.5%;
  }
  * { @apply border-border; }
  body {
    @apply bg-background text-foreground antialiased;
  }
}

@layer utilities {
  @keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  .animate-fade-in-up { animation: fadeInUp 0.6s ease-out; }
  .animate-fade-in { animation: fadeIn 0.4s ease-out; }
  .transition-all-smooth { transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
  .transition-smooth { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
  /* Easing в стиле Anime.js: outExpo, плавные переходы */
  .ease-out-expo { transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  .glass-effect {
    background: hsl(var(--card) / 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid hsl(var(--border) / 0.5);
  }
  .hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  .hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px -8px hsl(var(--primary) / 0.25);
  }
  .shadow-primary-lg { box-shadow: 0 10px 40px 0 hsl(var(--primary) / 0.2); }
  .status-badge { @apply inline-flex items-center gap-2 px-3 py-1.5 rounded-full text-sm font-medium; }
  .status-active { @apply bg-green-50 text-green-700 dark:bg-green-900/20 dark:text-green-400; }
  .status-inactive { @apply bg-red-50 text-red-700 dark:bg-red-900/20 dark:text-red-400; }
  .text-balance { text-wrap: balance; }
}
