1  /* index.css - Global styles and Tailwind imports */
  2  @import "tailwindcss";
  3  @import "tw-animate-css";
  4  
  5  /* Dropdown Menu Animation Override */
  6  [data-radix-popper-content-wrapper] {
  7    animation-duration: 150ms !important;
  8    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1) !important;
  9  }
 10  
 11  /* Override for dropdown sliding down */
 12  .data-\[side\=bottom\]\:slide-in-from-top-8[data-side="bottom"] {
 13    animation-name: dropdown-slide-down !important;
 14  }
 15  
 16  @keyframes dropdown-slide-down {
 17    from {
 18      opacity: 0;
 19      transform: translateY(-8px);
 20    }
 21    to {
 22      opacity: 1;
 23      transform: translateY(0);
 24    }
 25  }
 26  
 27  /* Gentle pulse animation for Scarlett loader */
 28  @keyframes pulse-gentle {
 29    0%, 100% {
 30      opacity: 1;
 31      transform: scale(1);
 32    }
 33    50% {
 34      opacity: 0.8;
 35      transform: scale(0.95);
 36    }
 37  }
 38  
 39  .animate-pulse-gentle {
 40    animation: pulse-gentle 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 41  }
 42  
 43  @layer base {
 44    :root {
 45      --background: 0 0% 100%;
 46      --foreground: 240 10% 3.9%;
 47      --card: 0 0% 100%;
 48      --card-foreground: 240 10% 3.9%;
 49      --popover: 0 0% 100%;
 50      --popover-foreground: 240 10% 3.9%;
 51      --primary: 240 5.9% 10%;
 52      --primary-foreground: 0 0% 98%;
 53      --secondary: 240 4.8% 95.9%;
 54      --secondary-foreground: 240 5.9% 10%;
 55      --muted: 240 4.8% 95.9%;
 56      --muted-foreground: 240 3.8% 46.1%;
 57      --accent: 240 4.8% 95.9%;
 58      --accent-foreground: 240 5.9% 10%;
 59      --destructive: 0 84.2% 60.2%;
 60      --destructive-foreground: 0 0% 98%;
 61      --border: 240 5.9% 90%;
 62      --input: 240 5.9% 90%;
 63      --ring: 240 10% 3.9%;
 64      --radius: 0.5rem;
 65    }
 66  
 67    .dark {
 68      --background: 240 10% 3.9%;
 69      --foreground: 0 0% 98%;
 70      --card: 240 10% 3.9%;
 71      --card-foreground: 0 0% 98%;
 72      --popover: 240 10% 3.9%;
 73      --popover-foreground: 0 0% 98%;
 74      --primary: 0 0% 98%;
 75      --primary-foreground: 240 5.9% 10%;
 76      --secondary: 240 3.7% 15.9%;
 77      --secondary-foreground: 0 0% 98%;
 78      --muted: 240 3.7% 15.9%;
 79      --muted-foreground: 240 5% 64.9%;
 80      --accent: 240 3.7% 15.9%;
 81      --accent-foreground: 0 0% 98%;
 82      --destructive: 0 62.8% 30.6%;
 83      --destructive-foreground: 0 0% 98%;
 84      --border: 240 3.7% 15.9%;
 85      --input: 240 3.7% 15.9%;
 86      --ring: 240 4.9% 83.9%;
 87    }
 88  }
 89  
 90  /* Sheet Animations */
 91  @keyframes slide-in-from-bottom {
 92    0% {
 93      transform: translateY(100%);
 94    }
 95    100% {
 96      transform: translateY(0);
 97    }
 98  }
 99  
100  @keyframes slide-out-to-bottom {
101    0% {
102      transform: translateY(0);
103    }
104    100% {
105      transform: translateY(100%);
106    }
107  }
108  
109  @keyframes scroll {
110    from {
111      transform: translateX(0);
112    }
113    to {
114      transform: translateX(-100%);
115    }
116  }
117  
118  @keyframes fade-in {
119    0% {
120      opacity: 0;
121    }
122    100% {
123      opacity: 1;
124    }
125  }
126  
127  @keyframes fade-out {
128    0% {
129      opacity: 1;
130    }
131    100% {
132      opacity: 0;
133    }
134  }
135  
136  [data-state="open"][data-side="bottom"] {
137    animation: slide-in-from-bottom 0.5s cubic-bezier(0.16, 1, 0.3, 1);
138  }
139  
140  [data-state="closed"][data-side="bottom"] {
141    animation: slide-out-to-bottom 0.3s cubic-bezier(0.16, 1, 0.3, 1);
142  }
143  
144  [data-state="open"] .sheet-overlay {
145    animation: fade-in 0.5s cubic-bezier(0.16, 1, 0.3, 1);
146  }
147  
148  [data-state="closed"] .sheet-overlay {
149    animation: fade-out 0.3s cubic-bezier(0.16, 1, 0.3, 1);
150  }