/* ============================================================
   Metrix — Spacing, Radius & Layout
   ------------------------------------------------------------
   Base 4px. Scale: 4 · 8 · 12 · 16 · 20 · 24 · 32 · 40 · 48 ·
   64 · 80 · 96px. Pills are 9999px; glass cards 16–24px.
============================================================ */
:root {
  /* Spacing scale */
  --space-0:  0px;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Border radius */
  --radius-xs:   4px;    /* tooltips, micro */
  --radius-sm:   8px;    /* inputs, menu items */
  --radius-md:   12px;   /* metric cards, small cards */
  --radius-lg:   16px;   /* glass cards */
  --radius-xl:   20px;   /* large cards */
  --radius-2xl:  24px;   /* dashboard tiles (live app) */
  --radius-avatar: 14px; /* avatars, icon wraps */
  --radius-pill: 9999px; /* buttons, badges, pills */

  /* Layout */
  --nav-h:           64px;   /* landing navbar */
  --topbar-h:        72px;   /* app topbar */
  --sidebar-w:       280px;  /* app sidebar */
  --max-app:         1600px; /* app content max */
  --max-container:   1280px; /* landing global */
  --max-section:     1200px; /* features */
  --max-section-md:  1100px; /* testimonials, pricing */
  --max-section-sm:  900px;  /* how it works */
  --max-section-xs:  720px;  /* integrations, faq */
  --max-cta:         680px;  /* CTA block */
  --card-padding:    24px;
  --grid-gap:        20px;
  --section-gap:     24px;
}