/**
 * @typedef {Object} TokenValue
 * @property {string} value
 */

/**
 * @typedef {Object} TokenWithAppearance
 * @property {string} value
 * @property {Object} extensions
 * @property {Object} extensions.appearance
 * @property {Object} extensions.appearance.dark
 * @property {string} extensions.appearance.dark.value
 */

/**
 * @type {TokenValue}
 */
export const BreakpointSm = { value: "640px" };
/**
 * @type {TokenValue}
 */
export const BreakpointMd = { value: "768px" };
/**
 * @type {TokenValue}
 */
export const BreakpointLg = { value: "1024px" };
/**
 * @type {TokenValue}
 */
export const BreakpointXl = { value: "1280px" };
/**
 * @type {TokenValue}
 */
export const BreakpointXxl = { value: "1536px" };
/**
 * @type {TokenValue}
 */
export const ColorNeutral0 = { value: "#ffffff" };
/**
 * @type {TokenValue}
 */
export const ColorNeutral10 = { value: "#fcfcfc" };
/**
 * @type {TokenValue}
 */
export const ColorNeutral20 = { value: "#f9f9f9" };
/**
 * @type {TokenValue}
 */
export const ColorNeutral30 = { value: "#f6f6f6" };
/**
 * @type {TokenValue}
 */
export const ColorNeutral40 = { value: "#f1f1f1" };
/**
 * @type {TokenValue}
 */
export const ColorNeutral50 = { value: "#eeeeee" };
/**
 * @type {TokenValue}
 */
export const ColorNeutral60 = { value: "#ededed" };
/**
 * @type {TokenValue}
 */
export const ColorNeutral70 = { value: "#e8e8e8" };
/**
 * @type {TokenValue}
 */
export const ColorNeutral80 = { value: "#e6e6e6" };
/**
 * @type {TokenValue}
 */
export const ColorNeutral90 = { value: "#e5e5e5" };
/**
 * @type {TokenValue}
 */
export const ColorNeutral100 = { value: "#dfdfdf" };
/**
 * @type {TokenValue}
 */
export const ColorNeutral200 = { value: "#c4c4c4" };
/**
 * @type {TokenValue}
 */
export const ColorNeutral300 = { value: "#a8a8a8" };
/**
 * @type {TokenValue}
 */
export const ColorNeutral400 = { value: "#8b8b8b" };
/**
 * @type {TokenValue}
 */
export const ColorNeutral500 = { value: "#707070" };
/**
 * @type {TokenValue}
 */
export const ColorNeutral600 = { value: "#545454" };
/**
 * @type {TokenValue}
 */
export const ColorNeutral700 = { value: "#404040" };
/**
 * @type {TokenValue}
 */
export const ColorNeutral800 = { value: "#292929" };
/**
 * @type {TokenValue}
 */
export const ColorNeutral900 = { value: "#1a1a1a" };
/**
 * @type {TokenValue}
 */
export const ColorNeutral950 = { value: "#040404" };
/**
 * @type {TokenValue}
 */
export const ColorBlue10 = { value: "#fafcff" };
/**
 * @type {TokenValue}
 */
export const ColorBlue50 = { value: "#e6f1ff" };
/**
 * @type {TokenValue}
 */
export const ColorBlue100 = { value: "#cce3ff" };
/**
 * @type {TokenValue}
 */
export const ColorBlue200 = { value: "#9ecaff" };
/**
 * @type {TokenValue}
 */
export const ColorBlue300 = { value: "#70b1ff" };
/**
 * @type {TokenValue}
 */
export const ColorBlue400 = { value: "#3d95ff" };
/**
 * @type {TokenValue}
 */
export const ColorBlue500 = { value: "#1a82ff" };
/**
 * @type {TokenValue}
 */
export const ColorBlue600 = { value: "#0265dc" };
/**
 * @type {TokenValue}
 */
export const ColorBlue700 = { value: "#1d4ca3" };
/**
 * @type {TokenValue}
 */
export const ColorBlue800 = { value: "#003472" };
/**
 * @type {TokenValue}
 */
export const ColorBlue900 = { value: "#002047" };
/**
 * @type {TokenValue}
 */
export const ColorBlue950 = { value: "#000b19" };
/**
 * @type {TokenValue}
 */
export const ColorRed10 = { value: "#fffbfa" };
/**
 * @type {TokenValue}
 */
export const ColorRed50 = { value: "#ffe9e5" };
/**
 * @type {TokenValue}
 */
export const ColorRed100 = { value: "#ffd4cc" };
/**
 * @type {TokenValue}
 */
