{
  "spacing": {
    "component": {
      "$type": "dimension",
      "$description": "Component-level spacing — internal padding and gaps within components.",
      "xs": { "$value": "{spacing.1}",  "$description": "4px — tight gaps: icon margins, chip internal padding" },
      "sm": { "$value": "{spacing.2}",  "$description": "8px — small padding: badge padding, inline element gaps" },
      "md": { "$value": "{spacing.4}",  "$description": "16px — default padding: button padding, input padding, form field gap" },
      "lg": { "$value": "{spacing.6}",  "$description": "24px — large padding: card padding (desktop), modal padding" }
    },
    "layout": {
      "$type": "dimension",
      "$description": "Layout-level spacing — structural gaps between sections and page elements.",
      "gutter":              { "$value": "{spacing.4}",  "$description": "16px — grid gutter on mobile, card grid gap" },
      "gutter-desktop":      { "$value": "{spacing.6}",  "$description": "24px — grid gutter on desktop" },
      "section":             { "$value": "{spacing.12}", "$description": "48px — vertical gap between page sections" },
      "page":                { "$value": "{spacing.16}", "$description": "64px — major page section separation, hero spacing" },
      "page-padding":        { "$value": "{spacing.4}",  "$description": "16px — horizontal page padding on mobile" },
      "page-padding-desktop": { "$value": "{spacing.8}", "$description": "32px — horizontal page padding on desktop" }
    }
  }
}