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

@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%;
    --primary: 152 74% 26%;
    --primary-foreground: 0 0% 100%;
    --secondary: 210 40% 96%;
    --secondary-foreground: 222.2 84% 4.9%;
    --muted: 210 40% 96%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96%;
    --accent-foreground: 222.2 84% 4.9%;
    --destructive: 152 74% 26%;
    --destructive-foreground: 0 0% 100%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 152 74% 26%;
    --radius: 0.5rem;
    
    /* EDR Brand Colors */
    --edr-green: 152 74% 26%;
    --edr-orange: 24 95% 53%;
    --edr-red: 152 74% 26%;
    --edr-blue: 221 83% 53%;
  }

  .dark {
    --background: 222.2 47% 11%;
    --foreground: 210 40% 98%;
    --card: 222.2 47% 11%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 47% 11%;
    --popover-foreground: 210 40% 98%;
    --primary: 152 74% 26%;
    --primary-foreground: 0 0% 100%;
    --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: 152 74% 26%;
    --destructive-foreground: 0 0% 100%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 152 74% 26%;
  }

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

@layer components {
  .card {
    @apply bg-card text-card-foreground rounded-lg shadow-sm border border-border p-6;
  }
  
  .btn {
    @apply px-4 py-2 rounded-lg font-medium transition-colors duration-200 inline-flex items-center justify-center;
  }
  
  .btn-primary {
    @apply bg-[rgb(20,113,76)] text-white hover:bg-[rgb(16,90,61)] dark:bg-[rgb(20,113,76)] dark:hover:bg-[rgb(16,90,61)] shadow-md;
  }
  
  .btn-secondary {
    @apply bg-secondary text-secondary-foreground hover:bg-secondary/80;
  }
  
  .btn-danger {
    @apply bg-[rgb(20,113,76)] text-destructive-foreground hover:bg-[rgb(16,90,61)];
  }
  
  .input {
    @apply w-full px-3 py-2 border border-input rounded-lg bg-background focus:outline-none focus:ring-2 focus:ring-[rgb(20,113,76)] focus:border-transparent;
  }
  
  .label {
    @apply block text-sm font-medium text-foreground mb-1;
  }

  .gradient-edr {
    @apply bg-[rgb(20,113,76)];
  }

  .gradient-edr-bg {
    @apply bg-gradient-to-b from-slate-900 via-slate-800 to-slate-900;
  }
  
  .edr-badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
  }
  
  .edr-badge-success {
    @apply bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400;
  }
  
  .edr-badge-warning {
    @apply bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400;
  }
  
  .edr-badge-danger {
    @apply bg-green-100 text-[rgb(20,113,76)] dark:bg-green-900/30 dark:text-green-400;
  }
  
  .edr-badge-info {
    @apply bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400;
  }
}
