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

/* Rainbow Cards Design System - 彩虹卡片设计系统 */

@layer base {
  :root {
    /* Base colors */
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;

    --card: 240 10% 3.9%;
    --card-foreground: 0 0% 98%;

    --popover: 240 10% 3.9%;
    --popover-foreground: 0 0% 98%;

    /* Rainbow gradient system */
    --primary: 340 100% 60%;
    --primary-foreground: 0 0% 98%;

    --secondary: 240 5% 26%;
    --secondary-foreground: 0 0% 98%;

    --muted: 240 5% 26%;
    --muted-foreground: 240 5% 64.9%;

    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;

    --border: 240 5.9% 26%;
    --input: 240 5.9% 26%;
    --ring: 340 100% 60%;

    --radius: 0.75rem;

    /* Rainbow gradients - 彩虹渐变色板 */
    --gradient-rainbow-1: linear-gradient(135deg, hsl(340, 100%, 60%) 0%, hsl(280, 100%, 70%) 100%);
    --gradient-rainbow-2: linear-gradient(135deg, hsl(280, 100%, 70%) 0%, hsl(220, 100%, 65%) 100%);
    --gradient-rainbow-3: linear-gradient(135deg, hsl(220, 100%, 65%) 0%, hsl(200, 100%, 60%) 100%);
    --gradient-rainbow-4: linear-gradient(135deg, hsl(200, 100%, 60%) 0%, hsl(180, 100%, 55%) 100%);
    --gradient-rainbow-5: linear-gradient(135deg, hsl(180, 100%, 55%) 0%, hsl(160, 100%, 50%) 100%);
    --gradient-rainbow-6: linear-gradient(135deg, hsl(160, 100%, 50%) 0%, hsl(80, 100%, 55%) 100%);
    --gradient-rainbow-7: linear-gradient(135deg, hsl(80, 100%, 55%) 0%, hsl(50, 100%, 60%) 100%);
    --gradient-rainbow-8: linear-gradient(135deg, hsl(50, 100%, 60%) 0%, hsl(30, 100%, 65%) 100%);

    /* Special gradients */
    --gradient-admin: linear-gradient(135deg, hsl(240, 100%, 60%) 0%, hsl(280, 100%, 70%) 100%);
    --gradient-success: linear-gradient(135deg, hsl(160, 100%, 50%) 0%, hsl(140, 100%, 55%) 100%);
    --gradient-warning: linear-gradient(135deg, hsl(50, 100%, 60%) 0%, hsl(30, 100%, 65%) 100%);

    /* Shadows */
    --shadow-rainbow: 0 25px 50px -12px hsl(340 100% 60% / 0.25);
    --shadow-card: 0 10px 30px -5px hsl(240 10% 3.9% / 0.3);
    --shadow-glow: 0 0 40px hsl(340 100% 60% / 0.3);

    /* Animations */
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);

    /* Sidebar colors */
    --sidebar-background: 240 10% 3.9%;
    --sidebar-foreground: 0 0% 98%;
    --sidebar-primary: 340 100% 60%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 5% 26%;
    --sidebar-accent-foreground: 0 0% 98%;
    --sidebar-border: 240 5.9% 26%;
    --sidebar-ring: 340 100% 60%;
  }

  .light {
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;
    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;
    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 45.1%;
    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;
    --border: 240 5.9% 90%;
    --input: 240 5.9% 90%;
    --sidebar-background: 0 0% 100%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 340 100% 60%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 240 5.9% 90%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground font-sans antialiased;
  }

  /* Card flip animation keyframes - Performance optimized */
  @keyframes flip-in {
    from {
      transform: scale(0.8) translate3d(0, 0, 0);
      opacity: 0;
    }
    to {
      transform: scale(1) translate3d(0, 0, 0);
      opacity: 1;
    }
  }

  @keyframes flip-out {
    from {
      transform: scale(1) translate3d(0, 0, 0);
      opacity: 1;
    }
    to {
      transform: scale(0.8) translate3d(0, 0, 0);
      opacity: 0;
    }
  }

  @keyframes slide-in-right {
    from {
      transform: translateX(100%);
      opacity: 0;
    }
    to {
      transform: translateX(0);
      opacity: 1;
    }
  }

  @keyframes slide-in-left {
    from {
      transform: translateX(-100%);
      opacity: 0;
    }
    to {
      transform: translateX(0);
      opacity: 1;
    }
  }

  @keyframes rainbow-pulse {
    0%, 100% {
      box-shadow: 0 0 20px hsl(340 100% 60% / 0.3);
    }
    25% {
      box-shadow: 0 0 20px hsl(220 100% 65% / 0.3);
    }
    50% {
      box-shadow: 0 0 20px hsl(180 100% 55% / 0.3);
    }
    75% {
      box-shadow: 0 0 20px hsl(80 100% 55% / 0.3);
    }
  }

  /* Custom animation classes */
  .animate-flip-in {
    animation: flip-in 0.4s ease-out forwards;
  }

  .animate-flip-out {
    animation: flip-out 0.3s ease-in forwards;
  }

  .animate-slide-in-right {
    animation: slide-in-right 0.4s ease-out forwards;
  }

  .animate-slide-in-left {
    animation: slide-in-left 0.4s ease-out forwards;
  }

  .animate-rainbow-pulse {
    animation: rainbow-pulse 3s ease-in-out infinite;
  }

  /* Gradient backgrounds */
  .bg-gradient-rainbow-1 {
    background: var(--gradient-rainbow-1);
  }
  
  .bg-gradient-rainbow-2 {
    background: var(--gradient-rainbow-2);
  }
  
  .bg-gradient-rainbow-3 {
    background: var(--gradient-rainbow-3);
  }
  
  .bg-gradient-rainbow-4 {
    background: var(--gradient-rainbow-4);
  }
  
  .bg-gradient-rainbow-5 {
    background: var(--gradient-rainbow-5);
  }
  
  .bg-gradient-rainbow-6 {
    background: var(--gradient-rainbow-6);
  }
  
  .bg-gradient-rainbow-7 {
    background: var(--gradient-rainbow-7);
  }
  
  .bg-gradient-rainbow-8 {
    background: var(--gradient-rainbow-8);
  }

  .bg-gradient-admin {
    background: var(--gradient-admin);
  }

  .bg-gradient-success {
    background: var(--gradient-success);
  }

  .bg-gradient-warning {
    background: var(--gradient-warning);
  }

  /* Card styles */
  .card-shadow {
    box-shadow: var(--shadow-card);
  }

  .rainbow-shadow {
    box-shadow: var(--shadow-rainbow);
  }

  .glow-shadow {
    box-shadow: var(--shadow-glow);
  }
}