@layer components {
  .card {
    background-color: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    .card__header {
      padding: var(--space-4) var(--space-6);
      border-bottom: 1px solid var(--color-border);
    }

    .card__title {
      font-size: var(--text-xl);
      font-weight: var(--font-semibold);
      margin: 0;
    }

    .card__subtitle {
      font-size: var(--text-lg);
      color: var(--color-gray-600);
      margin-top: var(--space-1);
    }

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

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

  /* Elevated - with shadow */
  .card--elevated {
    border-color: transparent;
    box-shadow: var(--shadow-md);
  }

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

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

  .card--interactive:hover {
    border-color: var(--color-border-hover);
    box-shadow: var(--shadow-md);
  }

  .card--interactive:focus-within {
    outline: 2px 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-primary-500);
    box-shadow: 0 0 0 1px var(--color-primary-500);
  }

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

      .card__title {
        font-size: var(--text-xl);
        font-weight: var(--font-semibold);
        margin: 0;
      }

      .card__subtitle {
        font-size: var(--text-lg);
        color: var(--color-gray-600);
        margin-top: var(--space-1);
      }

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

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