{
  "$schema": "https://loui.dev/schemas/tokens.schema.json",
  "schemaVersion": 1,
  "package": {
    "name": "loui-ds",
    "version": "0.7.4"
  },
  "generator": "scripts/manifest/build.ts",
  "counts": {
    "tokens": 459,
    "pairs": 81
  },
  "notes": [
    "Components use semantic tokens only; primitive tokens exist to define them.",
    "Text needs 4.5:1 (WCAG 1.4.3); UI boundaries and graphics need 3:1 (1.4.11).",
    "pairings.allowed lists the surfaces a foreground token may be used on; pairings.notAllowed lists surfaces where it fails its minimum.",
    "Pairings with source \"checked\" are asserted by the contrast unit test; \"computed\" ones use the same math on the remaining surfaces."
  ],
  "tokens": [
    {
      "name": "color.gray.0",
      "cssVar": "--ds-gray-0",
      "value": "#050506",
      "cssValue": "#050506",
      "type": "color",
      "tier": "primitive",
      "aliasOf": null,
      "description": "Neutral ramp step 0, the darkest. Backs color.bg-canvas. Do not use in components; use the semantic token."
    },
    {
      "name": "color.gray.1",
      "cssVar": "--ds-gray-1",
      "value": "#0B0B0C",
      "cssValue": "#0b0b0c",
      "type": "color",
      "tier": "primitive",
      "aliasOf": null,
      "description": "Neutral ramp step 1. Backs color.bg and color.text-inverse. Do not use in components; use the semantic token."
    },
    {
      "name": "color.gray.2",
      "cssVar": "--ds-gray-2",
      "value": "#111113",
      "cssValue": "#111113",
      "type": "color",
      "tier": "primitive",
      "aliasOf": null,
      "description": "Neutral ramp step 2. Backs color.surface. Do not use in components; use the semantic token."
    },
    {
      "name": "color.gray.3",
      "cssVar": "--ds-gray-3",
      "value": "#18181B",
      "cssValue": "#18181b",
      "type": "color",
      "tier": "primitive",
      "aliasOf": null,
      "description": "Neutral ramp step 3. Backs color.surface-raised. Do not use in components; use the semantic token."
    },
    {
      "name": "color.gray.4",
      "cssVar": "--ds-gray-4",
      "value": "#1F1F23",
      "cssValue": "#1f1f23",
      "type": "color",
      "tier": "primitive",
      "aliasOf": null,
      "description": "Neutral ramp step 4. Backs color.surface-hover. Do not use in components; use the semantic token."
    },
    {
      "name": "color.gray.5",
      "cssVar": "--ds-gray-5",
      "value": "#26262B",
      "cssValue": "#26262b",
      "type": "color",
      "tier": "primitive",
      "aliasOf": null,
      "description": "Neutral ramp step 5. Backs color.line. Do not use in components; use the semantic token."
    },
    {
      "name": "color.gray.6",
      "cssVar": "--ds-gray-6",
      "value": "#33333A",
      "cssValue": "#33333a",
      "type": "color",
      "tier": "primitive",
      "aliasOf": null,
      "description": "Neutral ramp step 6. Backs color.line-strong. Do not use in components; use the semantic token."
    },
    {
      "name": "color.gray.7",
      "cssVar": "--ds-gray-7",
      "value": "#86868E",
      "cssValue": "#86868e",
      "type": "color",
      "tier": "primitive",
      "aliasOf": null,
      "description": "Neutral ramp step 7, the dimmest readable gray. Backs color.text-3. Lightened from #7A7A82 (TOK-004) so it reaches 4.5:1 on every surface up to surface-hover. Do not use in components; use the semantic token."
    },
    {
      "name": "color.gray.8",
      "cssVar": "--ds-gray-8",
      "value": "#A3A3A9",
      "cssValue": "#a3a3a9",
      "type": "color",
      "tier": "primitive",
      "aliasOf": null,
      "description": "Neutral ramp step 8. Backs color.text-2. Do not use in components; use the semantic token."
    },
    {
      "name": "color.gray.9",
      "cssVar": "--ds-gray-9",
      "value": "#EDEDEA",
      "cssValue": "#ededea",
      "type": "color",
      "tier": "primitive",
      "aliasOf": null,
      "description": "Neutral ramp step 9, the lightest (warm off-white, never pure white). Backs color.text and color.primary-bg. Do not use in components; use the semantic token."
    },
    {
      "name": "color.blue.5",
      "cssVar": "--ds-blue-5",
      "value": "#8AB4FF",
      "cssValue": "#8ab4ff",
      "type": "color",
      "tier": "primitive",
      "aliasOf": null,
      "description": "Signal blue. Backs color.accent. Do not use in components; use the semantic token."
    },
    {
      "name": "color.green.5",
      "cssVar": "--ds-green-5",
      "value": "#5FD49A",
      "cssValue": "#5fd49a",
      "type": "color",
      "tier": "primitive",
      "aliasOf": null,
      "description": "Signal green. Backs color.success. Do not use in components; use the semantic token."
    },
    {
      "name": "color.amber.5",
      "cssVar": "--ds-amber-5",
      "value": "#E9B65C",
      "cssValue": "#e9b65c",
      "type": "color",
      "tier": "primitive",
      "aliasOf": null,
      "description": "Signal amber. Backs color.warning. Do not use in components; use the semantic token."
    },
    {
      "name": "color.red.5",
      "cssVar": "--ds-red-5",
      "value": "#F07A6E",
      "cssValue": "#f07a6e",
      "type": "color",
      "tier": "primitive",
      "aliasOf": null,
      "description": "Signal red. Backs color.danger. Do not use in components; use the semantic token."
    },
    {
      "name": "color.bg-canvas",
      "cssVar": "--ds-bg-canvas",
      "value": "#050506",
      "cssValue": "var(--ds-gray-0)",
      "type": "color",
      "tier": "semantic",
      "aliasOf": "color.gray.0",
      "description": "Page canvas behind the app shell (the html element). The darkest layer. Not for cards or controls.",
      "foregrounds": [
        {
          "token": "color.primary-bg",
          "ratio": 17.37,
          "min": 3
        },
        {
          "token": "color.text",
          "ratio": 17.37,
          "min": 4.5
        },
        {
          "token": "color.success",
          "ratio": 11.03,
          "min": 4.5
        },
        {
          "token": "color.warning",
          "ratio": 10.97,
          "min": 4.5
        },
        {
          "token": "color.accent",
          "ratio": 9.75,
          "min": 4.5
        },
        {
          "token": "color.text-2",
          "ratio": 8.12,
          "min": 4.5
        },
        {
          "token": "color.danger",
          "ratio": 7.48,
          "min": 4.5
        },
        {
          "token": "color.text-3",
          "ratio": 5.64,
          "min": 4.5
        },
        {
          "token": "color.line-control",
          "ratio": 3.47,
          "min": 3
        }
      ]
    },
    {
      "name": "color.bg",
      "cssVar": "--ds-bg",
      "value": "#0B0B0C",
      "cssValue": "var(--ds-gray-1)",
      "type": "color",
      "tier": "semantic",
      "aliasOf": "color.gray.1",
      "description": "Default app background (body, top bar, main area). One step above the canvas. Not for cards; use surface.",
      "foregrounds": [
        {
          "token": "color.primary-bg",
          "ratio": 16.77,
          "min": 3
        },
        {
          "token": "color.text",
          "ratio": 16.77,
          "min": 4.5
        },
        {
          "token": "color.success",
          "ratio": 10.65,
          "min": 4.5
        },
        {
          "token": "color.warning",
          "ratio": 10.6,
          "min": 4.5
        },
        {
          "token": "color.accent",
          "ratio": 9.42,
          "min": 4.5
        },
        {
          "token": "color.text-2",
          "ratio": 7.84,
          "min": 4.5
        },
        {
          "token": "color.danger",
          "ratio": 7.23,
          "min": 4.5
        },
        {
          "token": "color.text-3",
          "ratio": 5.45,
          "min": 4.5
        },
        {
          "token": "color.line-control",
          "ratio": 3.35,
          "min": 3
        }
      ]
    },
    {
      "name": "color.surface",
      "cssVar": "--ds-surface",
      "value": "#111113",
      "cssValue": "var(--ds-gray-2)",
      "type": "color",
      "tier": "semantic",
      "aliasOf": "color.gray.2",
      "description": "Cards, panels, table bodies and inputs at rest. Move one layer at a time: bg, surface, surface-raised, surface-hover.",
      "foregrounds": [
        {
          "token": "color.primary-bg",
          "ratio": 16.08,
          "min": 3
        },
        {
          "token": "color.text",
          "ratio": 16.08,
          "min": 4.5
        },
        {
          "token": "color.success",
          "ratio": 10.21,
          "min": 4.5
        },
        {
          "token": "color.warning",
          "ratio": 10.16,
          "min": 4.5
        },
        {
          "token": "color.accent",
          "ratio": 9.03,
          "min": 4.5
        },
        {
          "token": "color.text-2",
          "ratio": 7.52,
          "min": 4.5
        },
        {
          "token": "color.danger",
          "ratio": 6.93,
          "min": 4.5
        },
        {
          "token": "color.text-3",
          "ratio": 5.22,
          "min": 4.5
        },
        {
          "token": "color.line-control",
          "ratio": 3.21,
          "min": 3
        }
      ]
    },
    {
      "name": "color.surface-raised",
      "cssVar": "--ds-surface-raised",
      "value": "#18181B",
      "cssValue": "var(--ds-gray-3)",
      "type": "color",
      "tier": "semantic",
      "aliasOf": "color.gray.3",
      "description": "Menus, popovers, selected rows and anything floating above a surface. Not for page backgrounds.",
      "foregrounds": [
        {
          "token": "color.primary-bg",
          "ratio": 15.1,
          "min": 3
        },
        {
          "token": "color.text",
          "ratio": 15.1,
          "min": 4.5
        },
        {
          "token": "color.success",
          "ratio": 9.59,
          "min": 4.5
        },
        {
          "token": "color.warning",
          "ratio": 9.54,
          "min": 4.5
        },
        {
          "token": "color.accent",
          "ratio": 8.48,
          "min": 4.5
        },
        {
          "token": "color.text-2",
          "ratio": 7.06,
          "min": 4.5
        },
        {
          "token": "color.danger",
          "ratio": 6.51,
          "min": 4.5
        },
        {
          "token": "color.text-3",
          "ratio": 4.91,
          "min": 4.5
        },
        {
          "token": "color.line-control",
          "ratio": 3.02,
          "min": 3
        }
      ]
    },
    {
      "name": "color.surface-hover",
      "cssVar": "--ds-surface-hover",
      "value": "#1F1F23",
      "cssValue": "var(--ds-gray-4)",
      "type": "color",
      "tier": "semantic",
      "aliasOf": "color.gray.4",
      "description": "Hover state of controls and list items: one step lighter than the resting surface. Do not use at rest.",
      "foregrounds": [
        {
          "token": "color.primary-bg",
          "ratio": 14,
          "min": 3
        },
        {
          "token": "color.text",
          "ratio": 14,
          "min": 4.5
        },
        {
          "token": "color.success",
          "ratio": 8.89,
          "min": 4.5
        },
        {
          "token": "color.warning",
          "ratio": 8.85,
          "min": 4.5
        },
        {
          "token": "color.accent",
          "ratio": 7.86,
          "min": 4.5
        },
        {
          "token": "color.text-2",
          "ratio": 6.55,
          "min": 4.5
        },
        {
          "token": "color.danger",
          "ratio": 6.03,
          "min": 4.5
        },
        {
          "token": "color.text-3",
          "ratio": 4.55,
          "min": 4.5
        }
      ]
    },
    {
      "name": "color.surface-row-hover",
      "cssVar": "--ds-surface-row-hover",
      "value": "#141416",
      "cssValue": "#141416",
      "type": "color",
      "tier": "semantic",
      "aliasOf": null,
      "description": "Hover background of table and list rows only; subtler than surface-hover so dense data stays calm. Not for buttons or menu items.",
      "foregrounds": [
        {
          "token": "color.primary-bg",
          "ratio": 15.68,
          "min": 3
        },
        {
          "token": "color.text",
          "ratio": 15.68,
          "min": 4.5
        },
        {
          "token": "color.success",
          "ratio": 9.96,
          "min": 4.5
        },
        {
          "token": "color.warning",
          "ratio": 9.91,
          "min": 4.5
        },
        {
          "token": "color.accent",
          "ratio": 8.81,
          "min": 4.5
        },
        {
          "token": "color.text-2",
          "ratio": 7.33,
          "min": 4.5
        },
        {
          "token": "color.danger",
          "ratio": 6.76,
          "min": 4.5
        },
        {
          "token": "color.text-3",
          "ratio": 5.09,
          "min": 4.5
        },
        {
          "token": "color.line-control",
          "ratio": 3.13,
          "min": 3
        }
      ]
    },
    {
      "name": "color.line-subtle",
      "cssVar": "--ds-line-subtle",
      "value": "#1E1E22",
      "cssValue": "#1e1e22",
      "type": "color",
      "tier": "semantic",
      "aliasOf": null,
      "description": "Internal dividers inside a card or table (row separators). Decorative, so exempt from the 3:1 non-text contrast rule. Never use it as a control boundary."
    },
    {
      "name": "color.line",
      "cssVar": "--ds-line",
      "value": "#26262B",
      "cssValue": "var(--ds-gray-5)",
      "type": "color",
      "tier": "semantic",
      "aliasOf": "color.gray.5",
      "description": "Default 1px border of cards and containers. Not for form control boundaries; use line-control."
    },
    {
      "name": "color.line-strong",
      "cssVar": "--ds-line-strong",
      "value": "#33333A",
      "cssValue": "var(--ds-gray-6)",
      "type": "color",
      "tier": "semantic",
      "aliasOf": "color.gray.6",
      "description": "Border of overlays, menus, popovers, dialogs and cards that must stand out. Not for form control boundaries (use line-control); it is below 3:1."
    },
    {
      "name": "color.line-control",
      "cssVar": "--ds-line-control",
      "value": "#64646B",
      "cssValue": "#64646b",
      "type": "color",
      "tier": "semantic",
      "aliasOf": null,
      "description": "Boundary of form controls: input, select, textarea, checkbox, radio and combobox triggers. At least 3:1 on bg, surface and surface-raised (WCAG 1.4.11). New in TOK-004. Not for decorative dividers.",
      "pairings": {
        "allowed": [
          {
            "on": ["color.bg"],
            "ratio": 3.35,
            "min": 3,
            "passes": true,
            "source": "checked",
            "usage": "Form control boundary (input, select, checkbox, radio, combobox trigger) on bg, WCAG 1.4.11"
          },
          {
            "on": ["color.surface"],
            "ratio": 3.21,
            "min": 3,
            "passes": true,
            "source": "checked",
            "usage": "Form control boundary (input, select, checkbox, radio, combobox trigger) on surface, WCAG 1.4.11"
          },
          {
            "on": ["color.surface-raised"],
            "ratio": 3.02,
            "min": 3,
            "passes": true,
            "source": "checked",
            "usage": "Form control boundary (input, select, checkbox, radio, combobox trigger) on surface-raised, WCAG 1.4.11"
          },
          {
            "on": ["color.bg-canvas"],
            "ratio": 3.47,
            "min": 3,
            "passes": true,
            "source": "computed"
          },
          {
            "on": ["color.surface-row-hover"],
            "ratio": 3.13,
            "min": 3,
            "passes": true,
            "source": "computed"
          }
        ],
        "notAllowed": [
          {
            "on": ["color.surface-hover"],
            "ratio": 2.8,
            "min": 3,
            "passes": false,
            "source": "computed"
          }
        ]
      }
    },
    {
      "name": "color.text",
      "cssVar": "--ds-text",
      "value": "#EDEDEA",
      "cssValue": "var(--ds-gray-9)",
      "type": "color",
      "tier": "semantic",
      "aliasOf": "color.gray.9",
      "description": "Primary text and icons. Warm off-white, not pure white. Use for anything that must be read first.",
      "pairings": {
        "allowed": [
          {
            "on": ["color.bg-canvas"],
            "ratio": 17.37,
            "min": 4.5,
            "passes": true,
            "source": "checked",
            "usage": "Primary text and icons on bg-canvas"
          },
          {
            "on": ["color.bg"],
            "ratio": 16.77,
            "min": 4.5,
            "passes": true,
            "source": "checked",
            "usage": "Primary text and icons on bg"
          },
          {
            "on": ["color.surface"],
            "ratio": 16.08,
            "min": 4.5,
            "passes": true,
            "source": "checked",
            "usage": "Primary text and icons on surface"
          },
          {
            "on": ["color.surface-raised"],
            "ratio": 15.1,
            "min": 4.5,
            "passes": true,
            "source": "checked",
            "usage": "Primary text and icons on surface-raised"
          },
          {
            "on": ["color.surface-hover"],
            "ratio": 14,
            "min": 4.5,
            "passes": true,
            "source": "checked",
            "usage": "Primary text and icons on surface-hover"
          },
          {
            "on": ["color.surface-row-hover"],
            "ratio": 15.68,
            "min": 4.5,
            "passes": true,
            "source": "checked",
            "usage": "Primary text and icons on surface-row-hover"
          },
          {
            "on": ["color.surface", "color.accent-soft"],
            "ratio": 12.62,
            "min": 4.5,
            "passes": true,
            "source": "checked",
            "usage": "Primary text on accent-soft over surface"
          },
          {
            "on": ["color.surface", "color.success-soft"],
            "ratio": 12.42,
            "min": 4.5,
            "passes": true,
            "source": "checked",
            "usage": "Primary text on success-soft over surface"
          },
          {
            "on": ["color.surface", "color.warning-soft"],
            "ratio": 12.39,
            "min": 4.5,
            "passes": true,
            "source": "checked",
            "usage": "Primary text on warning-soft over surface"
          },
          {
            "on": ["color.surface", "color.danger-soft"],
            "ratio": 14.14,
            "min": 4.5,
            "passes": true,
            "source": "checked",
            "usage": "Primary text on danger-soft over surface"
          }
        ],
        "notAllowed": []
      }
    },
    {
      "name": "color.text-2",
      "cssVar": "--ds-text-2",
      "value": "#A3A3A9",
      "cssValue": "var(--ds-gray-8)",
      "type": "color",
      "tier": "semantic",
      "aliasOf": "color.gray.8",
      "description": "Secondary text: descriptions, supporting copy, inactive labels.",
      "pairings": {
        "allowed": [
          {
            "on": ["color.bg-canvas"],
            "ratio": 8.12,
            "min": 4.5,
            "passes": true,
            "source": "checked",
            "usage": "Secondary text on bg-canvas"
          },
          {
            "on": ["color.bg"],
            "ratio": 7.84,
            "min": 4.5,
            "passes": true,
            "source": "checked",
            "usage": "Secondary text on bg"
          },
          {
            "on": ["color.surface"],
            "ratio": 7.52,
            "min": 4.5,
            "passes": true,
            "source": "checked",
            "usage": "Secondary text on surface"
          },
          {
            "on": ["color.surface-raised"],
            "ratio": 7.06,
            "min": 4.5,
            "passes": true,
            "source": "checked",
            "usage": "Secondary text on surface-raised"
          },
          {
            "on": ["color.surface-hover"],
            "ratio": 6.55,
            "min": 4.5,
            "passes": true,
            "source": "checked",
            "usage": "Secondary text on surface-hover"
          },
          {
            "on": ["color.surface-row-hover"],
            "ratio": 7.33,
            "min": 4.5,
            "passes": true,
            "source": "checked",
            "usage": "Secondary text on surface-row-hover"
          }
        ],
        "notAllowed": []
      }
    },
    {
      "name": "color.text-3",
      "cssVar": "--ds-text-3",
      "value": "#86868E",
      "cssValue": "var(--ds-gray-7)",
      "type": "color",
      "tier": "semantic",
      "aliasOf": "color.gray.7",
      "description": "Tertiary text: metadata, placeholders, hints. Meets 4.5:1 on every surface up to surface-hover. Do not use on surfaces lighter than surface-hover or on colored fills.",
      "pairings": {
        "allowed": [
          {
            "on": ["color.bg-canvas"],
            "ratio": 5.64,
            "min": 4.5,
            "passes": true,
            "source": "checked",
            "usage": "Tertiary text, hints and placeholders on bg-canvas"
          },
          {
            "on": ["color.bg"],
            "ratio": 5.45,
            "min": 4.5,
            "passes": true,
            "source": "checked",
            "usage": "Tertiary text, hints and placeholders on bg"
          },
          {
            "on": ["color.surface"],
            "ratio": 5.22,
            "min": 4.5,
            "passes": true,
            "source": "checked",
            "usage": "Tertiary text, hints and placeholders on surface"
          },
          {
            "on": ["color.surface-raised"],
            "ratio": 4.91,
            "min": 4.5,
            "passes": true,
            "source": "checked",
            "usage": "Tertiary text, hints and placeholders on surface-raised"
          },
          {
            "on": ["color.surface-hover"],
            "ratio": 4.55,
            "min": 4.5,
            "passes": true,
            "source": "checked",
            "usage": "Tertiary text, hints and placeholders on surface-hover"
          },
          {
            "on": ["color.surface-row-hover"],
            "ratio": 5.09,
            "min": 4.5,
            "passes": true,
            "source": "checked",
            "usage": "Tertiary text, hints and placeholders on surface-row-hover"
          },
          {
            "on": ["color.surface-hover"],
            "ratio": 4.55,
            "min": 3,
            "passes": true,
            "source": "checked",
            "usage": "Brightened control border (text-3) where a control sits on the hover fill, because line-control is below 3:1 there (TOK-014), WCAG 1.4.11"
          },
          {
            "on": ["color.surface-raised"],
            "ratio": 4.91,
            "min": 3,
            "passes": true,
            "source": "checked",
            "usage": "Brightened control border (text-3) on hover for controls inside menus, popovers and sheets (surface-raised), WCAG 1.4.11"
          }
        ],
        "notAllowed": []
      }
    },
    {
      "name": "color.text-inverse",
      "cssVar": "--ds-text-inverse",
      "value": "#0B0B0C",
      "cssValue": "var(--ds-gray-1)",
      "type": "color",
      "tier": "semantic",
      "aliasOf": "color.gray.1",
      "description": "Text and icons on solid light or signal fills (selected day in a calendar, solid badges). Not on dark surfaces.",
      "pairings": {
        "allowed": [
          {
            "on": ["color.accent"],
            "ratio": 9.42,
            "min": 4.5,
            "passes": true,
            "source": "checked",
            "usage": "Inverse text on a solid accent fill"
          },
          {
            "on": ["color.success"],
            "ratio": 10.65,
            "min": 4.5,
            "passes": true,
            "source": "checked",
            "usage": "Inverse text on a solid success fill"
          },
          {
            "on": ["color.warning"],
            "ratio": 10.6,
            "min": 4.5,
            "passes": true,
            "source": "checked",
            "usage": "Inverse text on a solid warning fill"
          },
          {
            "on": ["color.danger"],
            "ratio": 7.23,
            "min": 4.5,
            "passes": true,
            "source": "checked",
            "usage": "Inverse text on a solid danger fill"
          }
        ],
        "notAllowed": []
      }
    },
    {
      "name": "color.primary-bg",
      "cssVar": "--ds-primary-bg",
      "value": "#EDEDEA",
      "cssValue": "var(--ds-gray-9)",
      "type": "color",
      "tier": "semantic",
      "aliasOf": "color.gray.9",
      "description": "Fill of the primary button and the tooltip: light ink on a dark UI. One primary action per screen. Hover is brightness .88, not a new token.",
      "pairings": {
        "allowed": [
          {
            "on": ["color.bg"],
            "ratio": 16.77,
            "min": 3,
            "passes": true,
            "source": "checked",
            "usage": "Selection bar, active tab underline and checked control fill on bg"
          },
          {
            "on": ["color.surface"],
            "ratio": 16.08,
            "min": 3,
            "passes": true,
            "source": "checked",
            "usage": "Selection bar, active tab underline and checked control fill on surface"
          },
          {
            "on": ["color.surface-raised"],
            "ratio": 15.1,
            "min": 3,
            "passes": true,
            "source": "checked",
            "usage": "Selection bar, active tab underline and checked control fill on surface-raised"
          },
          {
            "on": ["color.surface-hover"],
            "ratio": 14,
            "min": 3,
            "passes": true,
            "source": "checked",
            "usage": "Selection bar on a hovered row"
          },
          {
            "on": ["color.bg-canvas"],
            "ratio": 17.37,
            "min": 3,
            "passes": true,
            "source": "computed"
          },
          {
            "on": ["color.surface-row-hover"],
            "ratio": 15.68,
            "min": 3,
            "passes": true,
            "source": "computed"
          }
        ],
        "notAllowed": []
      }
    },
    {
      "name": "color.primary-fg",
      "cssVar": "--ds-primary-fg",
      "value": "#0B0B0C",
      "cssValue": "var(--ds-gray-1)",
      "type": "color",
      "tier": "semantic",
      "aliasOf": "color.gray.1",
      "description": "Text and icons on primary-bg.",
      "pairings": {
        "allowed": [
          {
            "on": ["color.primary-bg"],
            "ratio": 16.77,
            "min": 4.5,
            "passes": true,
            "source": "checked",
            "usage": "Primary button label"
          }
        ],
        "notAllowed": []
      }
    },
    {
      "name": "color.primary-fg-muted",
      "cssVar": "--ds-primary-fg-muted",
      "value": "#5A5A60",
      "cssValue": "#5a5a60",
      "type": "color",
      "tier": "semantic",
      "aliasOf": null,
      "description": "Secondary text on primary-bg (for example the shortcut hint in a tooltip). Only valid on primary-bg.",
      "pairings": {
        "allowed": [
          {
            "on": ["color.primary-bg"],
            "ratio": 5.84,
            "min": 4.5,
            "passes": true,
            "source": "checked",
            "usage": "Secondary text on primary-bg (tooltip shortcut hint)"
          }
        ],
        "notAllowed": []
      }
    },
    {
      "name": "color.accent",
      "cssVar": "--ds-accent",
      "value": "#8AB4FF",
      "cssValue": "var(--ds-blue-5)",
      "type": "color",
      "tier": "semantic",
      "aliasOf": "color.blue.5",
      "description": "The single accent: focus, selection, links and open states. Never a button fill or a large area. Always pair with text or a shape, never color alone.",
      "pairings": {
        "allowed": [
          {
            "on": ["color.bg"],
            "ratio": 9.42,
            "min": 4.5,
            "passes": true,
            "source": "checked",
            "usage": "accent text, icons and links on bg"
          },
          {
            "on": ["color.surface"],
            "ratio": 9.03,
            "min": 4.5,
            "passes": true,
            "source": "checked",
            "usage": "accent text, icons and links on surface"
          },
          {
            "on": ["color.surface-raised"],
            "ratio": 8.48,
            "min": 4.5,
            "passes": true,
            "source": "checked",
            "usage": "accent text, icons and links on surface-raised"
          },
          {
            "on": ["color.surface", "color.accent-soft"],
            "ratio": 7.09,
            "min": 4.5,
            "passes": true,
            "source": "checked",
            "usage": "accent text on its soft tint over surface (badge, banner)"
          },
          {
            "on": ["color.bg"],
            "ratio": 9.42,
            "min": 3,
            "passes": true,
            "source": "checked",
            "usage": "Focus indicator (accent border) on bg, WCAG 2.4.11"
          },
          {
            "on": ["color.surface"],
            "ratio": 9.03,
            "min": 3,
            "passes": true,
            "source": "checked",
            "usage": "Focus indicator (accent border) on surface, WCAG 2.4.11"
          },
          {
            "on": ["color.surface-raised"],
            "ratio": 8.48,
            "min": 3,
            "passes": true,
            "source": "checked",
            "usage": "Focus indicator (accent border) on surface-raised, WCAG 2.4.11"
          },
          {
            "on": ["color.bg-canvas"],
            "ratio": 9.75,
            "min": 4.5,
            "passes": true,
            "source": "computed"
          },
          {
            "on": ["color.surface-hover"],
            "ratio": 7.86,
            "min": 4.5,
            "passes": true,
            "source": "computed"
          },
          {
            "on": ["color.surface-row-hover"],
            "ratio": 8.81,
            "min": 4.5,
            "passes": true,
            "source": "computed"
          }
        ],
        "notAllowed": []
      }
    },
    {
      "name": "color.success",
      "cssVar": "--ds-success",
      "value": "#5FD49A",
      "cssValue": "var(--ds-green-5)",
      "type": "color",
      "tier": "semantic",
      "aliasOf": "color.green.5",
      "description": "Success signal: done, saved, healthy. Always accompanied by text or an icon. Not decorative.",
      "pairings": {
        "allowed": [
          {
            "on": ["color.bg"],
            "ratio": 10.65,
            "min": 4.5,
            "passes": true,
            "source": "checked",
            "usage": "success text, icons and links on bg"
          },
          {
            "on": ["color.surface"],
            "ratio": 10.21,
            "min": 4.5,
            "passes": true,
            "source": "checked",
            "usage": "success text, icons and links on surface"
          },
          {
            "on": ["color.surface-raised"],
            "ratio": 9.59,
            "min": 4.5,
            "passes": true,
            "source": "checked",
            "usage": "success text, icons and links on surface-raised"
          },
          {
            "on": ["color.surface", "color.success-soft"],
            "ratio": 7.89,
            "min": 4.5,
            "passes": true,
            "source": "checked",
            "usage": "success text on its soft tint over surface (badge, banner)"
          },
          {
            "on": ["color.bg-canvas"],
            "ratio": 11.03,
            "min": 4.5,
            "passes": true,
            "source": "computed"
          },
          {
            "on": ["color.surface-hover"],
            "ratio": 8.89,
            "min": 4.5,
            "passes": true,
            "source": "computed"
          },
          {
            "on": ["color.surface-row-hover"],
            "ratio": 9.96,
            "min": 4.5,
            "passes": true,
            "source": "computed"
          }
        ],
        "notAllowed": []
      }
    },
    {
      "name": "color.warning",
      "cssVar": "--ds-warning",
      "value": "#E9B65C",
      "cssValue": "var(--ds-amber-5)",
      "type": "color",
      "tier": "semantic",
      "aliasOf": "color.amber.5",
      "description": "Warning signal: attention needed, nothing broken. Always accompanied by text or an icon.",
      "pairings": {
        "allowed": [
          {
            "on": ["color.bg"],
            "ratio": 10.6,
            "min": 4.5,
            "passes": true,
            "source": "checked",
            "usage": "warning text, icons and links on bg"
          },
          {
            "on": ["color.surface"],
            "ratio": 10.16,
            "min": 4.5,
            "passes": true,
            "source": "checked",
            "usage": "warning text, icons and links on surface"
          },
          {
            "on": ["color.surface-raised"],
            "ratio": 9.54,
            "min": 4.5,
            "passes": true,
            "source": "checked",
            "usage": "warning text, icons and links on surface-raised"
          },
          {
            "on": ["color.surface", "color.warning-soft"],
            "ratio": 7.83,
            "min": 4.5,
            "passes": true,
            "source": "checked",
            "usage": "warning text on its soft tint over surface (badge, banner)"
          },
          {
            "on": ["color.bg-canvas"],
            "ratio": 10.97,
            "min": 4.5,
            "passes": true,
            "source": "computed"
          },
          {
            "on": ["color.surface-hover"],
            "ratio": 8.85,
            "min": 4.5,
            "passes": true,
            "source": "computed"
          },
          {
            "on": ["color.surface-row-hover"],
            "ratio": 9.91,
            "min": 4.5,
            "passes": true,
            "source": "computed"
          }
        ],
        "notAllowed": []
      }
    },
    {
      "name": "color.danger",
      "cssVar": "--ds-danger",
      "value": "#F07A6E",
      "cssValue": "var(--ds-red-5)",
      "type": "color",
      "tier": "semantic",
      "aliasOf": "color.red.5",
      "description": "Error and destructive signal: errors, delete buttons, invalid fields. Always accompanied by text or an icon.",
      "pairings": {
        "allowed": [
          {
            "on": ["color.bg"],
            "ratio": 7.23,
            "min": 4.5,
            "passes": true,
            "source": "checked",
            "usage": "danger text, icons and links on bg"
          },
          {
            "on": ["color.surface"],
            "ratio": 6.93,
            "min": 4.5,
            "passes": true,
            "source": "checked",
            "usage": "danger text, icons and links on surface"
          },
          {
            "on": ["color.surface-raised"],
            "ratio": 6.51,
            "min": 4.5,
            "passes": true,
            "source": "checked",
            "usage": "danger text, icons and links on surface-raised"
          },
          {
            "on": ["color.surface", "color.danger-soft"],
            "ratio": 6.09,
            "min": 4.5,
            "passes": true,
            "source": "checked",
            "usage": "danger text on its soft tint over surface (badge, banner)"
          },
          {
            "on": ["color.surface", "color.danger-soft-hover"],
            "ratio": 5.32,
            "min": 4.5,
            "passes": true,
            "source": "checked",
            "usage": "danger text on the hovered ghost-danger button over surface"
          },
          {
            "on": ["color.bg"],
            "ratio": 7.23,
            "min": 3,
            "passes": true,
            "source": "checked",
            "usage": "Focus indicator and boundary of an invalid control on bg"
          },
          {
            "on": ["color.surface"],
            "ratio": 6.93,
            "min": 3,
            "passes": true,
            "source": "checked",
            "usage": "Focus indicator and boundary of an invalid control on surface"
          },
          {
            "on": ["color.surface-raised"],
            "ratio": 6.51,
            "min": 3,
            "passes": true,
            "source": "checked",
            "usage": "Focus indicator and boundary of an invalid control on surface-raised"
          },
          {
            "on": ["color.bg-canvas"],
            "ratio": 7.48,
            "min": 4.5,
            "passes": true,
            "source": "computed"
          },
          {
            "on": ["color.surface-hover"],
            "ratio": 6.03,
            "min": 4.5,
            "passes": true,
            "source": "computed"
          },
          {
            "on": ["color.surface-row-hover"],
            "ratio": 6.76,
            "min": 4.5,
            "passes": true,
            "source": "computed"
          }
        ],
        "notAllowed": []
      }
    },
    {
      "name": "color.accent-soft",
      "cssVar": "--ds-accent-soft",
      "value": "rgba(138, 180, 255, 0.14)",
      "cssValue": "color-mix(in oklab, var(--ds-accent) 14%, transparent)",
      "type": "color",
      "tier": "semantic",
      "aliasOf": null,
      "description": "Tinted background for accent states (selected item, info). 14% accent over the surface beneath, resolved with color-mix so it adapts to the surface. Not for text."
    },
    {
      "name": "color.success-soft",
      "cssVar": "--ds-success-soft",
      "value": "rgba(95, 212, 154, 0.14)",
      "cssValue": "color-mix(in oklab, var(--ds-success) 14%, transparent)",
      "type": "color",
      "tier": "semantic",
      "aliasOf": null,
      "description": "Tinted background for success states (badge, banner). 14% success over the surface beneath. Not for text."
    },
    {
      "name": "color.warning-soft",
      "cssVar": "--ds-warning-soft",
      "value": "rgba(233, 182, 92, 0.14)",
      "cssValue": "color-mix(in oklab, var(--ds-warning) 14%, transparent)",
      "type": "color",
      "tier": "semantic",
      "aliasOf": null,
      "description": "Tinted background for warning states (badge, banner). 14% warning over the surface beneath. Not for text."
    },
    {
      "name": "color.danger-soft",
      "cssVar": "--ds-danger-soft",
      "value": "rgba(240, 122, 110, 0.1)",
      "cssValue": "color-mix(in oklab, var(--ds-danger) 10%, transparent)",
      "type": "color",
      "tier": "semantic",
      "aliasOf": null,
      "description": "Tinted background for error states (badge, banner, invalid field). 10% danger over the surface beneath. Not for text."
    },
    {
      "name": "color.danger-soft-hover",
      "cssVar": "--ds-danger-soft-hover",
      "value": "rgba(240, 122, 110, 0.18)",
      "cssValue": "color-mix(in oklab, var(--ds-danger) 18%, transparent)",
      "type": "color",
      "tier": "semantic",
      "aliasOf": null,
      "description": "Hover state of danger-soft surfaces such as the ghost-danger button. 18% danger over the surface beneath."
    },
    {
      "name": "color.danger-line",
      "cssVar": "--ds-danger-line",
      "value": "rgba(240, 122, 110, 0.35)",
      "cssValue": "color-mix(in oklab, var(--ds-danger) 35%, transparent)",
      "type": "color",
      "tier": "semantic",
      "aliasOf": null,
      "description": "Border of danger-tinted surfaces (error banner, destructive confirmation). 35% danger over the surface beneath. Not a form control boundary; invalid fields use danger."
    },
    {
      "name": "color.overlay",
      "cssVar": "--ds-overlay",
      "value": "rgba(5, 5, 6, 0.72)",
      "cssValue": "#050506b8",
      "type": "color",
      "tier": "semantic",
      "aliasOf": null,
      "description": "Backdrop behind dialogs. Flat, no blur. Not for side sheets; use scrim."
    },
    {
      "name": "color.scrim",
      "cssVar": "--ds-scrim",
      "value": "rgba(5, 5, 6, 0.55)",
      "cssValue": "#0505068c",
      "type": "color",
      "tier": "semantic",
      "aliasOf": null,
      "description": "Backdrop behind side sheets. Lighter than overlay so the page stays visible. Not for dialogs."
    },
    {
      "name": "color.swatch-ring",
      "cssVar": "--ds-swatch-ring",
      "value": "rgba(255, 255, 255, 0.12)",
      "cssValue": "#ffffff1f",
      "type": "color",
      "tier": "semantic",
      "aliasOf": null,
      "description": "Inset 1px ring drawn inside color swatches and avatars so dark swatches stay visible on dark surfaces. Not a general border."
    },
    {
      "name": "color.paper",
      "cssVar": "--ds-paper",
      "value": "#F4F2EC",
      "cssValue": "#f4f2ec",
      "type": "color",
      "tier": "semantic",
      "aliasOf": null,
      "description": "Paper surface of printed-document previews (receipt, PDF). The only light surface in the system; use inside [data-theme=\"paper\"] only.",
      "pairings": {
        "allowed": [
          {
            "on": ["color.paper-success"],
            "ratio": 6.08,
            "min": 4.5,
            "passes": true,
            "source": "checked",
            "usage": "Paper-colored text on a solid success fill (text-inverse in the paper scope)"
          },
          {
            "on": ["color.paper-warning"],
            "ratio": 6.03,
            "min": 4.5,
            "passes": true,
            "source": "checked",
            "usage": "Paper-colored text on a solid warning fill (text-inverse in the paper scope)"
          },
          {
            "on": ["color.paper-danger"],
            "ratio": 6.42,
            "min": 4.5,
            "passes": true,
            "source": "checked",
            "usage": "Paper-colored text on a solid danger fill (text-inverse in the paper scope)"
          }
        ],
        "notAllowed": []
      }
    },
    {
      "name": "color.paper-ink",
      "cssVar": "--ds-paper-ink",
      "value": "#151515",
      "cssValue": "#151515",
      "type": "color",
      "tier": "semantic",
      "aliasOf": null,
      "description": "Primary text on paper. Paper theme only.",
      "pairings": {
        "allowed": [
          {
            "on": ["color.paper"],
            "ratio": 16.31,
            "min": 7,
            "passes": true,
            "source": "checked",
            "usage": "Primary text on paper"
          },
          {
            "on": ["color.paper", "color.paper-success-soft"],
            "ratio": 13.3,
            "min": 4.5,
            "passes": true,
            "source": "checked",
            "usage": "Primary text on paper-success-soft over paper"
          },
          {
            "on": ["color.paper", "color.paper-warning-soft"],
            "ratio": 13.34,
            "min": 4.5,
            "passes": true,
            "source": "checked",
            "usage": "Primary text on paper-warning-soft over paper"
          },
          {
            "on": ["color.paper", "color.paper-danger-soft"],
            "ratio": 13.86,
            "min": 4.5,
            "passes": true,
            "source": "checked",
            "usage": "Primary text on paper-danger-soft over paper"
          },
          {
            "on": ["color.paper", "color.paper-accent-soft"],
            "ratio": 13.38,
            "min": 4.5,
            "passes": true,
            "source": "checked",
            "usage": "Primary text on paper-accent-soft over paper"
          }
        ],
        "notAllowed": []
      }
    },
    {
      "name": "color.paper-ink-2",
      "cssVar": "--ds-paper-ink-2",
      "value": "#3A3A3A",
      "cssValue": "#3a3a3a",
      "type": "color",
      "tier": "semantic",
      "aliasOf": null,
      "description": "Secondary text on paper. Paper theme only.",
      "pairings": {
        "allowed": [
          {
            "on": ["color.paper"],
            "ratio": 10.16,
            "min": 4.5,
            "passes": true,
            "source": "checked",
            "usage": "Secondary text on paper"
          }
        ],
        "notAllowed": []
      }
    },
    {
      "name": "color.paper-muted",
      "cssVar": "--ds-paper-muted",
      "value": "#6B6B6B",
      "cssValue": "#6b6b6b",
      "type": "color",
      "tier": "semantic",
      "aliasOf": null,
      "description": "Tertiary text and control boundaries on paper (above 4.5:1 on paper). Paper theme only.",
      "pairings": {
        "allowed": [
          {
            "on": ["color.paper"],
            "ratio": 4.76,
            "min": 4.5,
            "passes": true,
            "source": "checked",
            "usage": "Tertiary text on paper"
          },
          {
            "on": ["color.paper"],
            "ratio": 4.76,
            "min": 3,
            "passes": true,
            "source": "checked",
            "usage": "Control boundary on paper, WCAG 1.4.11"
          }
        ],
        "notAllowed": []
      }
    },
    {
      "name": "color.paper-rule",
      "cssVar": "--ds-paper-rule",
      "value": "#9A968C",
      "cssValue": "#9a968c",
      "type": "color",
      "tier": "semantic",
      "aliasOf": null,
      "description": "Decorative rules and dividers on paper (table lines, totals). Below 3:1, so never a control boundary or text. Paper theme only."
    },
    {
      "name": "color.paper-accent",
      "cssVar": "--ds-paper-accent",
      "value": "#944A2D",
      "cssValue": "#944a2d",
      "type": "color",
      "tier": "semantic",
      "aliasOf": null,
      "description": "Accent on paper: links and highlighted figures (5.7:1 on paper, 4.7:1 on paper-accent-soft). Darkened from #B8603E in TOK-004 and again from #A95839 in TOK-012 so accent text passes on its own tint. Paper theme only.",
      "pairings": {
        "allowed": [
          {
            "on": ["color.paper"],
            "ratio": 5.73,
            "min": 4.5,
            "passes": true,
            "source": "checked",
            "usage": "Accent text and links on paper"
          },
          {
            "on": ["color.paper", "color.paper-accent-soft"],
            "ratio": 4.7,
            "min": 4.5,
            "passes": true,
            "source": "checked",
            "usage": "accent text on its soft tint over paper (info badge, selected item)"
          }
        ],
        "notAllowed": []
      }
    },
    {
      "name": "color.paper-success",
      "cssVar": "--ds-paper-success",
      "value": "#17683D",
      "cssValue": "#17683d",
      "type": "color",
      "tier": "semantic",
      "aliasOf": null,
      "description": "Success signal on paper: text, icons and borders (6.1:1 on paper, 4.9:1 on paper-success-soft). Remaps success inside [data-theme=\"paper\"] only (TOK-012).",
      "pairings": {
        "allowed": [
          {
            "on": ["color.paper"],
            "ratio": 6.08,
            "min": 4.5,
            "passes": true,
            "source": "checked",
            "usage": "success text, icons and links on paper"
          },
          {
            "on": ["color.paper", "color.paper-success-soft"],
            "ratio": 4.96,
            "min": 4.5,
            "passes": true,
            "source": "checked",
            "usage": "success text on its soft tint over paper (badge, banner)"
          }
        ],
        "notAllowed": []
      }
    },
    {
      "name": "color.paper-warning",
      "cssVar": "--ds-paper-warning",
      "value": "#7F5200",
      "cssValue": "#7f5200",
      "type": "color",
      "tier": "semantic",
      "aliasOf": null,
      "description": "Warning signal on paper: text, icons and borders (6.0:1 on paper, 4.9:1 on paper-warning-soft). Remaps warning inside [data-theme=\"paper\"] only (TOK-012).",
      "pairings": {
        "allowed": [
          {
            "on": ["color.paper"],
            "ratio": 6.03,
            "min": 4.5,
            "passes": true,
            "source": "checked",
            "usage": "warning text, icons and links on paper"
          },
          {
            "on": ["color.paper", "color.paper-warning-soft"],
            "ratio": 4.93,
            "min": 4.5,
            "passes": true,
            "source": "checked",
            "usage": "warning text on its soft tint over paper (badge, banner)"
          }
        ],
        "notAllowed": []
      }
    },
    {
      "name": "color.paper-danger",
      "cssVar": "--ds-paper-danger",
      "value": "#A8231B",
      "cssValue": "#a8231b",
      "type": "color",
      "tier": "semantic",
      "aliasOf": null,
      "description": "Error and destructive signal on paper (6.4:1 on paper, 4.8:1 on paper-danger-soft-hover). Remaps danger inside [data-theme=\"paper\"] only (TOK-012).",
      "pairings": {
        "allowed": [
          {
            "on": ["color.paper"],
            "ratio": 6.42,
            "min": 4.5,
            "passes": true,
            "source": "checked",
            "usage": "danger text, icons and links on paper"
          },
          {
            "on": ["color.paper", "color.paper-danger-soft"],
            "ratio": 5.46,
            "min": 4.5,
            "passes": true,
            "source": "checked",
            "usage": "danger text on its soft tint over paper (badge, banner)"
          },
          {
            "on": ["color.paper", "color.paper-danger-soft-hover"],
            "ratio": 4.76,
            "min": 4.5,
            "passes": true,
            "source": "checked",
            "usage": "danger text on the hover tint of a ghost-danger control on paper"
          },
          {
            "on": ["color.paper"],
            "ratio": 6.42,
            "min": 3,
            "passes": true,
            "source": "checked",
            "usage": "Invalid-field border and danger focus ring on paper, WCAG 1.4.11"
          }
        ],
        "notAllowed": []
      }
    },
    {
      "name": "color.paper-success-soft",
      "cssVar": "--ds-paper-success-soft",
      "value": "rgba(23, 104, 61, 0.14)",
      "cssValue": "color-mix(in oklab, var(--ds-paper-success) 14%, transparent)",
      "type": "color",
      "tier": "semantic",
      "aliasOf": null,
      "description": "Tinted background for success states on paper. 14% paper-success over the paper. Not for text. Paper theme only."
    },
    {
      "name": "color.paper-warning-soft",
      "cssVar": "--ds-paper-warning-soft",
      "value": "rgba(127, 82, 0, 0.14)",
      "cssValue": "color-mix(in oklab, var(--ds-paper-warning) 14%, transparent)",
      "type": "color",
      "tier": "semantic",
      "aliasOf": null,
      "description": "Tinted background for warning states on paper. 14% paper-warning over the paper. Not for text. Paper theme only."
    },
    {
      "name": "color.paper-danger-soft",
      "cssVar": "--ds-paper-danger-soft",
      "value": "rgba(168, 35, 27, 0.1)",
      "cssValue": "color-mix(in oklab, var(--ds-paper-danger) 10%, transparent)",
      "type": "color",
      "tier": "semantic",
      "aliasOf": null,
      "description": "Tinted background for error states on paper. 10% paper-danger over the paper. Not for text. Paper theme only."
    },
    {
      "name": "color.paper-danger-soft-hover",
      "cssVar": "--ds-paper-danger-soft-hover",
      "value": "rgba(168, 35, 27, 0.18)",
      "cssValue": "color-mix(in oklab, var(--ds-paper-danger) 18%, transparent)",
      "type": "color",
      "tier": "semantic",
      "aliasOf": null,
      "description": "Hover state of paper-danger-soft surfaces. 18% paper-danger over the paper. Paper theme only."
    },
    {
      "name": "color.paper-danger-line",
      "cssVar": "--ds-paper-danger-line",
      "value": "rgba(168, 35, 27, 0.35)",
      "cssValue": "color-mix(in oklab, var(--ds-paper-danger) 35%, transparent)",
      "type": "color",
      "tier": "semantic",
      "aliasOf": null,
      "description": "Border of danger-tinted surfaces on paper. 35% paper-danger over the paper. Paper theme only."
    },
    {
      "name": "color.paper-accent-soft",
      "cssVar": "--ds-paper-accent-soft",
      "value": "rgba(148, 74, 45, 0.14)",
      "cssValue": "color-mix(in oklab, var(--ds-paper-accent) 14%, transparent)",
      "type": "color",
      "tier": "semantic",
      "aliasOf": null,
      "description": "Tinted background for accent states on paper (selected item, info badge). 14% paper-accent over the paper. Not for text. Paper theme only."
    },
    {
      "name": "focus-ring",
      "cssVar": "--ds-focus-ring",
      "value": "0px 0px 0px 3px rgba(138, 180, 255, 0.25)",
      "cssValue": "0px 0px 0px 3px color-mix(in oklab, var(--ds-accent) 25%, transparent)",
      "type": "shadow",
      "tier": "core",
      "aliasOf": null,
      "description": "Focus halo: 3px ring, 25% accent over the surface beneath, used as box-shadow next to an accent border. base.css adds a transparent outline so focus stays visible in forced-colors mode. Not a hover or selected style."
    },
    {
      "name": "focus-ring-danger",
      "cssVar": "--ds-focus-ring-danger",
      "value": "0px 0px 0px 3px rgba(240, 122, 110, 0.25)",
      "cssValue": "0px 0px 0px 3px color-mix(in oklab, var(--ds-danger) 25%, transparent)",
      "type": "shadow",
      "tier": "core",
      "aliasOf": null,
      "description": "Focus halo for invalid fields: 3px ring, 25% danger over the surface beneath. Use instead of focus-ring when the control is in an error state. Not a general error style."
    },
    {
      "name": "font.sans",
      "cssVar": "--ds-font-sans",
      "value": "Geist, \"Geist Fallback\", system-ui, sans-serif",
      "cssValue": "\"Geist\", \"Geist Fallback\", system-ui, sans-serif",
      "type": "fontFamily",
      "tier": "core",
      "aliasOf": null,
      "description": "UI font stack: self-hosted Geist, then a metric-matched Arial fallback face, then the system font. Use for all interface text. Not for numbers, codes or data (use font.mono)."
    },
    {
      "name": "font.mono",
      "cssVar": "--ds-font-mono",
      "value": "\"Geist Mono\", \"Geist Mono Fallback\", ui-monospace, monospace",
      "cssValue": "\"Geist Mono\", \"Geist Mono Fallback\", ui-monospace, monospace",
      "type": "fontFamily",
      "tier": "core",
      "aliasOf": null,
      "description": "Data font stack: self-hosted Geist Mono with a metric-matched fallback. Use for numbers, codes, amounts, shortcuts and uppercase group captions. Pair with tabular-nums. Not for running text."
    },
    {
      "name": "weight.regular",
      "cssVar": "--ds-weight-regular",
      "value": "400",
      "cssValue": "400",
      "type": "fontWeight",
      "tier": "core",
      "aliasOf": null,
      "description": "Regular weight (400): body text, descriptions, mono data."
    },
    {
      "name": "weight.medium",
      "cssVar": "--ds-weight-medium",
      "value": "500",
      "cssValue": "500",
      "type": "fontWeight",
      "tier": "core",
      "aliasOf": null,
      "description": "Medium weight (500): labels, chips, mono captions. Not for body paragraphs."
    },
    {
      "name": "weight.semibold",
      "cssVar": "--ds-weight-semibold",
      "value": "600",
      "cssValue": "600",
      "type": "fontWeight",
      "tier": "core",
      "aliasOf": null,
      "description": "Semibold weight (600): display, title and heading. The heaviest weight in use; do not add bold (700)."
    },
    {
      "name": "fs.display",
      "cssVar": "--ds-fs-display",
      "value": "34px",
      "cssValue": "34px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Display font size (34px, line 40px, tracking -2%, semibold). Hero statement; at most once per screen. Minimum font size in the system is 11.5px (caption); never go below it."
    },
    {
      "name": "fs.title",
      "cssVar": "--ds-fs-title",
      "value": "22px",
      "cssValue": "22px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Title font size (22px, line 30px, tracking -1%, semibold). Page and section titles. Minimum font size in the system is 11.5px (caption); never go below it."
    },
    {
      "name": "fs.heading",
      "cssVar": "--ds-fs-heading",
      "value": "17px",
      "cssValue": "17px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Heading font size (17px, line 24px, semibold). Dialog titles and card headings. Minimum font size in the system is 11.5px (caption); never go below it."
    },
    {
      "name": "fs.body",
      "cssVar": "--ds-fs-body",
      "value": "15px",
      "cssValue": "15px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Body font size (15px, line 24px, regular). Default running text; the base size of the app. Minimum font size in the system is 11.5px (caption); never go below it."
    },
    {
      "name": "fs.small",
      "cssVar": "--ds-fs-small",
      "value": "14px",
      "cssValue": "14px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Small font size (14px, line 22px, regular). Descriptions, helper text and table cells. Minimum font size in the system is 11.5px (caption); never go below it."
    },
    {
      "name": "fs.label",
      "cssVar": "--ds-fs-label",
      "value": "13px",
      "cssValue": "13px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Label font size (13px, line 18px, medium). Field labels, chips and compact buttons. Minimum font size in the system is 11.5px (caption); never go below it."
    },
    {
      "name": "fs.meta",
      "cssVar": "--ds-fs-meta",
      "value": "12px",
      "cssValue": "12px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Meta font size (12px, line 16px, mono regular). Dates, phone numbers and counts next to titles. Minimum font size in the system is 11.5px (caption); never go below it."
    },
    {
      "name": "fs.caption",
      "cssVar": "--ds-fs-caption",
      "value": "11.5px",
      "cssValue": "11.5px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Caption font size (11.5px, line 16px, mono medium, uppercase, +8% tracking). FLOOR of the type scale: no token or component may use a smaller size. Group captions and table headers."
    },
    {
      "name": "fs.num",
      "cssVar": "--ds-fs-num",
      "value": "24px",
      "cssValue": "24px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Number font size for indicator figures (24px, line 32px, mono medium). Use with tabular-nums. Minimum font size in the system is 11.5px (caption); never go below it."
    },
    {
      "name": "fs.num-lg",
      "cssVar": "--ds-fs-num-lg",
      "value": "30px",
      "cssValue": "30px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Number font size for highlighted totals such as a balance (30px, line 36px, mono medium). Use with tabular-nums. Minimum font size in the system is 11.5px (caption); never go below it."
    },
    {
      "name": "fs.icon",
      "cssVar": "--ds-fs-icon",
      "value": "20px",
      "cssValue": "20px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Font size of text glyphs inside icon-only buttons (for example the multiplication sign and chevrons), 20px. Not for SVG icons; use size.icon-*."
    },
    {
      "name": "lh.display",
      "cssVar": "--ds-lh-display",
      "value": "40px",
      "cssValue": "40px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Line height for fs.display (40px)."
    },
    {
      "name": "lh.title",
      "cssVar": "--ds-lh-title",
      "value": "30px",
      "cssValue": "30px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Line height for fs.title (30px)."
    },
    {
      "name": "lh.heading",
      "cssVar": "--ds-lh-heading",
      "value": "24px",
      "cssValue": "24px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Line height for fs.heading (24px)."
    },
    {
      "name": "lh.body",
      "cssVar": "--ds-lh-body",
      "value": "24px",
      "cssValue": "24px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Line height for fs.body (24px, ratio 1.6)."
    },
    {
      "name": "lh.small",
      "cssVar": "--ds-lh-small",
      "value": "22px",
      "cssValue": "22px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Line height for fs.small (22px)."
    },
    {
      "name": "lh.label",
      "cssVar": "--ds-lh-label",
      "value": "18px",
      "cssValue": "18px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Line height for fs.label (18px)."
    },
    {
      "name": "lh.meta",
      "cssVar": "--ds-lh-meta",
      "value": "16px",
      "cssValue": "16px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Line height for fs.meta (16px)."
    },
    {
      "name": "lh.caption",
      "cssVar": "--ds-lh-caption",
      "value": "16px",
      "cssValue": "16px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Line height for fs.caption (16px)."
    },
    {
      "name": "lh.num",
      "cssVar": "--ds-lh-num",
      "value": "32px",
      "cssValue": "32px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Line height for fs.num (32px)."
    },
    {
      "name": "lh.num-lg",
      "cssVar": "--ds-lh-num-lg",
      "value": "36px",
      "cssValue": "36px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Line height for fs.num-lg (36px)."
    },
    {
      "name": "tracking.display",
      "cssVar": "--ds-tracking-display",
      "value": "-0.68px",
      "cssValue": "-0.68px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Letter spacing for display: -2% of 34px = -0.68px. DTCG dimensions have no em unit, so the exact px equivalent is stored. Use only with fs.display."
    },
    {
      "name": "tracking.title",
      "cssVar": "--ds-tracking-title",
      "value": "-0.22px",
      "cssValue": "-0.22px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Letter spacing for title: -1% of 22px = -0.22px. Use only with fs.title."
    },
    {
      "name": "tracking.caption",
      "cssVar": "--ds-tracking-caption",
      "value": "0.92px",
      "cssValue": "0.92px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Letter spacing for caption: +8% of 11.5px = 0.92px. Use only with fs.caption and uppercase."
    },
    {
      "name": "typography.display",
      "cssVar": null,
      "value": "{\"fontFamily\":\"Geist, \\\"Geist Fallback\\\", system-ui, sans-serif\",\"fontSize\":\"34px\",\"fontWeight\":600,\"letterSpacing\":\"-0.68px\",\"lineHeight\":1.1765}",
      "cssValue": "null",
      "type": "typography",
      "tier": "core",
      "aliasOf": null,
      "description": "Display role: 34/40, semibold, -2% tracking. Composite for documentation and design tools; CSS uses the individual fs, lh and weight variables."
    },
    {
      "name": "typography.title",
      "cssVar": null,
      "value": "{\"fontFamily\":\"Geist, \\\"Geist Fallback\\\", system-ui, sans-serif\",\"fontSize\":\"22px\",\"fontWeight\":600,\"letterSpacing\":\"-0.22px\",\"lineHeight\":1.3636}",
      "cssValue": "null",
      "type": "typography",
      "tier": "core",
      "aliasOf": null,
      "description": "Title role: 22/30, semibold, -1% tracking. Composite for documentation and design tools; CSS uses the individual fs, lh and weight variables."
    },
    {
      "name": "typography.heading",
      "cssVar": null,
      "value": "{\"fontFamily\":\"Geist, \\\"Geist Fallback\\\", system-ui, sans-serif\",\"fontSize\":\"17px\",\"fontWeight\":600,\"letterSpacing\":\"0px\",\"lineHeight\":1.4118}",
      "cssValue": "null",
      "type": "typography",
      "tier": "core",
      "aliasOf": null,
      "description": "Heading role: 17/24, semibold. Composite for documentation and design tools; CSS uses the individual fs, lh and weight variables."
    },
    {
      "name": "typography.body",
      "cssVar": null,
      "value": "{\"fontFamily\":\"Geist, \\\"Geist Fallback\\\", system-ui, sans-serif\",\"fontSize\":\"15px\",\"fontWeight\":400,\"letterSpacing\":\"0px\",\"lineHeight\":1.6}",
      "cssValue": "null",
      "type": "typography",
      "tier": "core",
      "aliasOf": null,
      "description": "Body role: 15/24, regular. Composite for documentation and design tools; CSS uses the individual fs, lh and weight variables."
    },
    {
      "name": "typography.small",
      "cssVar": null,
      "value": "{\"fontFamily\":\"Geist, \\\"Geist Fallback\\\", system-ui, sans-serif\",\"fontSize\":\"14px\",\"fontWeight\":400,\"letterSpacing\":\"0px\",\"lineHeight\":1.5714}",
      "cssValue": "null",
      "type": "typography",
      "tier": "core",
      "aliasOf": null,
      "description": "Small role: 14/22, regular. Composite for documentation and design tools; CSS uses the individual fs, lh and weight variables."
    },
    {
      "name": "typography.label",
      "cssVar": null,
      "value": "{\"fontFamily\":\"Geist, \\\"Geist Fallback\\\", system-ui, sans-serif\",\"fontSize\":\"13px\",\"fontWeight\":500,\"letterSpacing\":\"0px\",\"lineHeight\":1.3846}",
      "cssValue": "null",
      "type": "typography",
      "tier": "core",
      "aliasOf": null,
      "description": "Label role: 13/18, medium. Composite for documentation and design tools; CSS uses the individual fs, lh and weight variables."
    },
    {
      "name": "typography.meta",
      "cssVar": null,
      "value": "{\"fontFamily\":\"\\\"Geist Mono\\\", \\\"Geist Mono Fallback\\\", ui-monospace, monospace\",\"fontSize\":\"12px\",\"fontWeight\":400,\"letterSpacing\":\"0px\",\"lineHeight\":1.3333}",
      "cssValue": "null",
      "type": "typography",
      "tier": "core",
      "aliasOf": null,
      "description": "Meta role: 12/16, mono regular. Composite for documentation and design tools; CSS uses the individual fs, lh and weight variables."
    },
    {
      "name": "typography.caption",
      "cssVar": null,
      "value": "{\"fontFamily\":\"\\\"Geist Mono\\\", \\\"Geist Mono Fallback\\\", ui-monospace, monospace\",\"fontSize\":\"11.5px\",\"fontWeight\":500,\"letterSpacing\":\"0.92px\",\"lineHeight\":1.3913}",
      "cssValue": "null",
      "type": "typography",
      "tier": "core",
      "aliasOf": null,
      "description": "Caption role: 11.5/16, mono medium, uppercase (text-transform applied in CSS), +8% tracking. Floor of the scale. Composite for documentation and design tools; CSS uses the individual fs, lh and weight variables."
    },
    {
      "name": "typography.num",
      "cssVar": null,
      "value": "{\"fontFamily\":\"\\\"Geist Mono\\\", \\\"Geist Mono Fallback\\\", ui-monospace, monospace\",\"fontSize\":\"24px\",\"fontWeight\":500,\"letterSpacing\":\"0px\",\"lineHeight\":1.3333}",
      "cssValue": "null",
      "type": "typography",
      "tier": "core",
      "aliasOf": null,
      "description": "Indicator number role: 24/32, mono medium, tabular-nums. Composite for documentation and design tools; CSS uses the individual fs, lh and weight variables."
    },
    {
      "name": "typography.num-lg",
      "cssVar": null,
      "value": "{\"fontFamily\":\"\\\"Geist Mono\\\", \\\"Geist Mono Fallback\\\", ui-monospace, monospace\",\"fontSize\":\"30px\",\"fontWeight\":500,\"letterSpacing\":\"0px\",\"lineHeight\":1.2}",
      "cssValue": "null",
      "type": "typography",
      "tier": "core",
      "aliasOf": null,
      "description": "Highlight number role: 30/36, mono medium, tabular-nums. Composite for documentation and design tools; CSS uses the individual fs, lh and weight variables."
    },
    {
      "name": "space.1",
      "cssVar": "--ds-space-1",
      "value": "4px",
      "cssValue": "4px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Space step 1 (4px): the grid unit. Icon-to-text gaps and tight padding."
    },
    {
      "name": "space.2",
      "cssVar": "--ds-space-2",
      "value": "8px",
      "cssValue": "8px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Space step 2 (8px). Default gap between related elements inside a component."
    },
    {
      "name": "space.3",
      "cssVar": "--ds-space-3",
      "value": "12px",
      "cssValue": "12px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Space step 3 (12px). Compact padding and form field gaps."
    },
    {
      "name": "space.4",
      "cssVar": "--ds-space-4",
      "value": "16px",
      "cssValue": "16px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Space step 4 (16px). Standard padding and gap between components."
    },
    {
      "name": "space.5",
      "cssVar": "--ds-space-5",
      "value": "20px",
      "cssValue": "20px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Space step 5 (20px). Card padding."
    },
    {
      "name": "space.6",
      "cssVar": "--ds-space-6",
      "value": "24px",
      "cssValue": "24px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Space step 6 (24px). Gap between sections inside a page."
    },
    {
      "name": "space.8",
      "cssVar": "--ds-space-8",
      "value": "32px",
      "cssValue": "32px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Space step 8 (32px). Large section separation."
    },
    {
      "name": "space.12",
      "cssVar": "--ds-space-12",
      "value": "48px",
      "cssValue": "48px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Space step 12 (48px). Page-level separation."
    },
    {
      "name": "space.16",
      "cssVar": "--ds-space-16",
      "value": "64px",
      "cssValue": "64px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Space step 16 (64px). Largest spacing; hero and empty-state breathing room."
    },
    {
      "name": "size.control-h-sm",
      "cssVar": "--ds-control-h-sm",
      "value": "32px",
      "cssValue": "32px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Height of small controls (32px). Dense toolbars. Must still meet the 24px minimum target (size.target-min)."
    },
    {
      "name": "size.control-h-md",
      "cssVar": "--ds-control-h-md",
      "value": "40px",
      "cssValue": "40px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Height of default controls (40px): buttons, inputs, selects. The handoff --control-h."
    },
    {
      "name": "size.control-h-lg",
      "cssVar": "--ds-control-h-lg",
      "value": "48px",
      "cssValue": "48px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Height of large controls (48px): primary actions and touch-first forms."
    },
    {
      "name": "size.item-h",
      "cssVar": "--ds-item-h",
      "value": "36px",
      "cssValue": "36px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Height of menu items, navigation items and listbox options (36px)."
    },
    {
      "name": "size.row-h",
      "cssVar": "--ds-row-h",
      "value": "52px",
      "cssValue": "52px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Height of table and list rows (52px)."
    },
    {
      "name": "size.row-h-dense",
      "cssVar": "--ds-row-h-dense",
      "value": "60px",
      "cssValue": "60px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Height of dense rows with two lines of content (60px). Taller than row-h because it holds more content."
    },
    {
      "name": "size.sidebar-w",
      "cssVar": "--ds-sidebar-w",
      "value": "240px",
      "cssValue": "240px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Width of the app sidebar (240px)."
    },
    {
      "name": "size.topbar-h",
      "cssVar": "--ds-topbar-h",
      "value": "64px",
      "cssValue": "64px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Height of the top bar (64px)."
    },
    {
      "name": "size.icon-xs",
      "cssVar": "--ds-icon-xs",
      "value": "12px",
      "cssValue": "12px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Icon size extra small (12px): inline status glyphs, chevrons in chips."
    },
    {
      "name": "size.icon-sm",
      "cssVar": "--ds-icon-sm",
      "value": "14px",
      "cssValue": "14px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Icon size small (14px): icons inside dense controls."
    },
    {
      "name": "size.icon-md",
      "cssVar": "--ds-icon-md",
      "value": "18px",
      "cssValue": "18px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Icon size medium (18px): default icon beside text and in nav items."
    },
    {
      "name": "size.icon-lg",
      "cssVar": "--ds-icon-lg",
      "value": "20px",
      "cssValue": "20px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Icon size large (20px): icon-only buttons and empty states."
    },
    {
      "name": "size.target-min",
      "cssVar": "--ds-target-min",
      "value": "24px",
      "cssValue": "24px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Minimum interactive target size (24px, WCAG 2.5.8). No interactive element may be smaller in either dimension."
    },
    {
      "name": "radius.sm",
      "cssVar": "--ds-radius-sm",
      "value": "4px",
      "cssValue": "4px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Small radius (4px): chips, menu items, checkboxes."
    },
    {
      "name": "radius.md",
      "cssVar": "--ds-radius-md",
      "value": "6px",
      "cssValue": "6px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Medium radius (6px): buttons and inputs. The handoff --radius."
    },
    {
      "name": "radius.lg",
      "cssVar": "--ds-radius-lg",
      "value": "10px",
      "cssValue": "10px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Large radius (10px): cards, menus, popovers, dialogs."
    },
    {
      "name": "radius.pill",
      "cssVar": "--ds-radius-pill",
      "value": "999px",
      "cssValue": "999px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Pill radius (999px): badges and switches. Any very large value renders fully round; do not use on large rectangles."
    },
    {
      "name": "shadow.overlay",
      "cssVar": "--ds-shadow-overlay",
      "value": "0px 12px 32px 0px rgba(0, 0, 0, 0.6)",
      "cssValue": "0px 12px 32px #0009",
      "type": "shadow",
      "tier": "core",
      "aliasOf": null,
      "description": "Shadow for floating overlays: menus, popovers, toasts. The only elevation besides dialog. Never on cards or inline elements."
    },
    {
      "name": "shadow.dialog",
      "cssVar": "--ds-shadow-dialog",
      "value": "0px 24px 48px 0px rgba(0, 0, 0, 0.7)",
      "cssValue": "0px 24px 48px #000000b3",
      "type": "shadow",
      "tier": "core",
      "aliasOf": null,
      "description": "Shadow for dialogs and side sheets: the highest elevation. Never on inline elements."
    },
    {
      "name": "motion.duration",
      "cssVar": "--ds-duration",
      "value": "150ms",
      "cssValue": "150ms",
      "type": "duration",
      "tier": "core",
      "aliasOf": null,
      "description": "Standard transition duration (150ms): hover, focus and state changes. Only color, opacity and position. Neutralized under prefers-reduced-motion."
    },
    {
      "name": "motion.duration-done",
      "cssVar": "--ds-duration-done",
      "value": "320ms",
      "cssValue": "320ms",
      "type": "duration",
      "tier": "core",
      "aliasOf": null,
      "description": "Completion feedback duration (320ms): subtle check or fill when something is done. No confetti."
    },
    {
      "name": "motion.duration-progress",
      "cssVar": "--ds-duration-progress",
      "value": "300ms",
      "cssValue": "300ms",
      "type": "duration",
      "tier": "core",
      "aliasOf": null,
      "description": "Duration of progress bar fill changes (300ms). Neutralized under prefers-reduced-motion."
    },
    {
      "name": "motion.ease",
      "cssVar": "--ds-ease",
      "value": "cubic-bezier(0.2, 0, 0, 1)",
      "cssValue": "cubic-bezier(0.2, 0, 0, 1)",
      "type": "cubicBezier",
      "tier": "core",
      "aliasOf": null,
      "description": "Standard easing, cubic-bezier(.2, 0, 0, 1): fast start, soft landing. Use with every transition."
    },
    {
      "name": "z.sheet",
      "cssVar": "--ds-z-sheet",
      "value": "40",
      "cssValue": "40",
      "type": "number",
      "tier": "core",
      "aliasOf": null,
      "description": "Layer of side sheets. The scrim uses this value and the panel uses this value + 1 (calc). Below dialogs, because a dialog can open from a sheet."
    },
    {
      "name": "z.dialog",
      "cssVar": "--ds-z-dialog",
      "value": "45",
      "cssValue": "45",
      "type": "number",
      "tier": "core",
      "aliasOf": null,
      "description": "Layer of dialogs and their overlay. Above sheets; below dropdowns and popovers so a select or menu opened inside a dialog renders on top of it."
    },
    {
      "name": "z.dropdown",
      "cssVar": "--ds-z-dropdown",
      "value": "50",
      "cssValue": "50",
      "type": "number",
      "tier": "core",
      "aliasOf": null,
      "description": "Layer of dropdowns, selects, comboboxes and date pickers. Above dialogs and sheets (they can open from inside one); below popovers."
    },
    {
      "name": "z.popover",
      "cssVar": "--ds-z-popover",
      "value": "55",
      "cssValue": "55",
      "type": "number",
      "tier": "core",
      "aliasOf": null,
      "description": "Layer of popovers and action menus. Above dropdowns, dialogs and sheets."
    },
    {
      "name": "z.toast",
      "cssVar": "--ds-z-toast",
      "value": "58",
      "cssValue": "58",
      "type": "number",
      "tier": "core",
      "aliasOf": null,
      "description": "Layer of toasts. Above every overlay so confirmations and Undo stay visible; below tooltips."
    },
    {
      "name": "z.tooltip",
      "cssVar": "--ds-z-tooltip",
      "value": "60",
      "cssValue": "60",
      "type": "number",
      "tier": "core",
      "aliasOf": null,
      "description": "Layer of tooltips. The highest layer in the system. Do not add layers above it."
    },
    {
      "name": "opacity.disabled",
      "cssVar": "--ds-opacity-disabled",
      "value": "0.35",
      "cssValue": "0.35",
      "type": "number",
      "tier": "core",
      "aliasOf": null,
      "description": "Opacity of disabled controls. One value for every component (the handoff .4 and .45 are unified). Disabled elements are exempt from contrast rules. Not for decorative fading."
    },
    {
      "name": "accordion.padding-inline",
      "cssVar": "--ds-accordion-padding-inline",
      "value": "12px",
      "cssValue": "var(--ds-space-3)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "space.3",
      "description": "Horizontal padding of an Accordion header and panel (12px)."
    },
    {
      "name": "add-card.min-block-size",
      "cssVar": "--ds-add-card-min-block-size",
      "value": "64px",
      "cssValue": "var(--ds-space-16)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "space.16",
      "description": "Minimum height of an AddCard (64px), so a lone tile keeps a comfortable target."
    },
    {
      "name": "add-card.gap",
      "cssVar": "--ds-add-card-gap",
      "value": "8px",
      "cssValue": "var(--ds-space-2)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "space.2",
      "description": "Gap between the plus icon and the label of an AddCard (8px)."
    },
    {
      "name": "agent-card.min-height",
      "cssVar": "--ds-agent-card-min-height",
      "value": "196px",
      "cssValue": "196px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Minimum height of an AgentCard (196px), so cards in a grid line up."
    },
    {
      "name": "agent-card.padding",
      "cssVar": "--ds-agent-card-padding",
      "value": "20px",
      "cssValue": "var(--ds-space-5)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "space.5",
      "description": "Inner padding of an AgentCard (20px)."
    },
    {
      "name": "agent-card.gap",
      "cssVar": "--ds-agent-card-gap",
      "value": "12px",
      "cssValue": "var(--ds-space-3)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "space.3",
      "description": "Vertical gap between the header, description and footer (12px)."
    },
    {
      "name": "agent-card.icon-box-size",
      "cssVar": "--ds-agent-card-icon-box-size",
      "value": "40px",
      "cssValue": "40px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Side of the square that frames the agent icon (40px)."
    },
    {
      "name": "alert.success-bg",
      "cssVar": "--ds-alert-success-bg",
      "value": "rgba(95, 212, 154, 0.06)",
      "cssValue": "color-mix(in oklab, var(--ds-success) 6%, transparent)",
      "type": "color",
      "tier": "core",
      "aliasOf": null,
      "description": "Background of a success Alert: 6% success over the surface beneath, resolved with color-mix. Not for text."
    },
    {
      "name": "alert.success-border",
      "cssVar": "--ds-alert-success-border",
      "value": "rgba(95, 212, 154, 0.3)",
      "cssValue": "color-mix(in oklab, var(--ds-success) 30%, transparent)",
      "type": "color",
      "tier": "core",
      "aliasOf": null,
      "description": "Border of a success Alert: 30% success over the surface beneath, resolved with color-mix. Not for text."
    },
    {
      "name": "alert.warning-bg",
      "cssVar": "--ds-alert-warning-bg",
      "value": "rgba(233, 182, 92, 0.06)",
      "cssValue": "color-mix(in oklab, var(--ds-warning) 6%, transparent)",
      "type": "color",
      "tier": "core",
      "aliasOf": null,
      "description": "Background of a warning Alert: 6% warning over the surface beneath, resolved with color-mix. Not for text."
    },
    {
      "name": "alert.warning-border",
      "cssVar": "--ds-alert-warning-border",
      "value": "rgba(233, 182, 92, 0.3)",
      "cssValue": "color-mix(in oklab, var(--ds-warning) 30%, transparent)",
      "type": "color",
      "tier": "core",
      "aliasOf": null,
      "description": "Border of a warning Alert: 30% warning over the surface beneath, resolved with color-mix. Not for text."
    },
    {
      "name": "alert.danger-bg",
      "cssVar": "--ds-alert-danger-bg",
      "value": "rgba(240, 122, 110, 0.06)",
      "cssValue": "color-mix(in oklab, var(--ds-danger) 6%, transparent)",
      "type": "color",
      "tier": "core",
      "aliasOf": null,
      "description": "Background of a danger Alert: 6% danger over the surface beneath, resolved with color-mix. Not for text."
    },
    {
      "name": "alert.danger-border",
      "cssVar": "--ds-alert-danger-border",
      "value": "rgba(240, 122, 110, 0.3)",
      "cssValue": "color-mix(in oklab, var(--ds-danger) 30%, transparent)",
      "type": "color",
      "tier": "core",
      "aliasOf": null,
      "description": "Border of a danger Alert: 30% danger over the surface beneath, resolved with color-mix. Not for text."
    },
    {
      "name": "app-shell.detail-w",
      "cssVar": "--ds-app-shell-detail-w",
      "value": "360px",
      "cssValue": "360px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Width of the optional detail aside of AppShell (360px)."
    },
    {
      "name": "app-shell.main-padding",
      "cssVar": "--ds-app-shell-main-padding",
      "value": "24px",
      "cssValue": "var(--ds-content-gutter)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "space.6",
      "description": "Padding around the main content of AppShell (24px)."
    },
    {
      "name": "app-shell.nav-z-index",
      "cssVar": "--ds-app-shell-nav-z-index",
      "value": "40",
      "cssValue": "var(--ds-z-sheet)",
      "type": "number",
      "tier": "core",
      "aliasOf": "z.sheet",
      "description": "Layer of the off-canvas navigation panel and its scrim below the md breakpoint. Same layer as Sheet, so a Dialog opened from the panel stacks above it."
    },
    {
      "name": "approval-card.padding",
      "cssVar": "--ds-approval-card-padding",
      "value": "20px",
      "cssValue": "var(--ds-space-5)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "space.5",
      "description": "Horizontal padding of the header and body of an ApprovalCard (20px)."
    },
    {
      "name": "approval-card.header-min-height",
      "cssVar": "--ds-approval-card-header-min-height",
      "value": "48px",
      "cssValue": "48px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Minimum height of the ApprovalCard header row (48px)."
    },
    {
      "name": "approval-card.header-padding-block",
      "cssVar": "--ds-approval-card-header-padding-block",
      "value": "12px",
      "cssValue": "var(--ds-space-3)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "space.3",
      "description": "Vertical padding of the header row (12px)."
    },
    {
      "name": "approval-card.body-padding-block",
      "cssVar": "--ds-approval-card-body-padding-block",
      "value": "16px",
      "cssValue": "var(--ds-space-4)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "space.4",
      "description": "Vertical padding of the body (16px)."
    },
    {
      "name": "approval-card.gap",
      "cssVar": "--ds-approval-card-gap",
      "value": "16px",
      "cssValue": "var(--ds-space-4)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "space.4",
      "description": "Gap between the message, the draft, the flag and the actions (16px)."
    },
    {
      "name": "avatar.size-sm",
      "cssVar": "--ds-avatar-size-sm",
      "value": "24px",
      "cssValue": "24px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Diameter of a small Avatar (24px)."
    },
    {
      "name": "avatar.size-md",
      "cssVar": "--ds-avatar-size-md",
      "value": "28px",
      "cssValue": "28px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Diameter of the default Avatar (28px)."
    },
    {
      "name": "avatar.size-lg",
      "cssVar": "--ds-avatar-size-lg",
      "value": "40px",
      "cssValue": "40px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Diameter of a large Avatar (40px)."
    },
    {
      "name": "avatar.ring-width",
      "cssVar": "--ds-avatar-ring-width",
      "value": "2px",
      "cssValue": "2px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Width of the optional Avatar ring (2px) that separates stacked avatars from the surface."
    },
    {
      "name": "avatar.initials-ratio",
      "cssVar": "--ds-avatar-initials-ratio",
      "value": "0.4",
      "cssValue": "0.4",
      "type": "number",
      "tier": "core",
      "aliasOf": null,
      "description": "Initials font size as a share of the Avatar size (0.4). Keeps two letters inside the circle at every size."
    },
    {
      "name": "badge.height",
      "cssVar": "--ds-badge-height",
      "value": "24px",
      "cssValue": "24px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Height of a Badge (24px). Badges are static labels, not targets."
    },
    {
      "name": "badge.dot-size",
      "cssVar": "--ds-badge-dot-size",
      "value": "6px",
      "cssValue": "6px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Diameter of the decorative status dot inside a Badge (6px). Never the only carrier of meaning."
    },
    {
      "name": "badge.padding-inline",
      "cssVar": "--ds-badge-padding-inline",
      "value": "8px",
      "cssValue": "var(--ds-space-2)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "space.2",
      "description": "Horizontal padding of a Badge (8px)."
    },
    {
      "name": "banner.success-bg",
      "cssVar": "--ds-banner-success-bg",
      "value": "rgba(95, 212, 154, 0.06)",
      "cssValue": "color-mix(in oklab, var(--ds-success) 6%, transparent)",
      "type": "color",
      "tier": "core",
      "aliasOf": null,
      "description": "Background of a success Banner: 6% success over the surface beneath, resolved with color-mix. Not for text."
    },
    {
      "name": "banner.success-border",
      "cssVar": "--ds-banner-success-border",
      "value": "rgba(95, 212, 154, 0.3)",
      "cssValue": "color-mix(in oklab, var(--ds-success) 30%, transparent)",
      "type": "color",
      "tier": "core",
      "aliasOf": null,
      "description": "Border of a success Banner: 30% success over the surface beneath, resolved with color-mix. Not for text."
    },
    {
      "name": "banner.warning-bg",
      "cssVar": "--ds-banner-warning-bg",
      "value": "rgba(233, 182, 92, 0.06)",
      "cssValue": "color-mix(in oklab, var(--ds-warning) 6%, transparent)",
      "type": "color",
      "tier": "core",
      "aliasOf": null,
      "description": "Background of a warning Banner: 6% warning over the surface beneath, resolved with color-mix. Not for text."
    },
    {
      "name": "banner.warning-border",
      "cssVar": "--ds-banner-warning-border",
      "value": "rgba(233, 182, 92, 0.3)",
      "cssValue": "color-mix(in oklab, var(--ds-warning) 30%, transparent)",
      "type": "color",
      "tier": "core",
      "aliasOf": null,
      "description": "Border of a warning Banner: 30% warning over the surface beneath, resolved with color-mix. Not for text."
    },
    {
      "name": "banner.danger-bg",
      "cssVar": "--ds-banner-danger-bg",
      "value": "rgba(240, 122, 110, 0.06)",
      "cssValue": "color-mix(in oklab, var(--ds-danger) 6%, transparent)",
      "type": "color",
      "tier": "core",
      "aliasOf": null,
      "description": "Background of a danger Banner: 6% danger over the surface beneath, resolved with color-mix. Not for text."
    },
    {
      "name": "banner.danger-border",
      "cssVar": "--ds-banner-danger-border",
      "value": "rgba(240, 122, 110, 0.3)",
      "cssValue": "color-mix(in oklab, var(--ds-danger) 30%, transparent)",
      "type": "color",
      "tier": "core",
      "aliasOf": null,
      "description": "Border of a danger Banner: 30% danger over the surface beneath, resolved with color-mix. Not for text."
    },
    {
      "name": "banner.content-basis",
      "cssVar": "--ds-banner-content-basis",
      "value": "240px",
      "cssValue": "240px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Preferred inline size of the text of a Banner (240px). When the text and the action do not fit on one line, the action wraps below the text."
    },
    {
      "name": "breakpoint.sm",
      "cssVar": "--ds-breakpoint-sm",
      "value": "480px",
      "cssValue": "480px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Small breakpoint (480px). Large phones. Components work from 320px; nothing in the DS changes layout at this width, it is a reference for consumer apps."
    },
    {
      "name": "breakpoint.md",
      "cssVar": "--ds-breakpoint-md",
      "value": "768px",
      "cssValue": "768px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Medium breakpoint (768px). AppShell shows the sidebar in the flow from this width up (measured on the shell's own width, with a container query) and turns it into an off-canvas panel below. CSS cannot read custom properties inside @media or @container conditions, so the CSS Module repeats this value; AppShell.test.tsx asserts they agree."
    },
    {
      "name": "breakpoint.lg",
      "cssVar": "--ds-breakpoint-lg",
      "value": "1024px",
      "cssValue": "1024px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Large breakpoint (1024px). Tablets in landscape and small laptops. A reference for consumer apps (for example to show a detail pane beside a list)."
    },
    {
      "name": "breakpoint.xl",
      "cssVar": "--ds-breakpoint-xl",
      "value": "1280px",
      "cssValue": "1280px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Extra-large breakpoint (1280px). Desktop. The handoff prototype assumed 1180px minimum; the DS itself guarantees nothing above md."
    },
    {
      "name": "button.hover-brightness",
      "cssVar": "--ds-button-hover-brightness",
      "value": "0.88",
      "cssValue": "0.88",
      "type": "number",
      "tier": "core",
      "aliasOf": null,
      "description": "Brightness filter of the primary Button on hover (0.88): ink on dark gets slightly dimmer instead of changing color. Not for other variants or other components."
    },
    {
      "name": "button.pending-label-opacity",
      "cssVar": "--ds-button-pending-label-opacity",
      "value": "0.65",
      "cssValue": "0.65",
      "type": "number",
      "tier": "core",
      "aliasOf": null,
      "description": "Opacity of the Button label while isPending (0.65): the label stays readable next to the spinner but reads as busy. Busy state only, not for disabled."
    },
    {
      "name": "button.danger-solid-hover-brightness",
      "cssVar": "--ds-button-danger-solid-hover-brightness",
      "value": "0.9",
      "cssValue": "0.9",
      "type": "number",
      "tier": "core",
      "aliasOf": null,
      "description": "Brightness filter of the danger-solid Button on hover (0.9). Use only for the confirm action of a destructive dialog."
    },
    {
      "name": "calendar.cell-size",
      "cssVar": "--ds-calendar-cell-size",
      "value": "36px",
      "cssValue": "var(--ds-item-h)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "size.item-h",
      "description": "Width and height of a Calendar day cell (36px). A month grid is seven cells wide."
    },
    {
      "name": "calendar.weekday-height",
      "cssVar": "--ds-calendar-weekday-height",
      "value": "24px",
      "cssValue": "var(--ds-target-min)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "size.target-min",
      "description": "Height of the weekday header row of a Calendar (24px)."
    },
    {
      "name": "calendar.today-ring-width",
      "cssVar": "--ds-calendar-today-ring-width",
      "value": "1px",
      "cssValue": "1px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Border width of the ring that marks today in a Calendar (1px)."
    },
    {
      "name": "card-link.gap",
      "cssVar": "--ds-card-link-gap",
      "value": "12px",
      "cssValue": "var(--ds-space-3)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "space.3",
      "description": "Gap between the leading node and the text of a CardLink (12px)."
    },
    {
      "name": "card-link.text-gap",
      "cssVar": "--ds-card-link-text-gap",
      "value": "4px",
      "cssValue": "var(--ds-space-1)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "space.1",
      "description": "Vertical gap between the title, description and meta of a CardLink (4px)."
    },
    {
      "name": "card.padding",
      "cssVar": "--ds-card-padding",
      "value": "20px",
      "cssValue": "var(--ds-space-5)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "space.5",
      "description": "Inner padding of a Card (20px)."
    },
    {
      "name": "card.gap",
      "cssVar": "--ds-card-gap",
      "value": "16px",
      "cssValue": "var(--ds-space-4)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "space.4",
      "description": "Vertical gap between the header and the content of a Card (16px)."
    },
    {
      "name": "chart-series.1",
      "cssVar": "--ds-chart-series-1",
      "value": "#EDEDEA",
      "cssValue": "var(--ds-text)",
      "type": "color",
      "tier": "core",
      "aliasOf": "color.gray.9",
      "description": "Series 1 of a multi-series chart (StackedBar) and its Legend swatch: the neutral ramp's first step. Series never use the accent or signal colors by default; pass an explicit color instead."
    },
    {
      "name": "chart-series.2",
      "cssVar": "--ds-chart-series-2",
      "value": "#A3A3A9",
      "cssValue": "var(--ds-text-2)",
      "type": "color",
      "tier": "core",
      "aliasOf": "color.gray.8",
      "description": "Series 2 of a multi-series chart and its Legend swatch."
    },
    {
      "name": "chart-series.3",
      "cssVar": "--ds-chart-series-3",
      "value": "#86868E",
      "cssValue": "var(--ds-text-3)",
      "type": "color",
      "tier": "core",
      "aliasOf": "color.gray.7",
      "description": "Series 3 of a multi-series chart and its Legend swatch."
    },
    {
      "name": "chart-series.4",
      "cssVar": "--ds-chart-series-4",
      "value": "#64646B",
      "cssValue": "var(--ds-line-control)",
      "type": "color",
      "tier": "core",
      "aliasOf": "color.line-control",
      "description": "Series 4 of a multi-series chart and its Legend swatch. Every step keeps 3:1 against the track background."
    },
    {
      "name": "chart-series.hatch-size",
      "cssVar": "--ds-chart-series-hatch-size",
      "value": "3px",
      "cssValue": "3px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Stripe width of the hatch pattern that tells apart series beyond the fourth (3px). The pattern is the non-color cue."
    },
    {
      "name": "chart.height",
      "cssVar": "--ds-chart-height",
      "value": "200px",
      "cssValue": "200px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Default height of a Chart (200px). The height prop overrides it per instance."
    },
    {
      "name": "chart.stroke-w",
      "cssVar": "--ds-chart-stroke-w",
      "value": "1.5px",
      "cssValue": "1.5px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Stroke width of the line series and of point rings (1.5px, same as icons)."
    },
    {
      "name": "chart.point-r",
      "cssVar": "--ds-chart-point-r",
      "value": "3.5px",
      "cssValue": "3.5px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Radius of the active point marker of a line Chart (3.5px)."
    },
    {
      "name": "chart.bar-radius",
      "cssVar": "--ds-chart-bar-radius",
      "value": "4px",
      "cssValue": "var(--ds-radius-sm)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "radius.sm",
      "description": "Corner radius of a bar (4px)."
    },
    {
      "name": "chart.grid-dash",
      "cssVar": "--ds-chart-grid-dash",
      "value": "2px",
      "cssValue": "2px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Dash length of the grid lines of a Chart (2px)."
    },
    {
      "name": "chart.grid-gap",
      "cssVar": "--ds-chart-grid-gap",
      "value": "3px",
      "cssValue": "3px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Gap between dashes of the grid lines of a Chart (3px)."
    },
    {
      "name": "chart.area-opacity",
      "cssVar": "--ds-chart-area-opacity",
      "value": "0.08",
      "cssValue": "0.08",
      "type": "number",
      "tier": "core",
      "aliasOf": null,
      "description": "Opacity of the area under the line of a line Chart (0.08)."
    },
    {
      "name": "chart.outline-w",
      "cssVar": "--ds-chart-outline-w",
      "value": "2px",
      "cssValue": "2px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Outline width of a highlighted bar (2px). Together with the label it is the non-color cue of a highlight."
    },
    {
      "name": "chart.tooltip-padding-inline",
      "cssVar": "--ds-chart-tooltip-padding-inline",
      "value": "8px",
      "cssValue": "var(--ds-space-2)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "space.2",
      "description": "Horizontal padding of the value label of the active Chart point (8px)."
    },
    {
      "name": "chart.tooltip-padding-block",
      "cssVar": "--ds-chart-tooltip-padding-block",
      "value": "4px",
      "cssValue": "var(--ds-space-1)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "space.1",
      "description": "Vertical padding of the value label of the active Chart point (4px)."
    },
    {
      "name": "chart.ref-w",
      "cssVar": "--ds-chart-ref-w",
      "value": "1px",
      "cssValue": "1px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Stroke width of a reference line (average or target) in a Chart (1px)."
    },
    {
      "name": "chart.ref-average-dash",
      "cssVar": "--ds-chart-ref-average-dash",
      "value": "6px",
      "cssValue": "6px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Dash length of an average reference line (6px). Long dashes tell it apart from the target line without color."
    },
    {
      "name": "chart.ref-average-gap",
      "cssVar": "--ds-chart-ref-average-gap",
      "value": "4px",
      "cssValue": "4px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Gap between dashes of an average reference line (4px)."
    },
    {
      "name": "chart.ref-target-dash",
      "cssVar": "--ds-chart-ref-target-dash",
      "value": "10px",
      "cssValue": "10px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Dash length of a target reference line (10px). Dash, gap, dot, gap: tells it apart from the average line without color."
    },
    {
      "name": "chart.ref-target-dot",
      "cssVar": "--ds-chart-ref-target-dot",
      "value": "2px",
      "cssValue": "2px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Dot length of a target reference line (2px), between its dashes."
    },
    {
      "name": "chart.ref-target-gap",
      "cssVar": "--ds-chart-ref-target-gap",
      "value": "3px",
      "cssValue": "3px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Gap around the dot and between dashes of a target reference line (3px)."
    },
    {
      "name": "chart.tooltip-max-w",
      "cssVar": "--ds-chart-tooltip-max-w",
      "value": "240px",
      "cssValue": "240px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Widest the active-point label grows before a long note wraps (240px). Keep in sync with chartLayout.ts."
    },
    {
      "name": "chart.color",
      "cssVar": "--ds-chart-color",
      "value": "#8AB4FF",
      "cssValue": "var(--ds-accent)",
      "type": "color",
      "tier": "core",
      "aliasOf": "color.blue.5",
      "description": "Series color of a Chart. Each tone class sets it; it can be overridden at runtime via style (ADR-0002 amendment)."
    },
    {
      "name": "chart.tooltip-x",
      "cssVar": "--ds-chart-tooltip-x",
      "value": "0px",
      "cssValue": "0px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Horizontal position of the active-point label, in px from the chart's left edge. Set at runtime via style."
    },
    {
      "name": "chart.tooltip-y",
      "cssVar": "--ds-chart-tooltip-y",
      "value": "0px",
      "cssValue": "0px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Vertical position of the active-point label, in px from the chart's top edge. Set at runtime via style."
    },
    {
      "name": "chat-panel.header-height",
      "cssVar": "--ds-chat-panel-header-height",
      "value": "56px",
      "cssValue": "56px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Height of the ChatPanel header (56px)."
    },
    {
      "name": "chat-panel.padding-inline",
      "cssVar": "--ds-chat-panel-padding-inline",
      "value": "20px",
      "cssValue": "var(--ds-space-5)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "space.5",
      "description": "Horizontal padding of the header and the message list (20px)."
    },
    {
      "name": "chat-panel.padding-block",
      "cssVar": "--ds-chat-panel-padding-block",
      "value": "16px",
      "cssValue": "var(--ds-space-4)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "space.4",
      "description": "Vertical padding of the message list (16px)."
    },
    {
      "name": "chat-panel.gap",
      "cssVar": "--ds-chat-panel-gap",
      "value": "12px",
      "cssValue": "var(--ds-space-3)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "space.3",
      "description": "Gap between messages (12px)."
    },
    {
      "name": "chat-panel.bubble-max-ratio",
      "cssVar": "--ds-chat-panel-bubble-max-ratio",
      "value": "0.88",
      "cssValue": "0.88",
      "type": "number",
      "tier": "core",
      "aliasOf": null,
      "description": "Maximum width of a message bubble as a share of the list width (0.88)."
    },
    {
      "name": "chat-panel.composer-padding",
      "cssVar": "--ds-chat-panel-composer-padding",
      "value": "16px",
      "cssValue": "var(--ds-space-4)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "space.4",
      "description": "Padding of the composer area (16px)."
    },
    {
      "name": "checkbox.box-size",
      "cssVar": "--ds-checkbox-box-size",
      "value": "18px",
      "cssValue": "18px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Width and height of the Checkbox box (18px). The 24px minimum target (WCAG 2.5.8) is met by the clickable label row, not the box."
    },
    {
      "name": "checkbox.radius",
      "cssVar": "--ds-checkbox-radius",
      "value": "5px",
      "cssValue": "5px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Corner radius of the Checkbox box (5px, the handoff value; between radius.sm and radius.md). Not for other controls."
    },
    {
      "name": "choice-tiles.min-width",
      "cssVar": "--ds-choice-tiles-min-width",
      "value": "120px",
      "cssValue": "120px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Minimum tile width. Columns collapse so a tile never gets narrower than this (responsive columns)."
    },
    {
      "name": "choice-tiles.gap",
      "cssVar": "--ds-choice-tiles-gap",
      "value": "8px",
      "cssValue": "var(--ds-space-2)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "space.2",
      "description": "Gap between tiles (8px)."
    },
    {
      "name": "choice-tiles.height-md",
      "cssVar": "--ds-choice-tiles-height-md",
      "value": "40px",
      "cssValue": "var(--ds-control-h-md)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "size.control-h-md",
      "description": "Minimum height of a medium tile (40px)."
    },
    {
      "name": "choice-tiles.height-lg",
      "cssVar": "--ds-choice-tiles-height-lg",
      "value": "48px",
      "cssValue": "var(--ds-control-h-lg)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "size.control-h-lg",
      "description": "Minimum height of a large tile (48px, default)."
    },
    {
      "name": "choice-tiles.columns",
      "cssVar": "--ds-choice-tiles-columns",
      "value": "2",
      "cssValue": "2",
      "type": "number",
      "tier": "core",
      "aliasOf": null,
      "description": "Maximum number of columns of ChoiceTiles. Default 2; the component sets it inline from its `columns` prop, and the grid collapses on narrow containers."
    },
    {
      "name": "citation.size",
      "cssVar": "--ds-citation-size",
      "value": "24px",
      "cssValue": "24px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Minimum side of an inline citation marker (24px, the WCAG 2.5.8 target size)."
    },
    {
      "name": "code.inline-padding-block",
      "cssVar": "--ds-code-inline-padding-block",
      "value": "1px",
      "cssValue": "1px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Vertical padding of inline Code (1px) so the box fits the line height of the surrounding text."
    },
    {
      "name": "color-option-group.min-width",
      "cssVar": "--ds-color-option-group-min-width",
      "value": "140px",
      "cssValue": "140px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Minimum option width. Columns collapse so an option never gets narrower than this (responsive columns)."
    },
    {
      "name": "color-option-group.gap",
      "cssVar": "--ds-color-option-group-gap",
      "value": "8px",
      "cssValue": "var(--ds-space-2)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "space.2",
      "description": "Gap between options (8px)."
    },
    {
      "name": "color-option-group.columns",
      "cssVar": "--ds-color-option-group-columns",
      "value": "2",
      "cssValue": "2",
      "type": "number",
      "tier": "core",
      "aliasOf": null,
      "description": "Maximum number of columns of ColorOptionGroup. Default 2; the component sets it inline from its `columns` prop, and the grid collapses on narrow containers."
    },
    {
      "name": "combobox.popover-max-height",
      "cssVar": "--ds-combobox-popover-max-height",
      "value": "320px",
      "cssValue": "var(--ds-select-popover-max-height)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "select.popover-max-height",
      "description": "Maximum height of the Combobox list before it scrolls (same as the Select list)."
    },
    {
      "name": "command-palette.width",
      "cssVar": "--ds-command-palette-width",
      "value": "640px",
      "cssValue": "640px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Maximum width of the CommandPalette panel (640px). Narrower on small screens."
    },
    {
      "name": "command-palette.list-max-height",
      "cssVar": "--ds-command-palette-list-max-height",
      "value": "360px",
      "cssValue": "360px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Maximum height of the CommandPalette command list before it scrolls (360px, about 9 rows at item-h)."
    },
    {
      "name": "command-palette.offset-top",
      "cssVar": "--ds-command-palette-offset-top",
      "value": "96px",
      "cssValue": "96px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Distance between the top of the viewport and the CommandPalette panel (96px). The panel hangs from the top so it does not jump while the list shrinks."
    },
    {
      "name": "container.sm",
      "cssVar": "--ds-container-sm",
      "value": "640px",
      "cssValue": "640px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Maximum inline size of a small Container (640px): a single column form or a narrow article."
    },
    {
      "name": "container.md",
      "cssVar": "--ds-container-md",
      "value": "960px",
      "cssValue": "960px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Maximum inline size of a medium Container (960px): the default for settings pages and detail views."
    },
    {
      "name": "container.lg",
      "cssVar": "--ds-container-lg",
      "value": "1200px",
      "cssValue": "1200px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Maximum inline size of a large Container (1200px): dashboards and tables."
    },
    {
      "name": "content.max",
      "cssVar": "--ds-content-max",
      "value": "1200px",
      "cssValue": "1200px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Default maximum inline size of page content (1200px). Container uses it when no size is given."
    },
    {
      "name": "content.gutter",
      "cssVar": "--ds-content-gutter",
      "value": "24px",
      "cssValue": "var(--ds-space-6)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "space.6",
      "description": "Inline padding of page content, and of Container (24px). It keeps content off the viewport edge on narrow screens."
    },
    {
      "name": "data-table.selection-col-w",
      "cssVar": "--ds-data-table-selection-col-w",
      "value": "40px",
      "cssValue": "40px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Width of the selection checkbox column of a DataTable (40px)."
    },
    {
      "name": "data-table.cell-padding-inline",
      "cssVar": "--ds-data-table-cell-padding-inline",
      "value": "12px",
      "cssValue": "var(--ds-space-3)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "space.3",
      "description": "Horizontal padding of DataTable header and body cells (12px)."
    },
    {
      "name": "data-table.header-padding-block",
      "cssVar": "--ds-data-table-header-padding-block",
      "value": "8px",
      "cssValue": "var(--ds-space-2)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "space.2",
      "description": "Vertical padding of DataTable header cells (8px)."
    },
    {
      "name": "data-table.active-bar-w",
      "cssVar": "--ds-data-table-active-bar-w",
      "value": "2px",
      "cssValue": "2px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Width of the ink bar on the inline-start edge of the active (or selected) DataTable row (2px)."
    },
    {
      "name": "data-table.bulk-bar-h",
      "cssVar": "--ds-data-table-bulk-bar-h",
      "value": "36px",
      "cssValue": "var(--ds-item-h)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "size.item-h",
      "description": "Height of the bulk action bar shown above a DataTable while rows are selected (36px)."
    },
    {
      "name": "data-table.gap",
      "cssVar": "--ds-data-table-gap",
      "value": "12px",
      "cssValue": "var(--ds-space-3)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "space.3",
      "description": "Gap between the bulk bar, the table and the pagination of a DataTable (12px)."
    },
    {
      "name": "data-table.sticky-z-index",
      "cssVar": "--ds-data-table-sticky-z-index",
      "value": "1",
      "cssValue": "1",
      "type": "number",
      "tier": "core",
      "aliasOf": null,
      "description": "Stacking order of a sticky DataTable header inside its scroll container (1). Local to the table, not a layer."
    },
    {
      "name": "data-table.col-w",
      "cssVar": "--ds-data-table-col-w",
      "value": "160px",
      "cssValue": "160px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Width of a DataTable column that has a `width` prop (default 160px). Set at runtime via style on that column header; columns without `width` share the remaining space."
    },
    {
      "name": "data-table.col-min-w",
      "cssVar": "--ds-data-table-col-min-w",
      "value": "0px",
      "cssValue": "0px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Minimum width of a DataTable column that has `width` and `minWidth` props (default 0px, no minimum). Set at runtime via style on that column header; the column is as wide as the larger of `width` and `minWidth`."
    },
    {
      "name": "data-table.min-w",
      "cssVar": "--ds-data-table-min-w",
      "value": "0px",
      "cssValue": "0px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Minimum width of the DataTable table element (default 0px, no minimum). Set at runtime via style when any column has a `minWidth`: the sum of every column's own minimum. A narrower container then scrolls horizontally."
    },
    {
      "name": "data-table.flex-count",
      "cssVar": "--ds-data-table-flex-count",
      "value": "1",
      "cssValue": "1",
      "type": "number",
      "tier": "core",
      "aliasOf": null,
      "description": "Number of flexible DataTable columns (no `width`), which share the space left after every column minimum. Set at runtime via style on the table when any column has a `minWidth`; default 1."
    },
    {
      "name": "data-table.max-h",
      "cssVar": "--ds-data-table-max-h",
      "value": "480px",
      "cssValue": "480px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Maximum height of a scrollable DataTable (default 480px). Set at runtime via style from the `maxHeight` prop."
    },
    {
      "name": "dialog.width-sm",
      "cssVar": "--ds-dialog-width-sm",
      "value": "420px",
      "cssValue": "420px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Maximum width of a small Dialog (420px): confirmations and short forms. The handoff default."
    },
    {
      "name": "dialog.width-md",
      "cssVar": "--ds-dialog-width-md",
      "value": "540px",
      "cssValue": "540px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Maximum width of a medium Dialog (540px): forms with several fields."
    },
    {
      "name": "dialog.width-lg",
      "cssVar": "--ds-dialog-width-lg",
      "value": "680px",
      "cssValue": "680px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Maximum width of a large Dialog (680px): dialogs with a table or a preview."
    },
    {
      "name": "dialog.gutter",
      "cssVar": "--ds-dialog-gutter",
      "value": "24px",
      "cssValue": "var(--ds-space-6)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "space.6",
      "description": "Minimum distance between a Dialog and the viewport edge (24px)."
    },
    {
      "name": "dialog.padding",
      "cssVar": "--ds-dialog-padding",
      "value": "20px",
      "cssValue": "var(--ds-space-5)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "space.5",
      "description": "Inner padding of the Dialog header, body and footer (20px, the card padding)."
    },
    {
      "name": "donut-meter.size-sm",
      "cssVar": "--ds-donut-meter-size-sm",
      "value": "48px",
      "cssValue": "48px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Diameter of a small DonutMeter (48px)."
    },
    {
      "name": "donut-meter.size-md",
      "cssVar": "--ds-donut-meter-size-md",
      "value": "72px",
      "cssValue": "72px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Diameter of a medium DonutMeter (72px)."
    },
    {
      "name": "donut-meter.size-lg",
      "cssVar": "--ds-donut-meter-size-lg",
      "value": "96px",
      "cssValue": "96px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Diameter of a large DonutMeter (96px)."
    },
    {
      "name": "donut-meter.stroke-w",
      "cssVar": "--ds-donut-meter-stroke-w",
      "value": "10px",
      "cssValue": "10px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Thickness of the ring in units of the 100-unit drawing box (10), so it scales with the diameter: 4.8px at 48px, 9.6px at 96px."
    },
    {
      "name": "donut-meter.value",
      "cssVar": "--ds-donut-meter-value",
      "value": "0",
      "cssValue": "0",
      "type": "number",
      "tier": "core",
      "aliasOf": null,
      "description": "Filled share of the ring, 0 to 100. Set at runtime via style (ADR-0002 amendment); the ring is drawn with a dash of this length on a path of length 100."
    },
    {
      "name": "donut-meter.color",
      "cssVar": "--ds-donut-meter-color",
      "value": "#8AB4FF",
      "cssValue": "var(--ds-accent)",
      "type": "color",
      "tier": "core",
      "aliasOf": "color.blue.5",
      "description": "Color of the filled part of the ring. Each tone sets it."
    },
    {
      "name": "drawer.width-sm",
      "cssVar": "--ds-drawer-width-sm",
      "value": "280px",
      "cssValue": "280px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Width of a small Drawer (280px): a narrow filter or navigation panel."
    },
    {
      "name": "drawer.width-md",
      "cssVar": "--ds-drawer-width-md",
      "value": "320px",
      "cssValue": "320px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Width of a medium Drawer (320px), the default."
    },
    {
      "name": "drawer.width-lg",
      "cssVar": "--ds-drawer-width-lg",
      "value": "400px",
      "cssValue": "400px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Width of a large Drawer (400px): an inspector with forms."
    },
    {
      "name": "drawer.padding",
      "cssVar": "--ds-drawer-padding",
      "value": "16px",
      "cssValue": "var(--ds-space-4)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "space.4",
      "description": "Inner padding of the Drawer header, body and footer (16px)."
    },
    {
      "name": "drawer.shift",
      "cssVar": "--ds-drawer-shift",
      "value": "16px",
      "cssValue": "var(--ds-space-4)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "space.4",
      "description": "Distance the Drawer slides while it fades in (16px)."
    },
    {
      "name": "drawer.width",
      "cssVar": "--ds-drawer-width",
      "value": "320px",
      "cssValue": "var(--ds-drawer-width-md)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "drawer.width-md",
      "description": "Resolved width of the Drawer. The size attribute sets it from `--ds-drawer-width-sm|md|lg`; not meant to be set by consumers."
    },
    {
      "name": "drawer.from",
      "cssVar": "--ds-drawer-from",
      "value": "16px",
      "cssValue": "var(--ds-drawer-shift)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "space.4",
      "description": "Start offset of the Drawer fade-in. The placement and writing direction set its sign; not meant to be set by consumers."
    },
    {
      "name": "due-indicator.dot-size",
      "cssVar": "--ds-due-indicator-dot-size",
      "value": "8px",
      "cssValue": "8px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Diameter of the tone dot before the date (8px). Decorative: the status is always text."
    },
    {
      "name": "due-indicator.gap",
      "cssVar": "--ds-due-indicator-gap",
      "value": "8px",
      "cssValue": "var(--ds-space-2)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "space.2",
      "description": "Gap between the dot, the date and the status text (8px)."
    },
    {
      "name": "empty-state.padding-block",
      "cssVar": "--ds-empty-state-padding-block",
      "value": "48px",
      "cssValue": "var(--ds-space-12)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "space.12",
      "description": "Vertical padding of an EmptyState (48px)."
    },
    {
      "name": "empty-state.padding-inline",
      "cssVar": "--ds-empty-state-padding-inline",
      "value": "24px",
      "cssValue": "var(--ds-space-6)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "space.6",
      "description": "Horizontal padding of an EmptyState (24px)."
    },
    {
      "name": "empty-state.compact-padding-block",
      "cssVar": "--ds-empty-state-compact-padding-block",
      "value": "24px",
      "cssValue": "var(--ds-space-6)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "space.6",
      "description": "Vertical padding of a compact EmptyState (24px)."
    },
    {
      "name": "empty-state.compact-padding-inline",
      "cssVar": "--ds-empty-state-compact-padding-inline",
      "value": "20px",
      "cssValue": "var(--ds-space-5)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "space.5",
      "description": "Horizontal padding of a compact EmptyState (20px)."
    },
    {
      "name": "empty-state.description-max-w",
      "cssVar": "--ds-empty-state-description-max-w",
      "value": "360px",
      "cssValue": "360px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Maximum width of the EmptyState description (360px), to keep lines short."
    },
    {
      "name": "field-set.gap",
      "cssVar": "--ds-field-set-gap",
      "value": "12px",
      "cssValue": "var(--ds-space-3)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "space.3",
      "description": "Vertical gap between the legend, the description and the fields of a FieldSet (12px)."
    },
    {
      "name": "field.gap",
      "cssVar": "--ds-field-gap",
      "value": "6px",
      "cssValue": "6px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Vertical gap between label, control, description and error in every form field (6px, the handoff value; no 6px step exists in the space scale). Not for spacing between fields."
    },
    {
      "name": "field.control-padding-inline",
      "cssVar": "--ds-field-control-padding-inline",
      "value": "10px",
      "cssValue": "10px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Inline padding inside text-like control boxes (Input, Select trigger, Select option): 10px, the handoff value. Not for buttons."
    },
    {
      "name": "field.choice-gap",
      "cssVar": "--ds-field-choice-gap",
      "value": "10px",
      "cssValue": "10px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Gap between a Checkbox or Radio box and its label text (10px, the handoff value). Not for form layout."
    },
    {
      "name": "file-upload.dropzone-padding-block",
      "cssVar": "--ds-file-upload-dropzone-padding-block",
      "value": "20px",
      "cssValue": "var(--ds-space-5)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "space.5",
      "description": "Vertical padding of the FileUpload drop zone (20px, the handoff value)."
    },
    {
      "name": "file-upload.dropzone-padding-inline",
      "cssVar": "--ds-file-upload-dropzone-padding-inline",
      "value": "16px",
      "cssValue": "var(--ds-space-4)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "space.4",
      "description": "Horizontal padding of the FileUpload drop zone (16px)."
    },
    {
      "name": "file-upload.item-padding-block",
      "cssVar": "--ds-file-upload-item-padding-block",
      "value": "12px",
      "cssValue": "var(--ds-space-3)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "space.3",
      "description": "Vertical padding of a file row in the FileUpload list (12px)."
    },
    {
      "name": "file-upload.item-padding-inline",
      "cssVar": "--ds-file-upload-item-padding-inline",
      "value": "12px",
      "cssValue": "var(--ds-space-3)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "space.3",
      "description": "Horizontal padding of a file row in the FileUpload list (12px)."
    },
    {
      "name": "form.gap",
      "cssVar": "--ds-form-gap",
      "value": "20px",
      "cssValue": "var(--ds-space-5)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "space.5",
      "description": "Vertical gap between the fields and groups of a Form (20px)."
    },
    {
      "name": "form.summary-padding",
      "cssVar": "--ds-form-summary-padding",
      "value": "16px",
      "cssValue": "var(--ds-space-4)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "space.4",
      "description": "Padding of the form error summary (16px)."
    },
    {
      "name": "form.summary-gap",
      "cssVar": "--ds-form-summary-gap",
      "value": "8px",
      "cssValue": "var(--ds-space-2)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "space.2",
      "description": "Gap between the title and the list of the error summary, and between its items (8px)."
    },
    {
      "name": "grid.min-item-sm",
      "cssVar": "--ds-grid-min-item-sm",
      "value": "160px",
      "cssValue": "160px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Minimum width of a Grid item at minItemWidth sm (160px): small tiles and stat numbers."
    },
    {
      "name": "grid.min-item-md",
      "cssVar": "--ds-grid-min-item-md",
      "value": "240px",
      "cssValue": "240px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Minimum width of a Grid item at minItemWidth md (240px): cards."
    },
    {
      "name": "grid.min-item-lg",
      "cssVar": "--ds-grid-min-item-lg",
      "value": "320px",
      "cssValue": "320px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Minimum width of a Grid item at minItemWidth lg (320px): wide cards and previews."
    },
    {
      "name": "grid.gap",
      "cssVar": "--ds-grid-gap",
      "value": "16px",
      "cssValue": "var(--ds-space-4)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "space.4",
      "description": "Default Grid gap; set at runtime via style from the `gap` prop (a space token key)."
    },
    {
      "name": "grid.columns",
      "cssVar": "--ds-grid-columns",
      "value": "1",
      "cssValue": "1",
      "type": "number",
      "tier": "core",
      "aliasOf": null,
      "description": "Default Grid column count; set at runtime via style from the `columns` prop."
    },
    {
      "name": "icon.stroke-width",
      "cssVar": "--ds-icon-stroke-width",
      "value": "1.5px",
      "cssValue": "1.5px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Rendered stroke width of every Icon (1.5px). Applied with non-scaling strokes, so it stays 1.5px at every icon size. Not for filled or colored icons."
    },
    {
      "name": "inline.gap",
      "cssVar": "--ds-inline-gap",
      "value": "8px",
      "cssValue": "var(--ds-space-2)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "space.2",
      "description": "Default Inline gap; set at runtime via style from the `gap` prop (a space token key)."
    },
    {
      "name": "kbd.height",
      "cssVar": "--ds-kbd-height",
      "value": "18px",
      "cssValue": "18px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Height of a Kbd keycap (18px). Inline hint, not a target."
    },
    {
      "name": "kbd.padding-inline",
      "cssVar": "--ds-kbd-padding-inline",
      "value": "4px",
      "cssValue": "var(--ds-space-1)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "space.1",
      "description": "Horizontal padding of a Kbd keycap (4px)."
    },
    {
      "name": "kbd.fg",
      "cssVar": "--ds-kbd-fg",
      "value": "#A3A3A9",
      "cssValue": "var(--ds-text-2)",
      "type": "color",
      "tier": "core",
      "aliasOf": "color.gray.8",
      "description": "Text color of a Kbd keycap. Filled buttons (primary, danger-solid) override it for the Kbd inside, so the hint stays readable on their fill."
    },
    {
      "name": "kbd.border",
      "cssVar": "--ds-kbd-border",
      "value": "#33333A",
      "cssValue": "var(--ds-line-strong)",
      "type": "color",
      "tier": "core",
      "aliasOf": "color.gray.6",
      "description": "Border color of a Kbd keycap. Overridden together with kbd-fg by filled buttons."
    },
    {
      "name": "ledger-list.date-width",
      "cssVar": "--ds-ledger-list-date-width",
      "value": "64px",
      "cssValue": "64px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Width of the date column (64px)."
    },
    {
      "name": "ledger-list.gap",
      "cssVar": "--ds-ledger-list-gap",
      "value": "12px",
      "cssValue": "var(--ds-space-3)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "space.3",
      "description": "Gap between the columns of an entry (12px)."
    },
    {
      "name": "ledger-list.padding-inline",
      "cssVar": "--ds-ledger-list-padding-inline",
      "value": "24px",
      "cssValue": "var(--ds-space-6)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "space.6",
      "description": "Horizontal padding of an entry (24px)."
    },
    {
      "name": "ledger-list.text-gap",
      "cssVar": "--ds-ledger-list-text-gap",
      "value": "2px",
      "cssValue": "2px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Gap between the stacked lines of an entry (title and subtitle, amount and balance) (2px)."
    },
    {
      "name": "legend.swatch-size",
      "cssVar": "--ds-legend-swatch-size",
      "value": "10px",
      "cssValue": "10px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Size of the series swatch in a Legend (10px)."
    },
    {
      "name": "legend.gap",
      "cssVar": "--ds-legend-gap",
      "value": "16px",
      "cssValue": "var(--ds-space-4)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "space.4",
      "description": "Gap between the items of a horizontal Legend (16px)."
    },
    {
      "name": "legend.share-col-w",
      "cssVar": "--ds-legend-share-col-w",
      "value": "48px",
      "cssValue": "48px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Minimum width of the share column in a Legend with `showShare` (48px), so shares line up."
    },
    {
      "name": "legend.color",
      "cssVar": "--ds-legend-color",
      "value": "#EDEDEA",
      "cssValue": "var(--ds-text)",
      "type": "color",
      "tier": "core",
      "aliasOf": "color.gray.9",
      "description": "Fill of a Legend swatch. The series ramp classes set it per step; an item `color` overrides it at runtime via style (ADR-0002 amendment)."
    },
    {
      "name": "matrix-grid.cell-size",
      "cssVar": "--ds-matrix-grid-cell-size",
      "value": "40px",
      "cssValue": "40px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Width and height of a toggle cell (40px, above the 24px minimum target)."
    },
    {
      "name": "matrix-grid.color",
      "cssVar": "--ds-matrix-grid-color",
      "value": "#A3A3A9",
      "cssValue": "var(--ds-text-2)",
      "type": "color",
      "tier": "core",
      "aliasOf": "color.gray.8",
      "description": "Fill of a linked MatrixGrid cell. Defaults to secondary text; the component sets it inline from the column `color`."
    },
    {
      "name": "matrix-grid.column-header-padding-inline",
      "cssVar": "--ds-matrix-grid-column-header-padding-inline",
      "value": "2px",
      "cssValue": "2px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Horizontal padding of a column header so neighboring labels do not touch (2px)."
    },
    {
      "name": "matrix-grid.column-width",
      "cssVar": "--ds-matrix-grid-column-width",
      "value": "64px",
      "cssValue": "64px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Width of a data column (64px)."
    },
    {
      "name": "matrix-grid.columns",
      "cssVar": "--ds-matrix-grid-columns",
      "value": "0",
      "cssValue": "0",
      "type": "number",
      "tier": "core",
      "aliasOf": null,
      "description": "Number of data columns of MatrixGrid. The component sets it inline from the `columns` prop."
    },
    {
      "name": "matrix-grid.count-width",
      "cssVar": "--ds-matrix-grid-count-width",
      "value": "64px",
      "cssValue": "64px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Width of the optional count column (64px)."
    },
    {
      "name": "matrix-grid.label-width",
      "cssVar": "--ds-matrix-grid-label-width",
      "value": "220px",
      "cssValue": "220px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Width of the row header column (220px)."
    },
    {
      "name": "matrix-grid.padding-inline",
      "cssVar": "--ds-matrix-grid-padding-inline",
      "value": "20px",
      "cssValue": "var(--ds-space-5)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "space.5",
      "description": "Horizontal padding of rows and the header (20px)."
    },
    {
      "name": "matrix-grid.sticky-z-index",
      "cssVar": "--ds-matrix-grid-sticky-z-index",
      "value": "1",
      "cssValue": "1",
      "type": "number",
      "tier": "core",
      "aliasOf": null,
      "description": "Stacking order of the sticky MatrixGrid header row and row header column inside the scroll region (1; the corner adds 1). Local to the grid, not a layer."
    },
    {
      "name": "matrix-grid.row-header-gap",
      "cssVar": "--ds-matrix-grid-row-header-gap",
      "value": "2px",
      "cssValue": "2px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Gap between the label and the description of a row header (2px)."
    },
    {
      "name": "matrix-grid.row-min-height",
      "cssVar": "--ds-matrix-grid-row-min-height",
      "value": "60px",
      "cssValue": "60px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Minimum height of a row (60px)."
    },
    {
      "name": "menu.min-width",
      "cssVar": "--ds-menu-min-width",
      "value": "200px",
      "cssValue": "200px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Minimum width of a Menu (200px, the handoff default)."
    },
    {
      "name": "menu.max-width",
      "cssVar": "--ds-menu-max-width",
      "value": "360px",
      "cssValue": "360px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Maximum width of a Menu popover (360px). A longer label wraps instead of stretching the popover across the screen; it never goes below the trigger width."
    },
    {
      "name": "menu.indicator-size",
      "cssVar": "--ds-menu-indicator-size",
      "value": "18px",
      "cssValue": "var(--ds-icon-md)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "size.icon-md",
      "description": "Width reserved for the check or radio indicator of selectable Menu items (18px)."
    },
    {
      "name": "nav-item.padding-inline",
      "cssVar": "--ds-nav-item-padding-inline",
      "value": "10px",
      "cssValue": "10px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Horizontal padding of a NavItem (10px)."
    },
    {
      "name": "nav-item.indicator-width",
      "cssVar": "--ds-nav-item-indicator-width",
      "value": "2px",
      "cssValue": "2px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Width of the inset ink bar on the active NavItem (2px)."
    },
    {
      "name": "nav-item.icon-opacity",
      "cssVar": "--ds-nav-item-icon-opacity",
      "value": "0.7",
      "cssValue": "0.7",
      "type": "number",
      "tier": "core",
      "aliasOf": null,
      "description": "Opacity of the icon of an inactive NavItem (0.7). The active icon is fully opaque."
    },
    {
      "name": "nav-item.count-size",
      "cssVar": "--ds-nav-item-count-size",
      "value": "20px",
      "cssValue": "20px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Minimum width and height of the count pill of a NavItem (20px)."
    },
    {
      "name": "nav-item.count-padding-inline",
      "cssVar": "--ds-nav-item-count-padding-inline",
      "value": "6px",
      "cssValue": "6px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Horizontal padding of the count pill of a NavItem (6px)."
    },
    {
      "name": "number-field.value-min-width",
      "cssVar": "--ds-number-field-value-min-width",
      "value": "56px",
      "cssValue": "56px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Minimum width of the NumberField value box between the stepper buttons (56px, about four digits plus a suffix in mono)."
    },
    {
      "name": "popover.min-width",
      "cssVar": "--ds-popover-min-width",
      "value": "180px",
      "cssValue": "180px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Minimum width of a Popover (180px)."
    },
    {
      "name": "popover.arrow-size",
      "cssVar": "--ds-popover-arrow-size",
      "value": "8px",
      "cssValue": "8px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Width of the optional Popover arrow (8px); its height is half of this."
    },
    {
      "name": "popover.padding",
      "cssVar": "--ds-popover-padding",
      "value": "12px",
      "cssValue": "var(--ds-space-3)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "space.3",
      "description": "Inner padding of a Popover with free content (12px)."
    },
    {
      "name": "progress.height",
      "cssVar": "--ds-progress-height",
      "value": "4px",
      "cssValue": "4px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Height of the Progress and Meter bar (4px)."
    },
    {
      "name": "progress.indeterminate-width",
      "cssVar": "--ds-progress-indeterminate-width",
      "value": "40",
      "cssValue": "40",
      "type": "number",
      "tier": "core",
      "aliasOf": null,
      "description": "Width of the moving segment of an indeterminate Progress, in percent of the track (40)."
    },
    {
      "name": "progress.indeterminate-duration",
      "cssVar": "--ds-progress-indeterminate-duration",
      "value": "1400ms",
      "cssValue": "1400ms",
      "type": "duration",
      "tier": "core",
      "aliasOf": null,
      "description": "Duration of one sweep of an indeterminate Progress (1400ms). Static under prefers-reduced-motion."
    },
    {
      "name": "proportion-bar.height",
      "cssVar": "--ds-proportion-bar-height",
      "value": "10px",
      "cssValue": "10px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Height of the ProportionBar track (10px)."
    },
    {
      "name": "proportion-bar.segment-gap",
      "cssVar": "--ds-proportion-bar-segment-gap",
      "value": "2px",
      "cssValue": "2px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Gap between segments of a ProportionBar (2px). The track shows through, so neighbours are always separated."
    },
    {
      "name": "proportion-bar.swatch-size",
      "cssVar": "--ds-proportion-bar-swatch-size",
      "value": "10px",
      "cssValue": "10px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Size of a legend swatch of a ProportionBar (10px)."
    },
    {
      "name": "proportion-bar.percent-col-w",
      "cssVar": "--ds-proportion-bar-percent-col-w",
      "value": "48px",
      "cssValue": "48px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Width of the percentage column in the ProportionBar legend (48px)."
    },
    {
      "name": "proportion-bar.hatch-size",
      "cssVar": "--ds-proportion-bar-hatch-size",
      "value": "3px",
      "cssValue": "3px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Stripe width of the hatch pattern that tells apart segments beyond the fourth (3px)."
    },
    {
      "name": "proportion-bar.color",
      "cssVar": "--ds-proportion-bar-color",
      "value": "#EDEDEA",
      "cssValue": "var(--ds-text)",
      "type": "color",
      "tier": "core",
      "aliasOf": "color.gray.9",
      "description": "Fill of a ProportionBar segment and its legend swatch. The neutral ramp classes set it per step; a segment `color` prop overrides it at runtime via style."
    },
    {
      "name": "proportion-bar.columns",
      "cssVar": "--ds-proportion-bar-columns",
      "value": "2",
      "cssValue": "2",
      "type": "number",
      "tier": "core",
      "aliasOf": null,
      "description": "Number of legend columns after the label in a ProportionBar (share, value, count). Set at runtime via style from legendColumns."
    },
    {
      "name": "proportion-bar.share",
      "cssVar": "--ds-proportion-bar-share",
      "value": "1",
      "cssValue": "1",
      "type": "number",
      "tier": "core",
      "aliasOf": null,
      "description": "Relative size (flex-grow) of a ProportionBar segment. Set at runtime via style from the segment value."
    },
    {
      "name": "radio.size",
      "cssVar": "--ds-radio-size",
      "value": "18px",
      "cssValue": "18px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Width and height of the Radio circle (18px)."
    },
    {
      "name": "radio.dot-size",
      "cssVar": "--ds-radio-dot-size",
      "value": "9px",
      "cssValue": "9px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Diameter of the selected dot inside the Radio circle (9px)."
    },
    {
      "name": "rank-list.bar-h",
      "cssVar": "--ds-rank-list-bar-h",
      "value": "4px",
      "cssValue": "4px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Height of the relative bar of a RankList row (4px)."
    },
    {
      "name": "rank-list.position-w",
      "cssVar": "--ds-rank-list-position-w",
      "value": "24px",
      "cssValue": "24px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Width of the position column of a RankList (24px)."
    },
    {
      "name": "rank-list.padding-block",
      "cssVar": "--ds-rank-list-padding-block",
      "value": "8px",
      "cssValue": "var(--ds-space-2)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "space.2",
      "description": "Vertical padding of a RankList row (8px)."
    },
    {
      "name": "rank-list.padding-inline",
      "cssVar": "--ds-rank-list-padding-inline",
      "value": "20px",
      "cssValue": "var(--ds-space-5)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "space.5",
      "description": "Horizontal padding of a RankList row (20px, aligned with Card padding)."
    },
    {
      "name": "rank-list.share",
      "cssVar": "--ds-rank-list-share",
      "value": "0px",
      "cssValue": "0px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Width of the relative bar of a RankList row. Set at runtime via style as a percentage of the track (0 by default: an empty bar)."
    },
    {
      "name": "rating.gap",
      "cssVar": "--ds-rating-gap",
      "value": "8px",
      "cssValue": "var(--ds-space-2)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "space.2",
      "description": "Gap between the stars and the optional numeric value (8px)."
    },
    {
      "name": "rating.star-gap",
      "cssVar": "--ds-rating-star-gap",
      "value": "2px",
      "cssValue": "2px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Gap between two stars (2px)."
    },
    {
      "name": "rating.fill",
      "cssVar": "--ds-rating-fill",
      "value": "0px",
      "cssValue": "0px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Width of the filled part of a partially filled Rating star. Set at runtime via style as a percentage of the star (0 by default: an empty star)."
    },
    {
      "name": "response-feedback.gap",
      "cssVar": "--ds-response-feedback-gap",
      "value": "4px",
      "cssValue": "var(--ds-space-1)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "space.1",
      "description": "Gap between the feedback, copy and regenerate buttons (4px)."
    },
    {
      "name": "response-feedback.divider-gap",
      "cssVar": "--ds-response-feedback-divider-gap",
      "value": "8px",
      "cssValue": "var(--ds-space-2)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "space.2",
      "description": "Space on each side of the divider between the rating and the other actions (8px)."
    },
    {
      "name": "scroll-area.max-h",
      "cssVar": "--ds-scroll-area-max-h",
      "value": "320px",
      "cssValue": "320px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Maximum block size of a ScrollArea with the `maxBlockSize` prop. Set at runtime via style from that prop (a number is px); 320px is only the fallback value of the token."
    },
    {
      "name": "segmented-control.padding",
      "cssVar": "--ds-segmented-control-padding",
      "value": "2px",
      "cssValue": "2px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Inner padding and gap of the SegmentedControl track (2px)."
    },
    {
      "name": "segmented-control.height-sm",
      "cssVar": "--ds-segmented-control-height-sm",
      "value": "24px",
      "cssValue": "var(--ds-target-min)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "size.target-min",
      "description": "Height of a small segment (24px, the minimum target size). The handoff used 26px."
    },
    {
      "name": "segmented-control.height-md",
      "cssVar": "--ds-segmented-control-height-md",
      "value": "32px",
      "cssValue": "var(--ds-control-h-sm)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "size.control-h-sm",
      "description": "Height of a medium segment (32px)."
    },
    {
      "name": "select.popover-max-height",
      "cssVar": "--ds-select-popover-max-height",
      "value": "320px",
      "cssValue": "320px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Maximum height of the Select list before it scrolls (320px, about 8 options at item-h)."
    },
    {
      "name": "sheet.width-sm",
      "cssVar": "--ds-sheet-width-sm",
      "value": "440px",
      "cssValue": "440px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Width of a small Sheet (440px): the handoff default side panel."
    },
    {
      "name": "sheet.width-md",
      "cssVar": "--ds-sheet-width-md",
      "value": "460px",
      "cssValue": "460px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Width of a medium Sheet (460px)."
    },
    {
      "name": "sheet.width-lg",
      "cssVar": "--ds-sheet-width-lg",
      "value": "480px",
      "cssValue": "480px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Width of a large Sheet (480px)."
    },
    {
      "name": "sheet.padding",
      "cssVar": "--ds-sheet-padding",
      "value": "24px",
      "cssValue": "var(--ds-space-6)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "space.6",
      "description": "Inner padding of the Sheet body and footer (24px)."
    },
    {
      "name": "sheet.from",
      "cssVar": "--ds-sheet-from",
      "value": "0px",
      "cssValue": "0px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Start offset of the Sheet slide-in animation. The placement classes set it (100% or -100%); not meant to be set by consumers."
    },
    {
      "name": "sheet.width",
      "cssVar": "--ds-sheet-width",
      "value": "440px",
      "cssValue": "var(--ds-sheet-width-sm)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "sheet.width-sm",
      "description": "Resolved width of the Sheet. The size classes set it from `--ds-sheet-width-sm|md|lg`; not meant to be set by consumers."
    },
    {
      "name": "sidebar.padding-block",
      "cssVar": "--ds-sidebar-padding-block",
      "value": "16px",
      "cssValue": "var(--ds-space-4)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "space.4",
      "description": "Vertical padding of the Sidebar (16px)."
    },
    {
      "name": "sidebar.padding-inline",
      "cssVar": "--ds-sidebar-padding-inline",
      "value": "12px",
      "cssValue": "var(--ds-space-3)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "space.3",
      "description": "Horizontal padding of the Sidebar (12px)."
    },
    {
      "name": "sidebar.gap",
      "cssVar": "--ds-sidebar-gap",
      "value": "20px",
      "cssValue": "var(--ds-space-5)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "space.5",
      "description": "Gap between the blocks of the Sidebar: workspace, sections, footer (20px)."
    },
    {
      "name": "sidebar.workspace-mark-size",
      "cssVar": "--ds-sidebar-workspace-mark-size",
      "value": "28px",
      "cssValue": "28px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Width and height of the initial tile of the workspace block (28px)."
    },
    {
      "name": "sidebar.status-dot-size",
      "cssVar": "--ds-sidebar-status-dot-size",
      "value": "8px",
      "cssValue": "8px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Diameter of the decorative dot of the Sidebar status card (8px). The text carries the meaning."
    },
    {
      "name": "skeleton.height",
      "cssVar": "--ds-skeleton-height",
      "value": "12px",
      "cssValue": "12px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Default height of a Skeleton block (12px), roughly one line of small text."
    },
    {
      "name": "skeleton.pulse-duration",
      "cssVar": "--ds-skeleton-pulse-duration",
      "value": "1400ms",
      "cssValue": "1400ms",
      "type": "duration",
      "tier": "core",
      "aliasOf": null,
      "description": "Duration of one Skeleton pulse (1400ms). Switched off under prefers-reduced-motion."
    },
    {
      "name": "skeleton.pulse-opacity",
      "cssVar": "--ds-skeleton-pulse-opacity",
      "value": "0.45",
      "cssValue": "0.45",
      "type": "number",
      "tier": "core",
      "aliasOf": null,
      "description": "Lowest opacity of the Skeleton pulse (0.45). Opacity is the only animated property."
    },
    {
      "name": "skip-link.z-index",
      "cssVar": "--ds-skip-link-z-index",
      "value": "60",
      "cssValue": "var(--ds-z-tooltip)",
      "type": "number",
      "tier": "core",
      "aliasOf": "z.tooltip",
      "description": "Layer of a focused SkipLink: above everything, because it is the first stop for keyboard users."
    },
    {
      "name": "slider.track-height",
      "cssVar": "--ds-slider-track-height",
      "value": "4px",
      "cssValue": "4px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Thickness of the Slider track and fill (4px, the handoff value)."
    },
    {
      "name": "slider.thumb-size",
      "cssVar": "--ds-slider-thumb-size",
      "value": "24px",
      "cssValue": "var(--ds-target-min)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "size.target-min",
      "description": "Width and height of the Slider thumb hit area (24px, WCAG 2.5.8). The visible knob is thumb-dot-size; the ring on focus follows this box."
    },
    {
      "name": "slider.thumb-dot-size",
      "cssVar": "--ds-slider-thumb-dot-size",
      "value": "16px",
      "cssValue": "16px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Diameter of the visible Slider knob (16px), centered in the thumb hit area."
    },
    {
      "name": "source-list.gap",
      "cssVar": "--ds-source-list-gap",
      "value": "12px",
      "cssValue": "var(--ds-space-3)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "space.3",
      "description": "Gap between the sources of a SourceList (12px)."
    },
    {
      "name": "source-list.indent",
      "cssVar": "--ds-source-list-indent",
      "value": "24px",
      "cssValue": "var(--ds-space-6)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "space.6",
      "description": "Inline start padding of the numbered list, where the numbers sit (24px)."
    },
    {
      "name": "source-list.padding",
      "cssVar": "--ds-source-list-padding",
      "value": "8px",
      "cssValue": "var(--ds-space-2)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "space.2",
      "description": "Padding of one source, so its focus outline does not touch the text (8px)."
    },
    {
      "name": "sparkline.stroke-w",
      "cssVar": "--ds-sparkline-stroke-w",
      "value": "1.5px",
      "cssValue": "1.5px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Stroke width of the Sparkline line and of its marker rings (1.5px, same as icons and Chart)."
    },
    {
      "name": "sparkline.dot-r",
      "cssVar": "--ds-sparkline-dot-r",
      "value": "2.5px",
      "cssValue": "2.5px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Radius of the solid last-value dot of a Sparkline (2.5px)."
    },
    {
      "name": "sparkline.marker-r",
      "cssVar": "--ds-sparkline-marker-r",
      "value": "2px",
      "cssValue": "2px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Radius of the hollow minimum and maximum markers of a Sparkline (2px)."
    },
    {
      "name": "sparkline.area-opacity",
      "cssVar": "--ds-sparkline-area-opacity",
      "value": "0.12",
      "cssValue": "0.12",
      "type": "number",
      "tier": "core",
      "aliasOf": null,
      "description": "Opacity of the area under the line of an area Sparkline (0.12)."
    },
    {
      "name": "sparkline.color",
      "cssVar": "--ds-sparkline-color",
      "value": "#A3A3A9",
      "cssValue": "var(--ds-text-2)",
      "type": "color",
      "tier": "core",
      "aliasOf": "color.gray.8",
      "description": "Series color of a Sparkline. Each tone sets it (neutral by default)."
    },
    {
      "name": "spinner.stroke-width",
      "cssVar": "--ds-spinner-stroke-width",
      "value": "2px",
      "cssValue": "2px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Ring thickness of the Spinner (2px) at every size. Not for progress bars or icon strokes."
    },
    {
      "name": "spinner.duration",
      "cssVar": "--ds-spinner-duration",
      "value": "700ms",
      "cssValue": "700ms",
      "type": "duration",
      "tier": "core",
      "aliasOf": null,
      "description": "Time of one full Spinner rotation (700ms). Replaced by a static ring under prefers-reduced-motion. Not for transitions."
    },
    {
      "name": "split-layout.aside-w-sm",
      "cssVar": "--ds-split-layout-aside-w-sm",
      "value": "280px",
      "cssValue": "280px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Width of the SplitLayout aside at asideWidth sm (280px): a short filter or summary panel."
    },
    {
      "name": "split-layout.aside-w-md",
      "cssVar": "--ds-split-layout-aside-w-md",
      "value": "360px",
      "cssValue": "var(--ds-app-shell-detail-w)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "app-shell.detail-w",
      "description": "Width of the SplitLayout aside at asideWidth md (360px). Same value as the AppShell detail pane, so a side panel looks the same in both."
    },
    {
      "name": "split-layout.aside-w-lg",
      "cssVar": "--ds-split-layout-aside-w-lg",
      "value": "480px",
      "cssValue": "480px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Width of the SplitLayout aside at asideWidth lg (480px): a chat or an editor beside a list."
    },
    {
      "name": "split-layout.gap",
      "cssVar": "--ds-split-layout-gap",
      "value": "24px",
      "cssValue": "var(--ds-space-6)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "space.6",
      "description": "Default gap between the main content and the aside (24px); set at runtime via style from the `gap` prop (a space token key)."
    },
    {
      "name": "split-layout.sticky-offset",
      "cssVar": "--ds-split-layout-sticky-offset",
      "value": "16px",
      "cssValue": "var(--ds-space-4)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "space.4",
      "description": "Distance (16px) between the top of the scrolling area and a sticky aside, and the room kept below it."
    },
    {
      "name": "stack.gap",
      "cssVar": "--ds-stack-gap",
      "value": "16px",
      "cssValue": "var(--ds-space-4)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "space.4",
      "description": "Default Stack gap; set at runtime via style from the `gap` prop (a space token key)."
    },
    {
      "name": "stacked-bar.bar-thickness",
      "cssVar": "--ds-stacked-bar-bar-thickness",
      "value": "20px",
      "cssValue": "20px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Thickness of a horizontal StackedBar bar (20px)."
    },
    {
      "name": "stacked-bar.column-max-w",
      "cssVar": "--ds-stacked-bar-column-max-w",
      "value": "56px",
      "cssValue": "56px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Maximum width of a vertical StackedBar column (56px)."
    },
    {
      "name": "stacked-bar.height",
      "cssVar": "--ds-stacked-bar-height",
      "value": "200px",
      "cssValue": "200px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Height of the plot area of a vertical StackedBar (200px)."
    },
    {
      "name": "stacked-bar.category-w",
      "cssVar": "--ds-stacked-bar-category-w",
      "value": "96px",
      "cssValue": "96px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Width of the category label column of a horizontal StackedBar (96px). Longer labels are truncated; the readout and the data table carry the full text."
    },
    {
      "name": "stacked-bar.segment-gap",
      "cssVar": "--ds-stacked-bar-segment-gap",
      "value": "2px",
      "cssValue": "2px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Gap between the segments of a StackedBar bar (2px). The track shows through, so neighbouring series are always separated without relying on color."
    },
    {
      "name": "stacked-bar.readout-min-h",
      "cssVar": "--ds-stacked-bar-readout-min-h",
      "value": "24px",
      "cssValue": "24px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Reserved height of the readout line under a StackedBar (24px), so showing it never shifts the layout."
    },
    {
      "name": "stacked-bar.extent",
      "cssVar": "--ds-stacked-bar-extent",
      "value": "100",
      "cssValue": "100",
      "type": "number",
      "tier": "core",
      "aliasOf": null,
      "description": "Length of a StackedBar bar as a percentage of the plot (the largest total is 100). Set at runtime via style."
    },
    {
      "name": "stacked-bar.share",
      "cssVar": "--ds-stacked-bar-share",
      "value": "1",
      "cssValue": "1",
      "type": "number",
      "tier": "core",
      "aliasOf": null,
      "description": "Relative size (flex-grow) of a StackedBar segment. Set at runtime via style from the series value."
    },
    {
      "name": "stacked-bar.color",
      "cssVar": "--ds-stacked-bar-color",
      "value": "#EDEDEA",
      "cssValue": "var(--ds-text)",
      "type": "color",
      "tier": "core",
      "aliasOf": "color.gray.9",
      "description": "Fill of a StackedBar segment. The series ramp classes set it per step; a series `color` overrides it at runtime via style."
    },
    {
      "name": "stat-card.padding",
      "cssVar": "--ds-stat-card-padding",
      "value": "20px",
      "cssValue": "var(--ds-space-5)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "space.5",
      "description": "Padding of a StatCard (20px, same as Card)."
    },
    {
      "name": "stat-card.gap",
      "cssVar": "--ds-stat-card-gap",
      "value": "8px",
      "cssValue": "var(--ds-space-2)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "space.2",
      "description": "Vertical gap between the label, value, content and note of a StatCard (8px)."
    },
    {
      "name": "status-steps.connector-thickness",
      "cssVar": "--ds-status-steps-connector-thickness",
      "value": "2px",
      "cssValue": "2px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Thickness of the decorative line between two steps (2px)."
    },
    {
      "name": "status-steps.content-z-index",
      "cssVar": "--ds-status-steps-content-z-index",
      "value": "1",
      "cssValue": "1",
      "type": "number",
      "tier": "core",
      "aliasOf": null,
      "description": "Stacking order of a step above the connector lines of its neighbours (1). Local to the list, not a layer."
    },
    {
      "name": "status-steps.gap",
      "cssVar": "--ds-status-steps-gap",
      "value": "8px",
      "cssValue": "var(--ds-space-2)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "space.2",
      "description": "Gap between the marker and the label (8px)."
    },
    {
      "name": "status-steps.marker-border-width",
      "cssVar": "--ds-status-steps-marker-border-width",
      "value": "1.5px",
      "cssValue": "1.5px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Border width of a pending step marker (1.5px), matching the 1.5px icon stroke."
    },
    {
      "name": "status-steps.marker-hover-border",
      "cssVar": "--ds-status-steps-marker-hover-border",
      "value": "#86868E",
      "cssValue": "var(--ds-text-3)",
      "type": "color",
      "tier": "core",
      "aliasOf": "color.gray.7",
      "description": "Border of the marker of a step that is hovered in an interactive list. line-control is only 2.8:1 on surface-hover, so the border brightens to text-3 (4.5:1 there) to keep the 3:1 boundary of WCAG 1.4.11 (TOK-014)."
    },
    {
      "name": "status-steps.marker-size",
      "cssVar": "--ds-status-steps-marker-size",
      "value": "20px",
      "cssValue": "20px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Diameter of the numbered or checked marker of a step (20px)."
    },
    {
      "name": "status-steps.padding-block",
      "cssVar": "--ds-status-steps-padding-block",
      "value": "4px",
      "cssValue": "var(--ds-space-1)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "space.1",
      "description": "Vertical padding of a step (4px)."
    },
    {
      "name": "stepper.connector-thickness",
      "cssVar": "--ds-stepper-connector-thickness",
      "value": "2px",
      "cssValue": "2px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Thickness of the decorative line between two steps (2px)."
    },
    {
      "name": "stepper.content-z-index",
      "cssVar": "--ds-stepper-content-z-index",
      "value": "1",
      "cssValue": "1",
      "type": "number",
      "tier": "core",
      "aliasOf": null,
      "description": "Stacking order of a step above the connector lines of its neighbours (1). Local to the list, not a layer."
    },
    {
      "name": "stepper.gap",
      "cssVar": "--ds-stepper-gap",
      "value": "8px",
      "cssValue": "var(--ds-space-2)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "space.2",
      "description": "Gap between the marker and the label, or between the label and the description (8px)."
    },
    {
      "name": "stepper.marker-border-width",
      "cssVar": "--ds-stepper-marker-border-width",
      "value": "1.5px",
      "cssValue": "1.5px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Border width of an upcoming step marker (1.5px), matching the 1.5px icon stroke."
    },
    {
      "name": "stepper.marker-size",
      "cssVar": "--ds-stepper-marker-size",
      "value": "24px",
      "cssValue": "24px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Diameter of the numbered or checked marker of a step (24px). Also the minimum target size of a step button (WCAG 2.5.8)."
    },
    {
      "name": "stepper.padding-block",
      "cssVar": "--ds-stepper-padding-block",
      "value": "4px",
      "cssValue": "var(--ds-space-1)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "space.1",
      "description": "Vertical padding of a step (4px)."
    },
    {
      "name": "stepper.step-gap",
      "cssVar": "--ds-stepper-step-gap",
      "value": "16px",
      "cssValue": "var(--ds-space-4)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "space.4",
      "description": "Space below a step in the vertical orientation, where the connector line runs (16px)."
    },
    {
      "name": "swatch.size-sm",
      "cssVar": "--ds-swatch-size-sm",
      "value": "16px",
      "cssValue": "16px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Diameter of a small Swatch (16px), used inside options and headers."
    },
    {
      "name": "swatch.size-md",
      "cssVar": "--ds-swatch-size-md",
      "value": "20px",
      "cssValue": "20px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Diameter of a medium Swatch (20px, default)."
    },
    {
      "name": "swatch.size-lg",
      "cssVar": "--ds-swatch-size-lg",
      "value": "32px",
      "cssValue": "32px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Diameter of a large Swatch (32px)."
    },
    {
      "name": "swatch.color",
      "cssVar": "--ds-swatch-color",
      "value": "rgba(0, 0, 0, 0)",
      "cssValue": "#0000",
      "type": "color",
      "tier": "core",
      "aliasOf": null,
      "description": "Fill of a Swatch. Transparent by default; the component sets it inline from its `color` prop (ADR-0002 amendment). Do not override it in CSS."
    },
    {
      "name": "switch.track-width",
      "cssVar": "--ds-switch-track-width",
      "value": "36px",
      "cssValue": "36px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Width of the Switch track (36px)."
    },
    {
      "name": "switch.track-height",
      "cssVar": "--ds-switch-track-height",
      "value": "20px",
      "cssValue": "20px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Height of the Switch track (20px)."
    },
    {
      "name": "switch.knob-size",
      "cssVar": "--ds-switch-knob-size",
      "value": "16px",
      "cssValue": "16px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Diameter of the Switch knob (16px)."
    },
    {
      "name": "switch.knob-offset",
      "cssVar": "--ds-switch-knob-offset",
      "value": "2px",
      "cssValue": "2px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Gap between the knob and the track edge (2px). The knob travels track-width minus knob-size minus twice this value."
    },
    {
      "name": "tabs.gap",
      "cssVar": "--ds-tabs-gap",
      "value": "20px",
      "cssValue": "var(--ds-space-5)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "space.5",
      "description": "Gap between tabs in a horizontal tab list (20px)."
    },
    {
      "name": "tabs.divider-width",
      "cssVar": "--ds-tabs-divider-width",
      "value": "1px",
      "cssValue": "1px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Thickness of the line under the tab list (1px). The tabs are one divider shorter so the list never overflows vertically."
    },
    {
      "name": "tabs.indicator-height",
      "cssVar": "--ds-tabs-indicator-height",
      "value": "2px",
      "cssValue": "2px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Thickness of the active-tab underline (2px, ink colored)."
    },
    {
      "name": "tabs.count-size",
      "cssVar": "--ds-tabs-count-size",
      "value": "20px",
      "cssValue": "20px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Minimum width and height of the count pill inside a Tab (20px). A label, not a target."
    },
    {
      "name": "tabs.count-padding-inline",
      "cssVar": "--ds-tabs-count-padding-inline",
      "value": "6px",
      "cssValue": "6px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Horizontal padding of the count pill inside a Tab (6px)."
    },
    {
      "name": "tag-input.padding-block",
      "cssVar": "--ds-tag-input-padding-block",
      "value": "3px",
      "cssValue": "3px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Vertical padding inside the TagInput box (3px): one row of tags plus border is exactly the small control height (32px). The box is at least as tall as the control height of its size, and grows when tags wrap."
    },
    {
      "name": "tag-input.padding-inline",
      "cssVar": "--ds-tag-input-padding-inline",
      "value": "10px",
      "cssValue": "var(--ds-field-control-padding-inline)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "field.control-padding-inline",
      "description": "Horizontal padding inside the TagInput box (10px), the same as other text fields."
    },
    {
      "name": "tag-input.gap",
      "cssVar": "--ds-tag-input-gap",
      "value": "4px",
      "cssValue": "var(--ds-space-1)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "space.1",
      "description": "Gap between tags, and between the last tag and the text input (4px)."
    },
    {
      "name": "tag-input.input-min-width",
      "cssVar": "--ds-tag-input-input-min-width",
      "value": "96px",
      "cssValue": "96px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Minimum width of the text input. When less room is left on the line, the input wraps to the next one (96px)."
    },
    {
      "name": "tag.height",
      "cssVar": "--ds-tag-height",
      "value": "24px",
      "cssValue": "var(--ds-target-min)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "size.target-min",
      "description": "Height of a Tag (24px): meets the minimum target size of its remove button."
    },
    {
      "name": "tag.remove-size",
      "cssVar": "--ds-tag-remove-size",
      "value": "24px",
      "cssValue": "var(--ds-target-min)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "size.target-min",
      "description": "Width and height of the remove button inside a Tag (24px, WCAG 2.5.8)."
    },
    {
      "name": "tag.padding-inline",
      "cssVar": "--ds-tag-padding-inline",
      "value": "8px",
      "cssValue": "var(--ds-space-2)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "space.2",
      "description": "Horizontal padding of a Tag (8px)."
    },
    {
      "name": "textarea.padding-block",
      "cssVar": "--ds-textarea-padding-block",
      "value": "10px",
      "cssValue": "10px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Block padding inside a Textarea (10px, the handoff value). Not for single-line controls."
    },
    {
      "name": "textarea.padding-inline",
      "cssVar": "--ds-textarea-padding-inline",
      "value": "12px",
      "cssValue": "12px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Inline padding inside a Textarea (12px, the handoff value). Not for single-line controls."
    },
    {
      "name": "timeline.connector-thickness",
      "cssVar": "--ds-timeline-connector-thickness",
      "value": "2px",
      "cssValue": "2px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Thickness of the decorative line that joins the markers of two events (2px)."
    },
    {
      "name": "timeline.dot-size",
      "cssVar": "--ds-timeline-dot-size",
      "value": "8px",
      "cssValue": "8px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Diameter of the dot that marks a neutral event (8px)."
    },
    {
      "name": "timeline.item-gap",
      "cssVar": "--ds-timeline-item-gap",
      "value": "20px",
      "cssValue": "var(--ds-space-5)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "space.5",
      "description": "Space between two events, where the connector line runs (20px)."
    },
    {
      "name": "timeline.marker-gap",
      "cssVar": "--ds-timeline-marker-gap",
      "value": "12px",
      "cssValue": "var(--ds-space-3)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "space.3",
      "description": "Gap between the marker column and the text of an event (12px)."
    },
    {
      "name": "timeline.marker-size",
      "cssVar": "--ds-timeline-marker-size",
      "value": "20px",
      "cssValue": "20px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Width and height of the marker slot that holds the dot or the tone icon (20px)."
    },
    {
      "name": "toast.max-width",
      "cssVar": "--ds-toast-max-width",
      "value": "420px",
      "cssValue": "420px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Maximum width of a Toast (420px). It shrinks to the viewport on narrow screens."
    },
    {
      "name": "toast.min-height",
      "cssVar": "--ds-toast-min-height",
      "value": "40px",
      "cssValue": "var(--ds-control-h-md)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "size.control-h-md",
      "description": "Minimum height of a Toast (40px)."
    },
    {
      "name": "toast.dot-size",
      "cssVar": "--ds-toast-dot-size",
      "value": "6px",
      "cssValue": "6px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Diameter of the tone dot of a Toast (6px). Decorative: the tone is also spoken."
    },
    {
      "name": "toast.offset",
      "cssVar": "--ds-toast-offset",
      "value": "24px",
      "cssValue": "var(--ds-space-6)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "space.6",
      "description": "Distance between the Toast region and the bottom edge of the viewport (24px)."
    },
    {
      "name": "toast.clearance",
      "cssVar": "--ds-toast-clearance",
      "value": "0px",
      "cssValue": "0px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Height of viewport the Toast region covers at the bottom (0 when no toast is shown). ToastRegion sets it on the root element while mounted; scroll containers use it as scroll-padding-block-end so focus never scrolls under a toast (WCAG 2.4.11). Do not set it by hand."
    },
    {
      "name": "tool-call-step.padding-inline",
      "cssVar": "--ds-tool-call-step-padding-inline",
      "value": "12px",
      "cssValue": "var(--ds-space-3)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "space.3",
      "description": "Horizontal padding of the ToolCallStep header and details (12px)."
    },
    {
      "name": "tool-call-step.padding-block",
      "cssVar": "--ds-tool-call-step-padding-block",
      "value": "8px",
      "cssValue": "var(--ds-space-2)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "space.2",
      "description": "Vertical padding of the ToolCallStep header (8px)."
    },
    {
      "name": "tool-call-step.gap",
      "cssVar": "--ds-tool-call-step-gap",
      "value": "8px",
      "cssValue": "var(--ds-space-2)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "space.2",
      "description": "Gap between the status, name and duration, and between detail blocks (8px)."
    },
    {
      "name": "tool-call-step.list-gap",
      "cssVar": "--ds-tool-call-step-list-gap",
      "value": "8px",
      "cssValue": "var(--ds-space-2)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "space.2",
      "description": "Gap between the steps of a ToolCallList (8px)."
    },
    {
      "name": "tooltip.max-width",
      "cssVar": "--ds-tooltip-max-width",
      "value": "240px",
      "cssValue": "240px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Maximum width of a Tooltip (240px) before the text wraps. Tooltips stay short."
    },
    {
      "name": "top-bar.padding-inline",
      "cssVar": "--ds-top-bar-padding-inline",
      "value": "24px",
      "cssValue": "var(--ds-space-6)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "space.6",
      "description": "Horizontal padding of the TopBar (24px). Its height is size.topbar-h (64px; the handoff code used 56px)."
    },
    {
      "name": "tour.width",
      "cssVar": "--ds-tour-width",
      "value": "320px",
      "cssValue": "320px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Width of a Tour step (320px); it shrinks to fit narrow viewports."
    },
    {
      "name": "tour.padding",
      "cssVar": "--ds-tour-padding",
      "value": "16px",
      "cssValue": "var(--ds-space-4)",
      "type": "dimension",
      "tier": "core",
      "aliasOf": "space.4",
      "description": "Inner padding of a Tour step (16px)."
    },
    {
      "name": "tour.arrow-size",
      "cssVar": "--ds-tour-arrow-size",
      "value": "8px",
      "cssValue": "8px",
      "type": "dimension",
      "tier": "core",
      "aliasOf": null,
      "description": "Width of the Tour arrow (8px); its height is half of this."
    }
  ]
}