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

/* CampMarket Design System - Campus-focused marketplace colors and gradients */

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;

    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;

    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;

    /* Campus Blue Theme */
    --primary: 220 91% 56%; /* Vibrant campus blue */
    --primary-foreground: 0 0% 98%;
    --primary-dark: 220 91% 46%;
    --primary-light: 220 91% 66%;

    /* Campus Green Accent */
    --secondary: 142 76% 36%;
    --secondary-foreground: 0 0% 98%;
    --secondary-light: 142 76% 46%;

    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;

    --accent: 35 100% 50%; /* Golden accent for highlights */
    --accent-foreground: 222.2 47.4% 11.2%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;

    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 220 91% 56%;

    --radius: 0.75rem;

    /* Beautiful Gradients */
    --gradient-primary: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--primary-dark)));
    --gradient-secondary: linear-gradient(135deg, hsl(var(--secondary)), hsl(var(--secondary-light)));
    --gradient-hero: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(var(--secondary)) 100%);
    --gradient-card: linear-gradient(145deg, hsl(var(--card)) 0%, hsl(210 40% 98%) 100%);
    
    /* Shadows */
    --shadow-elegant: 0 10px 30px -10px hsl(var(--primary) / 0.3);
    --shadow-card: 0 4px 20px -2px hsl(220 91% 56% / 0.15);
    --shadow-glow: 0 0 40px hsl(var(--primary) / 0.4);

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

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;

    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;

    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;

    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;

    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;

    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;

    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;

    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;
  }
}

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

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

@layer components {
  /* Hero Button Variants */
  .btn-hero {
    @apply bg-gradient-to-r from-primary to-primary-dark text-primary-foreground font-semibold py-3 px-6 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-105;
  }
  
  .btn-hero-outline {
    @apply border-2 border-primary text-primary bg-transparent font-semibold py-3 px-6 rounded-lg hover:bg-primary hover:text-primary-foreground transition-all duration-300 hover:scale-105;
  }
  
  /* Card Effects */
  .card-gradient {
    background: var(--gradient-card);
    box-shadow: var(--shadow-card);
  }
  
  .card-hover {
    transition: var(--transition-smooth);
  }
  
  .card-hover:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-elegant);
  }
  
  /* Gradient Text */
  .gradient-text {
    background: var(--gradient-hero);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  
  /* Modern Input Styling */
  .input-modern {
    @apply w-full px-4 py-3 rounded-lg border border-border bg-background focus:ring-2 focus:ring-primary focus:border-transparent transition-all duration-200;
  }

  /* Navigation Styles */
  .nav-link-modern {
    @apply flex items-center gap-2 px-3 py-2 rounded-lg font-medium transition-all duration-200 text-foreground hover:bg-muted hover:text-foreground;
  }

  .nav-link-modern.active {
    @apply bg-primary text-primary-foreground shadow-md;
  }

  /* Product Card Styles */
  .product-card-modern {
    @apply bg-card border border-border rounded-lg shadow-sm overflow-hidden transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
  }

  .product-card-modern .product-image {
    @apply aspect-video bg-muted relative overflow-hidden;
  }

  .product-card-modern .product-info {
    @apply p-4 space-y-2;
  }

  .product-card-modern .product-title {
    @apply text-lg font-semibold text-foreground;
  }

  .product-card-modern .product-price {
    @apply text-2xl font-bold text-primary;
  }

  /* Button Variants */
  .btn-primary {
    @apply bg-primary text-primary-foreground hover:bg-primary/90 font-medium py-2 px-4 rounded-lg transition-all duration-200 hover:scale-105;
  }

  .btn-secondary {
    @apply bg-secondary text-secondary-foreground hover:bg-secondary/80 font-medium py-2 px-4 rounded-lg transition-all duration-200 hover:scale-105;
  }

  .btn-outline {
    @apply border border-primary text-primary bg-transparent hover:bg-primary hover:text-primary-foreground font-medium py-2 px-4 rounded-lg transition-all duration-200 hover:scale-105;
  }

  .btn-ghost {
    @apply hover:bg-accent hover:text-accent-foreground font-medium py-2 px-4 rounded-lg transition-all duration-200;
  }

  /* Hero Section */
  .hero-section-modern {
    @apply relative min-h-[600px] flex items-center justify-center overflow-hidden;
  }

  .hero-overlay {
    @apply absolute inset-0 bg-gradient-to-r from-primary/90 to-secondary/80;
  }

  .hero-content {
    @apply relative z-10 container mx-auto px-4 text-center text-white;
  }

  /* Stats Section */
  .stats-grid {
    @apply grid grid-cols-2 md:grid-cols-4 gap-8;
  }

  .stat-item {
    @apply text-center;
  }

  .stat-icon {
    @apply inline-flex items-center justify-center w-12 h-12 bg-primary/10 rounded-full mb-4;
  }

  .stat-value {
    @apply text-2xl md:text-3xl font-bold text-foreground mb-2;
  }

  .stat-label {
    @apply text-muted-foreground;
  }

  /* Features Section */
  .features-grid {
    @apply grid md:grid-cols-3 gap-8;
  }

  .feature-card {
    @apply card-gradient text-center p-6;
  }

  .feature-icon {
    @apply inline-flex items-center justify-center w-16 h-16 bg-primary/10 rounded-full mb-6;
  }

  /* Footer Styles */
  .footer-modern {
    @apply bg-muted/30 border-t mt-16;
  }

  .footer-content {
    @apply container mx-auto px-4 py-12;
  }

  .footer-grid {
    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8;
  }

  .footer-section h3 {
    @apply font-semibold text-foreground mb-4;
  }

  .footer-section a {
    @apply block text-sm text-muted-foreground hover:text-foreground transition-colors mb-2;
  }

  .footer-bottom {
    @apply border-t mt-8 pt-8 text-center text-sm text-muted-foreground;
  }
}