@layer components {
  .card {
    background-color: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;

    .card__header {
      padding: var(--space-4) var(--space-6);
      border-bottom: 1px solid var(--color-border);
    }

    .card__title {
      margin: 0;
      font-size: var(--text-lg);
      font-weight: var(--font-semibold);
      letter-spacing: -0.01em;
    }

    .card__subtitle {
      margin-top: var(--space-1);
      font-size: var(--text-base);
      color: var(--color-text-muted);
    }

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

    .card__footer {
      padding: var(--space-4) var(--space-6);
      border-top: 1px solid var(--color-border);
    }
  }

  /* Kept for existing markup; flat like every other card */
  .card--elevated {
    border-color: var(--color-border);
  }

  /* Interactive - clickable card */
  .card--interactive {
    cursor: pointer;
    transition: border-color var(--transition-fast);
  }

  .card--danger {
    border-color: var(--color-error);
  }

  .card--interactive:hover {
    border-color: var(--color-gray-500);
  }

  .card--interactive:focus-within {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
  }

  /* Compact - less padding */
  .card--compact .card__header,
  .card--compact .card__footer {
    padding: var(--space-3) var(--space-4);
  }

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

  .card.has-error {
    border-color: var(--color-error);
  }

  .card.is-selected {
    border-color: var(--color-text);
    box-shadow: 0 0 0 1px var(--color-text);
  }

  [data-theme="dark"] {
    .card {
      background-color: var(--color-surface);
    }
  }
}