/* Innovation Conversation Page Theme - Based on vertical-stream-talk design system */
/* This file provides a custom theme for the Innovation Conversation page while maintaining single source of truth */

@layer base {
  .innovation-theme {
    /* Modern gradient-based design system from vertical-stream-talk */
    --innovation-background: 240 10% 3.9%;
    --innovation-foreground: 0 0% 98%;

    --innovation-card: 240 10% 6%;
    --innovation-card-foreground: 0 0% 98%;

    --innovation-popover: 240 10% 6%;
    --innovation-popover-foreground: 0 0% 98%;

    --innovation-primary: 263 70% 50%;
    --innovation-primary-foreground: 0 0% 98%;
    --innovation-primary-glow: 263 70% 65%;

    --innovation-secondary: 240 5% 15%;
    --innovation-secondary-foreground: 0 0% 98%;

    --innovation-muted: 240 5% 15%;
    --innovation-muted-foreground: 240 5% 64.9%;

    --innovation-accent: 263 40% 25%;
    --innovation-accent-foreground: 0 0% 98%;

    --innovation-destructive: 0 62.8% 55%;
    --innovation-destructive-foreground: 0 0% 98%;

    --innovation-border: 240 5% 15%;
    --innovation-input: 240 5% 15%;
    --innovation-ring: 263 70% 50%;

    /* Beautiful gradients */
    --innovation-gradient-primary: linear-gradient(135deg, hsl(var(--innovation-primary)), hsl(var(--innovation-primary-glow)));
    --innovation-gradient-card: linear-gradient(135deg, hsl(var(--innovation-card)), hsl(240 8% 8%));
    --innovation-gradient-accent: linear-gradient(135deg, hsl(var(--innovation-accent)), hsl(263 50% 35%));

    /* Elegant shadows */
    --innovation-shadow-card: 0 4px 12px -2px hsl(var(--innovation-primary) / 0.1);
    --innovation-shadow-glow: 0 0 20px hsl(var(--innovation-primary-glow) / 0.3);
    --innovation-shadow-elegant: 0 8px 25px -5px hsl(240 10% 3.9% / 0.4);

    /* Smooth transitions */
    --innovation-transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --innovation-transition-bounce: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);

    --innovation-radius: 0.75rem;
  }
}

@layer components {
  .innovation-theme {
    background: hsl(var(--innovation-background));
    color: hsl(var(--innovation-foreground));
  }

  .innovation-card {
    background: var(--innovation-gradient-card);
    border: 1px solid hsl(var(--innovation-border));
    border-radius: var(--innovation-radius);
    box-shadow: var(--innovation-shadow-card);
    color: hsl(var(--innovation-card-foreground));
  }

  .innovation-card:hover {
    box-shadow: var(--innovation-shadow-elegant);
    transition: var(--innovation-transition-smooth);
  }

  .innovation-primary {
    background: var(--innovation-gradient-primary);
    color: hsl(var(--innovation-primary-foreground));
    border-radius: var(--innovation-radius);
    box-shadow: var(--innovation-shadow-glow);
    transition: var(--innovation-transition-smooth);
  }

  .innovation-primary:hover {
    box-shadow: var(--innovation-shadow-glow), 0 0 30px hsl(var(--innovation-primary-glow) / 0.4);
    transform: translateY(-1px);
  }

  .innovation-button {
    background: var(--innovation-gradient-primary);
    color: hsl(var(--innovation-primary-foreground));
    border: none;
    border-radius: var(--innovation-radius);
    padding: 0.5rem 1rem;
    font-weight: 500;
    transition: var(--innovation-transition-smooth);
    box-shadow: var(--innovation-shadow-card);
  }

  .innovation-button:hover {
    box-shadow: var(--innovation-shadow-glow);
    transform: translateY(-1px);
  }

  .innovation-button-outline {
    background: transparent;
    color: hsl(var(--innovation-primary));
    border: 1px solid hsl(var(--innovation-primary));
    border-radius: var(--innovation-radius);
    padding: 0.5rem 1rem;
    font-weight: 500;
    transition: var(--innovation-transition-smooth);
  }

  .innovation-button-outline:hover {
    background: hsl(var(--innovation-primary) / 0.1);
    box-shadow: var(--innovation-shadow-glow);
  }

  .innovation-input {
    background: hsl(var(--innovation-input));
    border: 1px solid hsl(var(--innovation-border));
    border-radius: var(--innovation-radius);
    color: hsl(var(--innovation-foreground));
    padding: 0.5rem 0.75rem;
    transition: var(--innovation-transition-smooth);
  }

  .innovation-input:focus {
    outline: none;
    border-color: hsl(var(--innovation-primary));
    box-shadow: 0 0 0 2px hsl(var(--innovation-primary) / 0.2);
  }

  .innovation-sidebar {
    background: var(--innovation-gradient-card);
    border: 1px solid hsl(var(--innovation-border));
    border-radius: var(--innovation-radius);
    box-shadow: var(--innovation-shadow-card);
  }

  .innovation-trending {
    background: linear-gradient(135deg, #f59e0b, #ef4444);
    color: white;
    animation: glow-pulse 2s ease-in-out infinite;
  }

  .innovation-avatar {
    border: 2px solid hsl(var(--innovation-primary) / 0.3);
    border-radius: 50%;
  }

  .innovation-post {
    background: var(--innovation-gradient-card);
    border: 1px solid hsl(var(--innovation-border));
    border-radius: var(--innovation-radius);
    box-shadow: var(--innovation-shadow-card);
    transition: var(--innovation-transition-smooth);
  }

  .innovation-post:hover {
    box-shadow: var(--innovation-shadow-elegant);
    transform: translateY(-2px);
  }

  .innovation-header {
    background: hsl(var(--innovation-card) / 0.95);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid hsl(var(--innovation-border));
  }

  .innovation-search {
    background: hsl(var(--innovation-input));
    border: 1px solid hsl(var(--innovation-border));
    border-radius: var(--innovation-radius);
    color: hsl(var(--innovation-foreground));
  }

  .innovation-search:focus {
    border-color: hsl(var(--innovation-primary));
    box-shadow: 0 0 0 2px hsl(var(--innovation-primary) / 0.2);
  }
}

@keyframes glow-pulse {
  0%, 100% {
    box-shadow: 0 0 20px hsl(var(--innovation-primary-glow) / 0.3);
  }
  50% {
    box-shadow: 0 0 30px hsl(var(--innovation-primary-glow) / 0.5);
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slide-in-right {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.innovation-fade-in {
  animation: fade-in 0.5s ease-out;
}

.innovation-slide-in-right {
  animation: slide-in-right 0.3s ease-out;
}