/* ─────────────────────────────────────────────────────────────────────────────
   Zypp · Spacing, radii & layout tokens
   4px base grid. Radii derive from a single --radius (0.75rem) the way the
   production Tailwind config does: lg = radius, md = radius−2px, sm = radius−4px.
   ───────────────────────────────────────────────────────────────────────────── */

:root {
  /* ── Spacing scale (4px grid) ───────────────────────────── */
  --space-0:  0;
  --space-1:  0.25rem;   /*  4 */
  --space-2:  0.5rem;    /*  8 */
  --space-3:  0.75rem;   /* 12 */
  --space-4:  1rem;      /* 16 */
  --space-5:  1.25rem;   /* 20 — default card padding (compact)  */
  --space-6:  1.5rem;    /* 24 — default card padding            */
  --space-8:  2rem;      /* 32 */
  --space-10: 2.5rem;    /* 40 */
  --space-12: 3rem;      /* 48 */
  --space-16: 4rem;      /* 64 */
  --space-20: 5rem;      /* 80 — section rhythm (py-20)           */
  --space-24: 6rem;      /* 96 */
  --space-28: 7rem;      /* 112 — large section rhythm            */

  /* ── Radii — tightened for a crisper, more editorial feel ─ */
  --radius:    0.5rem;               /* 8 — the canonical token             */
  --radius-lg: var(--radius);        /* 8 — cards, inputs, buttons (lg)     */
  --radius-md: calc(var(--radius) - 2px);  /* 6 — buttons, inputs default   */
  --radius-sm: calc(var(--radius) - 4px);  /* 4 — small controls           */
  --radius-xl:   0.75rem;             /* 12 — feature cards                  */
  --radius-2xl:  0.875rem;            /* 14 — hero search bar, stat cards    */
  --radius-full: 9999px;             /* pills, badges, avatars              */

  /* ── Layout widths ──────────────────────────────────────── */
  --container-prose:  42rem;   /* 672 — newsletter / legal text           */
  --container-narrow: 56rem;   /* 896 — focused content                   */
  --container-wide:   72rem;   /* 1152 — landing sections (max-w-6xl)      */
  --container-max:    80rem;   /* 1280 — nav / full width (max-w-7xl)      */
  --sidebar-width:    260px;   /* dashboard sidebar                       */
  --nav-height:       4rem;    /* 64 — public top nav                     */
}