/*
 * JDS — what is LEFT here after the move to judiciary-design-system/tokens/:
 * the layout scales Figma's primitives export does not carry (breakpoint,
 * gutter, grid columns) plus the semantic component-token blocks (button,
 * alert, form controls).
 *
 * Everything verified against Figma has moved out, and this file is now the
 * holding pen for what has not been. Two moves so far:
 *   2026-09-09  colour primitives  --> tokens/colors.css
 *               (--jds-grey-* renamed --jds-gray-*, --jds-maroon-* renamed
 *               --jds-primary-*; the semantic sheet jds-semantic-light.css
 *               references the NEW names. Its dark twin did too, and was
 *               deleted 2026-09-14 — nothing applied its class.)
 *   2026-09-14  spacer             --> tokens/spacing.css
 *               radius, border-width --> tokens/border.css
 *               icon-size, dimension --> tokens/sizing.css
 *               opacity            --> tokens/opacity.css
 *               (a pure relocation — all 107 values were already identical to
 *               Figma, so nothing changed value)
 *
 * The three layout families stayed because the export the moves were verified
 * against holds no breakpoint / gutter / column variables at all — they are
 * unverified rather than known-wrong. The component tokens stayed because they
 * are component-level and belong with their components, not in a token folder.
 *
 * Don't hand-edit values here without checking Figma first, or this drifts out
 * of sync.
 */

:root {
  /* ---- Breakpoints ---- */
  --jds-breakpoint-xs: 320px;
  --jds-breakpoint-sm: 512px;
  --jds-breakpoint-md: 768px;
  --jds-breakpoint-lg: 1024px;
  --jds-breakpoint-xl: 1280px;
  --jds-breakpoint-2xl: 1440px;

  /* ---- Gutter (grid) — content-based 3-tier scale, not per-breakpoint; see docs/layout.md §1 ---- */
  --jds-gutter-sm: 16px;
  --jds-gutter-md: 24px;
  --jds-gutter-lg: 32px;

  /* ---- Grid column counts (used with the breakpoint-specific grid styles; see docs/layout.md §1) ---- */
  --jds-column-4: 4;
  --jds-column-8: 8;
  --jds-column-12: 12;

  /* ---- Button (semantic component tokens, sampled from JDS Design System
     component_set 12484:10158, added 2026-08-03 as part of the Phase 1
     Button migration. Reference values only — the semantic role tokens
     in jds-semantic-light.css are what components should consume. ) ---- */
  --jds-btn-radius: 8px;
  --jds-btn-border-width: 1px;
  --jds-btn-focus-width: 2px;
  --jds-btn-label-pad-x: 4px;
  --jds-btn-icon-gap: 4px;

  --jds-btn-xs-height: 32px;
  --jds-btn-xs-pad-x: 12px;
  --jds-btn-xs-min-w: 64px;

  --jds-btn-sm-height: 40px;
  --jds-btn-sm-pad-x: 16px;
  --jds-btn-sm-min-w: 80px;

  --jds-btn-md-height: 48px;
  --jds-btn-md-pad-x: 20px;
  --jds-btn-md-min-w: 96px;

  --jds-btn-lg-height: 56px;
  --jds-btn-lg-pad-x: 24px;
  --jds-btn-lg-min-w: 112px;

  /* ---- Alert (semantic component tokens, sampled from JDS Design System
     component_set 17388:15960 — five variants × three types. Reference
     values only; the semantic role tokens in jds-semantic-light.css
     are what components should consume. Added
     2026-08-04 as part of the Phase 1 Alert migration. ) ---- */
  --jds-alert-border-width: 1px;
  --jds-alert-border-radius: 8px;
  --jds-alert-gap: 12px;                    /* icon <-> content */
  --jds-alert-padding-x: 20px;
  --jds-alert-padding-y: 20px;
  --jds-alert-content-gap: 16px;            /* content <-> action */
  --jds-alert-title-gap: 4px;               /* title <-> description */
  --jds-alert-content-padding-right: 32px;  /* leaves room for close */
  --jds-alert-icon-size: 20px;
  --jds-alert-close-size: 32px;

  /* ---- Form controls (semantic component tokens, sampled from JDS Design System
     Input frame 4825:38 and shared across the Phase 2 form-control set.
     Reference values only — the semantic role tokens in
     jds-semantic-light.css are what components
     should consume. Added 2026-08-04 as part of the Phase 2 Input
     migration. ) ---- */
  --jds-form-radius: 8px;
  --jds-form-border-width-default: 1px;
  --jds-form-border-width-emphasis: 2px;
  --jds-form-focus-width: 2px;
  --jds-form-input-label-gap: 4px;
  --jds-form-feedback-gap: 4px;
  --jds-form-gap: 8px;
  --jds-form-padding-x: 16px;
  --jds-form-padding-y: 12px;

  --jds-form-input-sm-height: 40px;
  --jds-form-input-md-height: 48px;
  --jds-form-input-lg-height: 56px;
}