/* ========================================
   薪连薪 Design System — Spacing & Layout
   受控重构：统一宽版心体系
   ======================================== */

:root {
  /* ── Spacing Scale (4px base) ── */
  --space-0:  0;
  --space-1:  0.25rem;  /* 4px  */
  --space-2:  0.5rem;   /* 8px  */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-5:  1.25rem;  /* 20px */
  --space-6:  1.5rem;   /* 24px */
  --space-8:  2rem;     /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */
  --space-32: 8rem;     /* 128px */

  /* ── Container System (wide, centered, unified) ── */
  /* 1920px: ~1360-1460px | 1728px: ~1280-1360px | 1440px: ~1120-1200px */
  /* 1366px: ~1060-1140px | 1280px: ~1000-1080px */
  --container-wide: min(76vw, 1440px);
  --container-main: min(72vw, 1280px);
  --container-content: min(68vw, 1180px);
  --container-detail: min(100%, 1120px);
  --container-reading: min(100%, 860px);
  --container-padding-inline: clamp(24px, 2.5vw, 48px);

  /* ── Section Padding ── */
  --section-padding-y: clamp(48px, 5vw, 88px);
  --section-padding-y-sm: clamp(40px, 4vw, 72px);
  --section-padding-x: var(--container-padding-inline);

  /* ── Inner Hero Spacing Tokens (统一内页Hero间距) ── */
  --header-height-desktop: 76px;
  --inner-hero-padding-top: clamp(124px, 9vw, 148px);
  --inner-hero-padding-bottom: clamp(56px, 5vw, 88px);
  --hero-to-section-gap: clamp(64px, 6vw, 96px);
  --section-title-gap: clamp(28px, 2.5vw, 44px);

  /* ── Grid ── */
  --grid-columns: 12;
  --grid-gap: clamp(20px, 1.5vw, 32px);
  --grid-gap-sm: clamp(16px, 1vw, 24px);

  /* ── Border Radius ── */
  --radius-sm:  6px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.06);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.08);
  --shadow-xl: 0 12px 48px rgba(0,0,0,0.10);

  /* ── Z-Index Scale ── */
  --z-base: 0;
  --z-dropdown: 10;
  --z-sticky: 20;
  --z-header: 50;
  --z-overlay: 80;
  --z-modal: 100;
  --z-toast: 110;
}

/* ── Container: Unified site container ── */
.site-container {
  width: 100%;
  max-width: var(--container-main);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding-inline);
  padding-right: var(--container-padding-inline);
}

.site-container--wide {
  max-width: var(--container-wide);
}

.site-container--reading {
  max-width: var(--container-reading);
}

.site-container--content {
  max-width: var(--container-content);
}

.site-container--detail {
  max-width: var(--container-detail);
}

/* Legacy container aliases */
.container {
  width: 100%;
  max-width: var(--container-main);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding-inline);
  padding-right: var(--container-padding-inline);
}

.container--narrow {
  max-width: var(--container-reading);
}

.container--wide {
  max-width: var(--container-wide);
}

.container--content {
  max-width: var(--container-content);
}

.container--detail {
  max-width: var(--container-detail);
}

/* ── Full-width section wrapper ── */
.section {
  padding-top: var(--section-padding-y);
  padding-bottom: var(--section-padding-y);
}

.section--sm {
  padding-top: var(--section-padding-y-sm);
  padding-bottom: var(--section-padding-y-sm);
}

.section--flush {
  padding-top: 0;
  padding-bottom: 0;
}

/* ── Grid ── */
.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: var(--grid-gap);
}

.grid--2 { grid-template-columns: repeat(2, 1fr); min-width: 0; }
.grid--3 { grid-template-columns: repeat(3, 1fr); min-width: 0; }
.grid--4 { grid-template-columns: repeat(4, 1fr); min-width: 0; }
.grid--6 { grid-template-columns: repeat(6, 1fr); min-width: 0; }

.grid--2 > *, .grid--3 > *, .grid--4 > *, .grid--6 > * {
  min-width: 0;
}

/* ── Spacing Utilities ── */
.m-0  { margin: var(--space-0); }
.m-1  { margin: var(--space-1); }
.m-2  { margin: var(--space-2); }
.m-4  { margin: var(--space-4); }
.m-6  { margin: var(--space-6); }
.m-8  { margin: var(--space-8); }
.m-10 { margin: var(--space-10); }
.m-12 { margin: var(--space-12); }
.m-16 { margin: var(--space-16); }

.p-0  { padding: var(--space-0); }
.p-1  { padding: var(--space-1); }
.p-2  { padding: var(--space-2); }
.p-4  { padding: var(--space-4); }
.p-6  { padding: var(--space-6); }
.p-8  { padding: var(--space-8); }
.p-10 { padding: var(--space-10); }
.p-12 { padding: var(--space-12); }
.p-16 { padding: var(--space-16); }

/* ── Gap Utilities ── */
.gap-2  { gap: var(--space-2); }
.gap-4  { gap: var(--space-4); }
.gap-6  { gap: var(--space-6); }
.gap-8  { gap: var(--space-8); }
.gap-10 { gap: var(--space-10); }
.gap-12 { gap: var(--space-12); }

/* ── Responsive ── */
@media (max-width: 1024px) {
  :root {
    --container-padding-inline: clamp(24px, 4vw, 40px);
  }

  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  :root {
    --section-padding-y: clamp(40px, 7vw, 64px);
    --container-padding-inline: 24px;
  }

  .grid--2,
  .grid--3,
  .grid--4,
  .grid--6 {
    grid-template-columns: 1fr;
  }
}