/* ============================================================
   ScaleRetain — Spacing, radius & layout tokens
   8-pt based spacing; generous section rhythm; soft-but-precise
   corner radii (cards ~20px, buttons ~12px, pills full).
   ============================================================ */
:root {
  /* Spacing scale (4 / 8 pt) */
  --sp-0:  0;   /* @kind spacing */
  --sp-1:  0.25rem;  /* 4  */
  --sp-2:  0.5rem;   /* 8  */
  --sp-3:  0.75rem;  /* 12 */
  --sp-4:  1rem;     /* 16 */
  --sp-5:  1.5rem;   /* 24 */
  --sp-6:  2rem;     /* 32 */
  --sp-7:  2.5rem;   /* 40 */
  --sp-8:  3rem;     /* 48 */
  --sp-9:  4rem;     /* 64 */
  --sp-10: 5rem;     /* 80 */
  --sp-12: 7rem;     /* 112 */
  --sp-14: 9rem;     /* 144 — section gap */

  /* Radii */
  --r-xs:   6px;
  --r-sm:   10px;
  --r-md:   12px;   /* buttons / inputs */
  --r-lg:   16px;
  --r-xl:   20px;   /* cards */
  --r-2xl:  28px;   /* large panels */
  --r-full: 999px;  /* pills / avatars */

  /* Layout */
  --container-sm:  640px;   /* @kind spacing */
  --container-md:  860px;   /* @kind spacing */
  --container-lg:  1080px;  /* @kind spacing */
  --container-xl:  1240px;  /* @kind spacing */
  --section-pad-y: clamp(4rem, 2rem + 8vw, 9rem);   /* @kind spacing */
  --gutter:        clamp(1.25rem, 0.5rem + 3vw, 2.5rem);   /* @kind spacing */

  /* Control sizing */
  --control-h-sm: 36px;   /* @kind spacing */
  --control-h-md: 44px;   /* @kind spacing */
  --control-h-lg: 54px;   /* @kind spacing */
}