/* Card Components
 * Card container styles following BEM convention
 * Using Tailwind v4 @utility with @layer components
 */

@utility card {
  @layer components {
    @apply bg-white rounded-lg shadow-md;
  }
}

@utility card__body {
  @layer components {
    @apply p-4;
  }
}

@utility card--padded {
  @layer components {
    @apply p-6;
  }
}

@utility card__header {
  @layer components {
    @apply px-6 py-4 border-b border-gray-200;
  }
}

@utility card__footer {
  @layer components {
    @apply px-6 py-4 border-t border-gray-200;
  }
}

/* Background variants — combine with card: class="card card--transparent" */

@utility card--transparent {
  @layer components {
    @apply bg-transparent shadow-none;
  }
}

@utility card--light {
  @layer components {
    @apply bg-gray-100 shadow-none;
  }
}

@utility card--dark {
  @layer components {
    @apply bg-gray-200 shadow-none;
  }
}

@utility history-card--selected {
  @layer components {
    @apply ring-2 ring-blue-500 shadow-lg;
  }
}