@layer components {
  /* Cards
   * Container with optional header/body/footer sections.
   * Compose with .stack for vertical spacing within card body.
   */

  .card {
    padding: var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
  }

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

  .card__title {
    font-weight: 600;
    font-size: 1rem;
    margin: 0;
  }

  .card__body {
    /* Spacing context — compose with .stack for vertical flow */
  }

  .card__footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    padding-block-start: var(--space-3);
    border-block-start: 1px solid var(--color-border);
    margin-block-start: var(--space-4);
  }

  /* Outlined variant — canvas background instead of surface */
  .card--outlined {
    background: var(--color-canvas);
  }
}