/**
 * Spacing & layout tokens — Design system grid, container widths, section padding, gap scale
 * Typography centered and measured in relative units where appropriate
 */

:root {
  /* === Spacing scale (rem units, based on 16px root) === */
  --spacing-0: 0;
  --spacing-1: 0.25rem; /* 4px  */
  --spacing-2: 0.5rem; /* 8px  */
  --spacing-3: 0.75rem; /* 12px */
  --spacing-4: 1rem; /* 16px */
  --spacing-5: 1.25rem; /* 20px */
  --spacing-6: 1.5rem; /* 24px */
  --spacing-7: 2rem; /* 32px */
  --spacing-8: 3rem; /* 48px */
  --spacing-9: 5rem; /* 80px */
  --spacing-10: 8rem; /* 128px */
  --spacing-11: 12rem; /* 192px */

  /* === Container max-widths === */
  --container-narrow: 38rem; /* ~608px */
  --container-narrow-lg: 42rem; /* ~672px */
  --container-narrow-xl: 48rem; /* ~768px */
  --container-wide: 56rem; /* ~896px */
  --container-max: 80rem; /* ~1280px (design max width) */

  /* === Section padding === */
  --section-py: var(--spacing-16); /* vertical sections */
  --section-px: var(--spacing-8); /* horizontal sections */
  --section-py-sm: var(--spacing-8);
  --section-py-lg: var(--spacing-20);

  /* === Grid gaps === */
  --grid-gap-xs: var(--spacing-2);
  --grid-gap-sm: var(--spacing-4);
  --grid-gap-md: var(--spacing-6);
  --grid-gap-lg: var(--spacing-8);
  --grid-gap-xl: var(--spacing-12);

  /* === Miscellaneous === */
  --sidebar-width: 16rem;
  --header-height: 4rem;
  --header-height-mobile: 3.5rem;
  --nav-width: 14rem;

  /* === Z-index layers (same as Tailwind default) === */
  --z-index-hide: -1;
  --z-index-auto: auto;
  --z-index-base: 0;
  --z-index-docked: 10;
  --z-index-dropdown: 1000;
  --z-index-sticky: 1020;
  --z-index-banner: 1030;
  --z-index-overlay: 1040;
  --z-index-modal: 1050;
  --z-index-popover: 1060;
  --z-index-snackbar: 1070;
  --z-index-toast: 1080;
  --z-index-max: 9999;

  /* === Breakpoint values === */
  --breakpoint-xs: 480px;
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
}

/* === Fluid margins/padding with responsive breakpoints === */
:root {
  /* === Responsive horizontal padding === */
  --container-px: 1rem;
  --px-section: clamp(1rem, 2.5vw, 4rem);

  /* === Responsive vertical padding === */
  --py-section: clamp(2rem, 5vh, 6rem);

  /* === Component margins === */
  --component-spacing: var(--spacing-8);
  --component-spacing-lg: var(--spacing-12);
  --component-spacing-sm: var(--spacing-4);
}

@media (width >= 768px) {
  :root {
    --container-px: 1.5rem;
  }
}

@media (width >= 1024px) {
  :root {
    --container-px: 2rem;
  }
}

/**
 * === Legacy spacing aliases (compatibility bridge) ===
 * Maps the earlier `--space-*` scale used across components onto the current
 * `--spacing-*` scale so existing component styles resolve correctly.
 */
:root {
  --space-xs: var(--spacing-2); /* 8px  */
  --space-sm: var(--spacing-3); /* 12px */
  --space-md: var(--spacing-4); /* 16px */
  --space-lg: var(--spacing-6); /* 24px */
  --space-xl: var(--spacing-7); /* 32px */
  --space-2xl: var(--spacing-8); /* 48px */
  --space-3xl: var(--spacing-9); /* 80px */
}