/* =============================================================================
   COMPONENT: card — a neutral content surface. Chrome only; color comes
   from the content inside it.
   ========================================================================== */

@layer components {
  .card {
    background: var(--surface-raised);
    /* Dusk: cards read as soft floating surfaces — the plum-tinted shadow
       does the lifting; the hairline fades to a whisper. */
    border: var(--border-width) solid color-mix(in oklab, var(--color-border) 55%, transparent);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    box-shadow: var(--shadow-md);
  }
  .card--flush { padding: 0; overflow: hidden; }
  .card__header { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-sm); margin-block-end: var(--space-md); }
  .card__title { font-size: var(--text-lg); font-weight: var(--weight-bold); }
  .card__footer { margin-block-start: var(--space-md); padding-block-start: var(--space-md); border-block-start: var(--border-width) solid var(--color-border); }
}