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

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* Carbon14 Design System - Modern, Scientific, Professional */

@layer base {
  :root {
    /* Core Brand Colors - Scientific/Tech Inspired */
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;

    --card: 240 10% 3.9%;
    --card-foreground: 0 0% 98%;

    --popover: 240 10% 3.9%;
    --popover-foreground: 0 0% 98%;

    --primary: 142 76% 36%;
    --primary-foreground: 355 7% 97%;

    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;

    --muted: 240 5.9% 10%;
    --muted-foreground: 240 3.8% 46.1%;

    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;

    --destructive: 0 72.2% 50.6%;
    --destructive-foreground: 0 0% 98%;

    --border: 240 5.9% 11%;
    --input: 240 5.9% 11%;
    --ring: 142 76% 36%;

    --radius: 0.75rem;

    /* Carbon14 Specific Colors */
    --carbon-healthy: 142 76% 36%;
    --carbon-warning: 38 92% 50%;
    --carbon-critical: 0 72% 51%;
    --carbon-decayed: 240 4% 16%;
    
    /* Gradients */
    --gradient-primary: linear-gradient(135deg, hsl(142 76% 36%) 0%, hsl(142 86% 46%) 100%);
    --gradient-hero: linear-gradient(135deg, hsl(240 10% 3.9%) 0%, hsl(240 8% 6%) 50%, hsl(240 10% 3.9%) 100%);
    --gradient-card: linear-gradient(145deg, hsl(240 10% 4.5%) 0%, hsl(240 8% 6%) 100%);
    
    /* Glows and Shadows */
    --glow-healthy: 0 0 40px hsl(142 76% 36% / 0.3);
    --glow-warning: 0 0 40px hsl(38 92% 50% / 0.3);
    --glow-critical: 0 0 40px hsl(0 72% 51% / 0.3);
    --shadow-elegant: 0 10px 40px -10px hsl(0 0% 0% / 0.4);
    
    /* Typography */
    --font-mono: 'JetBrains Mono', monospace;

    --sidebar-background: 0 0% 98%;

    --sidebar-foreground: 240 5.3% 26.1%;

    --sidebar-primary: 240 5.9% 10%;

    --sidebar-primary-foreground: 0 0% 98%;

    --sidebar-accent: 240 4.8% 95.9%;

    --sidebar-accent-foreground: 240 5.9% 10%;

    --sidebar-border: 220 13% 91%;

    --sidebar-ring: 217.2 91.2% 59.8%;
  }

  .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%;
    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
}

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

  body {
    @apply bg-background text-foreground font-sans;
    font-family: 'Inter', sans-serif;
  }
}