export const ColorRed200 = { value: "#ffac9e" };
/**
 * @type {TokenValue}
 */
export const ColorRed300 = { value: "#ff8670" };
/**
 * @type {TokenValue}
 */
export const ColorRed400 = { value: "#ff5b3d" };
/**
 * @type {TokenValue}
 */
export const ColorRed500 = { value: "#ff3914" };
/**
 * @type {TokenValue}
 */
export const ColorRed600 = { value: "#d62100" };
/**
 * @type {TokenValue}
 */
export const ColorRed700 = { value: "#a31900" };
/**
 * @type {TokenValue}
 */
export const ColorRed800 = { value: "#731100" };
/**
 * @type {TokenValue}
 */
export const ColorRed900 = { value: "#470b00" };
/**
 * @type {TokenValue}
 */
export const ColorRed950 = { value: "#0a0200" };
/**
 * @type {TokenValue}
 */
export const ColorGreen10 = { value: "#f5fefb" };
/**
 * @type {TokenValue}
 */
export const ColorGreen50 = { value: "#d3fded" };
/**
 * @type {TokenValue}
 */
export const ColorGreen100 = { value: "#b8f5dd" };
/**
 * @type {TokenValue}
 */
export const ColorGreen200 = { value: "#70ebbc" };
/**
 * @type {TokenValue}
 */
export const ColorGreen300 = { value: "#3be3a2" };
/**
 * @type {TokenValue}
 */
export const ColorGreen400 = { value: "#0bd085" };
/**
 * @type {TokenValue}
 */
export const ColorGreen500 = { value: "#0aa86c" };
/**
 * @type {TokenValue}
 */
export const ColorGreen600 = { value: "#077e50" };
/**
 * @type {TokenValue}
 */
export const ColorGreen700 = { value: "#05613e" };
/**
 * @type {TokenValue}
 */
export const ColorGreen800 = { value: "#04482e" };
/**
 * @type {TokenValue}
 */
export const ColorGreen900 = { value: "#022c1c" };
/**
 * @type {TokenValue}
 */
export const ColorGreen950 = { value: "#010f0a" };
/**
 * @type {TokenValue}
 */
export const ColorBlueGrey10 = { value: "#f7f9fa" };
/**
 * @type {TokenValue}
 */
export const ColorBlueGrey50 = { value: "#e9eef2" };
/**
 * @type {TokenValue}
 */
export const ColorBlueGrey100 = { value: "#dce4ea" };
/**
 * @type {TokenValue}
 */
export const ColorBlueGrey200 = { value: "#b9c9d5" };
/**
 * @type {TokenValue}
 */
export const ColorBlueGrey300 = { value: "#99b1c2" };
/**
 * @type {TokenValue}
 */
export const ColorBlueGrey400 = { value: "#7899b0" };
/**
 * @type {TokenValue}
 */
export const ColorBlueGrey500 = { value: "#55768e" };
/**
 * @type {TokenValue}
 */
export const ColorBlueGrey600 = { value: "#445e71" };
/**
 * @type {TokenValue}
 */
export const ColorBlueGrey700 = { value: "#344856" };
/**
 * @type {TokenValue}
 */
export const ColorBlueGrey800 = { value: "#24333d" };
/**
 * @type {TokenValue}
 */
export const ColorBlueGrey900 = { value: "#192329" };
/**
 * @type {TokenValue}
 */
export const ColorBlueGrey950 = { value: "#090d10" };
/**
 * @type {TokenValue}
 */
export const ColorOrange10 = { value: "#fff8f1" };
/**
 * @type {TokenValue}
 */
export const ColorOrange50 = { value: "#ffecd6" };
/**
 * @type {TokenValue}
 */
export const ColorOrange100 = { value: "#ffddb7" };
/**
 * @type {TokenValue}
 */
export const ColorOrange200 = { value: "#ffc07a" };
/**
 * @type {TokenValue}
 */
export const ColorOrange300 = { value: "#ffa037" };
/**
 * @type {TokenValue}
 */
export const ColorOrange400 = { value: "#e37700" };
/**
 * @type {TokenValue}
 */
export const ColorOrange500 = { value: "#c16500" };
/**
 * @type {TokenValue}
 */
export const ColorOrange600 = { value: "#964f00" };
/**
 * @type {TokenValue}
 */
export const ColorOrange700 = { value: "#693700" };
/**
 * @type {TokenValue}
 */
export const ColorOrange800 = { value: "#4d2800" };
/**
 * @type {TokenValue}
 */
export const ColorOrange900 = { value: "#2e1900" };
/**
 * @type {TokenValue}
 */
