@layer components {

  /* ── Base ─────────────────────────────────────────────────────────── */

  .card {
    background-color: var(--color-surface-secondary);
    border: 1px solid var(--color-border-default);
    border-radius: 0;
  }

  /* ── Sub-elements ─────────────────────────────────────────────────── */

  .card-header {
    padding: var(--space-4);
    border-bottom: 1px solid var(--color-border-default);
  }

  .card-body {
    padding: var(--space-4);
  }

  .card-footer {
    padding: var(--space-4);
  }

  /* ── Compact ──────────────────────────────────────────────────────── */

  .card-compact .card-header {
    padding: var(--space-2) var(--space-3);
  }

  .card-compact .card-body {
    padding: var(--space-2) var(--space-3);
  }

  .card-compact .card-footer {
    padding: var(--space-2) var(--space-3);
  }

  /* ── Status variants ──────────────────────────────────────────────── */

  .card-success {
    border-left: 2px solid var(--color-success-base);
  }

  .card-success .card-header,
  .card-success .card-body,
  .card-success .card-footer {
    padding-left: calc(var(--space-4) - 1px);
  }

  .card-success.card-compact .card-header,
  .card-success.card-compact .card-body,
  .card-success.card-compact .card-footer {
    padding-left: calc(var(--space-3) - 1px);
  }

  .card-warning {
    border-left: 2px solid var(--color-warning-base);
  }

  .card-warning .card-header,
  .card-warning .card-body,
  .card-warning .card-footer {
    padding-left: calc(var(--space-4) - 1px);
  }

  .card-warning.card-compact .card-header,
  .card-warning.card-compact .card-body,
  .card-warning.card-compact .card-footer {
    padding-left: calc(var(--space-3) - 1px);
  }

  .card-error {
    border-left: 2px solid var(--color-error-base);
  }

  .card-error .card-header,
  .card-error .card-body,
  .card-error .card-footer {
    padding-left: calc(var(--space-4) - 1px);
  }

  .card-error.card-compact .card-header,
  .card-error.card-compact .card-body,
  .card-error.card-compact .card-footer {
    padding-left: calc(var(--space-3) - 1px);
  }

  /* ── Interactive cards ─────────────────────────────────────────────── */

  a.card,
  button.card {
    display: block;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    transition: background-color var(--duration-normal) ease-out;
  }

  a.card:hover,
  button.card:hover {
    background-color: var(--color-surface-tertiary);
  }

  a.card:active,
  button.card:active {
    transition: none;
  }

  a.card:focus-visible,
  button.card:focus-visible {
    outline: 2px solid var(--color-accent-base);
    outline-offset: 2px;
  }
}