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

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&display=swap');

@layer base {
  body {
    font-family: 'Montserrat', sans-serif;
  }
}

@layer components {
  /* Buttons */
  .btn {
    @apply px-4 py-2 rounded-lg transition-colors duration-200 font-medium cursor-pointer;
  }

  .btn-primary {
    @apply btn bg-blue-600 dark:bg-dark-accent-blue text-white hover:bg-blue-700 dark:hover:bg-blue-600;
  }

  .btn-secondary {
    @apply btn bg-gray-100 dark:bg-dark-bg-elevated text-gray-700 dark:text-dark-text-primary hover:bg-gray-200 dark:hover:bg-dark-bg-card border border-gray-300 dark:border-dark-border;
  }

  .btn-danger {
    @apply btn bg-red-600 dark:bg-dark-accent-red text-white hover:bg-red-700 dark:hover:bg-red-600;
  }

  .btn-success {
    @apply btn bg-green-600 dark:bg-dark-accent-green text-white hover:bg-green-700 dark:hover:bg-green-600;
  }

  /* Cards */
  .card {
    @apply bg-white dark:bg-dark-bg-card rounded-lg shadow-lg p-6 border border-gray-200 dark:border-dark-border transition-colors;
  }

  .card-hover {
    @apply card hover:shadow-xl transition-shadow;
  }

  .card-hover:hover {
    @apply bg-gray-100;
  }

  .card-hover:hover:is(.dark *) {
    background-color: #2f2f34 !important;
  }

  /* Inputs */
  .input {
    @apply w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-dark-border bg-white dark:bg-dark-bg-elevated text-gray-900 dark:text-dark-text-primary placeholder-gray-500 dark:placeholder-dark-text-secondary focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-dark-accent-blue transition-colors;
  }

  .input-sm {
    @apply input py-2;
  }

  /* Text styles */
  .text-primary {
    @apply text-gray-900 dark:text-dark-text-primary;
  }

  .text-secondary {
    @apply text-gray-600 dark:text-dark-text-secondary;
  }

  .text-muted {
    @apply text-gray-500 dark:text-dark-text-secondary;
  }

  /* Links */
  .link {
    @apply text-blue-600 dark:text-dark-accent-blue hover:text-blue-800 dark:hover:text-blue-400 font-medium transition-colors;
  }

  /* Navbar */
  .navbar {
    @apply bg-transparent shadow-none border-b-0 transition-colors;
  }

  /* Modal backdrop */
  .modal-backdrop {
    @apply fixed inset-0 backdrop-blur-sm bg-black/30 dark:bg-black/60 z-50 transition-colors;
  }

  /* Tags */
  .tag {
    @apply inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 dark:bg-dark-accent-blue/20 text-blue-800 dark:text-dark-accent-blue border border-blue-200 dark:border-dark-accent-blue/30;
  }

  /* Alert messages */
  .alert-success {
    @apply px-6 py-4 rounded-lg bg-green-50 dark:bg-dark-accent-green/20 border border-green-200 dark:border-dark-accent-green/30 text-green-700 dark:text-dark-accent-green;
  }

  .alert-error {
    @apply px-6 py-4 rounded-lg bg-red-50 dark:bg-dark-accent-red/20 border border-red-200 dark:border-dark-accent-red/30 text-red-700 dark:text-dark-accent-red;
  }

  .alert-warning {
    @apply px-6 py-4 rounded-lg bg-yellow-50 dark:bg-dark-accent-yellow/20 border border-yellow-200 dark:border-dark-accent-yellow/30 text-yellow-700 dark:text-dark-accent-yellow;
  }

  /* Custom gradient background for dark mode - glassy matte black with top-left highlight */
  .bg-dark-gradient {
    background: radial-gradient(ellipse at top left, #2a2a2e 0%, #15151a 30%, #0a0a0b 60%) !important;
  }
}