@import "tailwindcss";
@import "./App.css";

@theme {
  --color-brand-indigo: #4f46e5;
  --color-brand-navy: #0f4475;
  --color-brand-glow: rgba(79, 70, 229, 0.1);
  --color-surface-background: #f8fafc;
  --color-surface-white: #ffffff;
  --color-surface-input: #f9fafb;
  --color-text-dark: #0f172a;
  --color-text-primary: #1e293b;
  --color-text-secondary: #475569;
  --color-text-muted: #94a3b8;
  --color-status-success: #059669;
  --color-status-danger: #dc2626;
  --color-status-warning: #d97706;
  
  --font-sans: "Inter", sans-serif;
  
  --radius-4xl: 2rem;
  --radius-5xl: 2.5rem;
  --radius-6xl: 3.5rem;
  
  --shadow-premium: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.02);
  --shadow-widget: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
}

@layer base {
  body {
    @apply bg-surface-background text-text-primary font-sans antialiased;
  }
}

@layer components {
  .glass-effect {
    @apply bg-white/80 backdrop-blur-md border border-white/20;
  }

  .premium-shadow {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }

  .premium-shadow-sm {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.02);
  }

  .sidebar-item {
    @apply flex items-center gap-3 px-4 py-3 rounded-2xl transition-all duration-300 text-text-secondary font-semibold hover:bg-brand-glow hover:text-brand-indigo cursor-pointer;
  }

  .sidebar-item-active {
    @apply bg-brand-glow text-brand-indigo;
  }

  .card-widget {
    @apply bg-white rounded-[2rem] p-6 border border-slate-100 shadow-sm hover:shadow-md transition-shadow duration-300;
  }

  .floating-sidebar {
    @apply fixed left-4 top-4 bottom-4 w-64 bg-white rounded-[2.5rem] border border-slate-200/60 shadow-xl z-50 flex flex-col p-6;
  }
}

::-webkit-scrollbar {
  width: 5px;
}

::-webkit-scrollbar-thumb {
  @apply bg-slate-300 rounded-full;
}

/* Site 2 Custom Animations and Classes */
@keyframes sway {
  0% { transform: rotate(-1deg); }
  50% { transform: rotate(1deg); }
  100% { transform: rotate(-1deg); }
}

@keyframes mist {
  0% { transform: translateX(-5%); opacity: 0.3; }
  50% { transform: translateX(5%); opacity: 0.5; }
  100% { transform: translateX(-5%); opacity: 0.3; }
}

@keyframes breeze {
  0% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-5px) scale(1.02); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
  100% { transform: translateY(0px); }
}

.animate-sway {
  animation: sway 8s ease-in-out infinite;
}

.animate-mist {
  animation: mist 15s ease-in-out infinite;
}

.animate-breeze {
  animation: breeze 10s ease-in-out infinite;
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}

.glass-navbar {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.layered-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
}

.shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
}

.shape-1 {
  width: 600px;
  height: 600px;
  background: rgba(0, 0, 0, 0.05);
  top: -200px;
  left: -200px;
}

.shape-2 {
  width: 500px;
  height: 500px;
  background: rgba(0, 0, 0, 0.03);
  bottom: -150px;
  right: -150px;
}

.hero-gradient {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.text-stroke {
  -webkit-text-stroke: 1px black;
  color: transparent;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
