@layer components {
  /* Generic card/panel */
  .card {
    background-color: var(--color-canvas);
    border: var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
  }

  .card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    border-block-end: var(--border);

    h2, h3 {
      font-size: var(--text-sm);
      font-weight: var(--weight-semibold);
      color: var(--color-ink);
    }
  }

  /* List inside a card */
  .card__list {
    > * + * {
      border-block-start: var(--border);
    }
  }

  .card__body {
    padding: var(--panel-pad-y) var(--space-4);
  }

  .card__body--lg {
    padding: var(--space-5) var(--space-6);
  }

  .card__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--row-pad-y) var(--space-4);
    gap: var(--space-3);
    transition: background-color var(--transition-fast);

    &:hover {
      background-color: var(--color-surface);
    }

    .row-actions {
      display: flex;
      align-items: center;
      gap: var(--space-2);
    }
  }

  .card__empty {
    padding: var(--space-10) var(--space-4);
    text-align: center;
    color: var(--color-ink-subtle);
    font-size: var(--text-sm);
  }

  /* Stat/highlight card */
  .card--highlight {
    background-color: var(--color-surface);
    border-color: var(--color-border-light);

    &.card--primary {
      background-color: var(--color-primary-bg);
      border-color: var(--color-primary-border);
      color: var(--color-primary-dark);
    }
  }

  .card--purple {
    border-color: var(--color-purple-border);
    background-color: var(--color-purple-bg);
    color: var(--color-purple);
  }

  /* Monospace text preview (extracted document content) */
  .card--pre {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    white-space: pre-wrap;
  }

  /* Badge */
  .badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125em 0.5em;
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    border-radius: var(--radius-full);
    background-color: var(--color-surface-alt);
    color: var(--color-ink-muted);
  }

  .badge--green {
    background-color: var(--color-positive-bg);
    color: var(--color-positive);
  }

  .badge--yellow {
    background-color: var(--color-warning-bg);
    color: var(--color-warning);
  }

  .badge--purple {
    background-color: var(--color-purple-bg);
    color: var(--color-purple);
  }

  .badge--red {
    background-color: var(--color-negative-bg);
    color: var(--color-negative);
  }

  .badge--inactive {
    background-color: var(--color-surface-alt);
    color: var(--color-ink-muted);
  }
}