/* ============================================================
   CLUBER — SPACING, RADII, SHADOWS, LAYOUT
   Generous whitespace. Rounded everything. Soft warm shadows.
   ============================================================ */
:root {
  /* — Spacing scale (4px base) — */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* — Radii (rounded everything) — */
  --r-sm:    6px;   /* small chips, tooltips */
  --r-md:    10px;  /* cards, images, inputs, panels (live 10px) */
  --r-lg:    10px;  /* large panels */
  --r-pill:  100px; /* category pills, CTA buttons, avatars, tags */

  /* — Shadows (soft, warm, low-contrast) — */
  --shadow-card:       0 6px 20px rgba(40, 22, 8, 0.10);
  --shadow-card-hover: 0 12px 30px rgba(40, 22, 8, 0.16);
  --shadow-pill:       0 2px 6px rgba(40, 22, 8, 0.18);
  --shadow-cta:        0 8px 22px rgba(255, 108, 36, 0.30);

  /* — Image protection gradient (for text over hero photos) — */
  --scrim: linear-gradient(180deg, rgba(20,10,4,0) 0%, rgba(20,10,4,0.15) 45%, rgba(20,10,4,0.78) 100%); /* @kind other */

  /* — Layout — */
  --container:      1200px;  /* max content width */
  --container-read: 720px;   /* article reading column */
  --gutter:         24px;    /* grid gap */
  --header-h:       64px;
}