/* HGO Spacing System */
:root {
  /* Base unit: 4px */
  --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: 1.75rem;  /* 28px */
  --spacing-8: 2rem;     /* 32px */
  --spacing-9: 2.25rem;  /* 36px */
  --spacing-10: 2.5rem;  /* 40px */
  --spacing-11: 2.75rem; /* 44px */
  --spacing-12: 3rem;    /* 48px */
  --spacing-14: 3.5rem;  /* 56px */
  --spacing-16: 4rem;    /* 64px */
  --spacing-20: 5rem;    /* 80px */
  --spacing-24: 6rem;    /* 96px */
  --spacing-28: 7rem;    /* 112px */
  --spacing-32: 8rem;    /* 128px */
  --spacing-36: 9rem;    /* 144px */
  --spacing-40: 10rem;   /* 160px */
  --spacing-44: 11rem;   /* 176px */
  --spacing-48: 12rem;   /* 192px */
  --spacing-52: 13rem;   /* 208px */
  --spacing-56: 14rem;   /* 224px */
  --spacing-60: 15rem;   /* 240px */
  --spacing-64: 16rem;   /* 256px */
  --spacing-72: 18rem;   /* 288px */
  --spacing-80: 20rem;   /* 320px */
  --spacing-96: 24rem;   /* 384px */

  /* Layout container widths */
  --container-xs: 20rem;    /* 320px */
  --container-sm: 24rem;    /* 384px */
  --container-md: 28rem;    /* 448px */
  --container-lg: 32rem;    /* 512px */
  --container-xl: 36rem;    /* 576px */
  --container-2xl: 42rem;   /* 672px */
  --container-3xl: 48rem;   /* 768px */
  --container-4xl: 56rem;   /* 896px */
  --container-5xl: 64rem;   /* 1024px */
  --container-6xl: 72rem;   /* 1152px */
  --container-7xl: 80rem;   /* 1280px */
  --container-full: 100%;

  /* Grid gap sizes */
  --gap-xs: var(--spacing-2);    /* 8px */
  --gap-sm: var(--spacing-3);    /* 12px */
  --gap-md: var(--spacing-4);    /* 16px */
  --gap-lg: var(--spacing-6);    /* 24px */
  --gap-xl: var(--spacing-8);    /* 32px */
  --gap-2xl: var(--spacing-12);  /* 48px */

  /* Component spacing */
  --component-padding-xs: var(--spacing-2) var(--spacing-3);
  --component-padding-sm: var(--spacing-3) var(--spacing-4);
  --component-padding-md: var(--spacing-4) var(--spacing-6);
  --component-padding-lg: var(--spacing-6) var(--spacing-8);
  --component-padding-xl: var(--spacing-8) var(--spacing-10);

  /* Border radius */
  --radius-sm: 0.25rem;    /* 4px */
  --radius-md: 0.5rem;     /* 8px */
  --radius-lg: 0.75rem;    /* 12px */
  --radius-xl: 1rem;       /* 16px */
  --radius-2xl: 1.5rem;    /* 24px */
  --radius-full: 9999px;
}

/* Grid System */
.grid-container {
  display: grid;
  gap: var(--gap-md);
}

.grid-container-xs { gap: var(--gap-xs); }
.grid-container-sm { gap: var(--gap-sm); }
.grid-container-lg { gap: var(--gap-lg); }
.grid-container-xl { gap: var(--gap-xl); }
.grid-container-2xl { gap: var(--gap-2xl); }

/* Responsive grid columns */
@media (min-width: 640px) {
  .grid-cols-sm-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .grid-cols-sm-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-cols-sm-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-cols-sm-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  .grid-cols-md-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .grid-cols-md-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-cols-md-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-cols-md-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .grid-cols-lg-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .grid-cols-lg-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-cols-lg-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-cols-lg-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Section spacing */
.section {
  padding: var(--spacing-16) var(--spacing-6);
}

.section-sm {
  padding: var(--spacing-8) var(--spacing-4);
}

.section-lg {
  padding: var(--spacing-24) var(--spacing-8);
}

/* Content spacing */
.content-spacing > * + * {
  margin-top: var(--spacing-4);
}

.content-spacing-sm > * + * {
  margin-top: var(--spacing-2);
}

.content-spacing-lg > * + * {
  margin-top: var(--spacing-6);
}

.content-spacing-xl > * + * {
  margin-top: var(--spacing-8);
}

/* Card spacing */
.card {
  padding: var(--spacing-6);
  border-radius: var(--radius-xl);
}

.card-sm {
  padding: var(--spacing-4);
  border-radius: var(--radius-lg);
}

.card-lg {
  padding: var(--spacing-8);
  border-radius: var(--radius-xl);
}

/* Flex utilities */
.flex-spacing-xs { gap: var(--spacing-2); }
.flex-spacing-sm { gap: var(--spacing-3); }
.flex-spacing-md { gap: var(--spacing-4); }
.flex-spacing-lg { gap: var(--spacing-6); }
.flex-spacing-xl { gap: var(--spacing-8); }

/* Stack utilities */
.stack { display: flex; flex-direction: column; }
.stack-xs { gap: var(--spacing-2); }
.stack-sm { gap: var(--spacing-3); }
.stack-md { gap: var(--spacing-4); }
.stack-lg { gap: var(--spacing-6); }
.stack-xl { gap: var(--spacing-8); }

/* Consistent component spacing */
.component-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
}

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

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

/* Page layout */
.page-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.page-content {
  flex: 1;
  padding: var(--spacing-6);
  max-width: var(--container-7xl);
  margin: 0 auto;
  width: 100%;
}

.page-header {
  padding: var(--spacing-8) var(--spacing-6);
  border-bottom: 1px solid theme(colors.gray.200);
}

.dark .page-header {
  border-bottom-color: theme(colors.gray.800);
}

/* Responsive spacing utilities */
@media (min-width: 640px) {
  .sm\:section {
    padding: var(--spacing-20) var(--spacing-8);
  }
  
  .sm\:page-content {
    padding: var(--spacing-8);
  }
}

@media (min-width: 1024px) {
  .lg\:section {
    padding: var(--spacing-24) var(--spacing-12);
  }
  
  .lg\:page-content {
    padding: var(--spacing-12);
  }
}