/* =========================================================================
   VELVETCONNECT · SPACING, RADII, LAYOUT TOKENS
   ========================================================================= */

:root {
  /* ---------- Spacing (4px base) ---------- */
  --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;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ---------- Radii ---------- */
  /* The brand is gently rounded: cards & inputs soft, CTAs sharp-ish,
     avatars/badges circular. Gold-framed hero imagery is square-ish. */
  --radius-none: 0;
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;   /* default card / input radius */
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* ---------- Layout ---------- */
  --container-max: 1200px; /* @kind spacing */
  --container-pad: 24px; /* @kind spacing */
  --gutter:        24px; /* @kind spacing */

  /* ---------- Borders ---------- */
  --border-w-hair: 1px; /* @kind spacing */
  --border-w-gold: 1px; /* @kind spacing */

  /* ---------- Z-index ---------- */
  --z-base:    0; /* @kind other */
  --z-sticky:  100; /* @kind other */
  --z-overlay: 800; /* @kind other */
  --z-modal:   900; /* @kind other */
  --z-toast:   1000; /* @kind other */
}