{
  "semantics": {
    "primary": {
      "100": {
        "$type": "color",
        "$value": "{primitives.blue.100}"
      },
      "200": {
        "$type": "color",
        "$value": "{primitives.blue.200}"
      },
      "300": {
        "$type": "color",
        "$value": "{primitives.blue.300}"
      },
      "400": {
        "$type": "color",
        "$value": "{primitives.blue.400}"
      },
      "500": {
        "$type": "color",
        "$value": "{primitives.blue.500}"
      },
      "600": {
        "$type": "color",
        "$value": "{primitives.blue.600}"
      },
      "700": {
        "$type": "color",
        "$value": "{primitives.blue.700}"
      },
      "800": {
        "$type": "color",
        "$value": "{primitives.blue.800}"
      },
      "900": {
        "$type": "color",
        "$value": "{primitives.blue.900}"
      },
      "1000": {
        "$type": "color",
        "$value": "{primitives.blue.1000}"
      },
      "1100": {
        "$type": "color",
        "$value": "{primitives.blue.1100}"
      },
      "1200": {
        "$type": "color",
        "$value": "{primitives.blue.1200}"
      },
      "base": {
        "$type": "color",
        "$value": "{semantics.primary.700}"
      }
    },
    "info": {
      "100": {
        "$type": "color",
        "$value": "{primitives.blue.100}"
      },
      "200": {
        "$type": "color",
        "$value": "{primitives.blue.200}"
      },
      "300": {
        "$type": "color",
        "$value": "{primitives.blue.300}"
      },
      "400": {
        "$type": "color",
        "$value": "{primitives.blue.400}"
      },
      "500": {
        "$type": "color",
        "$value": "{primitives.blue.500}"
      },
      "600": {
        "$type": "color",
        "$value": "{primitives.blue.600}"
      },
      "700": {
        "$type": "color",
        "$value": "{primitives.blue.700}"
      },
      "800": {
        "$type": "color",
        "$value": "{primitives.blue.800}"
      },
      "900": {
        "$type": "color",
        "$value": "{primitives.blue.900}"
      },
      "1000": {
        "$type": "color",
        "$value": "{primitives.blue.1000}"
      },
      "1100": {
        "$type": "color",
        "$value": "{primitives.blue.1100}"
      },
      "1200": {
        "$type": "color",
        "$value": "{primitives.blue.1200}"
      },
      "base": {
        "$type": "color",
        "$value": "{semantics.info.700}"
      }
    },
    "success": {
      "100": {
        "$type": "color",
        "$value": "{primitives.green.100}"
      },
      "200": {
        "$type": "color",
        "$value": "{primitives.green.200}"
      },
      "300": {
        "$type": "color",
        "$value": "{primitives.green.300}"
      },
      "400": {
        "$type": "color",
        "$value": "{primitives.green.400}"
      },
      "500": {
        "$type": "color",
        "$value": "{primitives.green.500}"
      },
      "600": {
        "$type": "color",
        "$value": "{primitives.green.600}"
      },
      "700": {
        "$type": "color",
        "$value": "{primitives.green.700}"
      },
      "800": {
        "$type": "color",
        "$value": "{primitives.green.800}"
      },
      "900": {
        "$type": "color",
        "$value": "{primitives.green.900}"
      },
      "1000": {
        "$type": "color",
        "$value": "{primitives.green.1000}"
      },
      "1100": {
        "$type": "color",
        "$value": "{primitives.green.1100}"
      },
      "1200": {
        "$type": "color",
        "$value": "{primitives.green.1200}"
      },
      "base": {
        "$type": "color",
        "$value": "{semantics.success.700}"
      }
    },
    "danger": {
      "100": {
        "$type": "color",
        "$value": "{primitives.red.100}"
      },
      "200": {
        "$type": "color",
        "$value": "{primitives.red.200}"
      },
      "300": {
        "$type": "color",
        "$value": "{primitives.red.300}"
      },
      "400": {
        "$type": "color",
        "$value": "{primitives.red.400}"
      },
      "500": {
        "$type": "color",
        "$value": "{primitives.red.500}"
      },
      "600": {
        "$type": "color",
        "$value": "{primitives.red.600}"
      },
      "700": {
        "$type": "color",
        "$value": "{primitives.red.700}"
      },
      "800": {
        "$type": "color",
        "$value": "{primitives.red.800}"
      },
      "900": {
        "$type": "color",
        "$value": "{primitives.red.900}"
      },
      "1000": {
        "$type": "color",
        "$value": "{primitives.red.1000}"
      },
      "1100": {
        "$type": "color",
        "$value": "{primitives.red.1100}"
      },
      "1200": {
        "$type": "color",
        "$value": "{primitives.red.1200}"
      },
      "base": {
        "$type": "color",
        "$value": "{semantics.danger.700}"
      }
    },
    "warning": {
      "100": {
        "$type": "color",
        "$value": "{primitives.yellow.100}"
      },
      "200": {
        "$type": "color",
        "$value": "{primitives.yellow.200}"
      },
      "300": {
        "$type": "color",
        "$value": "{primitives.yellow.300}"
      },
      "400": {
        "$type": "color",
        "$value": "{primitives.yellow.400}"
      },
      "500": {
        "$type": "color",
        "$value": "{primitives.yellow.500}"
      },
      "600": {
        "$type": "color",
        "$value": "{primitives.yellow.600}"
      },
      "700": {
        "$type": "color",
        "$value": "{primitives.yellow.700}"
      },
      "800": {
        "$type": "color",
        "$value": "{primitives.yellow.800}"
      },
      "900": {
        "$type": "color",
        "$value": "{primitives.yellow.900}"
      },
      "1000": {
        "$type": "color",
        "$value": "{primitives.yellow.1000}"
      },
      "1100": {
        "$type": "color",
        "$value": "{primitives.yellow.1100}"
      },
      "1200": {
        "$type": "color",
        "$value": "{primitives.yellow.1200}"
      },
      "base": {
        "$type": "color",
        "$value": "{semantics.warning.500}"
      }
    }
  },
  "bg": {
    "body": {
      "$type": "color",
      "$value": "{primitives.base.white}",
      "$description": "The main background color of the app."
    },
    "surface": {
      "default": {
        "$type": "color",
        "$value": "{primitives.base.white}",
        "$description": "input"
      },
      "inverse": {
        "$type": "color",
        "$value": "{primitives.base.white}",
        "$description": "input"
      },
      "blur": {
        "$type": "color",
        "$value": "#ffffffcc",
        "$description": "Semi-transparent white for frosted/blurred surfaces. Combine with blur/blur-01. Fallback: 80% opaque white when backdrop-filter is unsupported."
      }
    },
    "primary": {
      "base": {
        "default": {
          "$type": "color",
          "$value": "{semantics.primary.base}",
          "$description": "Default background color for the primary surface."
        },
        "hover": {
          "$type": "color",
          "$value": "{semantics.primary.800}"
        },
        "press": {
          "$type": "color",
          "$value": "{semantics.primary.900}",
          "$description": "Background color for pressed primary actions."
        }
      },
      "subtle": {
        "default": {
          "$type": "color",
          "$value": "{semantics.primary.100}",
          "$description": "Default background color for the subtle primary surface."
        },
        "hover": {
          "$type": "color",
          "$value": "{semantics.primary.200}"
        },
        "press": {
          "$type": "color",
          "$value": "{semantics.primary.300}",
          "$description": "Background color for pressed subtle primary elements."
        }
      }
    },
    "neutral": {
      "subtlest": {
        "default": {
          "$type": "color",
          "$value": "{primitives.base.white}",
          "$description": "Default background color for very subtle neutral elements."
        },
        "hover": {
          "$type": "color",
          "$value": "{primitives.neutral.100}"
        },
        "press": {
          "$type": "color",
          "$value": "{primitives.neutral.200}",
          "$description": "Background color for pressed very subtle neutral elements."
        }
      },
      "subtle": {
        "default": {
          "$type": "color",
          "$value": "{primitives.neutral.200}",
          "$description": "Default background color for subtle neutral elements."
        },
        "hover": {
          "$type": "color",
          "$value": "{primitives.neutral.300}"
        },
        "press": {
          "$type": "color",
          "$value": "{primitives.neutral.400}",
          "$description": "Background color for pressed subtle neutral elements."
        }
      },
      "base": {
        "default": {
          "$type": "color",
          "$value": "{primitives.neutral.400}",
          "$description": "Default background color for base neutral elements."
        },
        "hover": {
          "$type": "color",
          "$value": "{primitives.neutral.500}"
        },
        "press": {
          "$type": "color",
          "$value": "{primitives.neutral.600}",
          "$description": "Background color for pressed base neutral elements."
        }
      },
      "bold": {
        "default": {
          "$type": "color",
          "$value": "{primitives.neutral.1000}",
          "$description": "Default background color for bold neutral elements."
        },
        "hover": {
          "$type": "color",
          "$value": "{primitives.neutral.1100}"
        },
        "press": {
          "$type": "color",
          "$value": "{primitives.neutral.1200}",
          "$description": "Background color for pressed bold neutral elements."
        }
      },
      "boldest": {
        "default": {
          "$type": "color",
          "$value": "{primitives.neutral.1200}",
          "$description": "input"
        },
        "press": {
          "$type": "color",
          "$value": "{primitives.base.black}",
          "$description": "input"
        }
      }
    },
    "info": {
      "base": {
        "default": {
          "$type": "color",
          "$value": "{primitives.blue.800}",
          "$description": "Default background color for the info surface."
        },
        "hover": {
          "$type": "color",
          "$value": "{primitives.blue.900}"
        },
        "press": {
          "$type": "color",
          "$value": "{primitives.blue.1000}",
          "$description": "Background color for pressed info actions."
        }
      },
      "subtle": {
        "default": {
          "$type": "color",
          "$value": "{primitives.blue.100}",
          "$description": "Default background color for the subtle info surface."
        },
        "hover": {
          "$type": "color",
          "$value": "{primitives.blue.200}"
        },
        "press": {
          "$type": "color",
          "$value": "{primitives.blue.300}",
          "$description": "Background color for pressed subtle info elements."
        }
      }
    },
    "success": {
      "base": {
        "default": {
          "$type": "color",
          "$value": "{semantics.success.800}",
          "$description": "Default background color for the success surface."
        },
        "hover": {
          "$type": "color",
          "$value": "{semantics.success.900}"
        },
        "press": {
          "$type": "color",
          "$value": "{semantics.success.1000}",
          "$description": "Background color for pressed success actions."
        }
      },
      "subtle": {
        "default": {
          "$type": "color",
          "$value": "{semantics.success.100}",
          "$description": "Default background color for the subtle success surface."
        },
        "hover": {
          "$type": "color",
          "$value": "{semantics.success.200}"
        },
        "press": {
          "$type": "color",
          "$value": "{semantics.success.300}",
          "$description": "Background color for pressed subtle success elements."
        }
      }
    },
    "warning": {
      "base": {
        "default": {
          "$type": "color",
          "$value": "{primitives.yellow.500}",
          "$description": "Default background color for the warning surface."
        },
        "hover": {
          "$type": "color",
          "$value": "{primitives.yellow.600}"
        },
        "press": {
          "$type": "color",
          "$value": "{primitives.yellow.700}",
          "$description": "Background color for pressed warning actions."
        }
      },
      "subtle": {
        "default": {
          "$type": "color",
          "$value": "{primitives.yellow.100}",
          "$description": "Default background color for the subtle warning surface."
        },
        "hover": {
          "$type": "color",
          "$value": "{primitives.yellow.200}"
        },
        "press": {
          "$type": "color",
          "$value": "{primitives.yellow.300}",
          "$description": "Background color for pressed subtle warning elements."
        }
      }
    },
    "danger": {
      "base": {
        "default": {
          "$type": "color",
          "$value": "{semantics.danger.700}",
          "$description": "Default background color for the danger surface."
        },
        "hover": {
          "$type": "color",
          "$value": "{semantics.danger.800}"
        },
        "press": {
          "$type": "color",
          "$value": "{semantics.danger.900}",
          "$description": "Background color for pressed danger actions."
        }
      },
      "subtle": {
        "default": {
          "$type": "color",
          "$value": "{semantics.danger.100}",
          "$description": "Default background color for the subtle danger surface."
        },
        "hover": {
          "$type": "color",
          "$value": "{semantics.danger.200}"
        },
        "press": {
          "$type": "color",
          "$value": "{semantics.danger.300}",
          "$description": "Background color for pressed subtle danger elements."
        }
      }
    },
    "select": {
      "default": {
        "$type": "color",
        "$value": "{semantics.primary.100}",
        "$description": "Default background color for components in the selected state."
      },
      "hover": {
        "$type": "color",
        "$value": "{semantics.primary.200}"
      },
      "press": {
        "$type": "color",
        "$value": "{semantics.primary.300}",
        "$description": "Background color for components that are selected and pressed."
      }
    },
    "input": {
      "default": {
        "$type": "color",
        "$value": "{primitives.base.white}",
        "$description": "Default background color for text input fields."
      },
      "hover": {
        "$type": "color",
        "$value": "{primitives.neutral.100}"
      },
      "press": {
        "$type": "color",
        "$value": "{primitives.neutral.200}",
        "$description": "Background color for pressed input fields."
      },
      "read-only": {
        "$type": "color",
        "$value": "{primitives.neutral.100}",
        "$description": "Background color for read-only input fields."
      },
      "disabled": {
        "$type": "color",
        "$value": "{primitives.neutral.100}",
        "$description": "Background color for disabled input fields."
      },
      "bold": {
        "default": {
          "$type": "color",
          "$value": "{primitives.neutral.200}",
          "$description": "Default background color for the filled input variant."
        },
        "hover": {
          "$type": "color",
          "$value": "{primitives.neutral.300}"
        },
        "press": {
          "$type": "color",
          "$value": "{primitives.neutral.400}",
          "$description": "Background color for the pressed state of the filled input variant."
        },
        "read-only": {
          "$type": "color",
          "$value": "{primitives.neutral.300}",
          "$description": "Background color for the read-only state of the filled input variant."
        },
        "disabled": {
          "$type": "color",
          "$value": "{primitives.neutral.300}",
          "$description": "Background color for the disalbed state of the filled input variant."
        }
      }
    },
    "skeleton": {
      "default": {
        "$type": "color",
        "$value": "{primitives.neutral.200}"
      },
      "pulse": {
        "$type": "color",
        "$value": "{primitives.neutral.400}"
      }
    },
    "extended": {
      "pumpkin": {
        "base": {
          "default": {
            "$type": "color",
            "$value": "{primitives.pumpkin.700}",
            "$description": "Default background color for pumpkin-themed elements."
          },
          "hover": {
            "$type": "color",
            "$value": "{primitives.pumpkin.800}"
          },
          "press": {
            "$type": "color",
            "$value": "{primitives.pumpkin.900}",
            "$description": "Background color for pressed pumpkin-themed elements."
          }
        },
        "subtle": {
          "default": {
            "$type": "color",
            "$value": "{primitives.pumpkin.100}",
            "$description": "Default background color for subtle pumpkin elements."
          },
          "hover": {
            "$type": "color",
            "$value": "{primitives.pumpkin.200}"
          },
          "press": {
            "$type": "color",
            "$value": "{primitives.pumpkin.300}",
            "$description": "Background color for pressed subtle pumpkin elements."
          }
        }
      },
      "orange": {
        "base": {
          "default": {
            "$type": "color",
            "$value": "{primitives.orange.900}",
            "$description": "Default background color for orange-themed elements."
          },
          "hover": {
            "$type": "color",
            "$value": "{primitives.orange.1000}"
          },
          "press": {
            "$type": "color",
            "$value": "{primitives.orange.1100}",
            "$description": "Background color for pressed orange-themed elements."
          }
        },
        "subtle": {
          "default": {
            "$type": "color",
            "$value": "{primitives.orange.100}",
            "$description": "Default background color for subtle orange elements."
          },
          "hover": {
            "$type": "color",
            "$value": "{primitives.orange.200}"
          },
          "press": {
            "$type": "color",
            "$value": "{primitives.orange.300}",
            "$description": "Background color for pressed subtle orange elements."
          }
        }
      },
      "lime": {
        "base": {
          "default": {
            "$type": "color",
            "$value": "{primitives.lime.800}",
            "$description": "Default background color for lime-themed elements."
          },
          "hover": {
            "$type": "color",
            "$value": "{primitives.lime.900}"
          },
          "press": {
            "$type": "color",
            "$value": "{primitives.lime.1000}",
            "$description": "Background color for pressed lime-themed elements."
          }
        },
        "subtle": {
          "default": {
            "$type": "color",
            "$value": "{primitives.lime.100}",
            "$description": "Default background color for subtle lime elements."
          },
          "hover": {
            "$type": "color",
            "$value": "{primitives.lime.200}"
          },
          "press": {
            "$type": "color",
            "$value": "{primitives.lime.300}",
            "$description": "Background color for pressed subtle lime elements."
          }
        }
      },
      "teal": {
        "base": {
          "default": {
            "$type": "color",
            "$value": "{primitives.teal.800}",
            "$description": "Default background color for teal-themed elements."
          },
          "hover": {
            "$type": "color",
            "$value": "{primitives.teal.900}"
          },
          "press": {
            "$type": "color",
            "$value": "{primitives.teal.1000}",
            "$description": "Background color for pressed teal-themed elements."
          }
        },
        "subtle": {
          "default": {
            "$type": "color",
            "$value": "{primitives.teal.100}",
            "$description": "Default background color for subtle teal elements."
          },
          "hover": {
            "$type": "color",
            "$value": "{primitives.teal.200}"
          },
          "press": {
            "$type": "color",
            "$value": "{primitives.teal.300}",
            "$description": "Background color for pressed subtle teal elements."
          }
        }
      },
      "aqua": {
        "base": {
          "default": {
            "$type": "color",
            "$value": "{primitives.aqua.900}",
            "$description": "Default background color for aqua-themed elements."
          },
          "hover": {
            "$type": "color",
            "$value": "{primitives.aqua.1000}"
          },
          "press": {
            "$type": "color",
            "$value": "{primitives.aqua.1100}",
            "$description": "Background color for pressed aqua-themed elements."
          }
        },
        "subtle": {
          "default": {
            "$type": "color",
            "$value": "{primitives.aqua.100}",
            "$description": "Default background color for subtle aqua elements."
          },
          "hover": {
            "$type": "color",
            "$value": "{primitives.aqua.200}"
          },
          "press": {
            "$type": "color",
            "$value": "{primitives.aqua.300}",
            "$description": "Background color for pressed subtle aqua elements."
          }
        }
      },
      "indigo": {
        "base": {
          "default": {
            "$type": "color",
            "$value": "{primitives.indigo.700}",
            "$description": "Default background color for indigo-themed elements."
          },
          "hover": {
            "$type": "color",
            "$value": "{primitives.indigo.800}"
          },
          "press": {
            "$type": "color",
            "$value": "{primitives.indigo.900}",
            "$description": "Background color for pressed indigo-themed elements."
          }
        },
        "subtle": {
          "default": {
            "$type": "color",
            "$value": "{primitives.indigo.100}",
            "$description": "Default background color for subtle indigo elements."
          },
          "hover": {
            "$type": "color",
            "$value": "{primitives.indigo.200}"
          },
          "press": {
            "$type": "color",
            "$value": "{primitives.indigo.300}",
            "$description": "Background color for pressed subtle indigo elements."
          }
        }
      },
      "violet": {
        "base": {
          "default": {
            "$type": "color",
            "$value": "{primitives.violet.700}",
            "$description": "Default background color for violet-themed elements."
          },
          "hover": {
            "$type": "color",
            "$value": "{primitives.violet.800}"
          },
          "press": {
            "$type": "color",
            "$value": "{primitives.violet.900}",
            "$description": "Background color for pressed violet-themed elements."
          }
        },
        "subtle": {
          "default": {
            "$type": "color",
            "$value": "{primitives.violet.100}",
            "$description": "Default background color for subtle violet elements."
          },
          "hover": {
            "$type": "color",
            "$value": "{primitives.violet.200}"
          },
          "press": {
            "$type": "color",
            "$value": "{primitives.violet.300}",
            "$description": "Background color for pressed subtle violet elements."
          }
        }
      },
      "purple": {
        "base": {
          "default": {
            "$type": "color",
            "$value": "{primitives.purple.800}",
            "$description": "Default background color for purple-themed elements."
          },
          "hover": {
            "$type": "color",
            "$value": "{primitives.purple.900}"
          },
          "press": {
            "$type": "color",
            "$value": "{primitives.purple.1000}",
            "$description": "Background color for pressed purple-themed elements."
          }
        },
        "subtle": {
          "default": {
            "$type": "color",
            "$value": "{primitives.purple.100}",
            "$description": "Default background color for subtle purple elements."
          },
          "hover": {
            "$type": "color",
            "$value": "{primitives.purple.200}"
          },
          "press": {
            "$type": "color",
            "$value": "{primitives.purple.300}",
            "$description": "Background color for pressed subtle purple elements."
          }
        }
      },
      "magenta": {
        "base": {
          "default": {
            "$type": "color",
            "$value": "{primitives.magenta.900}",
            "$description": "Default background color for magenta-themed elements."
          },
          "hover": {
            "$type": "color",
            "$value": "{primitives.magenta.1000}"
          },
          "press": {
            "$type": "color",
            "$value": "{primitives.magenta.1100}",
            "$description": "Background color for pressed magenta-themed elements."
          }
        },
        "subtle": {
          "default": {
            "$type": "color",
            "$value": "{primitives.magenta.100}",
            "$description": "Default background color for subtle magenta elements."
          },
          "hover": {
            "$type": "color",
            "$value": "{primitives.magenta.200}"
          },
          "press": {
            "$type": "color",
            "$value": "{primitives.magenta.300}",
            "$description": "Background color for pressed subtle magenta elements."
          }
        }
      },
      "pink": {
        "base": {
          "default": {
            "$type": "color",
            "$value": "{primitives.pink.800}",
            "$description": "Default background color for pink-themed elements."
          },
          "hover": {
            "$type": "color",
            "$value": "{primitives.pink.900}"
          },
          "press": {
            "$type": "color",
            "$value": "{primitives.pink.1000}",
            "$description": "Background color for pressed pink-themed elements."
          }
        },
        "subtle": {
          "default": {
            "$type": "color",
            "$value": "{primitives.pink.100}",
            "$description": "Default background color for subtle pink elements."
          },
          "hover": {
            "$type": "color",
            "$value": "{primitives.pink.200}"
          },
          "press": {
            "$type": "color",
            "$value": "{primitives.pink.300}",
            "$description": "Background color for pressed subtle pink elements."
          }
        }
      }
    }
  },
  "text": {
    "default": {
      "$type": "color",
      "$value": "{primitives.neutral.1200}",
      "$description": "Use for the default color of text, for titles, body text, and general content."
    },
    "subtle": {
      "$type": "color",
      "$value": "{primitives.neutral.1000}",
      "$description": "Use for subtitles, providing a softer emphasis to complement the default text and structure the content."
    },
    "subtlest": {
      "$type": "color",
      "$value": "{primitives.neutral.900}",
      "$description": "Use for helper messages and placeholder text, offering minimal emphasis while remaining legible for supplementary content."
    },
    "disabled": {
      "$type": "color",
      "$value": "{primitives.neutral.600}",
      "$description": "Use for text in the disabled state, ensuring it remains legible while indicating it is not interactive."
    },
    "primary": {
      "$type": "color",
      "$value": "{semantics.primary.800}",
      "$description": "Use for text that highlights primary information or actions, such as headings, titles, or key content."
    },
    "info": {
      "$type": "color",
      "$value": "{primitives.blue.800}",
      "$description": "Use for text that conveys informational content, such as status updates or tips, to highlight non-critical but important information."
    },
    "select": {
      "$type": "color",
      "$value": "{semantics.primary.700}",
      "$description": "Use for text in the selected state, such as in tab header or bottom bar items, to indicate the chosen option."
    },
    "success": {
      "$type": "color",
      "$value": "{semantics.success.800}",
      "$description": "Use for text that indicates positive or successful states."
    },
    "danger": {
      "$type": "color",
      "$value": "{semantics.danger.800}",
      "$description": "Use for text that indicates critical or error states, such as error messages, to draw attention to important issues."
    },
    "warning": {
      "$type": "color",
      "$value": "{semantics.warning.1000}",
      "$description": "Use for text that indicates caution or potential issues, without being too alarming."
    },
    "inverse": {
      "$type": "color",
      "$value": "{primitives.base.white}",
      "$description": "Use for text on base backgrounds, ensuring high contrast and legibility. This text is always white, perfect for buttons or prominent elements."
    },
    "link": {
      "default": {
        "$type": "color",
        "$value": "{semantics.primary.900}",
        "$description": "Use for links text in their default state."
      },
      "hover": {
        "$type": "color",
        "$value": "{semantics.primary.1000}"
      },
      "press": {
        "$type": "color",
        "$value": "{semantics.primary.1100}",
        "$description": "Use for links text in their press state."
      },
      "visited": {
        "$type": "color",
        "$value": "{semantics.primary.1100}",
        "$description": "Use for links text in their visited state."
      }
    },
    "extended": {
      "pumpkin": {
        "$type": "color",
        "$value": "{primitives.pumpkin.900}",
        "$description": "Text color for extended pumpkin-themed elements."
      },
      "orange": {
        "$type": "color",
        "$value": "{primitives.orange.1000}",
        "$description": "Text color for extended orange-themed elements."
      },
      "lime": {
        "$type": "color",
        "$value": "{primitives.lime.800}",
        "$description": "Text color for extended lime-themed elements."
      },
      "teal": {
        "$type": "color",
        "$value": "{primitives.teal.900}",
        "$description": "Text color for extended teal-themed elements."
      },
      "aqua": {
        "$type": "color",
        "$value": "{primitives.aqua.900}",
        "$description": "Text color for extended aqua-themed elements."
      },
      "indigo": {
        "$type": "color",
        "$value": "{primitives.indigo.900}",
        "$description": "Text color for extended indigo-themed elements."
      },
      "violet": {
        "$type": "color",
        "$value": "{primitives.violet.900}",
        "$description": "Text color for extended violet-themed elements."
      },
      "purple": {
        "$type": "color",
        "$value": "{primitives.purple.900}",
        "$description": "Text color for extended purple-themed elements."
      },
      "magenta": {
        "$type": "color",
        "$value": "{primitives.magenta.900}",
        "$description": "Text color for extended magenta-themed elements."
      },
      "pink": {
        "$type": "color",
        "$value": "{primitives.pink.900}",
        "$description": "Text color for extended pink-themed elements."
      }
    }
  },
  "border": {
    "default": {
      "$type": "color",
      "$value": "{primitives.neutral.500}"
    },
    "subtle": {
      "$type": "color",
      "$value": "{primitives.neutral.100}"
    },
    "subtlest": {
      "$type": "color",
      "$value": "{primitives.base.white}"
    },
    "disabled": {
      "$type": "color",
      "$value": "{primitives.neutral.300}"
    },
    "boldest": {
      "$type": "color",
      "$value": "{primitives.neutral.1200}"
    },
    "primary": {
      "$type": "color",
      "$value": "{semantics.primary.base}"
    },
    "info": {
      "$type": "color",
      "$value": "{semantics.info.base}"
    },
    "success": {
      "$type": "color",
      "$value": "{semantics.success.800}"
    },
    "warning": {
      "$type": "color",
      "$value": "{semantics.warning.900}"
    },
    "focus": {
      "default": {
        "$type": "color",
        "$value": "{primitives.blue.400}"
      },
      "error": {
        "$type": "color",
        "$value": "{primitives.red.400}"
      }
    },
    "danger": {
      "default": {
        "$type": "color",
        "$value": "{semantics.danger.800}"
      },
      "press": {
        "$type": "color",
        "$value": "{semantics.danger.1000}"
      }
    },
    "input": {
      "default": {
        "$type": "color",
        "$value": "{primitives.neutral.400}"
      },
      "hover": {
        "$type": "color",
        "$value": "{primitives.neutral.500}"
      },
      "press": {
        "$type": "color",
        "$value": "{primitives.neutral.600}"
      },
      "read-only": {
        "$type": "color",
        "$value": "{primitives.neutral.600}"
      }
    }
  },
  "icon": {
    "default": {
      "$type": "color",
      "$value": "{primitives.neutral.1200}"
    },
    "subtle": {
      "$type": "color",
      "$value": "{primitives.neutral.1000}"
    },
    "subtlest": {
      "$type": "color",
      "$value": "{primitives.neutral.800}"
    },
    "disabled": {
      "$type": "color",
      "$value": "{primitives.neutral.600}"
    },
    "primary": {
      "$type": "color",
      "$value": "{semantics.primary.900}"
    },
    "info": {
      "$type": "color",
      "$value": "{primitives.blue.800}"
    },
    "select": {
      "$type": "color",
      "$value": "{semantics.primary.800}"
    },
    "success": {
      "$type": "color",
      "$value": "{semantics.success.800}"
    },
    "danger": {
      "$type": "color",
      "$value": "{primitives.red.800}"
    },
    "warning": {
      "$type": "color",
      "$value": "{primitives.yellow.1000}"
    },
    "inverse": {
      "$type": "color",
      "$value": "{primitives.base.white}"
    },
    "link": {
      "default": {
        "$type": "color",
        "$value": "{text.link.default}"
      },
      "hover": {
        "$type": "color",
        "$value": "{text.link.hover}"
      },
      "press": {
        "$type": "color",
        "$value": "{text.link.press}"
      },
      "visited": {
        "$type": "color",
        "$value": "{text.link.visited}"
      }
    },
    "extended": {
      "pumpkin": {
        "$type": "color",
        "$value": "{primitives.pumpkin.900}"
      },
      "orange": {
        "$type": "color",
        "$value": "{primitives.orange.1000}"
      },
      "lime": {
        "$type": "color",
        "$value": "{primitives.lime.800}"
      },
      "teal": {
        "$type": "color",
        "$value": "{primitives.teal.900}"
      },
      "aqua": {
        "$type": "color",
        "$value": "{primitives.aqua.900}"
      },
      "indigo": {
        "$type": "color",
        "$value": "{primitives.indigo.900}"
      },
      "violet": {
        "$type": "color",
        "$value": "{primitives.violet.900}"
      },
      "purple": {
        "$type": "color",
        "$value": "{primitives.purple.900}"
      },
      "magenta": {
        "$type": "color",
        "$value": "{primitives.magenta.900}"
      },
      "pink": {
        "$type": "color",
        "$value": "{primitives.pink.900}"
      }
    }
  },
  "state": {
    "press": {
      "$type": "color",
      "$value": "#00000012",
      "$description": "A subtle, semi-transparent overlay for interactive elements like avatars or images that don't have a dedicated pressed color."
    },
    "hover": {
      "$type": "color",
      "$value": "#0000000a"
    },
    "disabled": {
      "$type": "color",
      "$value": "#ffffff99",
      "$description": "A semi-transparent overlay used to show that an element, like a button or input field, is inactive and can't be interacted with."
    }
  },
  "elevation": {
    "1": {
      "$type": "boxShadow",
      "$value": [
        {
          "color": "{shadow.1}",
          "type": "dropShadow",
          "x": "0",
          "y": "0",
          "blur": "4",
          "spread": "0"
        },
        {
          "color": "{shadow.3}",
          "type": "dropShadow",
          "x": "0",
          "y": "3",
          "blur": "9",
          "spread": "0"
        }
      ],
      "$description": "Softest shadow for subtle lift and minimal depth."
    },
    "2": {
      "$type": "boxShadow",
      "$value": [
        {
          "color": "{shadow.2}",
          "type": "dropShadow",
          "x": "0",
          "y": "1",
          "blur": "5",
          "spread": "0"
        },
        {
          "color": "{shadow.4}",
          "type": "dropShadow",
          "x": "0",
          "y": "8",
          "blur": "25",
          "spread": "0"
        }
      ],
      "$description": "Moderate shadow for clear yet gentle separation. E.g. Bottom Bar."
    },
    "3": {
      "$type": "boxShadow",
      "$value": [
        {
          "color": "{shadow.2}",
          "type": "dropShadow",
          "x": "0",
          "y": "2",
          "blur": "7",
          "spread": "0"
        },
        {
          "color": "{shadow.6}",
          "type": "dropShadow",
          "x": "0",
          "y": "6",
          "blur": "32",
          "spread": "0"
        }
      ],
      "$description": "Pronounced shadow for noticeable depth and emphasis.E.g. Bottom Sheet."
    },
    "4": {
      "$type": "boxShadow",
      "$value": [
        {
          "color": "{shadow.5}",
          "type": "dropShadow",
          "x": "0",
          "y": "3",
          "blur": "12",
          "spread": "0"
        },
        {
          "color": "{shadow.7}",
          "type": "dropShadow",
          "x": "0",
          "y": "15",
          "blur": "48",
          "spread": "0"
        }
      ],
      "$description": "Strongest shadow for prominent depth and elevation.E.g. Modal, Notification."
    }
  },
  "backdrop": {
    "$type": "color",
    "$value": "#00000040",
    "$description": "It applies a semi-transparent fill and a blur to de-emphasize content underneath, perfect for modals and other overlays (e.g. Bottom Sheet)."
  }
}