/* ─────────────────────────────────────────────
   LOVI.ai — Spacing & Layout Tokens
   ───────────────────────────────────────────── */
:root {
  /* ── Base Scale (4px unit) ── */
  --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;
  --space-32: 128px;
  --space-40: 160px;

  /* ── Semantic Spacing ── */
  --gap-xs:   var(--space-2);
  --gap-sm:   var(--space-4);
  --gap-md:   var(--space-6);
  --gap-lg:   var(--space-10);
  --gap-xl:   var(--space-16);
  --gap-2xl:  var(--space-24);

  --section-gap:   var(--space-24);       /* between major page sections */
  --container-pad: var(--space-12);       /* inner page padding */

  /* ── Border Radius ── */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   18px;    /* Button radius (from Figma) */
  --radius-xl:   24px;
  --radius-full: 9999px;  /* Pill / badge */

  /* ── Elevation / Shadow ── */
  --shadow-sm:   0 2px 8px rgba(59,128,244,0.12);
  --shadow-md:   0 4px 20px rgba(59,128,244,0.20);
  --shadow-lg:   0 8px 32px rgba(59,128,244,0.28);
  --shadow-glow: 0 0 20px rgba(59,128,244,0.60);

  /* ── Layout ── */
  --container-max:  1920px;
  --content-max:    1280px;
  --content-narrow: 800px;

  /* ── Z-Index ── */
  --z-base:    0;    /* @kind other */
  --z-raised:  10;   /* @kind other */
  --z-overlay: 100;  /* @kind other */
  --z-modal:   1000; /* @kind other */
  --z-nav:     2000; /* @kind other */
}