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

@layer base {
  :root {
    /* Modern Dark Theme - Primary */
    --background: 8 8 11; /* Rich dark #08080B */
    --foreground: 250 250 250; /* Soft white #FAFAFA */
    --card: 15 15 17; /* Dark card #0F0F11 */
    --card-foreground: 250 250 250;
    --popover: 15 15 17;
    --popover-foreground: 250 250 250;
    
    /* Accent Colors - Modern & Vibrant */
    --primary: 139 92 246; /* Purple #8B5CF6 */
    --primary-foreground: 255 255 255;
    --secondary: 99 102 241; /* Indigo #6366F1 */
    --secondary-foreground: 255 255 255;
    --accent: 34 197 94; /* Emerald #22C55E */
    --accent-foreground: 255 255 255;
    
    /* UI Colors - Refined Dark */
    --muted: 23 23 27; /* Dark muted #17171B */
    --muted-foreground: 161 161 170; /* Soft gray #A1A1AA */
    --border: 39 39 45; /* Subtle border #27272D */
    --input: 23 23 27;
    --ring: 139 92 246;
    
    --destructive: 239 68 68; /* Red #EF4444 */
    --destructive-foreground: 255 255 255;

    --radius: 0.75rem;
  }

  .dark {
    /* Modern Dark Theme - Primary */
    --background: 8 8 11; /* Rich dark #08080B */
    --foreground: 250 250 250; /* Soft white #FAFAFA */
    --card: 15 15 17; /* Dark card #0F0F11 */
    --card-foreground: 250 250 250;
    --popover: 15 15 17;
    --popover-foreground: 250 250 250;
    
    /* Accent Colors - Modern & Vibrant */
    --primary: 139 92 246; /* Purple #8B5CF6 */
    --primary-foreground: 255 255 255;
    --secondary: 99 102 241; /* Indigo #6366F1 */
    --secondary-foreground: 255 255 255;
    --accent: 34 197 94; /* Emerald #22C55E */
    --accent-foreground: 255 255 255;
    
    /* UI Colors - Refined Dark */
    --muted: 23 23 27; /* Dark muted #17171B */
    --muted-foreground: 161 161 170; /* Soft gray #A1A1AA */
    --border: 39 39 45; /* Subtle border #27272D */
    --input: 23 23 27;
    --ring: 139 92 246;
    
    --destructive: 239 68 68; /* Red #EF4444 */
    --destructive-foreground: 255 255 255;
  }

  .light {
    --background: 255 255 255;
    --foreground: 15 15 17;
    --card: 255 255 255;
    --card-foreground: 15 15 17;
    --popover: 255 255 255;
    --popover-foreground: 15 15 17;
    --primary: 139 92 246;
    --primary-foreground: 255 255 255;
    --secondary: 99 102 241;
    --secondary-foreground: 255 255 255;
    --accent: 34 197 94;
    --accent-foreground: 255 255 255;
    --muted: 245 245 245;
    --muted-foreground: 113 113 122;
    --border: 229 229 234;
    --input: 245 245 245;
    --ring: 139 92 246;
    --destructive: 239 68 68;
    --destructive-foreground: 255 255 255;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  
  html {
    scroll-behavior: smooth;
  }
  
  body {
    @apply bg-background text-foreground antialiased;
    font-feature-settings: "rlig" 1, "calt" 1;
    color: hsl(var(--foreground));
    background-color: hsl(var(--background));
  }
  
  /* Selection colors */
  ::selection {
    @apply bg-primary/20 text-primary-foreground;
  }
  
  /* Focus rings */
  :focus-visible {
    @apply outline-none ring-2 ring-ring ring-offset-2 ring-offset-background;
  }
  
  /* Ensure all text elements use proper foreground color */
  h1, h2, h3, h4, h5, h6, p, span, div {
    color: inherit;
  }
  
  /* Custom scrollbar */
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  
  ::-webkit-scrollbar-track {
    @apply bg-muted/20;
  }
  
  ::-webkit-scrollbar-thumb {
    @apply bg-muted-foreground/30 rounded-full;
  }
  
  ::-webkit-scrollbar-thumb:hover {
    @apply bg-muted-foreground/50;
  }
}

@layer components {
  /* Glassmorphism effect */
  .glass {
    @apply bg-background/80 backdrop-blur-xl border border-border/50;
  }
  
  /* Gradient backgrounds */
  .gradient-primary {
    background: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(var(--secondary)) 100%);
  }
  
  .gradient-accent {
    background: linear-gradient(135deg, hsl(var(--accent)) 0%, hsl(var(--primary)) 100%);
  }
  
  /* Shimmer animation */
  .shimmer {
    background: linear-gradient(90deg, transparent, hsl(var(--primary))/10%, transparent);
    animation: shimmer 2s infinite;
  }
  
  @keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
  }
  
  /* Floating animation */
  .float {
    animation: float 3s ease-in-out infinite;
  }
  
  @keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
  }
  
  /* Pulse glow */
  .pulse-glow {
    animation: pulse-glow 2s ease-in-out infinite alternate;
  }
  
  @keyframes pulse-glow {
    from { box-shadow: 0 0 20px hsl(var(--primary))/20%; }
    to { box-shadow: 0 0 40px hsl(var(--primary))/40%; }
  }
}