{
  "shadow": {
    "$description": "Elevation shadows for layered UI. Values are CSS box-shadow shorthand strings.",
    "sm": {
      "$value": "0 1px 2px rgba(0,0,0,0.05)",
      "$description": "Subtle lift — resting buttons, input focus subtle elevation"
    },
    "md": {
      "$value": "0 4px 6px rgba(0,0,0,0.07)",
      "$description": "Medium elevation — cards at rest, dropdowns, popovers"
    },
    "lg": {
      "$value": "0 10px 15px rgba(0,0,0,0.1)",
      "$description": "High elevation — modals, popovers, card hover states"
    },
    "xl": {
      "$value": "0 20px 25px rgba(0,0,0,0.1)",
      "$description": "Maximum elevation — elevated panels, dialog boxes"
    }
  },
  "opacity": {
    "$type": "number",
    "$description": "Opacity values for interactive states and overlays.",
    "disabled": { "$value": 0.4, "$description": "Disabled state — 40% opacity. Clearly diminished but still distinguishable" },
    "hover":    { "$value": 0.08, "$description": "Hover overlay — subtle 8% tint applied over backgrounds on hover" },
    "overlay":  { "$value": 0.5, "$description": "Modal/dialog backdrop — 50% black overlay behind modals" }
  }
}