@import "tailwindcss";

:root {
  --primary: 25 95% 53%;
  --primary-light: 25 100% 93%;
  --primary-dark: 25 95% 43%;
  
  --secondary: 200 46% 55%;
  --secondary-light: 200 46% 95%;
  --secondary-dark: 200 46% 45%;
  
  --accent: 280 60% 52%;
  --accent-light: 280 60% 92%;
  --accent-dark: 280 60% 42%;
  
  --success: 142 72% 29%;
  --success-light: 142 72% 89%;
  --warning: 38 92% 50%;
  --warning-light: 38 92% 90%;
  --danger: 0 84% 60%;
  --danger-light: 0 84% 90%;

  --surface-0: 0 0% 100%;
  --surface-50: 210 20% 98%;
  --surface-100: 210 20% 96%;
  --surface-200: 210 20% 94%;
  --surface-300: 210 20% 92%;
  --surface-400: 210 20% 90%;
  --surface-500: 210 20% 88%;
  
  --gray-50: 210 20% 98%;
  --gray-100: 210 20% 96%;
  --gray-200: 210 20% 94%;
  --gray-300: 210 20% 92%;
  --gray-400: 210 20% 90%;
  --gray-500: 210 20% 80%;
  --gray-600: 210 20% 70%;
  --gray-700: 210 20% 60%;
  --gray-800: 210 20% 50%;
  --gray-900: 210 20% 40%;

  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
}

.cl-avatarBox {
  width: 2.3rem;
  height: 2.3rem;
}


@layer base {
  body {
    @apply bg-[hsl(var(--surface-50))] text-gray-800 antialiased;
  }
}

@layer components {
  .card {
    @apply bg-white rounded-2xl border border-gray-100 shadow-sm hover:shadow-md transition-shadow duration-200;
  }

  .card-header {
    @apply p-6 border-b border-gray-100;
  }

  .card-content {
    @apply p-6;
  }

  .card-footer {
    @apply p-6 border-t border-gray-100;
  }

  .text-primary {
    @apply text-[hsl(var(--primary))];
  }
  .btn-primary {
    @apply bg-[hsl(var(--primary))] text-white rounded-xl px-4 py-2 font-medium 
           hover:bg-[hsl(var(--primary-dark))] transition-colors duration-200
           focus:outline-none focus:ring-2 focus:ring-[hsl(var(--primary))] ;
  }

  .btn-secondary {
    @apply bg-[hsl(var(--secondary-light))] text-[hsl(var(--secondary))] rounded-xl px-4 py-2 font-medium
           hover:bg-[hsl(var(--secondary))] hover:text-white transition-colors duration-200
           focus:outline-none focus:ring-2 focus:ring-[hsl(var(--secondary))] ;
  }

  .input {
    @apply rounded-xl border border-gray-200 px-4 py-2 
           focus:outline-none focus:ring-2 focus:ring-[hsl(var(--primary))] 
           placeholder:text-gray-400;
  }

  .badge {
    @apply inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium;
  }

  .badge-success {
    @apply bg-[hsl(var(--success-light))] text-[hsl(var(--success))];
  }

  .badge-warning {
    @apply bg-[hsl(var(--warning-light))] text-[hsl(var(--warning))];
  }

  .badge-danger {
    @apply bg-[hsl(var(--danger-light))] text-[hsl(var(--danger))];
  }
}