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

/* StellarFlow Design System - Space-themed colors and animations
All colors MUST be HSL.
*/

@layer base {
  :root {
    /* Light theme (fallback, dark is default) */
    --background: 210 40% 98%;
    --foreground: 224 71.4% 4.1%;
    
    --card: 0 0% 100%;
    --card-foreground: 224 71.4% 4.1%;
    
    --popover: 0 0% 100%;
    --popover-foreground: 224 71.4% 4.1%;
    
    --primary: 262.1 83.3% 57.8%;
    --primary-foreground: 210 40% 98%;
    
    --secondary: 220 14.3% 95.9%;
    --secondary-foreground: 220.9 39.3% 11%;
    
    --muted: 220 14.3% 95.9%;
    --muted-foreground: 220 8.9% 46.1%;
    
    --accent: 220 14.3% 95.9%;
    --accent-foreground: 220.9 39.3% 11%;
    
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    
    --border: 220 13% 91%;
    --input: 220 13% 91%;
    --ring: 262.1 83.3% 57.8%;
    
    --radius: 0.75rem;

    /* StellarFlow Space Theme */
    --space-ink: 225 71% 5%; /* #0B0F1A */
    --nebula-900: 252 55% 11%; /* #120F2A */
    --cosmic-purple: 262 83% 58%; /* #7C3AED */
    --cosmic-violet: 258 90% 66%; /* #8B5CF6 */
    --cosmic-gold: 38 92% 50%; /* #F59E0B */
    --cosmic-blue: 199 89% 48%; /* #0EA5E9 */
    --cosmic-glow: 262 83% 58%; /* For glows and highlights */
    
    /* Gradients */
    --gradient-cosmic: linear-gradient(135deg, hsl(var(--cosmic-purple)), hsl(var(--cosmic-violet)));
    --gradient-gold: linear-gradient(135deg, hsl(var(--cosmic-gold)), hsl(38 100% 60%));
    --gradient-nebula: linear-gradient(135deg, hsl(var(--space-ink)), hsl(var(--nebula-900)));
    
    /* Shadows and glows */
    --shadow-cosmic: 0 4px 20px -4px hsl(var(--cosmic-purple) / 0.3);
    --shadow-glow: 0 0 20px hsl(var(--cosmic-glow) / 0.4);
    --shadow-card: 0 4px 6px -1px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.06);
    
    /* Animation durations */
    --transition-base: 200ms ease-out;
    --transition-slow: 300ms ease-out;
    
    /* HUD-specific tokens */
    --hud-glow: 0 0 20px hsl(var(--cosmic-purple) / 0.4);
    --hud-pulse: hud-pulse 2s ease-in-out infinite;
    --panel-blur: blur(16px);
    
    /* Sidebar tokens */
    --sidebar-background: hsl(var(--space-ink));
    --sidebar-foreground: 210 40% 98%;
    --sidebar-primary: hsl(var(--cosmic-purple));
    --sidebar-primary-foreground: 210 40% 98%;
    --sidebar-accent: hsl(var(--nebula-900));
    --sidebar-accent-foreground: 210 40% 98%;
    --sidebar-border: hsl(var(--nebula-900));
    --sidebar-ring: hsl(var(--cosmic-violet));
    
    /* Odyssey Design System Tokens */
    --bg: hsl(var(--space-ink));
    --bg-elev-1: hsl(var(--nebula-900));
    --bg-elev-2: hsl(252 55% 15%);
    --stroke: hsl(var(--nebula-900));
    --chip: hsl(var(--nebula-900));
    --brand: hsl(var(--cosmic-purple));
  }

  .dark {
    /* Dark theme (default) */
    --background: var(--space-ink);
    --foreground: 210 40% 98%;
    
    --card: var(--nebula-900);
    --card-foreground: 210 40% 98%;
    
    --popover: var(--nebula-900);
    --popover-foreground: 210 40% 98%;
    
    --primary: var(--cosmic-purple);
    --primary-foreground: 210 40% 98%;
    
    --secondary: var(--nebula-900);
    --secondary-foreground: 210 40% 98%;
    
    --muted: 240 3.7% 15.9%;
    --muted-foreground: 240 5% 64.9%;
    
    --accent: var(--nebula-900);
    --accent-foreground: 210 40% 98%;
    
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    
    --border: var(--nebula-900);
    --input: var(--nebula-900);
    --ring: var(--cosmic-violet);
  }
}

/* Wave animation keyframes */
@keyframes wave-shine {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}

/* Floating animation for cosmic elements */
@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* Shimmer animation for loading states */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* Twinkle animation for stars appearing and disappearing */
@keyframes twinkle {
  0%, 100% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

/* Fade in out animation for floating particles */
@keyframes fadeInOut {
  0%, 100% {
    opacity: 0;
    transform: scale(0.5) translateY(0px);
  }
  50% {
    opacity: 0.8;
    transform: scale(1) translateY(-20px);
  }
}

/* HUD pulse for indicators */
@keyframes hud-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.05);
  }
}

/* Glow expansion on hover */
@keyframes glow-expand {
  0% {
    box-shadow: 0 0 5px currentColor;
  }
  100% {
    box-shadow: 0 0 20px currentColor, 0 0 30px currentColor;
  }
}

/* HUD grid lines animation */
@keyframes grid-scan {
  0% {
    opacity: 0.1;
  }
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 0.1;
  }
}

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

  body {
    @apply bg-background text-foreground;
  }
}

@layer utilities {
  /* HUD Panel utilities */
  .hud-panel {
    @apply backdrop-blur-lg bg-space-ink/20 border border-cosmic-purple/20 transition-all duration-300;
  }
  
  .hud-panel-command {
    @apply bg-gradient-to-br from-space-ink/90 to-nebula-900/60 border-cosmic-purple/40 shadow-cosmic;
  }
  
  .hud-glow {
    @apply hover:shadow-[0_0_30px_hsl(262,83%,58%,0.4)];
  }
  
  .cockpit-button {
    @apply bg-nebula-900/80 border border-cosmic-purple/30 backdrop-blur-sm 
           hover:border-cosmic-purple hover:shadow-cosmic 
           transition-all duration-300;
  }
  
  /* Prefers reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .animate-pulse,
    .animate-twinkle,
    .animate-float,
    .hover\\:scale-105,
    .hover\\:-translate-y-1,
    .hover\\:-translate-y-2 {
      animation: none !important;
      transform: none !important;
    }
    
    .transition-all,
    .transition-transform,
    .transition-colors {
      transition: none !important;
    }
  }
}