@layer components {
  /* Buttons */
  .btn {
    @apply inline-flex items-center justify-center font-medium rounded-lg transition-colors duration-200 cursor-pointer;
  }

  .btn-primary {
    @apply btn bg-ocktra-600 text-white hover:bg-ocktra-700 active:bg-ocktra-800;
  }

  .btn-secondary {
    @apply btn bg-neutral-200 text-neutral-900 hover:bg-neutral-300 active:bg-neutral-400;
  }

  .btn-outline {
    @apply btn border border-ocktra-600 text-ocktra-600 hover:bg-ocktra-50 active:bg-ocktra-100;
  }

  .btn-ghost {
    @apply btn text-neutral-700 hover:bg-neutral-100 active:bg-neutral-200;
  }

  .btn-success {
    @apply btn bg-success-600 text-white hover:bg-success-700 active:bg-success-800;
  }

  .btn-danger {
    @apply btn bg-danger-600 text-white hover:bg-danger-700 active:bg-danger-800;
  }

  .btn-warning {
    @apply btn bg-warning-600 text-white hover:bg-warning-700 active:bg-warning-800;
  }

  /* Button Sizes */
  .btn-xs {
    @apply px-2 py-1 text-xs;
  }

  .btn-sm {
    @apply px-3 py-1.5 text-sm;
  }

  .btn-md {
    @apply px-4 py-2 text-base;
  }

  .btn-lg {
    @apply px-6 py-3 text-lg;
  }

  /* Cards */
  .card {
    @apply bg-white rounded-lg border border-neutral-200 shadow-sm;
  }

  .card-bordered {
    @apply card border border-neutral-300;
  }

  .card-hover {
    @apply card transition-shadow duration-200 hover:shadow-md;
  }

  .card-header {
    @apply px-6 py-4 border-b border-neutral-200;
  }

  .card-body {
    @apply px-6 py-4;
  }

  .card-footer {
    @apply px-6 py-4 border-t border-neutral-200 bg-neutral-50;
  }

  /* Badges */
  .badge {
    @apply inline-flex items-center justify-center px-2 py-1 rounded-full text-xs font-semibold;
  }

  .badge-primary {
    @apply badge bg-ocktra-100 text-ocktra-800;
  }

  .badge-success {
    @apply badge bg-success-100 text-success-800;
  }

  .badge-warning {
    @apply badge bg-warning-100 text-warning-800;
  }

  .badge-danger {
    @apply badge bg-danger-100 text-danger-800;
  }

  .badge-neutral {
    @apply badge bg-neutral-100 text-neutral-800;
  }

  /* Alerts */
  .alert {
    @apply rounded-lg p-4 flex items-start gap-3;
  }

  .alert-info {
    @apply alert bg-ocktra-50 border border-ocktra-200 text-ocktra-900;
  }

  .alert-success {
    @apply alert bg-success-50 border border-success-200 text-success-900;
  }

  .alert-warning {
    @apply alert bg-warning-50 border border-warning-200 text-warning-900;
  }

  .alert-danger {
    @apply alert bg-danger-50 border border-danger-200 text-danger-900;
  }

  /* Forms */
  .form-group {
    @apply mb-4 flex flex-col;
  }

  .form-label {
    @apply block text-sm font-medium text-neutral-700 mb-1;
  }

  .form-input,
  .form-select,
  .form-textarea {
    @apply w-full px-3 py-2 border border-neutral-300 rounded-lg text-neutral-900 placeholder-neutral-400 transition-colors duration-200;
  }

  .form-input:focus,
  .form-select:focus,
  .form-textarea:focus {
    @apply outline-none border-ocktra-500 ring-1 ring-ocktra-100;
  }

  .form-input:disabled,
  .form-select:disabled,
  .form-textarea:disabled {
    @apply bg-neutral-100 text-neutral-500 cursor-not-allowed;
  }

  .form-textarea {
    @apply resize-vertical;
  }

  .form-hint {
    @apply text-xs text-neutral-500 mt-1;
  }

  .form-error {
    @apply text-xs text-danger-600 mt-1;
  }

  /* Containers */
  .container-tight {
    @apply max-w-4xl mx-auto px-4;
  }

  .container-wide {
    @apply max-w-6xl mx-auto px-4;
  }

  /* Typography */
  .heading-xl {
    @apply text-4xl font-bold text-neutral-900;
  }

  .heading-lg {
    @apply text-3xl font-bold text-neutral-900;
  }

  .heading-md {
    @apply text-2xl font-bold text-neutral-900;
  }

  .heading-sm {
    @apply text-xl font-semibold text-neutral-900;
  }

  .text-muted {
    @apply text-neutral-500;
  }

  .text-subtle {
    @apply text-neutral-400;
  }

  .link {
    @apply text-ocktra-600 hover:text-ocktra-700 underline transition-colors duration-200;
  }

  .link-subtle {
    @apply text-ocktra-600 hover:text-ocktra-700 no-underline transition-colors duration-200;
  }
}