{
  "$themes": [
    {
      "id": "light",
      "name": "Light",
      "selectedTokenSets": {
        "global": "enabled",
        "role-light": "enabled",
        "brand": "enabled"
      }
    },
    {
      "id": "dark",
      "name": "Dark",
      "selectedTokenSets": {
        "global": "enabled",
        "role-dark": "enabled",
        "brand": "enabled"
      }
    }
  ],
  "global": {
    "color": {
      "storefront-darkest": {
        "value": "#000F18",
        "type": "color",
        "description": "Deepest near-black storefront ground; --gpStoreDarkestGrey. Used for footers, modal scrims, and the deepest layered panels.\n"
      },
      "storefront-darker": {
        "value": "#1B2838",
        "type": "color",
        "description": "Primary page canvas — --gpStoreDarkerGrey. The Steam Store's dominant background tone; appears in the gradient end-stop of the store-background gradient.\n"
      },
      "storefront-dark": {
        "value": "#2A475E",
        "type": "color",
        "description": "Slate-blue surface — --gpStoreDarkGrey. Start of the store- background gradient and base of card backgrounds.\n"
      },
      "storefront-mid": {
        "value": "#4E697D",
        "type": "color",
        "description": "Mid-tone slate — --gpStoreGrey. Used for borders and secondary chrome between dark panels.\n"
      },
      "storefront-light": {
        "value": "#7C8EA3",
        "type": "color",
        "description": "Light slate — --gpStoreLightGrey. Quiet text on the dark canvas, divider tones.\n"
      },
      "storefront-lighter": {
        "value": "#A7BACC",
        "type": "color",
        "description": "Pale slate — --gpStoreLighterGrey. Tertiary text and quiet icon fills against the dark canvas.\n"
      },
      "storefront-lightest": {
        "value": "#CCD8E3",
        "type": "color",
        "description": "Near-white pale slate — --gpStoreLightestGrey. Primary body text color on the dark canvas.\n"
      },
      "chrome-darkest": {
        "value": "#0E141B",
        "type": "color",
        "description": "Application chrome darkest — --gpSystemDarkestGrey. Header bar background and elevated overlay panels.\n"
      },
      "chrome-darker": {
        "value": "#23262E",
        "type": "color",
        "description": "Application chrome darker — --gpSystemDarkerGrey. Library chrome and elevated card backgrounds.\n"
      },
      "chrome-dark": {
        "value": "#3D4450",
        "type": "color",
        "description": "Application chrome dark — --gpSystemDarkGrey. Hover surfaces and quiet borders inside the chrome.\n"
      },
      "steam-blue": {
        "value": "#1A9FFF",
        "type": "color",
        "description": "Primary interactive blue — --gpColor-Blue. The Steam Store's inline-link and primary-action accent on the dark canvas.\n"
      },
      "steam-blue-hi": {
        "value": "#00BBFF",
        "type": "color",
        "description": "High-emphasis blue — --gpColor-BlueHi. Highlighted state for the Steam Blue interactive family.\n"
      },
      "chalky-blue": {
        "value": "#66C0F4",
        "type": "color",
        "description": "Steam's signature chalky blue — --gpColor-ChalkyBlue. The brand's most identifiable on-screen color; used for headlines, mark surfaces, and store-page accent type.\n"
      },
      "light-blue": {
        "value": "#B3DFFF",
        "type": "color",
        "description": "Pale brand blue — --gpColor-LightBlue. Tertiary blue accent and quiet info surfaces.\n"
      },
      "dusty-blue": {
        "value": "#417A9B",
        "type": "color",
        "description": "Muted slate-blue — --gpColor-DustyBlue. Secondary surface accent and quiet button fills.\n"
      },
      "steam-green": {
        "value": "#5BA32B",
        "type": "color",
        "description": "Steam's signature CTA green — --gpColor-Green. The \"Install / Add to Cart / Play\" button family is built on this hue (with the brighter --gpColor-GreenHi as the gradient-top stop on those buttons).\n"
      },
      "steam-green-hi": {
        "value": "#59BF40",
        "type": "color",
        "description": "High-emphasis green — --gpColor-GreenHi. Top-stop of the green-CTA gradient.\n"
      },
      "steam-green-lime": {
        "value": "#A4D007",
        "type": "color",
        "description": "Lime CTA accent — observed as the top-stop of the legacy green-button gradient (linear-gradient #A4D007 → #536904). Used on the primary download / install affordances.\n"
      },
      "steam-orange": {
        "value": "#E35E1C",
        "type": "color",
        "description": "Promotional orange — --gpColor-Orange. Sale stickers and discount badges.\n"
      },
      "steam-orange-red": {
        "value": "#EE563B",
        "type": "color",
        "description": "High-emphasis warm — --gpColor-RedHi. Hot-deal / time- limited badges.\n"
      },
      "steam-red": {
        "value": "#D94126",
        "type": "color",
        "description": "Error / removal red — --gpColor-Red. Destructive-action affordance.\n"
      },
      "steam-yellow": {
        "value": "#FFC82C",
        "type": "color",
        "description": "Yellow warning / featured tag — --gpColor-Yellow.\n"
      }
    },
    "fontFamily": {
      "heading": {
        "value": "Inter",
        "type": "fontFamilies",
        "description": "inter@1.0.0 · sans-serif"
      },
      "body": {
        "value": "Inter",
        "type": "fontFamilies",
        "description": "inter@1.0.0 · sans-serif"
      },
      "mono": {
        "value": "JetBrainsMono Nerd Font",
        "type": "fontFamilies",
        "description": "jetbrainsmono-nerdfont@1.0.0 · monospace"
      }
    },
    "fontStack": {
      "heading": {
        "value": [
          "Inter",
          "-apple-system",
          "BlinkMacSystemFont",
          "Segoe UI",
          "Roboto",
          "Helvetica Neue",
          "Arial",
          "sans-serif"
        ],
        "type": "fontFamilies"
      },
      "body": {
        "value": [
          "Inter",
          "-apple-system",
          "BlinkMacSystemFont",
          "Segoe UI",
          "Roboto",
          "Helvetica Neue",
          "Arial",
          "sans-serif"
        ],
        "type": "fontFamilies"
      },
      "mono": {
        "value": [
          "JetBrainsMono Nerd Font",
          "JetBrains Mono",
          "Fira Code",
          "Menlo",
          "Monaco",
          "Consolas",
          "Liberation Mono",
          "monospace"
        ],
        "type": "fontFamilies"
      }
    }
  },
  "role-light": {
    "color": {
      "background": {
        "value": "{global.color.storefront-lightest}",
        "type": "color"
      },
      "surface": {
        "value": "{global.color.storefront-lighter}",
        "type": "color"
      },
      "surface-elevated": {
        "value": "{global.color.storefront-lightest}",
        "type": "color"
      },
      "text-primary": {
        "value": "{global.color.storefront-darker}",
        "type": "color"
      },
      "text-secondary": {
        "value": "{global.color.storefront-dark}",
        "type": "color"
      },
      "text-tertiary": {
        "value": "{global.color.storefront-mid}",
        "type": "color"
      },
      "primary": {
        "value": "{global.color.steam-green}",
        "type": "color"
      },
      "primary-hover": {
        "value": "{global.color.steam-green-hi}",
        "type": "color"
      },
      "accent": {
        "value": "{global.color.steam-blue}",
        "type": "color"
      },
      "accent-hover": {
        "value": "{global.color.steam-blue-hi}",
        "type": "color"
      },
      "warning": {
        "value": "{global.color.steam-yellow}",
        "type": "color"
      },
      "warning-hover": {
        "value": "{global.color.steam-orange}",
        "type": "color"
      },
      "error": {
        "value": "{global.color.steam-red}",
        "type": "color"
      },
      "success": {
        "value": "{global.color.steam-green}",
        "type": "color"
      },
      "border": {
        "value": "{global.color.storefront-light}",
        "type": "color"
      }
    }
  },
  "role-dark": {
    "color": {
      "background": {
        "value": "{global.color.storefront-darker}",
        "type": "color"
      },
      "surface": {
        "value": "{global.color.storefront-dark}",
        "type": "color"
      },
      "surface-elevated": {
        "value": "{global.color.chrome-darker}",
        "type": "color"
      },
      "text-primary": {
        "value": "{global.color.storefront-lightest}",
        "type": "color"
      },
      "text-secondary": {
        "value": "{global.color.storefront-lighter}",
        "type": "color"
      },
      "text-tertiary": {
        "value": "{global.color.storefront-light}",
        "type": "color"
      },
      "primary": {
        "value": "{global.color.steam-green}",
        "type": "color"
      },
      "primary-hover": {
        "value": "{global.color.steam-green-hi}",
        "type": "color"
      },
      "accent": {
        "value": "{global.color.chalky-blue}",
        "type": "color"
      },
      "accent-hover": {
        "value": "{global.color.steam-blue-hi}",
        "type": "color"
      },
      "warning": {
        "value": "{global.color.steam-yellow}",
        "type": "color"
      },
      "warning-hover": {
        "value": "{global.color.steam-orange}",
        "type": "color"
      },
      "error": {
        "value": "{global.color.steam-red}",
        "type": "color"
      },
      "success": {
        "value": "{global.color.steam-green}",
        "type": "color"
      },
      "border": {
        "value": "{global.color.chrome-dark}",
        "type": "color"
      }
    }
  },
  "brand": {
    "color": {
      "identity": {
        "value": "{global.color.storefront-darker}",
        "type": "color"
      },
      "on-identity": {
        "value": "{global.color.chalky-blue}",
        "type": "color"
      },
      "primary": {
        "value": "{global.color.steam-green}",
        "type": "color"
      },
      "primary-hover": {
        "value": "{global.color.steam-green-hi}",
        "type": "color"
      },
      "accent": {
        "value": "{global.color.chalky-blue}",
        "type": "color"
      },
      "accent-hover": {
        "value": "{global.color.steam-blue-hi}",
        "type": "color"
      },
      "mark": {
        "value": "{global.color.chalky-blue}",
        "type": "color"
      },
      "success": {
        "value": "{global.color.steam-green}",
        "type": "color"
      },
      "warning": {
        "value": "{global.color.steam-yellow}",
        "type": "color"
      },
      "error": {
        "value": "{global.color.steam-red}",
        "type": "color"
      },
      "text-primary-light": {
        "value": "{global.color.storefront-darker}",
        "type": "color"
      },
      "text-primary-dark": {
        "value": "{global.color.storefront-lightest}",
        "type": "color"
      },
      "background-light": {
        "value": "{global.color.storefront-lightest}",
        "type": "color"
      },
      "background-dark": {
        "value": "{global.color.storefront-darker}",
        "type": "color"
      },
      "surface-light": {
        "value": "{global.color.storefront-lighter}",
        "type": "color"
      },
      "surface-dark": {
        "value": "{global.color.storefront-dark}",
        "type": "color"
      },
      "text-secondary-light": {
        "value": "{global.color.storefront-dark}",
        "type": "color"
      },
      "text-tertiary-light": {
        "value": "{global.color.storefront-mid}",
        "type": "color"
      },
      "border-light": {
        "value": "{global.color.storefront-light}",
        "type": "color"
      }
    }
  },
  "$metadata": {
    "name": "Steam",
    "ref": "steam@1.0.0",
    "paletteRef": "steam@1.0.0",
    "generatedBy": "brand-atoms converter"
  }
}