/* Neutral layout and geometry contract. */

:root {
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  --radius-structure: 0;
  --radius-tag: 0.125rem;
  --radius-control: 0.25rem;
  --radius-overlay: 0.5rem;
  --radius-capsule: 999px;

  --rule-default: 1px;
  --rule-emphasis: 2px;
  --focus-width: 2px;
  --focus-offset: 2px;

  --control-height-dense: 1.75rem;
  --control-height-compact: 2rem;
  --control-height-standard: 2.25rem;
  --control-height-touch: 2.75rem;
  --control-height-prominent: 3rem;

  --row-height-dense: 2rem;
  --row-height-compact: 2.25rem;
  --row-height-standard: 2.75rem;
  --row-height-touch: 3rem;

  --target-pointer-min: 2rem;
  --target-touch-min: 2.75rem;

  --page-columns: 4;
  --page-inset: 1rem;
  --grid-gutter: 1rem;
  --content-max-brand: 80rem;
  --content-max-product: 100rem;
  --sidebar-width: 15rem;
  --inspector-width: 20rem;
  --main-pane-min: 30rem;

  --control-height: var(--control-height-standard);
  --row-height: var(--row-height-standard);
  --component-padding: var(--space-4);
}

@media (min-width: 48rem) {
  :root {
    --page-columns: 8;
    --page-inset: 1.5rem;
    --grid-gutter: 1.5rem;
  }
}

@media (min-width: 75rem) {
  :root {
    --page-columns: 12;
    --page-inset: 2rem;
  }
}

@media (min-width: 100rem) {
  :root {
    --page-inset: 3rem;
  }
}

[data-density="dense"] {
  --control-height: var(--control-height-dense);
  --row-height: var(--row-height-dense);
  --component-padding: var(--space-3);
}

[data-density="compact"] {
  --control-height: var(--control-height-compact);
  --row-height: var(--row-height-compact);
  --component-padding: var(--space-3);
}

[data-density="standard"] {
  --control-height: var(--control-height-standard);
  --row-height: var(--row-height-standard);
  --component-padding: var(--space-4);
}

[data-density="touch"] {
  --control-height: var(--control-height-touch);
  --row-height: var(--row-height-touch);
  --component-padding: var(--space-4);
}

.neutral-container {
  width: min(100%, var(--content-max-brand));
  margin-inline: auto;
  padding-inline: var(--page-inset);
}

.neutral-grid {
  display: grid;
  grid-template-columns: repeat(var(--page-columns), minmax(0, 1fr));
  gap: var(--grid-gutter);
}

.neutral-control {
  min-height: var(--control-height);
  border-radius: var(--radius-control);
}

.neutral-row {
  min-height: var(--row-height);
}

.neutral-focusable:focus-visible {
  outline: var(--focus-width) solid var(--color-cobalt);
  outline-offset: var(--focus-offset);
}

@media (pointer: coarse) {
  .neutral-control {
    min-width: var(--target-touch-min);
    min-height: var(--target-touch-min);
  }
}