/* ============================================================
   Quayside — Spacing, radii, sizing
   8px base grid. Tight, deliberate, generous whitespace.
   ============================================================ */

:root {
  /* ---- Spacing scale (8px base) ---- */
  --sp-0:   0; /* @kind spacing */
  --sp-1:   0.25rem;  /*  4px */
  --sp-2:   0.5rem;   /*  8px */
  --sp-3:   0.75rem;  /* 12px */
  --sp-4:   1rem;     /* 16px */
  --sp-5:   1.5rem;   /* 24px */
  --sp-6:   2rem;     /* 32px */
  --sp-7:   2.5rem;   /* 40px */
  --sp-8:   3rem;     /* 48px */
  --sp-9:   4rem;     /* 64px */
  --sp-10:  5rem;     /* 80px */
  --sp-12:  6rem;     /* 96px */
  --sp-16:  8rem;     /* 128px */

  /* ---- Container widths ---- */
  --container-sm:  640px; /* @kind spacing */
  --container-md:  860px; /* @kind spacing */
  --container-lg:  1120px; /* @kind spacing */
  --container-xl:  1320px; /* @kind spacing */
  --gutter:        clamp(1.25rem, 4vw, 4rem); /* @kind spacing */

  /* ---- Radii (sharp — faceted, glass-like edges; no curves) ---- */
  --radius-none: 0;
  --radius-xs:   0;
  --radius-sm:   0;
  --radius-md:   0;
  --radius-lg:   0;
  --radius-pill: 0;
  --radius-circle: 50%;

  /* ---- Border widths ---- */
  --bw-hair: 1px; /* @kind spacing */
  --bw-1:    1.5px; /* @kind spacing */
  --bw-2:    2px; /* @kind spacing */
  --bw-3:    3px; /* @kind spacing */
}