/*
 * JDS — Layout & spacing semantic tokens.
 *
 * Layer 2 of 3 (primitive → semantic → utility) — the spacing/layout
 * counterpart to jds-semantic-light.css/dark.css (which cover colour).
 * New (2026-07-24) — this is Figma's "Semantic" variable collection
 * (62 vars), which existed in the file all along but had never been
 * exported; only its breakpoint/* values had separately made it into
 * jds-root.css (as --jds-breakpoint-*, kept there — unchanged, not
 * duplicated below). Everything else in this collection is here.
 *
 * All values alias primitives in jds-root.css (--jds-spacer-*,
 * --jds-dimension-*, --jds-border-width-*, --jds-radius-*) exactly
 * as Figma's own variable aliases do — same primitive→semantic pattern
 * already used for colour.
 *
 * The per-breakpoint GRID definitions (columns/gutter/margin per shell
 * arrangement) are Figma grid STYLES, not variables — CSS has no native
 * equivalent to bind them to. That data is already documented in prose in
 * docs/layout.md §1 ("Margins — from the file's grid styles"); not
 * duplicated here as CSS custom properties since a grid style is applied
 * per-frame, not consumed as a single value the way a token is.
 */

:root {
  /* ---- Text / container widths ---- */
  --jds-text-max-width: var(--jds-dimension-864);
  --jds-container-max-width-md: var(--jds-dimension-768);
  --jds-container-max-width-lg: var(--jds-dimension-888);
  --jds-container-max-width-xl: var(--jds-dimension-1168);
  --jds-container-max-width-2xl: var(--jds-dimension-1312);
  --jds-container-max-width-3xl: var(--jds-dimension-1440);

  /* ---- Gap scale (t-shirt sizes over the spacer primitive) ---- */
  --jds-gap-none: var(--jds-spacer-0);
  --jds-gap-2xs: var(--jds-spacer-2);
  --jds-gap-xs: var(--jds-spacer-3);
  --jds-gap-sm: var(--jds-spacer-4);
  --jds-gap-md: var(--jds-spacer-5);
  --jds-gap-lg: var(--jds-spacer-6);
  --jds-gap-xl: var(--jds-spacer-7);
  --jds-gap-2xl: var(--jds-spacer-8);
  --jds-gap-3xl: var(--jds-spacer-9);
  --jds-gap-4xl: var(--jds-spacer-10);

  /* ---- Padding scale ---- */
  --jds-padding-none: var(--jds-spacer-0);
  --jds-padding-3xs: var(--jds-spacer-1);
  --jds-padding-2xs: var(--jds-spacer-2);
  --jds-padding-xs: var(--jds-spacer-3);
  --jds-padding-sm: var(--jds-spacer-4);
  --jds-padding-md: var(--jds-spacer-5);
  --jds-padding-lg: var(--jds-spacer-6);
  --jds-padding-xl: var(--jds-spacer-7);
  --jds-padding-2xl: var(--jds-spacer-8);
  --jds-padding-3xl: var(--jds-spacer-9);
  --jds-padding-4xl: var(--jds-spacer-10);
  --jds-padding-5xl: var(--jds-spacer-11);

  /* ---- Margin scale (identical values to padding — kept as its own
     named scale because Figma exposes it separately) ---- */
  --jds-margin-none: var(--jds-spacer-0);
  --jds-margin-3xs: var(--jds-spacer-1);
  --jds-margin-2xs: var(--jds-spacer-2);
  --jds-margin-xs: var(--jds-spacer-3);
  --jds-margin-sm: var(--jds-spacer-4);
  --jds-margin-md: var(--jds-spacer-5);
  --jds-margin-lg: var(--jds-spacer-6);
  --jds-margin-xl: var(--jds-spacer-7);
  --jds-margin-2xl: var(--jds-spacer-8);
  --jds-margin-3xl: var(--jds-spacer-9);
  --jds-margin-4xl: var(--jds-spacer-10);
  --jds-margin-5xl: var(--jds-spacer-11);

  /* ---- Form control layout ---- */
  --jds-form-border-width-default: var(--jds-border-width-1);
  --jds-form-border-width-emphasis: var(--jds-border-width-2);
  --jds-form-padding-x: var(--jds-padding-md);
  --jds-form-padding-y: var(--jds-padding-sm);
  --jds-form-gap: var(--jds-gap-xs);
  --jds-form-gap-alt: var(--jds-gap-sm);
  --jds-form-group-gap: var(--jds-gap-xl);
  --jds-form-input-label-gap: var(--jds-gap-2xs);
  --jds-form-feedback-gap: var(--jds-gap-2xs);
  --jds-form-border-radius: var(--jds-radius-md);
}