/* ============================================================
   SPACING, LAYOUT & RADII
   The portal is built on a centered 1280px column with
   responsive gutters. Pills are fully rounded (999px); cards
   and menus use a small radius scale.
   ============================================================ */

:root {
  /* ---- Layout ---- */
  --content-max: 1280px;     /* centered content column cap */
  --content-gutter: 48px;    /* desktop side gutter */
  --content-gutter-sm: 16px; /* mobile side gutter */

  /* ---- Spacing scale (8px base, matching the app's MUI rhythm) ---- */
  --space-0: 0;
  --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;

  /* Semantic spacing */
  --gap-tight: 8px;     /* icon + text */
  --gap-standard: 16px; /* element spacing */
  --gap-section: 24px;  /* between sections */
  --gap-large: 32px;    /* major dividers */
  --pad-card: 24px;     /* card / panel padding */
  --pad-drawer: 20px;   /* drawer header + body */

  /* ---- Radii ---- */
  --radius-xs: 4px;     /* chips, micro-tags */
  --radius-sm: 8px;     /* inputs, MUI buttons, accent bars */
  --radius-md: 12px;    /* cards, dialogs */
  --radius-lg: 24px;    /* glass menu surfaces */
  --radius-pill: 999px; /* the signature pill button */

  /* ---- Control geometry ---- */
  --control-h: 31px;    /* pill button / segmented control height */
  --accent-bar-w: 4px;  /* vault accent bar width */
}