/**
 * Wooseok space utilities — Inset / Stack / Inline
 * SSOT: docs/design-md/patterns/section-stack.md · wooseok.md §5
 * Prefer gap over sibling margin. Role tokens from wh-tokens.css.
 */
.wh-stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--wh-stack-md, 16px);
}

.wh-stack--tight {
  gap: var(--wh-stack-sm, 12px);
}

.wh-stack--loose {
  gap: var(--wh-stack-xl, 48px);
}

.wh-stack--section {
  gap: var(--wh-stack-lg, 24px);
}

.wh-inline {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wh-inline-sm, 12px);
}

.wh-inline--tight {
  gap: var(--wh-inline-xs, 8px);
}

.wh-inset {
  padding: var(--wh-inset-lg, 24px);
  box-sizing: border-box;
}

.wh-inset--sm {
  padding: var(--wh-inset-sm, 12px);
}

.wh-inset--md {
  padding: var(--wh-inset-md, 16px);
}

.wh-inset--squish {
  padding: var(--wh-inset-squish-sm, 8px 16px);
}

.wh-inset--stretch {
  padding: var(--wh-inset-stretch-sm, 12px 16px);
}

/**
 * Product compact density dial
 * Backend / non-Stay: tighter stack & inset (Stay comfort defaults remain on html.wh-surface-stay).
 * Explicit: html.wh-density-compact
 */
html.wh-density-compact,
html:not(.wh-surface-stay) {
  --wh-inset-sm: 8px;
  --wh-inset-md: 12px;
  --wh-inset-lg: 16px;
  --wh-inset-xl: 20px;
  --wh-inset-squish-sm: 6px 12px;
  --wh-inset-squish-md: 8px 16px;
  --wh-inset-stretch-sm: 10px 14px;
  --wh-stack-xs: 6px;
  --wh-stack-sm: 8px;
  --wh-stack-md: 12px;
  --wh-stack-lg: 16px;
  --wh-stack-xl: 24px;
  --wh-stack-section: 40px;
  --wh-inline-xs: 6px;
  --wh-inline-sm: 8px;
  --wh-inline-md: 12px;
  --wh-gutter: 16px;
}

/* Stay comfort wins when both could apply (consumer) */
html.wh-surface-stay:not(.wh-density-compact) {
  --wh-inset-sm: var(--wh-space-sm, 12px);
  --wh-inset-md: var(--wh-space-md, 16px);
  --wh-inset-lg: var(--wh-space-xl, 24px);
  --wh-inset-xl: var(--wh-space-3xl, 32px);
  --wh-inset-squish-sm: 8px 16px;
  --wh-inset-squish-md: 10px 20px;
  --wh-inset-stretch-sm: 12px 16px;
  --wh-stack-xs: var(--wh-space-xs, 8px);
  --wh-stack-sm: var(--wh-space-sm, 12px);
  --wh-stack-md: var(--wh-space-md, 16px);
  --wh-stack-lg: var(--wh-space-xl, 24px);
  --wh-stack-xl: var(--wh-space-5xl, 48px);
  --wh-stack-section: var(--wh-space-section, 72px);
  --wh-inline-xs: var(--wh-space-xs, 8px);
  --wh-inline-sm: var(--wh-space-sm, 12px);
  --wh-inline-md: var(--wh-space-md, 16px);
  --wh-gutter: var(--wh-space-lg, 20px);
}