/*
 * JDS sizing primitives, verified against the JDS Design System Figma
 * primitives export on 2026-09-14.
 *
 * Note on naming: paths map from Figma's "/" to CSS's "-" (jds/icon-size/lg -->
 * --jds-icon-size-lg), and Figma's "2-xl" collapses to "2xl".
 *
 * Figma stores these as UNITLESS NUMBERS — the "px" lives in each variable's
 * $description ("Values are defined in px"), so every value here appends the
 * unit.
 *
 * `dimension` is the raw pixel scale — a closed set of every width/height
 * value the design system uses. It is a PRIMITIVE: a component reaches for it
 * through a semantic alias, not directly (the breakpoint / gutter /
 * container-width / text-max-width aliases in
 * docs/design-tokens/jds-layout-tokens.css are its consumers, the same way the
 * gray/primary primitives feed the colour semantic layer). `icon-size` is the
 * named subset for icon boxes.
 *
 * Both moved here from docs/design-tokens/jds-root.css; every value was
 * already byte-identical to Figma, so this relocates the declarations without
 * changing one of them.
 */

:root {
  /* ---- Icon size ---- */
  --jds-icon-size-xs: 12px;
  --jds-icon-size-sm: 16px;
  --jds-icon-size-md: 20px;
  --jds-icon-size-lg: 24px;
  --jds-icon-size-xl: 32px;
  --jds-icon-size-2xl: 48px;
  --jds-icon-size-3xl: 64px;

  /* ---- Dimension (raw pixel scale) ---- */
  --jds-dimension-0: 0px;
  --jds-dimension-1: 1px;
  --jds-dimension-2: 2px;
  --jds-dimension-4: 4px;
  --jds-dimension-8: 8px;
  --jds-dimension-12: 12px;
  --jds-dimension-16: 16px;
  --jds-dimension-20: 20px;
  --jds-dimension-24: 24px;
  --jds-dimension-28: 28px;
  --jds-dimension-32: 32px;
  --jds-dimension-40: 40px;
  --jds-dimension-48: 48px;
  --jds-dimension-52: 52px;
  --jds-dimension-56: 56px;
  --jds-dimension-60: 60px;
  --jds-dimension-64: 64px;
  --jds-dimension-68: 68px;
  --jds-dimension-72: 72px;
  --jds-dimension-76: 76px;
  --jds-dimension-80: 80px;
  --jds-dimension-88: 88px;
  --jds-dimension-96: 96px;
  --jds-dimension-112: 112px;
  --jds-dimension-120: 120px;
  --jds-dimension-128: 128px;
  --jds-dimension-132: 132px;
  --jds-dimension-136: 136px;
  --jds-dimension-144: 144px;
  --jds-dimension-160: 160px;
  --jds-dimension-168: 168px;
  --jds-dimension-192: 192px;
  --jds-dimension-224: 224px;
  --jds-dimension-256: 256px;
  --jds-dimension-280: 280px;
  --jds-dimension-288: 288px;
  --jds-dimension-320: 320px;
  --jds-dimension-328: 328px;
  --jds-dimension-332: 332px;
  --jds-dimension-340: 340px;
  --jds-dimension-344: 344px;
  --jds-dimension-360: 360px;
  --jds-dimension-384: 384px;
  --jds-dimension-400: 400px;
  --jds-dimension-480: 480px;
  --jds-dimension-512: 512px;
  --jds-dimension-640: 640px;
  --jds-dimension-688: 688px;
  --jds-dimension-768: 768px;
  --jds-dimension-800: 800px;
  --jds-dimension-840: 840px;
  --jds-dimension-864: 864px;
  --jds-dimension-872: 872px;
  --jds-dimension-888: 888px;
  --jds-dimension-960: 960px;
  --jds-dimension-1024: 1024px;
  --jds-dimension-1168: 1168px;
  --jds-dimension-1280: 1280px;
  --jds-dimension-1312: 1312px;
  --jds-dimension-1440: 1440px;
}