@import 'tailwindcss';
@import 'tw-animate-css';
@import 'shadcn/tailwind.css';

@custom-variant dark (&:is(.dark *));

@theme inline {
  --color-sidebar-ring: var(--sidebar-ring);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar: var(--sidebar);
  --color-chart-5: var(--chart-5);
  --color-chart-4: var(--chart-4);
  --color-chart-3: var(--chart-3);
  --color-chart-2: var(--chart-2);
  --color-chart-1: var(--chart-1);
  --color-ring: var(--ring);
  --color-input: var(--input);
  --color-border: var(--border);
  --color-destructive: var(--destructive);
  --color-accent-foreground: var(--accent-foreground);
  --color-accent: var(--accent);
  --color-muted-foreground: var(--muted-foreground);
  --color-muted: var(--muted);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-secondary: var(--secondary);
  --color-primary-foreground: var(--primary-foreground);
  --color-primary: var(--primary);
  --color-popover-foreground: var(--popover-foreground);
  --color-popover: var(--popover);
  --color-card-foreground: var(--card-foreground);
  --color-card: var(--card);
  --color-foreground: var(--foreground);
  --color-background: var(--background);
  --radius-sm: calc(var(--radius) * 0.6);
  --radius-md: calc(var(--radius) * 0.8);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) * 1.4);
  --radius-2xl: calc(var(--radius) * 1.8);
  --radius-3xl: calc(var(--radius) * 2.2);
  --radius-4xl: calc(var(--radius) * 2.6);
}

/* TwoTwentyTwo - Deep Navy + Electric Blue Theme */
:root {
  color-scheme: light;
  
  /* Backgrounds - Clean White */
  --background: #ffffff;
  --card: #ffffff;
  --popover: #ffffff;
  
  /* Text - Deep Navy */
  --foreground: #081B33;
  --card-foreground: #081B33;
  --popover-foreground: #081B33;
  
  /* Primary - Deep Navy */
  --primary: #081B33;
  --primary-foreground: #ffffff;
  
  /* Secondary */
  --secondary: #f0f4f8;
  --secondary-foreground: #081B33;
  
  /* Muted */
  --muted: #e8edf2;
  --muted-foreground: #64748b;
  
  /* Accent - Electric Blue */
  --accent: #3b82f6;
  --accent-foreground: #ffffff;
  
  /* UI Elements */
  --destructive: #ef4444;
  --border: #e2e8f0;
  --input: #f0f4f8;
  --ring: #3b82f6;
  
  /* Chart Colors */
  --chart-1: #3b82f6;
  --chart-2: #06b6d4;
  --chart-3: #8b5cf6;
  --chart-4: #081B33;
  --chart-5: #10b981;
  
  --radius: 0.75rem;
  
  /* Sidebar */
  --sidebar: #ffffff;
  --sidebar-foreground: #081B33;
  --sidebar-primary: #3b82f6;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #3b82f6;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #e2e8f0;
  --sidebar-ring: #3b82f6;
}

.dark {
  color-scheme: dark;
  --background: #081B33;
  --card: #0d2444;
  --popover: #0d2444;
  --foreground: #f1f5f9;
  --card-foreground: #f1f5f9;
  --popover-foreground: #f1f5f9;
  --primary: #3b82f6;
  --primary-foreground: #ffffff;
  --secondary: #0d2444;
  --secondary-foreground: #f1f5f9;
  --muted: #1a3558;
  --muted-foreground: #94a3b8;
  --accent: #06b6d4;
  --accent-foreground: #ffffff;
  --destructive: #ef4444;
  --border: rgba(255, 255, 255, 0.08);
  --input: rgba(255, 255, 255, 0.05);
  --ring: #3b82f6;
  --chart-1: #3b82f6;
  --chart-2: #06b6d4;
  --chart-3: #8b5cf6;
  --chart-4: #3b82f6;
  --chart-5: #10b981;
  --sidebar: #081B33;
  --sidebar-foreground: #f1f5f9;
  --sidebar-primary: #3b82f6;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #3b82f6;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: rgba(255, 255, 255, 0.08);
  --sidebar-ring: #3b82f6;
}

/* Custom Premium Utilities */
@layer utilities {
  .glass {
    @apply bg-white/70 backdrop-blur-md border border-slate-200/60;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  }
  
  .glass-elevated {
    @apply bg-white/90 backdrop-blur-xl border border-slate-200/80;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
  }
  
  .gradient-text {
    @apply bg-gradient-to-r from-blue-500 via-cyan-400 to-purple-500 bg-clip-text text-transparent;
  }
  
  .gradient-text-blue {
    @apply bg-gradient-to-r from-blue-500 to-cyan-400 bg-clip-text text-transparent;
  }
  
  .gradient-accent {
    @apply bg-gradient-to-r from-blue-500 to-cyan-400;
  }
  
  .gradient-primary {
    @apply bg-gradient-to-r from-[#081B33] to-[#0d2444];
  }
  
  .gradient-premium {
    background: linear-gradient(135deg, #3b82f6 0%, #06b6d4 50%, #8b5cf6 100%);
  }
  
  .shadow-glow {
    box-shadow: 0 0 15px -3px rgba(59, 130, 246, 0.15), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
  }
  
  .shadow-glow-lg {
    box-shadow: 0 0 25px -5px rgba(59, 130, 246, 0.2), 0 10px 15px -3px rgba(0, 0, 0, 0.08);
  }
  
  .shadow-premium {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.06), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
  }
  
  .shadow-premium-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
  }
  
  .shadow-card {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04), 0 1px 2px -1px rgba(0, 0, 0, 0.04);
  }
  
  .shadow-card-hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
  }
  
  .transition-smooth {
    @apply transition-all duration-300 ease-out;
  }
  
  .transition-premium {
    @apply transition-all duration-500 ease-in-out;
  }
  
  .group-hover-lift {
    @apply group-hover:-translate-y-2 transition-transform duration-300;
  }
  
  .card-hover {
    @apply hover:-translate-y-1 transition-all duration-300;
  }
  
  .button-glow {
    @apply hover:shadow-lg transition-all duration-300;
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
  }
  
  .button-glow:hover {
    box-shadow: 0 0 20px -4px rgba(59, 130, 246, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  }
  
  /* Icon glow effects */
  .icon-glow-blue {
    box-shadow: 0 0 12px -2px rgba(59, 130, 246, 0.3), 0 4px 6px -2px rgba(59, 130, 246, 0.15);
  }
  
  .icon-glow-cyan {
    box-shadow: 0 0 12px -2px rgba(6, 182, 212, 0.3), 0 4px 6px -2px rgba(6, 182, 212, 0.15);
  }
  
  .icon-glow-purple {
    box-shadow: 0 0 12px -2px rgba(139, 92, 246, 0.3), 0 4px 6px -2px rgba(139, 92, 246, 0.15);
  }
  
  .icon-pulse {
    animation: icon-pulse 2s ease-in-out infinite;
  }
  
  .float-animation {
    animation: float 6s ease-in-out infinite;
  }
  
  .text-navy {
    color: #081B33;
  }
  
  .bg-navy {
    background-color: #081B33;
  }
}

/* Scroll-triggered animation keyframes */
@keyframes icon-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

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

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Smooth scroll behavior */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Mobile drawer slide-in animation */
@keyframes slideInDrawer {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

/* Thin scrollbar for mobile drawer */
.mobile-drawer-scroll::-webkit-scrollbar {
  width: 4px;
}
.mobile-drawer-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.mobile-drawer-scroll::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 999px;
}
.mobile-drawer-scroll::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}
.mobile-drawer-scroll {
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground antialiased;
  }
}