/* ─────────────────────────────────────────
   Cactus Company — Spacing & Radius Tokens
   ─────────────────────────────────────────
   Base unit: 4px. The app uses a tight,
   mobile-first grid where 4px increments
   keep layouts precise. Semantic aliases
   separate component-level vs layout-level
   spacing concerns.
───────────────────────────────────────── */
:root {
  /* ── Raw Scale ────────────────────────── */
  --space-0:    0;
  --space-px:   1px;
  --space-0-5:  0.125rem;  /* 2px  */
  --space-1:    0.25rem;   /* 4px  */
  --space-1-5:  0.375rem;  /* 6px  */
  --space-2:    0.5rem;    /* 8px  */
  --space-2-5:  0.625rem;  /* 10px */
  --space-3:    0.75rem;   /* 12px */
  --space-3-5:  0.875rem;  /* 14px */
  --space-4:    1rem;      /* 16px */
  --space-5:    1.25rem;   /* 20px */
  --space-6:    1.5rem;    /* 24px */
  --space-7:    1.75rem;   /* 28px */
  --space-8:    2rem;      /* 32px */
  --space-10:   2.5rem;    /* 40px */
  --space-12:   3rem;      /* 48px */
  --space-14:   3.5rem;    /* 56px */
  --space-16:   4rem;      /* 64px */
  --space-20:   5rem;      /* 80px */
  --space-24:   6rem;      /* 96px */
  --space-32:   8rem;      /* 128px */

  /* ── Component Spacing ────────────────── */
  --space-comp-xs: var(--space-2);    /* 8px  */
  --space-comp-sm: var(--space-3);    /* 12px */
  --space-comp-md: var(--space-4);    /* 16px */
  --space-comp-lg: var(--space-6);    /* 24px */
  --space-comp-xl: var(--space-8);    /* 32px */

  /* ── Layout Spacing ───────────────────── */
  --space-layout-sm: var(--space-4);  /* 16px */
  --space-layout-md: var(--space-6);  /* 24px */
  --space-layout-lg: var(--space-8);  /* 32px */
  --space-layout-xl: var(--space-12); /* 48px */

  /* ── Border Radius ────────────────────── */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  20px;
  --radius-3xl:  28px;
  --radius-full: 9999px;

  /* Semantic radius */
  --radius-button: var(--radius-full);  /* Pill-shaped buttons */
  --radius-card:   var(--radius-xl);    /* 16px rounded cards */
  --radius-input:  var(--radius-lg);    /* 12px input fields */
  --radius-badge:  var(--radius-full);  /* Pill badges */
  --radius-avatar: var(--radius-full);  /* Circle avatars */
  --radius-modal:  var(--radius-2xl);   /* Modal sheets */
}