export const ColorOrange950 = { value: "#140b00" };
/**
 * @type {TokenValue}
 */
export const ColorCyan10 = { value: "#f2fcfe" };
/**
 * @type {TokenValue}
 */
export const ColorCyan50 = { value: "#daf7fc" };
/**
 * @type {TokenValue}
 */
export const ColorCyan100 = { value: "#c2f2fb" };
/**
 * @type {TokenValue}
 */
export const ColorCyan200 = { value: "#7fe5f6" };
/**
 * @type {TokenValue}
 */
export const ColorCyan300 = { value: "#45d8f2" };
/**
 * @type {TokenValue}
 */
export const ColorCyan400 = { value: "#10c2e2" };
/**
 * @type {TokenValue}
 */
export const ColorCyan500 = { value: "#0da2bd" };
/**
 * @type {TokenValue}
 */
export const ColorCyan600 = { value: "#0a7a8e" };
/**
 * @type {TokenValue}
 */
export const ColorCyan700 = { value: "#075563" };
/**
 * @type {TokenValue}
 */
export const ColorCyan800 = { value: "#05424d" };
/**
 * @type {TokenValue}
 */
export const ColorCyan900 = { value: "#032025" };
/**
 * @type {TokenValue}
 */
export const ColorCyan950 = { value: "#011013" };
/**
 * @type {TokenValue}
 */
export const ColorPurple10 = { value: "#fcfbfe" };
/**
 * @type {TokenValue}
 */
export const ColorPurple50 = { value: "#eeecf9" };
/**
 * @type {TokenValue}
 */
export const ColorPurple100 = { value: "#e7e4f6" };
/**
 * @type {TokenValue}
 */
export const ColorPurple200 = { value: "#c9c2eb" };
/**
 * @type {TokenValue}
 */
export const ColorPurple300 = { value: "#b1a7e2" };
/**
 * @type {TokenValue}
 */
export const ColorPurple400 = { value: "#9688d7" };
/**
 * @type {TokenValue}
 */
export const ColorPurple500 = { value: "#7766cc" };
/**
 * @type {TokenValue}
 */
export const ColorPurple600 = { value: "#5c47c2" };
/**
 * @type {TokenValue}
 */
export const ColorPurple700 = { value: "#3f2f8e" };
/**
 * @type {TokenValue}
 */
export const ColorPurple800 = { value: "#2e2267" };
/**
 * @type {TokenValue}
 */
export const ColorPurple900 = { value: "#191338" };
/**
 * @type {TokenValue}
 */
export const ColorPurple950 = { value: "#100c25" };
/**
 * @type {TokenValue}
 */
export const ColorMagenta10 = { value: "#fefbfd" };
/**
 * @type {TokenValue}
 */
export const ColorMagenta50 = { value: "#fae6f3" };
/**
 * @type {TokenValue}
 */
export const ColorMagenta100 = { value: "#f8ddef" };
/**
 * @type {TokenValue}
 */
export const ColorMagenta200 = { value: "#efb3db" };
/**
 * @type {TokenValue}
 */
export const ColorMagenta300 = { value: "#e892cc" };
/**
 * @type {TokenValue}
 */
export const ColorMagenta400 = { value: "#eb61be" };
/**
 * @type {TokenValue}
 */
export const ColorMagenta500 = { value: "#d741a6" };
/**
 * @type {TokenValue}
 */
export const ColorMagenta600 = { value: "#be288d" };
/**
 * @type {TokenValue}
 */
export const ColorMagenta700 = { value: "#831b60" };
/**
 * @type {TokenValue}
 */
export const ColorMagenta800 = { value: "#591342" };
/**
 * @type {TokenValue}
 */
export const ColorMagenta900 = { value: "#26081c" };
/**
 * @type {TokenValue}
 */
export const ColorMagenta950 = { value: "#15040f" };
/**
 * @type {TokenValue}
 */
export const ColorMauves10 = { value: "#fffbfa" };
/**
 * @type {TokenValue}
 */
export const ColorMauves50 = { value: "#fff7f5" };
/**
 * @type {TokenValue}
 */
export const ColorMauves100 = { value: "#fff4f0" };
/**
 * @type {TokenValue}
 */
export const ColorMauves200 = { value: "#ffe4db" };
/**
 * @type {TokenValue}
 */
export const ColorMauves300 = { value: "#ffd1c2" };
/**
 * @type {TokenValue}
 */
export const ColorMauves400 = { value: "#ffaf94" };
/**
 * @type {TokenValue}
 */
export const ColorMauves500 = { value: "#ffa78a" };
/**
 * @type {TokenValue}
 */