@layer components {
  /* Button Variants */
  .btn-carbon {
    @apply inline-flex items-center justify-center px-6 py-3 rounded-lg font-semibold text-sm transition-all duration-300 shadow-lg;
    background: var(--gradient-primary);
    color: hsl(var(--primary-foreground));
    border: 1px solid hsl(var(--carbon-healthy) / 0.3);
  }
  
  .btn-carbon:hover {
    box-shadow: var(--glow-healthy);
    transform: translateY(-2px);
    filter: brightness(1.1);
  }
  
  .btn-outline-carbon {
    @apply inline-flex items-center justify-center px-6 py-3 rounded-lg font-semibold text-sm transition-all duration-300;
    background: transparent;
    color: hsl(var(--carbon-healthy));
    border: 2px solid hsl(var(--carbon-healthy) / 0.5);
  }
  
  .btn-outline-carbon:hover {
    background: hsl(var(--carbon-healthy) / 0.1);
    border-color: hsl(var(--carbon-healthy));
    box-shadow: var(--glow-healthy);
  }
  
  /* Card Variants */
  .card-carbon {
    background: var(--gradient-card);
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    box-shadow: var(--shadow-elegant);
    backdrop-filter: blur(8px);
  }
  
  .card-glow {
    box-shadow: var(--glow-healthy);
  }
  
  /* Text Styles */
  .text-carbon-healthy {
    color: hsl(var(--carbon-healthy));
  }
  
  .text-carbon-warning {
    color: hsl(var(--carbon-warning));
  }
  
  .text-carbon-critical {
    color: hsl(var(--carbon-critical));
  }
  
  .text-carbon-decayed {
    color: hsl(var(--carbon-decayed));
  }
  
  .text-gradient {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  
  /* Animations */
  .animate-pulse-glow {
    animation: pulse-glow 2s ease-in-out infinite alternate;
  }
  
  .animate-float {
    animation: float 6s ease-in-out infinite;
  }
  
  .animate-radiation {
    animation: radiation 3s ease-in-out infinite;
  }
  
  @keyframes pulse-glow {
    0% { 
      filter: drop-shadow(0 0 5px hsl(var(--carbon-healthy) / 0.3)); 
    }
    100% { 
      filter: drop-shadow(0 0 20px hsl(var(--carbon-healthy) / 0.8)); 
    }
  }
  
  @keyframes float {
    0%, 100% { 
      transform: translateY(0px); 
    }
    50% { 
      transform: translateY(-10px); 
    }
  }
  
  @keyframes radiation {
    0%, 100% { 
      transform: scale(1) rotate(0deg); 
      opacity: 0.5; 
    }
    50% { 
      transform: scale(1.1) rotate(180deg); 
      opacity: 0.8; 
    }
  }
  
  /* Section backgrounds */
  .bg-section {
    background: var(--gradient-hero);
    position: relative;
  }
  
  .bg-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 20%, hsl(var(--carbon-healthy) / 0.1) 0%, transparent 50%),
                radial-gradient(circle at 70% 80%, hsl(var(--carbon-warning) / 0.1) 0%, transparent 50%);
    pointer-events: none;
  }
  
  /* Additional gradient utilities */
  .from-carbon-healthy\/5 {
    --tw-gradient-from: hsl(var(--carbon-healthy) / 0.05);
    --tw-gradient-to: hsl(var(--carbon-healthy) / 0);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  }
  
  .to-carbon-warning\/5 {
    --tw-gradient-to: hsl(var(--carbon-warning) / 0.05);
  }
  
  .from-background\/90 {
    --tw-gradient-from: hsl(var(--background) / 0.9);
    --tw-gradient-to: hsl(var(--background) / 0);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  }
  
  .via-background\/70 {
    --tw-gradient-stops: var(--tw-gradient-from), hsl(var(--background) / 0.7), var(--tw-gradient-to);
  }
  
  .to-background\/90 {
    --tw-gradient-to: hsl(var(--background) / 0.9);
  }
  
  .from-background\/90 {
    --tw-gradient-from: hsl(var(--background) / 0.9);
    --tw-gradient-to: hsl(var(--background) / 0);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  }
  
  .to-transparent {
    --tw-gradient-to: transparent;
  }
  
  .from-carbon-healthy\/10 {
    --tw-gradient-from: hsl(var(--carbon-healthy) / 0.1);
    --tw-gradient-to: hsl(var(--carbon-healthy) / 0);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  }
  
  .to-carbon-warning\/10 {
    --tw-gradient-to: hsl(var(--carbon-warning) / 0.1);
  }
  
  /* Tab functionality */
  .tab-content {
    display: none;
  }
  
  .tab-content.active {
    display: block;
  }
  
  /* Ensure first tab is active by default */
  #teams-content {
    display: block;
  }
  
  /* Symptom icon styling */
  .symptom-icon {
    color: hsl(var(--carbon-healthy));
    height: 1.5rem;
    width: 1.5rem;
    margin-top: 0.25rem;
    flex-shrink: 0;
  }
  
  /* Additional utility classes */
  .border-carbon-healthy\/20 {
    border-color: hsl(var(--carbon-healthy) / 0.2);
  }
  
  .hover\:border-carbon-healthy\/40:hover {
    border-color: hsl(var(--carbon-healthy) / 0.4);
  }
  
  .bg-carbon-healthy\/10 {
    background-color: hsl(var(--carbon-healthy) / 0.1);
  }
  
  .border-carbon-healthy\/30 {
    border-color: hsl(var(--carbon-healthy) / 0.3);
  }
  
  .leading-relaxed {
    line-height: 1.625;
  }
}