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

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

@layer base {
  :root {
    --background: 210 20% 98%;
    --foreground: 220 25% 10%;

    --card: 0 0% 100%;
    --card-foreground: 220 25% 10%;

    --popover: 0 0% 100%;
    --popover-foreground: 220 25% 10%;

    --primary: 174 72% 40%;
    --primary-foreground: 0 0% 100%;

    --secondary: 210 20% 96%;
    --secondary-foreground: 220 25% 20%;

    --muted: 210 15% 94%;
    --muted-foreground: 220 10% 45%;

    --accent: 174 60% 94%;
    --accent-foreground: 174 72% 25%;

    --destructive: 0 72% 50%;
    --destructive-foreground: 0 0% 100%;

    --success: 152 70% 40%;
    --success-foreground: 0 0% 100%;

    --warning: 38 92% 50%;
    --warning-foreground: 0 0% 100%;

    --border: 220 15% 90%;
    --input: 220 15% 90%;
    --ring: 174 72% 40%;

    --radius: 0.75rem;

    --gradient-primary: linear-gradient(135deg, hsl(174, 72%, 40%), hsl(190, 80%, 45%));
    --gradient-hero: linear-gradient(180deg, hsl(210, 20%, 98%) 0%, hsl(174, 40%, 96%) 100%);
    --gradient-card: linear-gradient(145deg, hsl(0, 0%, 100%) 0%, hsl(210, 20%, 99%) 100%);
    
    --shadow-soft: 0 4px 20px -4px hsl(220 25% 10% / 0.08);
    --shadow-card: 0 8px 30px -8px hsl(220 25% 10% / 0.1);
    --shadow-glow: 0 0 40px hsl(174 72% 40% / 0.15);

    --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 30% 8%;
    --foreground: 210 20% 96%;

    --card: 222 25% 12%;
    --card-foreground: 210 20% 96%;

    --popover: 222 25% 12%;
    --popover-foreground: 210 20% 96%;

    --primary: 174 72% 50%;
    --primary-foreground: 222 30% 8%;

    --secondary: 222 20% 16%;
    --secondary-foreground: 210 20% 90%;

    --muted: 222 20% 18%;
    --muted-foreground: 220 15% 55%;

    --accent: 174 40% 18%;
    --accent-foreground: 174 72% 70%;

    --destructive: 0 65% 45%;
    --destructive-foreground: 0 0% 100%;

    --success: 152 60% 45%;
    --success-foreground: 0 0% 100%;

    --warning: 38 85% 55%;
    --warning-foreground: 0 0% 100%;

    --border: 222 20% 20%;
    --input: 222 20% 20%;
    --ring: 174 72% 50%;

    --gradient-primary: linear-gradient(135deg, hsl(174, 72%, 50%), hsl(190, 70%, 55%));
    --gradient-hero: linear-gradient(180deg, hsl(222, 30%, 8%) 0%, hsl(222, 35%, 12%) 100%);
    --gradient-card: linear-gradient(145deg, hsl(222, 25%, 14%) 0%, hsl(222, 25%, 11%) 100%);
    
    --shadow-soft: 0 4px 20px -4px hsl(0 0% 0% / 0.3);
    --shadow-card: 0 8px 30px -8px hsl(0 0% 0% / 0.4);
    --shadow-glow: 0 0 50px hsl(174 72% 50% / 0.2);

    --sidebar-background: 222 25% 10%;
    --sidebar-foreground: 210 20% 90%;
    --sidebar-primary: 174 72% 50%;
    --sidebar-primary-foreground: 222 30% 8%;
    --sidebar-accent: 222 20% 16%;
    --sidebar-accent-foreground: 210 20% 90%;
    --sidebar-border: 222 20% 18%;
    --sidebar-ring: 174 72% 50%;
  }
}

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

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

  h1, h2, h3, h4, h5, h6 {
    font-family: 'Space Grotesk', sans-serif;
  }
}

@layer components {
  .gradient-text {
    @apply bg-clip-text text-transparent;
    background-image: var(--gradient-primary);
  }

  .glass-card {
    @apply backdrop-blur-xl border border-border/50;
    background: var(--gradient-card);
    box-shadow: var(--shadow-card);
  }

  .upload-zone {
    @apply border-2 border-dashed border-primary/30 rounded-2xl transition-all duration-300;
  }

  .upload-zone:hover {
    @apply border-primary/60 bg-accent/50;
    box-shadow: var(--shadow-glow);
  }

  .upload-zone.dragging {
    @apply border-primary bg-accent;
    box-shadow: var(--shadow-glow);
  }

  .status-normal {
    background-color: hsl(var(--success) / 0.1);
    color: hsl(var(--success));
    border-color: hsl(var(--success) / 0.3);
  }

  .status-mild {
    background-color: hsl(var(--warning) / 0.1);
    color: hsl(var(--warning));
    border-color: hsl(var(--warning) / 0.3);
  }

  .status-failure {
    background-color: hsl(var(--destructive) / 0.1);
    color: hsl(var(--destructive));
    border-color: hsl(var(--destructive) / 0.3);
  }

  .metric-card {
    @apply relative overflow-hidden;
  }

  .metric-card::before {
    content: '';
    @apply absolute top-0 left-0 w-1 h-full bg-primary rounded-l-lg;
  }

  .animate-pulse-slow {
    animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }

  .animate-float {
    animation: float 6s ease-in-out infinite;
  }

  @keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
  }
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}