export const ColorMauves600 = { value: "#d88569" };
/**
 * @type {TokenValue}
 */
export const ColorMauves700 = { value: "#d27151" };
/**
 * @type {TokenValue}
 */
export const ColorMauves800 = { value: "#823a21" };
/**
 * @type {TokenValue}
 */
export const ColorMauves900 = { value: "#411d11" };
/**
 * @type {TokenValue}
 */
export const ColorMauves950 = { value: "#200e08" };
/**
 * @type {TokenValue}
 */
export const ColorLime10 = { value: "#fdfdfc" };
/**
 * @type {TokenValue}
 */
export const ColorLime50 = { value: "#eaf0db" };
/**
 * @type {TokenValue}
 */
export const ColorLime100 = { value: "#e3eccf" };
/**
 * @type {TokenValue}
 */
export const ColorLime200 = { value: "#c3d595" };
/**
 * @type {TokenValue}
 */
export const ColorLime300 = { value: "#a8c26a" };
/**
 * @type {TokenValue}
 */
export const ColorLime400 = { value: "#8aad39" };
/**
 * @type {TokenValue}
 */
export const ColorLime500 = { value: "#6b9013" };
/**
 * @type {TokenValue}
 */
export const ColorLime600 = { value: "#56750b" };
/**
 * @type {TokenValue}
 */
export const ColorLime700 = { value: "#3a5007" };
/**
 * @type {TokenValue}
 */
export const ColorLime800 = { value: "#2a3a03" };
/**
 * @type {TokenValue}
 */
export const ColorLime900 = { value: "#111801" };
/**
 * @type {TokenValue}
 */
export const ColorLime950 = { value: "#0a0f01" };
/**
 * @type {TokenValue}
 */
export const ColorYellow10 = { value: "#fffef8" };
/**
 * @type {TokenValue}
 */
export const ColorYellow50 = { value: "#fffcf0" };
/**
 * @type {TokenValue}
 */
export const ColorYellow100 = { value: "#fff9e2" };
/**
 * @type {TokenValue}
 */
export const ColorYellow200 = { value: "#fff0b1" };
/**
 * @type {TokenValue}
 */
export const ColorYellow300 = { value: "#ffe278" };
/**
 * @type {TokenValue}
 */
export const ColorYellow400 = { value: "#ffc902" };
/**
 * @type {TokenValue}
 */
export const ColorYellow500 = { value: "#ffbe00" };
/**
 * @type {TokenValue}
 */
export const ColorYellow600 = { value: "#de9500" };
/**
 * @type {TokenValue}
 */
export const ColorYellow700 = { value: "#c98600" };
/**
 * @type {TokenValue}
 */
export const ColorYellow800 = { value: "#704b00" };
/**
 * @type {TokenValue}
 */
export const ColorYellow900 = { value: "#382500" };
/**
 * @type {TokenValue}
 */
export const ColorYellow950 = { value: "#191100" };
/**
 * @type {TokenValue}
 */
export const ColorBrown10 = { value: "#fefcfb" };
/**
 * @type {TokenValue}
 */
export const ColorBrown50 = { value: "#f1e3da" };
/**
 * @type {TokenValue}
 */
export const ColorBrown100 = { value: "#eddace" };
/**
 * @type {TokenValue}
 */
export const ColorBrown200 = { value: "#e1c1ad" };
/**
 * @type {TokenValue}
 */
export const ColorBrown300 = { value: "#d4a487" };
/**
 * @type {TokenValue}
 */
export const ColorBrown400 = { value: "#c5855e" };
/**
 * @type {TokenValue}
 */
export const ColorBrown500 = { value: "#a9663d" };
/**
 * @type {TokenValue}
 */
export const ColorBrown600 = { value: "#74462a" };
/**
 * @type {TokenValue}
 */
export const ColorBrown700 = { value: "#5e3922" };
/**
 * @type {TokenValue}
 */
export const ColorBrown800 = { value: "#432918" };
/**
 * @type {TokenValue}
 */
export const ColorBrown900 = { value: "#1e120b" };
/**
 * @type {TokenValue}
 */
export const ColorBrown950 = { value: "#0c0704" };
/**
 * @type {TokenValue}
 */
export const DurationDefault = { value: "200ms" };
/**
 * @type {TokenValue}
 */
export const DurationInstant = { value: "0ms" };
/**
 * @type {TokenValue}
 */
export const DurationFast = { value: "100ms" };
/**
 * @type {TokenValue}
 */
export const DurationSlow = { value: "300ms" };
/**
 * @type {TokenValue}
 */
