How to convert JSON style dictionary to CSS variables using Style Dictionary?

Question

I'm currently working on a project where I am using Amazons Style Dictionary and I have design tokens, which contains typography and color definitions. I want to convert these definitions into CSS variables using Style Dictionary. Here's a simplified version of my JSON:

{
  "semantic": {
    "typography": {
      "text": {
        "xl": {
          "default": {
            "value": {
              "fontFamily": "Roboto",
              "fontWeight": "400",
              "lineHeight": "21",
              "fontSize": "12",
              "letterSpacing": "14"
            },
            "type": "typography"
          }
        }
      }
    }
  },
  "color": {
    "orange": {
      "100": {
        "value": "#FFEBD8",
        "type": "color"
      },
      "200": {
        "value": "#ffb570",
        "type": "color"
      }
    }
  }
}

I need help with creating a Style Dictionary configuration to output these definitions as CSS variables. Specifically, I'd like the output to look like this:

:root {
  --fontFamily-xl: "Roboto";
  --fontWeight-xl: 400;
  --lineHeight-xl: 21;
  --fontSize-xl: 12;
  --letterSpacing-xl: 14;
  --color-orange-100: #FFEBD8;
  --color-orange-200: #ffb570;
}