/*
 * Design System - Spacing Scale
 *
 * A consistent spacing scale using CSS custom properties.
 * Base unit: 4px (0.25rem at 16px root font-size)
 *
 * Usage examples:
 *   padding: var(--space-4);           // 16px
 *   margin-bottom: var(--space-6);     // 24px
 *   gap: var(--space-3);               // 12px
 */

:root {
  /* ============================================
   * SPACING SCALE
   * Based on 4px (0.25rem) base unit
   * ============================================ */

  /* Micro spacing - for tight UI elements */
  --space-0: 0;                    /* 0px */
  --space-px: 1px;                 /* 1px - for borders and fine adjustments */
  --space-0-5: 0.125rem;           /* 2px */
  --space-1: 0.25rem;              /* 4px - base unit */

  /* Small spacing - for compact elements, icons, badges */
  --space-1-5: 0.375rem;           /* 6px */
  --space-2: 0.5rem;               /* 8px */
  --space-2-5: 0.625rem;           /* 10px */
  --space-3: 0.75rem;              /* 12px */

  /* Medium spacing - for standard component padding, gaps */
  --space-3-5: 0.875rem;           /* 14px */
  --space-4: 1rem;                 /* 16px */
  --space-5: 1.25rem;              /* 20px */
  --space-6: 1.5rem;               /* 24px */

  /* Large spacing - for section padding, large gaps */
  --space-7: 1.75rem;              /* 28px */
  --space-8: 2rem;                 /* 32px */
  --space-9: 2.25rem;              /* 36px */
  --space-10: 2.5rem;              /* 40px */

  /* Extra large spacing - for page margins, major sections */
  --space-11: 2.75rem;             /* 44px */
  --space-12: 3rem;                /* 48px */
  --space-14: 3.5rem;              /* 56px */
  --space-16: 4rem;                /* 64px */

  /* XXL spacing - for hero sections, major page areas */
  --space-20: 5rem;                /* 80px */
  --space-24: 6rem;                /* 96px */
  --space-28: 7rem;                /* 112px */
  --space-32: 8rem;                /* 128px */

  /* ============================================
   * SEMANTIC SPACING ALIASES
   * Use these for consistent component spacing
   * ============================================ */

  /* Component internal spacing */
  --space-component-padding-xs: var(--space-1-5);   /* 6px - tight padding */
  --space-component-padding-sm: var(--space-2-5);   /* 10px - small padding */
  --space-component-padding: var(--space-3);        /* 12px - default padding */
  --space-component-padding-lg: var(--space-4);     /* 16px - large padding */

  /* Gap between elements */
  --space-gap-xs: var(--space-1);      /* 4px - very tight */
  --space-gap-sm: var(--space-1-5);    /* 6px - tight */
  --space-gap: var(--space-3);         /* 12px - default gap */
  --space-gap-lg: var(--space-4);      /* 16px - spacious */
  --space-gap-xl: var(--space-6);      /* 24px - very spacious */

  /* Stack spacing (vertical rhythm) */
  --space-stack-xs: var(--space-2);    /* 8px */
  --space-stack-sm: var(--space-3);    /* 12px */
  --space-stack: var(--space-4);       /* 16px */
  --space-stack-lg: var(--space-6);    /* 24px */
  --space-stack-xl: var(--space-8);    /* 32px */

  /* Inline spacing (horizontal) */
  --space-inline-xs: var(--space-1);   /* 4px */
  --space-inline-sm: var(--space-2);   /* 8px */
  --space-inline: var(--space-3);      /* 12px */
  --space-inline-lg: var(--space-4);   /* 16px */

  /* Section/Container spacing */
  --space-section-sm: var(--space-6);  /* 24px */
  --space-section: var(--space-8);     /* 32px */
  --space-section-lg: var(--space-12); /* 48px */
  --space-section-xl: var(--space-16); /* 64px */

  /* Page margins */
  --space-page-margin: var(--space-8); /* 32px */
  --space-page-margin-mobile: var(--space-4); /* 16px */

  /* Form field spacing */
  --space-form-gap: var(--space-4);           /* 16px - between form fields */
  --space-form-label-gap: var(--space-1-5);   /* 6px - between label and input */
  --space-form-input-padding: var(--space-2-5); /* 10px - input internal padding */
}

/* ============================================
 * UTILITY CLASSES (Optional)
 * These can be applied directly to elements
 * ============================================ */

/* Margin utilities */
.m-0 { margin: var(--space-0); }
.m-1 { margin: var(--space-1); }
.m-2 { margin: var(--space-2); }
.m-3 { margin: var(--space-3); }
.m-4 { margin: var(--space-4); }
.m-6 { margin: var(--space-6); }
.m-8 { margin: var(--space-8); }

.mt-0 { margin-top: var(--space-0); }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }

.mb-0 { margin-bottom: var(--space-0); }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }

.ml-0 { margin-left: var(--space-0); }
.ml-1 { margin-left: var(--space-1); }
.ml-2 { margin-left: var(--space-2); }
.ml-3 { margin-left: var(--space-3); }
.ml-4 { margin-left: var(--space-4); }

.mr-0 { margin-right: var(--space-0); }
.mr-1 { margin-right: var(--space-1); }
.mr-2 { margin-right: var(--space-2); }
.mr-3 { margin-right: var(--space-3); }
.mr-4 { margin-right: var(--space-4); }

/* Padding utilities */
.p-0 { padding: var(--space-0); }
.p-1 { padding: var(--space-1); }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-6 { padding: var(--space-6); }
.p-8 { padding: var(--space-8); }

.pt-0 { padding-top: var(--space-0); }
.pt-1 { padding-top: var(--space-1); }
.pt-2 { padding-top: var(--space-2); }
.pt-3 { padding-top: var(--space-3); }
.pt-4 { padding-top: var(--space-4); }
.pt-6 { padding-top: var(--space-6); }
.pt-8 { padding-top: var(--space-8); }

.pb-0 { padding-bottom: var(--space-0); }
.pb-1 { padding-bottom: var(--space-1); }
.pb-2 { padding-bottom: var(--space-2); }
.pb-3 { padding-bottom: var(--space-3); }
.pb-4 { padding-bottom: var(--space-4); }
.pb-6 { padding-bottom: var(--space-6); }
.pb-8 { padding-bottom: var(--space-8); }

.pl-0 { padding-left: var(--space-0); }
.pl-1 { padding-left: var(--space-1); }
.pl-2 { padding-left: var(--space-2); }
.pl-3 { padding-left: var(--space-3); }
.pl-4 { padding-left: var(--space-4); }

.pr-0 { padding-right: var(--space-0); }
.pr-1 { padding-right: var(--space-1); }
.pr-2 { padding-right: var(--space-2); }
.pr-3 { padding-right: var(--space-3); }
.pr-4 { padding-right: var(--space-4); }

/* Horizontal padding (px) */
.px-0 { padding-left: var(--space-0); padding-right: var(--space-0); }
.px-1 { padding-left: var(--space-1); padding-right: var(--space-1); }
.px-2 { padding-left: var(--space-2); padding-right: var(--space-2); }
.px-3 { padding-left: var(--space-3); padding-right: var(--space-3); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }

/* Vertical padding (py) */
.py-0 { padding-top: var(--space-0); padding-bottom: var(--space-0); }
.py-1 { padding-top: var(--space-1); padding-bottom: var(--space-1); }
.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }

/* Gap utilities for flexbox/grid */
.gap-0 { gap: var(--space-0); }
.gap-1 { gap: var(--space-1); }
.gap-1-5 { gap: var(--space-1-5); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }