{
  "Global": {
    "shadowSizes": {
      "Front": {
        "X": {
          "value": "0",
          "type": "other"
        },
        "Y": {
          "value": "--shadow-front-y",
          "type": "other"
        },
        "blur": {
          "value": "--shadow-front-blur",
          "type": "other"
        },
        "spread": {
          "value": "0",
          "type": "other"
        }
      },
      "Center": {
        "X": {
          "value": "0",
          "type": "other"
        },
        "Y": {
          "value": "--shadow-center-y",
          "type": "other"
        },
        "blur": {
          "value": "--shadow-center-blur",
          "type": "other"
        },
        "spread": {
          "value": "0",
          "type": "other"
        }
      },
      "Back": {
        "X": {
          "value": "0",
          "type": "other"
        },
        "Y": {
          "value": "--shadow-back-y",
          "type": "other"
        },
        "blur": {
          "value": "--shadow-back-blur",
          "type": "other"
        },
        "spread": {
          "value": "0",
          "type": "other"
        }
      }
    },
    "Shadows": {
      "Front": {
        "value": {
          "color": "$Supplemental.Shadow",
          "type": "dropShadow",
          "x": "$shadowSizes.Front.X",
          "y": "$shadowSizes.Front.Y",
          "blur": "$shadowSizes.Front.blur",
          "spread": "$shadowSizes.Front.spread"
        },
        "type": "boxShadow",
        "description": "Shadow for primary interactive elements, e.g. a button."
      },
      "Center": {
        "value": {
          "color": "$Supplemental.Shadow",
          "type": "dropShadow",
          "x": "$shadowSizes.Center.X",
          "y": "$shadowSizes.Center.Y",
          "blur": "$shadowSizes.Center.blur",
          "spread": "$shadowSizes.Center.spread"
        },
        "type": "boxShadow",
        "description": "Shadow for secondary interactive elements, e.g. a select or radiobutton."
      },
      "Back": {
        "value": {
          "color": "$Supplemental.Shadow",
          "type": "dropShadow",
          "x": "$shadowSizes.Back.X",
          "y": "$shadowSizes.Back.Y",
          "blur": "$shadowSizes.Back.blur",
          "spread": "$shadowSizes.Back.spread"
        },
        "type": "boxShadow",
        "description": "Shadow for interactive elements in active state, e.g. a pressed button or select."
      },
      "Dark": {
        "Front": {
          "value": {
            "color": "$Dark.Supplemental.Shadow",
            "type": "dropShadow",
            "x": "$shadowSizes.Front.X",
            "y": "$shadowSizes.Front.Y",
            "blur": "$shadowSizes.Front.blur",
            "spread": "$shadowSizes.Front.spread"
          },
          "type": "boxShadow",
          "description": "Shadow for primary interactive elements, e.g. a button."
        },
        "Center": {
          "value": {
            "color": "$Dark.Supplemental.Shadow",
            "type": "dropShadow",
            "x": "$shadowSizes.Center.X",
            "y": "$shadowSizes.Center.Y",
            "blur": "$shadowSizes.Center.blur",
            "spread": "$shadowSizes.Center.spread"
          },
          "type": "boxShadow",
          "description": "Shadow for secondary interactive elements, e.g. a select or radiobutton."
        },
        "Back": {
          "value": {
            "color": "$Dark.Supplemental.Shadow",
            "type": "dropShadow",
            "x": "$shadowSizes.Back.X",
            "y": "$shadowSizes.Back.Y",
            "blur": "$shadowSizes.Back.blur",
            "spread": "$shadowSizes.Back.spread"
          },
          "type": "boxShadow",
          "description": "Shadow for interactive elements in active state, e.g. a pressed button or select."
        }
      }
    }
  }
}