/* ============================================================
   SPACING, RADII, SIZING — DesignCode UI "Astrolog"
   ------------------------------------------------------------
   A 4px base grid. Token names match the Figma "size-N" scale
   where N is the multiple of 4 (size-2 = 8px). Half steps exist
   for the 2px / 6px / 10px values used by buttons & containers.
   ============================================================ */

:root {
  /* ---- Spacing scale (px) ---- */
  --space-half: 2px;
  --space-1: 4px;
  --space-1half: 6px;
  --space-2: 8px;
  --space-2half: 10px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 36px;
  --space-10: 40px;
  --space-11: 44px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-28: 112px;
  --space-32: 128px;
  --space-40: 160px;
  --space-48: 192px;
  --space-56: 224px;
  --space-64: 256px;

  /* ---- Corner radii ---- */
  --radius-xs: 5px;     /* tiny tags, swatches */
  --radius-sm: 8px;     /* buttons (small) */
  --radius-md: 10px;    /* containers / cards (the kit default) */
  --radius-lg: 16px;    /* large cards, modals */
  --radius-xl: 20px;    /* hero panels */
  --radius-2xl: 24px;
  --radius-full: 999px; /* pills, circle buttons, avatars */

  /* ---- Component spacing (semantic) ---- */
  --container-padding: var(--space-2half);       /* 10 */
  --container-padding-large: var(--space-5);     /* 20 */
  --container-gap: var(--space-2half);           /* 10 */
  --container-radius: var(--radius-md);          /* 10 */

  --button-radius: var(--radius-sm);             /* 8 */
  --button-gap: var(--space-2);                  /* 8 */
  --button-padding-x: var(--space-3);            /* 12 */
  --button-padding-y: var(--space-1);            /* 4 */
  --button-height-sm: 28px;
  --button-height-md: 32px;
  --button-height-lg: 36px;
  --button-height-xl: 44px;
  --button-icon-size: 16px;

  /* Content rhythm */
  --content-gap-small: 0px;
  --content-gap-medium: var(--space-1);
  --content-gap-large: var(--space-3);
  --content-gap-xl: var(--space-5);

  /* ---- Screen / layout ---- */
  --screen-width-desktop: 1440px;
  --screen-width-tablet: 768px;
  --screen-width-mobile: 375px;
  --screen-padding-x: var(--space-24);           /* 96 desktop */
  --screen-padding-y: var(--space-24);
  --screen-content-gap: var(--space-8);          /* 32 */
  --screen-content-gap-large: var(--space-10);   /* 40 */

  /* ---- Hit target ---- */
  --hit-target-min: 44px;
}