/* NEXTRON AI Design System - Spacing Tokens */

:root {
  /* BASE UNIT: 8px */
  --spacing-2xs: 2px;
  --spacing-xs: 4px;
  --spacing-xs-plus: 5px;
  --spacing-sm: 8px;
  --spacing-sm-plus: 10px;
  --spacing-md: 12px;
  --spacing-md-plus: 15px;
  --spacing-base: 16px;
  --spacing-lg: 20px;
  --spacing-lg-plus: 24px;
  --spacing-xl: 32px;
  --spacing-xl-plus: 40px;
  --spacing-2xl: 48px;
  --spacing-3xl: 56px;

  /* SEMANTIC SPACING */
  --padding-button-ghost: var(--spacing-base); /* 16px */
  --padding-button-gold: var(--spacing-lg-plus); /* 24px */
  --padding-card: var(--spacing-lg-plus); /* 24px */
  --padding-section: var(--spacing-2xl) var(--spacing-xl-plus); /* 48px 40px */
  --padding-section-lg: var(--spacing-3xl) var(--spacing-xl-plus); /* 56px 40px */

  --gap-card: var(--spacing-lg-plus); /* 24px */
  --gap-section: var(--spacing-2xl); /* 48px */

  --margin-section: var(--spacing-3xl) 0; /* 56px 0 */

  /* COMPONENT-SPECIFIC */
  --badge-padding: var(--spacing-sm) var(--spacing-base); /* 8px 16px */
  --input-padding: var(--spacing-base) var(--spacing-lg-plus); /* 16px 24px */
  --toggle-padding: var(--spacing-sm); /* 8px */

  /* TOUCH TARGETS */
  --touch-target-min: 48px;
  --touch-target-icon: 44px;

  /* BORDER & RADIUS */
  --border-radius-none: 0px;
  --border-radius-toggle: 20px;
  --border-radius-badge: 2px;
  --border-width-thin: 1px;
  --border-width-thick: 2px;

  /* CONTAINER WIDTHS */
  --container-max-width: 1200px;
  --container-max-width-lg: 1440px;

  /* BREAKPOINTS */
  --breakpoint-mobile: 576px;
  --breakpoint-tablet: 768px;
  --breakpoint-desktop: 1024px;
  --breakpoint-desktop-lg: 1280px;
  --breakpoint-wide: 1440px;
}

/* UTILITY CLASSES FOR SPACING */
.p-2xs {
  padding: var(--spacing-2xs);
}

.p-xs {
  padding: var(--spacing-xs);
}

.p-sm {
  padding: var(--spacing-sm);
}

.p-base {
  padding: var(--spacing-base);
}

.p-lg {
  padding: var(--spacing-lg);
}

.p-xl {
  padding: var(--spacing-xl);
}

.p-2xl {
  padding: var(--spacing-2xl);
}

.p-3xl {
  padding: var(--spacing-3xl);
}

.m-sm {
  margin: var(--spacing-sm);
}

.m-base {
  margin: var(--spacing-base);
}

.m-lg {
  margin: var(--spacing-lg);
}

.m-xl {
  margin: var(--spacing-xl);
}

.m-2xl {
  margin: var(--spacing-2xl);
}

.m-3xl {
  margin: var(--spacing-3xl);
}

.gap-sm {
  gap: var(--spacing-sm);
}

.gap-base {
  gap: var(--spacing-base);
}

.gap-lg {
  gap: var(--spacing-lg);
}

.gap-xl {
  gap: var(--spacing-xl);
}

.gap-2xl {
  gap: var(--spacing-2xl);
}

/* RESPONSIVE PADDING */
@media (max-width: 768px) {
  :root {
    --padding-section: var(--spacing-lg-plus) var(--spacing-base); /* 24px 16px */
  }
}

@media (max-width: 576px) {
  :root {
    --padding-section: var(--spacing-lg) var(--spacing-sm); /* 20px 8px */
  }
}