/* ============================================================
   Boogie Games — Spacing & Radius Tokens
   Spacing follows the auto-layout gaps seen in the file (4–40px).
   Radii transcribed verbatim: 8 (cards), 12/16/20 (large surfaces),
   fully-round pills (59px+ → 999). Do not snap these to an 8pt grid.
   ============================================================ */
:root {
  /* spacing scale */
  --sp-2: 2px;
  --sp-4: 4px;
  --sp-6: 6px;
  --sp-8: 8px;
  --sp-10: 10px;
  --sp-12: 12px;
  --sp-16: 16px;
  --sp-20: 20px;
  --sp-24: 24px;
  --sp-32: 32px;
  --sp-40: 40px;

  /* radii (from the file) */
  --r-sm: 8px;    /* small cards, chips */
  --r-md: 12px;   /* buttons, inputs */
  --r-lg: 16px;   /* content cards */
  --r-xl: 20px;   /* hero cards, store items */
  --r-2xl: 24px;
  --r-pill: 999px;

  /* layout */
  --screen-w: 375px;   /* mobile design frame width */
  --gutter: 16px;      /* screen side padding */
}