/* The card the pages set their content on: a surface with the page's rounding
   and an inner margin. Raised for the account pages' cards, with a brand
   halo for the one card of the public and onboarding pages. Zero specificity,
   so a block's own padding and shape win. */

@layer components {
  :where(.card) {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
  }

  :where(.card--raised) {
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
  }

  :where(.card--glow) {
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-glow);
  }
}