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

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

@layer base {
  html {
    font-family: "Inter", sans-serif;
  }

  body {
    @apply text-aspen-text;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @apply text-aspen-text font-semibold;
  }

  a {
    @apply text-aspen-link hover:text-aspen-link/80 transition-colors;
  }
}

@layer components {
  .btn-primary {
    @apply bg-aspen-primary text-white px-4 py-2 rounded-lg hover:bg-aspen-primary/90 transition-colors;
  }

  .btn-secondary {
    @apply bg-aspen-link text-white px-4 py-2 rounded-lg hover:bg-aspen-link/90 transition-colors;
  }

  .btn-danger {
    @apply bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600 transition-colors;
  }

  .btn-action {
    @apply px-3 py-1.5 text-sm rounded-lg transition-colors;
  }

  .btn-action-share {
    @apply btn-action bg-aspen-link/10 text-aspen-link hover:bg-aspen-link/20;
  }

  .btn-action-delete {
    @apply btn-action bg-red-50 text-red-600 hover:bg-red-100;
  }

  .input-field {
    @apply w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-aspen-primary focus:border-aspen-primary outline-none transition-colors;
  }

  .card {
    @apply bg-white p-6 rounded-lg shadow-md;
  }
}