/* ============================================================
   10of10 · Spacing, radii & layout tokens
   Generous editorial rhythm on the marketing side; tight, precise
   spacing inside the 393px Atelier panel. Values lifted verbatim
   from source — do not snap to a 4/8px grid.
   ============================================================ */
:root {
  /* ---------- spacing scale ---------- */
  --space-1:  4px;
  --space-2:  7px;    /* chip gap, swatch gap */
  --space-3:  11px;
  --space-4:  14px;   /* head gap */
  --space-5:  18px;   /* tight grid gap */
  --space-6:  22px;   /* grid gap */
  --space-7:  28px;   /* wrap padding */
  --space-8:  40px;
  --space-9:  56px;   /* section head margin */
  --space-10: 96px;   /* section padding-y */
  --space-11: 104px;  /* dense section padding-y */

  /* ---------- layout ---------- */
  --maxw:        1140px; /* @kind spacing */
  --maxw-app:    480px; /* @kind spacing */
  --panel-w:     393px; /* @kind spacing */
  --panel-h:     852px; /* @kind spacing */
  --wrap-pad:    28px;
  --sec-pad-y:   96px;
  --head-mb:     56px;

  /* ---------- radii ---------- */
  --r-xs:     8px;    /* inputs, small chips */
  --r-sm:     12px;   /* upload areas, photo frames */
  --r-md:     14px;   /* measure tiles, wallet card */
  --r-lg:     18px;   /* product cards, member photos */
  --r-card:   22px;   /* marketing cards */
  --r-island: 26px;   /* live band / b2b island */
  --r-plate:  28px;   /* hero logo plate, app cards */
  --r-pill:   999px;  /* buttons, badges, tags */
}