export const FontFamilyBase = { value: "'Nunito Sans', sans-serif" };
/**
 * @type {TokenValue}
 */
export const FontFamilyDisplay = { value: "'Sofia Pro', SofiaPro, sans-serif" };
/**
 * @type {TokenValue}
 */
export const FontLineHeightBase = { value: "1.5" };
/**
 * @type {TokenValue}
 */
export const FontLineHeightDisplay = { value: "1.25" };
/**
 * @type {TokenValue}
 */
export const FontWeightNormal = { value: "400" };
/**
 * @type {TokenValue}
 */
export const FontWeightSemibold = { value: "600" };
/**
 * @type {TokenValue}
 */
export const FontWeightBold = { value: "700" };
/**
 * @type {TokenValue}
 */
export const FontSize100 = { value: "0.625rem" };
/**
 * @type {TokenValue}
 */
export const FontSize200 = { value: "0.75rem" };
/**
 * @type {TokenValue}
 */
export const FontSize300 = { value: "0.875rem" };
/**
 * @type {TokenValue}
 */
export const FontSize400 = { value: "1rem" };
/**
 * @type {TokenValue}
 */
export const FontSize500 = { value: "1.25rem" };
/**
 * @type {TokenValue}
 */
export const FontSize600 = { value: "1.5rem" };
/**
 * @type {TokenValue}
 */
export const FontSize700 = { value: "1.75rem" };
/**
 * @type {TokenValue}
 */
export const FontSize800 = { value: "2rem" };
/**
 * @type {TokenValue}
 */
export const FontSize900 = { value: "2.25rem" };
/**
 * @type {TokenValue}
 */
export const Radius0 = { value: "0rem" };
/**
 * @type {TokenValue}
 */
export const Radius1 = { value: "0.1875rem" };
/**
 * @type {TokenValue}
 */
export const Radius2 = { value: "0.375rem" };
/**
 * @type {TokenValue}
 */
export const Radius3 = { value: "0.5625rem" };
/**
 * @type {TokenValue}
 */
export const Radius4 = { value: "0.75rem" };
/**
 * @type {TokenValue}
 */
export const Radius5 = { value: "0.9375rem" };
/**
 * @type {TokenValue}
 */
export const Radius6 = { value: "1.125rem" };
/**
 * @type {TokenValue}
 */
export const Radius7 = { value: "1.3125rem" };
/**
 * @type {TokenValue}
 */
export const Radius8 = { value: "1.5rem" };
/**
 * @type {TokenValue}
 */
export const Size0 = { value: "0rem" };
/**
 * @type {TokenValue}
 */
export const Size1 = { value: "0.25rem" };
/**
 * @type {TokenValue}
 */
export const Size2 = { value: "0.5rem" };
/**
 * @type {TokenValue}
 */
export const Size3 = { value: "0.75rem" };
/**
 * @type {TokenValue}
 */
export const Size4 = { value: "1rem" };
/**
 * @type {TokenValue}
 */
export const Size5 = { value: "1.25rem" };
/**
 * @type {TokenValue}
 */
export const Size6 = { value: "1.5rem" };
/**
 * @type {TokenValue}
 */
export const Size7 = { value: "1.75rem" };
/**
 * @type {TokenValue}
 */
export const Size8 = { value: "2rem" };
/**
 * @type {TokenValue}
 */
export const Size9 = { value: "2.25rem" };
/**
 * @type {TokenValue}
 */
export const Size10 = { value: "2.5rem" };
/**
 * @type {TokenValue}
 */
export const Size11 = { value: "2.75rem" };
/**
 * @type {TokenValue}
 */
export const Size12 = { value: "3rem" };
/**
 * @type {TokenValue}
 */
export const Size13 = { value: "3.25rem" };
/**
 * @type {TokenValue}
 */
export const Size14 = { value: "3.5rem" };
/**
 * @type {TokenValue}
 */
export const SizeQuarter = { value: "0.0625rem" };
/**
 * @type {TokenValue}
 */
export const SizeHalf = { value: "0.125rem" };
/**
 * @type {TokenValue}
 */
export const TransitionEase = { value: "cubic-bezier(.4, 0, .2, 1)" };
/**
 * @type {TokenValue}
 */
export const TransitionEaseIn = { value: "cubic-bezier(.4, 0, 1, 1)" };
/**
 * @type {TokenValue}
 */
export const TransitionEaseOut = { value: "cubic-bezier(0, 0, .4, 1)" };
/**
 * @type {TokenValue}
 */
export const TransitionEaseInOut = { value: "cubic-bezier(.4, 0, .6, 1)" };