/* ============================================================
   xmesh DS · _layout.css — layout token tier (--xm-*).

   Formalizes the geometry that was previously hard-coded across
   components: the two responsive breakpoints, the content reading
   width, and the grid gutter steps. Gutters ALIAS the --s-N ladder
   (no new px) so grid spacing stays on the 4px scale.

   NOTE — breakpoints cannot be consumed by @media. A CSS @media (or
   @container) condition does not read var(), so
   `@media (max-width: var(--xm-breakpoint-sm))` is invalid and
   silently fails. These tokens are the documented SOURCE OF TRUTH
   for the literals that @media blocks repeat (each such site cites
   the token in a comment), and are directly usable wherever var()
   IS allowed — max-width / width / JS getComputedStyle. See
   docs/adr/0001.
   ============================================================ */
:root {
  /* ---------- Breakpoints (reference values — see NOTE) ----------
     Formalizes the only two literals in the tree: 520px (alert
     compact row) and 640px (snackbar / condensed layouts). */
  --xm-breakpoint-sm: 520px;
  --xm-breakpoint-md: 640px;

  /* ---------- Content container max-width ----------
     The comfortable reading column — formalizes the 720px used by
     the chat thread + bubbles. Usable directly in max-width. */
  --xm-container-max: 720px;

  /* ---------- Grid gutters (alias --s-N — no new px) ---------- */
  --xm-gutter-none: 0;
  --xm-gutter-xs: var(--s-1);  /*  4px */
  --xm-gutter-sm: var(--s-2);  /*  8px */
  --xm-gutter-md: var(--s-4);  /* 16px — default grid / stack gap */
  --xm-gutter-lg: var(--s-6);  /* 24px */
  --xm-gutter-xl: var(--s-8);  /* 32px */
}