:root {
  --glaze-space-2: 2px;
  --glaze-space-4: 4px;
  --glaze-space-8: 8px;
  --glaze-space-12: 12px;
  --glaze-space-16: 16px;
  --glaze-space-24: 24px;
  --glaze-space-32: 32px;
  --glaze-space-48: 48px;
  --glaze-space-64: 64px;
  --glaze-space-96: 96px;

  --glaze-gap-control: var(--glaze-space-8);
  --glaze-gap-cluster: var(--glaze-space-12);
  --glaze-gap-content: var(--glaze-space-16);
  --glaze-gap-section: var(--glaze-space-32);
  --glaze-gap-region: var(--glaze-space-48);
  --glaze-gap-page: var(--glaze-space-64);

  --glaze-gutter: 16px;
  --glaze-density: 1;
  --glaze-measure-prose: 72ch;
  --glaze-measure-form: 720px;
  --glaze-measure-standard: 1200px;
  --glaze-measure-wide: 1600px;
  --glaze-target-coarse: 44px;
  --glaze-target-pointer-compact: 32px;
}

@media (min-width: 600px) {
  :root { --glaze-gutter: 24px; }
}

@media (min-width: 1024px) {
  :root { --glaze-gutter: 32px; }
}

@media (min-width: 1600px) {
  :root { --glaze-gutter: 48px; }
}

[data-glaze-density="comfortable"] { --glaze-density: 1; }
[data-glaze-density="compact"] { --glaze-density: .75; }
[data-glaze-density="spacious"] { --glaze-density: 1.25; }

.glaze-page {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding-inline: max(var(--glaze-gutter), env(safe-area-inset-left), env(safe-area-inset-right));
  padding-block-start: env(safe-area-inset-top);
  padding-block-end: env(safe-area-inset-bottom);
  overflow-x: clip;
}

.glaze-container {
  box-sizing: border-box;
  width: min(100%, var(--glaze-measure-standard));
  min-width: 0;
  margin-inline: auto;
}

.glaze-container--prose { max-width: var(--glaze-measure-prose); }
.glaze-container--form { max-width: var(--glaze-measure-form); }
.glaze-container--wide { max-width: var(--glaze-measure-wide); }

.glaze-stack {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: calc(var(--glaze-gap-content) * var(--glaze-density));
}

.glaze-stack--section { gap: calc(var(--glaze-gap-section) * var(--glaze-density)); }
.glaze-stack--region { gap: calc(var(--glaze-gap-region) * var(--glaze-density)); }

.glaze-cluster {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--glaze-gap-cluster) * var(--glaze-density));
}

.glaze-grid {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: calc(var(--glaze-gap-content) * var(--glaze-density));
}

.glaze-touch-target {
  min-width: var(--glaze-target-coarse);
  min-height: var(--glaze-target-coarse);
}

@media (pointer: fine) {
  .glaze-pointer-compact {
    min-width: var(--glaze-target-pointer-compact);
    min-height: var(--glaze-target-pointer-compact);
  }
}

.glaze-scroll-x {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

.glaze-safe-bottom {
  padding-bottom: max(var(--glaze-gap-content), env(safe-area-inset-bottom));
}