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

/* Design system inspired by Dispel.com aesthetic - dark industrial theme */

@layer base {
  :root {
    /* Core brand colors (HSL values only) */
    --bg: 210 24% 8%;
    --bg-elevated: 215 20% 12%;
    --ink: 210 17% 97%;
    --muted: 213 15% 65%;
    --accent: 355 75% 47%;
    --link: 213 94% 68%;
    
    /* Semantic color mappings (use HSL values directly) */
    --background: 210 24% 8%;
    --foreground: 210 17% 97%;
    
    --card: 215 20% 12%;
    --card-foreground: 210 17% 97%;
    
    --popover: 215 20% 12%;
    --popover-foreground: 210 17% 97%;
    
    --primary: 355 75% 47%;
    --primary-foreground: 210 17% 97%;
    
    --secondary: 215 20% 16%;
    --secondary-foreground: 210 17% 97%;
    
    --muted: 215 20% 16%;
    --muted-foreground: 213 15% 65%;
    
    --accent: 355 75% 47%;
    --accent-foreground: 210 17% 97%;
    
    --destructive: 0 84% 60%;
    --destructive-foreground: 210 17% 97%;
    
    --border: 215 20% 20%;
    --input: 215 20% 15%;
    --ring: 355 75% 47%;
    
    --radius: 0.5rem;
    
    /* Custom design tokens */
    --gradient-hero: linear-gradient(135deg, hsl(210 24% 8%) 0%, hsl(215 25% 10%) 100%);
    --gradient-card: linear-gradient(145deg, hsl(215 20% 12%) 0%, hsl(215 18% 14%) 100%);
    --shadow-elevated: 0 10px 40px -10px hsl(210 24% 8% / 0.8);
    --shadow-subtle: 0 4px 16px -4px hsl(210 24% 8% / 0.4);
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* Sidebar tokens (consistent with main theme) */
    --sidebar-background: var(--bg);
    --sidebar-foreground: var(--ink);
    --sidebar-primary: var(--accent);
    --sidebar-primary-foreground: var(--ink);
    --sidebar-accent: var(--bg-elevated);
    --sidebar-accent-foreground: var(--ink);
    --sidebar-border: hsl(215 20% 20%);
    --sidebar-ring: var(--accent);
  }
}

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

  html {
    scroll-behavior: smooth;
  }

  body {
    @apply bg-background text-foreground font-sans antialiased;
    color-scheme: dark;
  }
}

@layer components {
  /* Hero section styling */
  .hero-gradient {
    background: var(--gradient-hero);
  }
  
  /* Card styling */
  .card-elevated {
    background: var(--gradient-card);
    box-shadow: var(--shadow-elevated);
  }
  
  /* Smooth transitions */
  .transition-smooth {
    transition: var(--transition-smooth);
  }
  
  /* Focus styles for accessibility */
  .focus-ring {
    @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-background;
  }
  
  /* Interactive hover effects */
  .hover-scale {
    @apply transition-all duration-300 ease-out hover:scale-105;
  }
  
  /* Story link with underline animation */
  .story-link {
    @apply relative inline-block after:content-[''] after:absolute after:w-full after:scale-x-0 after:h-0.5 after:bottom-0 after:left-0 after:bg-accent after:origin-bottom-right after:transition-transform after:duration-300 hover:after:scale-x-100 hover:after:origin-bottom-left;
  }

  /* Dispel-style button variants */
  .btn-dispel-primary {
    @apply bg-accent hover:bg-accent/90 text-ink font-semibold px-6 py-3 rounded-lg transition-all duration-200 shadow-lg hover:shadow-xl;
  }

  .btn-dispel-secondary {
    @apply border border-muted/30 text-ink hover:bg-muted/10 hover:border-muted font-semibold px-6 py-3 rounded-lg transition-all duration-200;
  }

  /* Dispel-style card with enhanced shadows */
  .card-dispel {
    @apply bg-card/95 backdrop-blur-sm border border-border/50 shadow-xl;
  }

  /* Dispel-style gradient backgrounds */
  .bg-dispel-gradient {
    background: linear-gradient(135deg, hsl(210 24% 8%) 0%, hsl(215 25% 10%) 50%, hsl(210 24% 8%) 100%);
  }

  /* Dispel-style floating elements */
  .floating-element {
    @apply absolute opacity-20;
  }

  .floating-element-1 {
    @apply top-20 right-20 w-96 h-96 bg-accent/10 rounded-full blur-3xl;
  }

  .floating-element-2 {
    @apply bottom-20 left-20 w-64 h-64 bg-accent/5 rounded-full blur-2xl;
  }

  /* Carousel specific styling - Dispel inspired */
  .carousel-container {
    @apply relative overflow-hidden rounded-2xl border border-border/30 bg-gradient-to-br from-bg-elevated/20 to-transparent backdrop-blur-sm;
  }

  .carousel-slide {
    @apply w-full flex-shrink-0 relative aspect-[4/3];
  }

  .carousel-image {
    @apply w-full h-full object-cover transition-transform duration-700 ease-in-out;
  }

  .carousel-overlay {
    @apply absolute inset-0 bg-gradient-to-t from-bg/60 via-transparent to-transparent;
  }

  .carousel-label {
    @apply absolute top-4 left-4 bg-bg/90 backdrop-blur-sm rounded-lg px-3 py-2 border border-border/50;
  }

  .carousel-nav-button {
    @apply w-10 h-10 bg-bg/80 backdrop-blur-sm border border-border/50 rounded-full flex items-center justify-center text-ink hover:bg-bg/90 transition-all duration-200 hover:scale-105;
  }

  .carousel-dot {
    @apply w-2 h-2 rounded-full transition-all duration-300;
  }

  .carousel-dot-active {
    @apply bg-accent w-6;
  }

  .carousel-dot-inactive {
    @apply bg-muted/50 hover:bg-muted/80;
  }

  /* Auto-play indicator animation */
  .carousel-autoplay-indicator {
    @apply w-2 h-2 rounded-full transition-all duration-300;
  }

  .carousel-autoplay-active {
    @apply bg-accent animate-pulse;
  }

  .carousel-autoplay-paused {
    @apply bg-muted/50;
  }
}

@layer utilities {
  /* Reduced motion support */
  @media (prefers-reduced-motion: reduce) {
    .transition-smooth {
      transition: none;
    }
  }
}
