/* ============================================================
   Christopher Wagner — Spacing, radii, elevation
   4px base. Prefer hairline borders over heavy shadows.
   ============================================================ */

:root {

  /* ---------- SPACING — 4px base ---------- */
  --space-1: 0.25rem;  /*  4px */
  --space-2: 0.5rem;   /*  8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.5rem;   /* 24px */
  --space-6: 2rem;     /* 32px */
  --space-7: 3rem;     /* 48px */
  --space-8: 4rem;     /* 64px */

  /* ---------- RADII ---------- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   14px;   /* cards */
  --radius-pill: 999px;  /* tag pills */
  /* Hexagon is a brand motif, not a radius — render via clip-path / SVG. */

  /* ---------- ICON SIZES — Phosphor regular, no in-between steps ---------- */
  --icon-xs: 16px;  /* inline with small text, dense chips */
  --icon-sm: 20px;  /* default */
  --icon-md: 24px;  /* section icons, list bullets */
  --icon-lg: 32px;  /* feature rows only — larger means BrandMark or an image */

  /* ---------- ELEVATION ---------- */
  --border-hair: 0.5px;
  --shadow-card: 0 1px 2px rgba(47, 8, 59, 0.06),
                 0 6px 20px rgba(47, 8, 59, 0.06);
}