/* ─────────────────────────────────────────────────────────────────────────
   CARD — the shared surface component.

   The audit counted 91 card-ish classes with no shared definition behind
   them. Most are app-owned layouts (kanban cards, experience cards, the
   public-site design-1 cards) and stay that way — apps own their layouts,
   the system owns the vocabulary (specs/design-system.md §4.5). What did not
   exist was anything for them to graduate *to*, or for new work to land on.

   This is that: surface, border, radius and elevation in one place, driven
   by the tier-3 --card-* tokens. Build a new card as `.card` plus your own
   layout classes; when a second app wants a card you built, move its shared
   parts here rather than copying them.
   ───────────────────────────────────────────────────────────────────────── */

@layer components {
  .card {
    display: block;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
  }

  .card--flat { box-shadow: var(--elev-0); }

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

  /* Clickable card: lifts on hover and takes the accent on its border, so a
     card that navigates is distinguishable from one that just holds content. */
  .card--link {
    color: inherit;
    text-decoration: none;
    transition: transform var(--transition-fast),
                box-shadow var(--transition-fast),
                border-color var(--transition-fast);
  }

  .card--link:hover {
    transform: translateY(-2px);
    border-color: var(--color-accent-ring);
    box-shadow: var(--card-shadow-hover);
  }

  .card__header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--card-border);
  }

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

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

  .card__title {
    /* --font-ui, not --font-display. A 14px bold card title is a label; the
       brand's serif is for block titles, and a bold serif at label size reads
       as heavy rather than editorial. This used to consume --font-display,
       which meant every app's display face landed on card titles by accident
       rather than by decision. */
    font-family: var(--font-ui);
    font-size: var(--text-md);
    font-weight: 700;
    color: var(--color-text);
  }
}