/* ============================================================
   MOCNO — Spacing & layout
   4px base grid. Landing pages breathe vertically with big
   section rhythm; content sits in a centered max-width column.
   ============================================================ */

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

  /* ---- Section rhythm (vertical padding for LP blocks) -- */
  --section-y:    clamp(4rem, 9vw, 8rem);   /* @kind spacing */
  --section-y-sm: clamp(2.5rem, 5vw, 4rem); /* @kind spacing */

  /* ---- Layout container --------------------------------- */
  --container:      1200px;  /* full landing-page width  */
  --container-text: 720px;   /* readable prose column    */
  --container-wide: 1360px;  /* edge-to-edge feature band */
  --gutter:         clamp(1.25rem, 4vw, 3rem); /* @kind spacing */

  /* ---- Radii (small & hard — the brand is not soft) ----- */
  --radius-xs:   2px;   /* tags / chips / inner wells */
  --radius-sm:   4px;   /* DEFAULT — cards, buttons, inputs */
  --radius-md:   6px;
  --radius-lg:   10px;  /* large feature panels / images */
  --radius-pill: 999px; /* avatar rings, pill buttons */

  /* ---- Border widths ------------------------------------ */
  --bw-hair:   1px;
  --bw-accent: 3px;   /* the red/yellow left-accent stripe */
  --bw-frame:  2px;   /* hard black framing */
}