/* Local Jaytel adaptation requested by Frederik. See foundations/spacing-and-layout.md.
   Reference: design-bites commit 754ddd2934531744e841bf1fd95194b16dc28d21, sections 5/8.
   The reference specifies the 2px/16rem endpoints, eight columns, 16px grid gap,
   full-width centered spans, and 752px/1145px breakpoints. Intermediate spacing,
   padding, width caps, and peer-item spans are documented Along adaptations.
   Identical in light and dark modes. Rem values respect the user's root size.
   This file supplies values, not global resets or component styles. */
:root {
  --space-half: 0.125rem;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --space-64: 16rem;

  --gap-related: var(--space-2);
  --gap-stack: var(--space-4);
  --gap-grid: var(--grid-gap);
  --gap-section: var(--space-8);
  --gap-major: var(--space-12);

  --layout-page-gutter: clamp(var(--space-4), 3vw, var(--space-8));
  --layout-panel-padding: clamp(var(--space-4), 3vw, var(--space-6));
  --content-focused: 40rem;
  --content-workspace: 72rem;
  --content-reading: 65ch;
  --grid-columns: 8;
  --grid-gap: var(--space-4);
  /* Fill the containing region without 100vw scrollbar overflow. */
  --grid-width: 100%;
  --span-centered-xs: 1 / -1;
  --span-centered-sm: 1 / -1;
  --span-centered-med: 1 / -1;
  --span-centered-lrg: 1 / -1;
  --span-centered-full: 1 / -1;

  /* Single flow below tablet. Peer spans are an Along composition. */
  --layout-columns: 1;
  --layout-content-span: var(--span-centered-xs);
  --layout-peer-span: 1 / -1;
}

/* Query thresholds are authored here: CSS var() cannot set media conditions. */
@media (min-width: 752px) {
  :root {
    --layout-columns: var(--grid-columns);
    --layout-content-span: var(--span-centered-med);
    --layout-peer-span: span 4;
  }
}
@media (min-width: 1145px) {
  :root {
    --layout-content-span: var(--span-centered-lrg);
    --layout-peer-span: span 2;
  }
}