[
  {
    "name": "palette.white",
    "cssVar": "--sonar-palette-white",
    "type": "color",
    "group": "Generated by scripts/palette.ts from palette.config.ts. Do not edit by hand.",
    "themed": false,
    "light": {
      "resolved": "#FFFFFF",
      "css": {
        "--sonar-palette-white": "#FFFFFF"
      }
    }
  },
  {
    "name": "palette.black",
    "cssVar": "--sonar-palette-black",
    "type": "color",
    "group": "Generated by scripts/palette.ts from palette.config.ts. Do not edit by hand.",
    "themed": false,
    "light": {
      "resolved": "#000000",
      "css": {
        "--sonar-palette-black": "#000000"
      }
    }
  },
  {
    "name": "palette.gray.91",
    "cssVar": "--sonar-palette-gray-91",
    "type": "color",
    "group": "Achromatic grays for light surfaces.",
    "themed": false,
    "light": {
      "resolved": "#E5E5E5",
      "css": {
        "--sonar-palette-gray-91": "#E5E5E5"
      }
    }
  },
  {
    "name": "palette.gray.94",
    "cssVar": "--sonar-palette-gray-94",
    "type": "color",
    "group": "Achromatic grays for light surfaces.",
    "themed": false,
    "light": {
      "resolved": "#EEEEEE",
      "css": {
        "--sonar-palette-gray-94": "#EEEEEE"
      }
    }
  },
  {
    "name": "palette.gray.96",
    "cssVar": "--sonar-palette-gray-96",
    "type": "color",
    "group": "Achromatic grays for light surfaces.",
    "themed": false,
    "light": {
      "resolved": "#F3F3F3",
      "css": {
        "--sonar-palette-gray-96": "#F3F3F3"
      }
    }
  },
  {
    "name": "palette.gray.97",
    "cssVar": "--sonar-palette-gray-97",
    "type": "color",
    "group": "Achromatic grays for light surfaces.",
    "themed": false,
    "light": {
      "resolved": "#F6F6F6",
      "css": {
        "--sonar-palette-gray-97": "#F6F6F6"
      }
    }
  },
  {
    "name": "palette.gray.99",
    "cssVar": "--sonar-palette-gray-99",
    "type": "color",
    "group": "Achromatic grays for light surfaces.",
    "themed": false,
    "light": {
      "resolved": "#FCFCFC",
      "css": {
        "--sonar-palette-gray-99": "#FCFCFC"
      }
    }
  },
  {
    "name": "palette.neutral.5",
    "cssVar": "--sonar-palette-neutral-5",
    "type": "color",
    "group": "Brand-tinted neutral. Text, lines and most surfaces.",
    "themed": false,
    "light": {
      "resolved": "#0B130B",
      "css": {
        "--sonar-palette-neutral-5": "#0B130B"
      }
    }
  },
  {
    "name": "palette.neutral.6",
    "cssVar": "--sonar-palette-neutral-6",
    "type": "color",
    "group": "Brand-tinted neutral. Text, lines and most surfaces.",
    "themed": false,
    "light": {
      "resolved": "#0E150E",
      "css": {
        "--sonar-palette-neutral-6": "#0E150E"
      }
    }
  },
  {
    "name": "palette.neutral.10",
    "cssVar": "--sonar-palette-neutral-10",
    "type": "color",
    "group": "Brand-tinted neutral. Text, lines and most surfaces.",
    "themed": false,
    "light": {
      "resolved": "#171D17",
      "css": {
        "--sonar-palette-neutral-10": "#171D17"
      }
    }
  },
  {
    "name": "palette.neutral.12",
    "cssVar": "--sonar-palette-neutral-12",
    "type": "color",
    "group": "Brand-tinted neutral. Text, lines and most surfaces.",
    "themed": false,
    "light": {
      "resolved": "#1B211B",
      "css": {
        "--sonar-palette-neutral-12": "#1B211B"
      }
    }
  },
  {
    "name": "palette.neutral.14",
    "cssVar": "--sonar-palette-neutral-14",
    "type": "color",
    "group": "Brand-tinted neutral. Text, lines and most surfaces.",
    "themed": false,
    "light": {
      "resolved": "#1F251E",
      "css": {
        "--sonar-palette-neutral-14": "#1F251E"
      }
    }
  },
  {
    "name": "palette.neutral.16",
    "cssVar": "--sonar-palette-neutral-16",
    "type": "color",
    "group": "Brand-tinted neutral. Text, lines and most surfaces.",
    "themed": false,
    "light": {
      "resolved": "#232A22",
      "css": {
        "--sonar-palette-neutral-16": "#232A22"
      }
    }
  },
  {
    "name": "palette.neutral.18",
    "cssVar": "--sonar-palette-neutral-18",
    "type": "color",
    "group": "Brand-tinted neutral. Text, lines and most surfaces.",
    "themed": false,
    "light": {
      "resolved": "#272E26",
      "css": {
        "--sonar-palette-neutral-18": "#272E26"
      }
    }
  },
  {
    "name": "palette.neutral.21",
    "cssVar": "--sonar-palette-neutral-21",
    "type": "color",
    "group": "Brand-tinted neutral. Text, lines and most surfaces.",
    "themed": false,
    "light": {
      "resolved": "#2D352C",
      "css": {
        "--sonar-palette-neutral-21": "#2D352C"
      }
    }
  },
  {
    "name": "palette.neutral.22",
    "cssVar": "--sonar-palette-neutral-22",
    "type": "color",
    "group": "Brand-tinted neutral. Text, lines and most surfaces.",
    "themed": false,
    "light": {
      "resolved": "#2F372E",
      "css": {
        "--sonar-palette-neutral-22": "#2F372E"
      }
    }
  },
  {
    "name": "palette.neutral.24",
    "cssVar": "--sonar-palette-neutral-24",
    "type": "color",
    "group": "Brand-tinted neutral. Text, lines and most surfaces.",
    "themed": false,
    "light": {
      "resolved": "#333B32",
      "css": {
        "--sonar-palette-neutral-24": "#333B32"
      }
    }
  },
  {
    "name": "palette.neutral.27",
    "cssVar": "--sonar-palette-neutral-27",
    "type": "color",
    "group": "Brand-tinted neutral. Text, lines and most surfaces.",
    "themed": false,
    "light": {
      "resolved": "#3A4239",
      "css": {
        "--sonar-palette-neutral-27": "#3A4239"
      }
    }
  },
  {
    "name": "palette.neutral.28",
    "cssVar": "--sonar-palette-neutral-28",
    "type": "color",
    "group": "Brand-tinted neutral. Text, lines and most surfaces.",
    "themed": false,
    "light": {
      "resolved": "#3C443B",
      "css": {
        "--sonar-palette-neutral-28": "#3C443B"
      }
    }
  },
  {
    "name": "palette.neutral.31",
    "cssVar": "--sonar-palette-neutral-31",
    "type": "color",
    "group": "Brand-tinted neutral. Text, lines and most surfaces.",
    "themed": false,
    "light": {
      "resolved": "#424B42",
      "css": {
        "--sonar-palette-neutral-31": "#424B42"
      }
    }
  },
  {
    "name": "palette.neutral.33",
    "cssVar": "--sonar-palette-neutral-33",
    "type": "color",
    "group": "Brand-tinted neutral. Text, lines and most surfaces.",
    "themed": false,
    "light": {
      "resolved": "#475046",
      "css": {
        "--sonar-palette-neutral-33": "#475046"
      }
    }
  },
  {
    "name": "palette.neutral.34",
    "cssVar": "--sonar-palette-neutral-34",
    "type": "color",
    "group": "Brand-tinted neutral. Text, lines and most surfaces.",
    "themed": false,
    "light": {
      "resolved": "#495348",
      "css": {
        "--sonar-palette-neutral-34": "#495348"
      }
    }
  },
  {
    "name": "palette.neutral.43",
    "cssVar": "--sonar-palette-neutral-43",
    "type": "color",
    "group": "Brand-tinted neutral. Text, lines and most surfaces.",
    "themed": false,
    "light": {
      "resolved": "#5E685D",
      "css": {
        "--sonar-palette-neutral-43": "#5E685D"
      }
    }
  },
  {
    "name": "palette.neutral.46",
    "cssVar": "--sonar-palette-neutral-46",
    "type": "color",
    "group": "Brand-tinted neutral. Text, lines and most surfaces.",
    "themed": false,
    "light": {
      "resolved": "#667064",
      "css": {
        "--sonar-palette-neutral-46": "#667064"
      }
    }
  },
  {
    "name": "palette.neutral.47",
    "cssVar": "--sonar-palette-neutral-47",
    "type": "color",
    "group": "Brand-tinted neutral. Text, lines and most surfaces.",
    "themed": false,
    "light": {
      "resolved": "#687266",
      "css": {
        "--sonar-palette-neutral-47": "#687266"
      }
    }
  },
  {
    "name": "palette.neutral.48",
    "cssVar": "--sonar-palette-neutral-48",
    "type": "color",
    "group": "Brand-tinted neutral. Text, lines and most surfaces.",
    "themed": false,
    "light": {
      "resolved": "#6B7569",
      "css": {
        "--sonar-palette-neutral-48": "#6B7569"
      }
    }
  },
  {
    "name": "palette.neutral.57",
    "cssVar": "--sonar-palette-neutral-57",
    "type": "color",
    "group": "Brand-tinted neutral. Text, lines and most surfaces.",
    "themed": false,
    "light": {
      "resolved": "#828C7F",
      "css": {
        "--sonar-palette-neutral-57": "#828C7F"
      }
    }
  },
  {
    "name": "palette.neutral.59",
    "cssVar": "--sonar-palette-neutral-59",
    "type": "color",
    "group": "Brand-tinted neutral. Text, lines and most surfaces.",
    "themed": false,
    "light": {
      "resolved": "#879184",
      "css": {
        "--sonar-palette-neutral-59": "#879184"
      }
    }
  },
  {
    "name": "palette.neutral.60",
    "cssVar": "--sonar-palette-neutral-60",
    "type": "color",
    "group": "Brand-tinted neutral. Text, lines and most surfaces.",
    "themed": false,
    "light": {
      "resolved": "#899487",
      "css": {
        "--sonar-palette-neutral-60": "#899487"
      }
    }
  },
  {
    "name": "palette.neutral.65",
    "cssVar": "--sonar-palette-neutral-65",
    "type": "color",
    "group": "Brand-tinted neutral. Text, lines and most surfaces.",
    "themed": false,
    "light": {
      "resolved": "#97A194",
      "css": {
        "--sonar-palette-neutral-65": "#97A194"
      }
    }
  },
  {
    "name": "palette.neutral.67",
    "cssVar": "--sonar-palette-neutral-67",
    "type": "color",
    "group": "Brand-tinted neutral. Text, lines and most surfaces.",
    "themed": false,
    "light": {
      "resolved": "#9CA699",
      "css": {
        "--sonar-palette-neutral-67": "#9CA699"
      }
    }
  },
  {
    "name": "palette.neutral.72",
    "cssVar": "--sonar-palette-neutral-72",
    "type": "color",
    "group": "Brand-tinted neutral. Text, lines and most surfaces.",
    "themed": false,
    "light": {
      "resolved": "#AAB3A7",
      "css": {
        "--sonar-palette-neutral-72": "#AAB3A7"
      }
    }
  },
  {
    "name": "palette.neutral.74",
    "cssVar": "--sonar-palette-neutral-74",
    "type": "color",
    "group": "Brand-tinted neutral. Text, lines and most surfaces.",
    "themed": false,
    "light": {
      "resolved": "#AFB9AC",
      "css": {
        "--sonar-palette-neutral-74": "#AFB9AC"
      }
    }
  },
  {
    "name": "palette.neutral.76",
    "cssVar": "--sonar-palette-neutral-76",
    "type": "color",
    "group": "Brand-tinted neutral. Text, lines and most surfaces.",
    "themed": false,
    "light": {
      "resolved": "#B5BEB2",
      "css": {
        "--sonar-palette-neutral-76": "#B5BEB2"
      }
    }
  },
  {
    "name": "palette.neutral.78",
    "cssVar": "--sonar-palette-neutral-78",
    "type": "color",
    "group": "Brand-tinted neutral. Text, lines and most surfaces.",
    "themed": false,
    "light": {
      "resolved": "#BAC4B7",
      "css": {
        "--sonar-palette-neutral-78": "#BAC4B7"
      }
    }
  },
  {
    "name": "palette.neutral.80",
    "cssVar": "--sonar-palette-neutral-80",
    "type": "color",
    "group": "Brand-tinted neutral. Text, lines and most surfaces.",
    "themed": false,
    "light": {
      "resolved": "#C0C9BD",
      "css": {
        "--sonar-palette-neutral-80": "#C0C9BD"
      }
    }
  },
  {
    "name": "palette.neutral.84",
    "cssVar": "--sonar-palette-neutral-84",
    "type": "color",
    "group": "Brand-tinted neutral. Text, lines and most surfaces.",
    "themed": false,
    "light": {
      "resolved": "#CBD4C8",
      "css": {
        "--sonar-palette-neutral-84": "#CBD4C8"
      }
    }
  },
  {
    "name": "palette.neutral.85",
    "cssVar": "--sonar-palette-neutral-85",
    "type": "color",
    "group": "Brand-tinted neutral. Text, lines and most surfaces.",
    "themed": false,
    "light": {
      "resolved": "#CED7CB",
      "css": {
        "--sonar-palette-neutral-85": "#CED7CB"
      }
    }
  },
  {
    "name": "palette.neutral.88",
    "cssVar": "--sonar-palette-neutral-88",
    "type": "color",
    "group": "Brand-tinted neutral. Text, lines and most surfaces.",
    "themed": false,
    "light": {
      "resolved": "#D7DFD4",
      "css": {
        "--sonar-palette-neutral-88": "#D7DFD4"
      }
    }
  },
  {
    "name": "palette.neutral.90",
    "cssVar": "--sonar-palette-neutral-90",
    "type": "color",
    "group": "Brand-tinted neutral. Text, lines and most surfaces.",
    "themed": false,
    "light": {
      "resolved": "#DDE5D9",
      "css": {
        "--sonar-palette-neutral-90": "#DDE5D9"
      }
    }
  },
  {
    "name": "palette.neutral.91",
    "cssVar": "--sonar-palette-neutral-91",
    "type": "color",
    "group": "Brand-tinted neutral. Text, lines and most surfaces.",
    "themed": false,
    "light": {
      "resolved": "#E0E8DC",
      "css": {
        "--sonar-palette-neutral-91": "#E0E8DC"
      }
    }
  },
  {
    "name": "palette.neutral.92",
    "cssVar": "--sonar-palette-neutral-92",
    "type": "color",
    "group": "Brand-tinted neutral. Text, lines and most surfaces.",
    "themed": false,
    "light": {
      "resolved": "#E3EADF",
      "css": {
        "--sonar-palette-neutral-92": "#E3EADF"
      }
    }
  },
  {
    "name": "palette.neutral.93",
    "cssVar": "--sonar-palette-neutral-93",
    "type": "color",
    "group": "Brand-tinted neutral. Text, lines and most surfaces.",
    "themed": false,
    "light": {
      "resolved": "#E5EDE2",
      "css": {
        "--sonar-palette-neutral-93": "#E5EDE2"
      }
    }
  },
  {
    "name": "palette.neutral.95",
    "cssVar": "--sonar-palette-neutral-95",
    "type": "color",
    "group": "Brand-tinted neutral. Text, lines and most surfaces.",
    "themed": false,
    "light": {
      "resolved": "#EBF3E8",
      "css": {
        "--sonar-palette-neutral-95": "#EBF3E8"
      }
    }
  },
  {
    "name": "palette.neutral.96",
    "cssVar": "--sonar-palette-neutral-96",
    "type": "color",
    "group": "Brand-tinted neutral. Text, lines and most surfaces.",
    "themed": false,
    "light": {
      "resolved": "#EEF6EB",
      "css": {
        "--sonar-palette-neutral-96": "#EEF6EB"
      }
    }
  },
  {
    "name": "palette.neutral-tinted.19",
    "cssVar": "--sonar-palette-neutral-tinted-19",
    "type": "color",
    "group": "A greener neutral for map land use, chart remainders and hover fills on dark surfaces.",
    "themed": false,
    "light": {
      "resolved": "#263126",
      "css": {
        "--sonar-palette-neutral-tinted-19": "#263126"
      }
    }
  },
  {
    "name": "palette.neutral-tinted.23",
    "cssVar": "--sonar-palette-neutral-tinted-23",
    "type": "color",
    "group": "A greener neutral for map land use, chart remainders and hover fills on dark surfaces.",
    "themed": false,
    "light": {
      "resolved": "#2F3A2E",
      "css": {
        "--sonar-palette-neutral-tinted-23": "#2F3A2E"
      }
    }
  },
  {
    "name": "palette.neutral-tinted.27",
    "cssVar": "--sonar-palette-neutral-tinted-27",
    "type": "color",
    "group": "A greener neutral for map land use, chart remainders and hover fills on dark surfaces.",
    "themed": false,
    "light": {
      "resolved": "#374336",
      "css": {
        "--sonar-palette-neutral-tinted-27": "#374336"
      }
    }
  },
  {
    "name": "palette.neutral-tinted.36",
    "cssVar": "--sonar-palette-neutral-tinted-36",
    "type": "color",
    "group": "A greener neutral for map land use, chart remainders and hover fills on dark surfaces.",
    "themed": false,
    "light": {
      "resolved": "#4C584A",
      "css": {
        "--sonar-palette-neutral-tinted-36": "#4C584A"
      }
    }
  },
  {
    "name": "palette.neutral-tinted.41",
    "cssVar": "--sonar-palette-neutral-tinted-41",
    "type": "color",
    "group": "A greener neutral for map land use, chart remainders and hover fills on dark surfaces.",
    "themed": false,
    "light": {
      "resolved": "#576456",
      "css": {
        "--sonar-palette-neutral-tinted-41": "#576456"
      }
    }
  },
  {
    "name": "palette.neutral-subdued.2",
    "cssVar": "--sonar-palette-neutral-subdued-2",
    "type": "color",
    "group": "A quieter neutral for the dark canvas, the inverse surface and the search field.",
    "themed": false,
    "light": {
      "resolved": "#040904",
      "css": {
        "--sonar-palette-neutral-subdued-2": "#040904"
      }
    }
  },
  {
    "name": "palette.neutral-subdued.20",
    "cssVar": "--sonar-palette-neutral-subdued-20",
    "type": "color",
    "group": "A quieter neutral for the dark canvas, the inverse surface and the search field.",
    "themed": false,
    "light": {
      "resolved": "#2E312D",
      "css": {
        "--sonar-palette-neutral-subdued-20": "#2E312D"
      }
    }
  },
  {
    "name": "palette.neutral-subdued.96",
    "cssVar": "--sonar-palette-neutral-subdued-96",
    "type": "color",
    "group": "A quieter neutral for the dark canvas, the inverse surface and the search field.",
    "themed": false,
    "light": {
      "resolved": "#F1F5EF",
      "css": {
        "--sonar-palette-neutral-subdued-96": "#F1F5EF"
      }
    }
  },
  {
    "name": "palette.green.11",
    "cssVar": "--sonar-palette-green-11",
    "type": "color",
    "group": "Brand accent. Green 50 was darkened by half a tone from #1E8A3A (0.8 ΔE, invisible) so white text on it reaches 4.5:1.",
    "themed": false,
    "light": {
      "resolved": "#0F2112",
      "css": {
        "--sonar-palette-green-11": "#0F2112"
      }
    }
  },
  {
    "name": "palette.green.20",
    "cssVar": "--sonar-palette-green-20",
    "type": "color",
    "group": "Brand accent. Green 50 was darkened by half a tone from #1E8A3A (0.8 ΔE, invisible) so white text on it reaches 4.5:1.",
    "themed": false,
    "light": {
      "resolved": "#00390F",
      "css": {
        "--sonar-palette-green-20": "#00390F"
      }
    }
  },
  {
    "name": "palette.green.29",
    "cssVar": "--sonar-palette-green-29",
    "type": "color",
    "group": "Brand accent. Green 50 was darkened by half a tone from #1E8A3A (0.8 ΔE, invisible) so white text on it reaches 4.5:1.",
    "themed": false,
    "light": {
      "resolved": "#2F4B31",
      "css": {
        "--sonar-palette-green-29": "#2F4B31"
      }
    }
  },
  {
    "name": "palette.green.37",
    "cssVar": "--sonar-palette-green-37",
    "type": "color",
    "group": "Brand accent. Green 50 was darkened by half a tone from #1E8A3A (0.8 ΔE, invisible) so white text on it reaches 4.5:1.",
    "themed": false,
    "light": {
      "resolved": "#33603B",
      "css": {
        "--sonar-palette-green-37": "#33603B"
      }
    }
  },
  {
    "name": "palette.green.40",
    "cssVar": "--sonar-palette-green-40",
    "type": "color",
    "group": "Brand accent. Green 50 was darkened by half a tone from #1E8A3A (0.8 ΔE, invisible) so white text on it reaches 4.5:1.",
    "themed": false,
    "light": {
      "resolved": "#1E6B30",
      "css": {
        "--sonar-palette-green-40": "#1E6B30"
      }
    }
  },
  {
    "name": "palette.green.46",
    "cssVar": "--sonar-palette-green-46",
    "type": "color",
    "description": "Accent text: 4.5:1 on light surfaces.",
    "group": "Brand accent. Green 50 was darkened by half a tone from #1E8A3A (0.8 ΔE, invisible) so white text on it reaches 4.5:1.",
    "themed": false,
    "light": {
      "resolved": "#047E2F",
      "css": {
        "--sonar-palette-green-46": "#047E2F"
      }
    }
  },
  {
    "name": "palette.green.50",
    "cssVar": "--sonar-palette-green-50",
    "type": "color",
    "group": "Brand accent. Green 50 was darkened by half a tone from #1E8A3A (0.8 ΔE, invisible) so white text on it reaches 4.5:1.",
    "themed": false,
    "light": {
      "resolved": "#1A8838",
      "css": {
        "--sonar-palette-green-50": "#1A8838"
      }
    }
  },
  {
    "name": "palette.green.67",
    "cssVar": "--sonar-palette-green-67",
    "type": "color",
    "group": "Brand accent. Green 50 was darkened by half a tone from #1E8A3A (0.8 ΔE, invisible) so white text on it reaches 4.5:1.",
    "themed": false,
    "light": {
      "resolved": "#76B27C",
      "css": {
        "--sonar-palette-green-67": "#76B27C"
      }
    }
  },
  {
    "name": "palette.green.81",
    "cssVar": "--sonar-palette-green-81",
    "type": "color",
    "group": "Brand accent. Green 50 was darkened by half a tone from #1E8A3A (0.8 ΔE, invisible) so white text on it reaches 4.5:1.",
    "themed": false,
    "light": {
      "resolved": "#97D99C",
      "css": {
        "--sonar-palette-green-81": "#97D99C"
      }
    }
  },
  {
    "name": "palette.green.89",
    "cssVar": "--sonar-palette-green-89",
    "type": "color",
    "group": "Brand accent. Green 50 was darkened by half a tone from #1E8A3A (0.8 ΔE, invisible) so white text on it reaches 4.5:1.",
    "themed": false,
    "light": {
      "resolved": "#CFE6CF",
      "css": {
        "--sonar-palette-green-89": "#CFE6CF"
      }
    }
  },
  {
    "name": "palette.green.90",
    "cssVar": "--sonar-palette-green-90",
    "type": "color",
    "group": "Brand accent. Green 50 was darkened by half a tone from #1E8A3A (0.8 ΔE, invisible) so white text on it reaches 4.5:1.",
    "themed": false,
    "light": {
      "resolved": "#D0E8CE",
      "css": {
        "--sonar-palette-green-90": "#D0E8CE"
      }
    }
  },
  {
    "name": "palette.green.91",
    "cssVar": "--sonar-palette-green-91",
    "type": "color",
    "group": "Brand accent. Green 50 was darkened by half a tone from #1E8A3A (0.8 ΔE, invisible) so white text on it reaches 4.5:1.",
    "themed": false,
    "light": {
      "resolved": "#CDEFD0",
      "css": {
        "--sonar-palette-green-91": "#CDEFD0"
      }
    }
  },
  {
    "name": "palette.red.46",
    "cssVar": "--sonar-palette-red-46",
    "type": "color",
    "description": "Danger text: 4.5:1 on light surfaces.",
    "group": "Danger: delays, overdue items, destructive actions.",
    "themed": false,
    "light": {
      "resolved": "#D1282D",
      "css": {
        "--sonar-palette-red-46": "#D1282D"
      }
    }
  },
  {
    "name": "palette.red.50",
    "cssVar": "--sonar-palette-red-50",
    "type": "color",
    "group": "Danger: delays, overdue items, destructive actions.",
    "themed": false,
    "light": {
      "resolved": "#DD3535",
      "css": {
        "--sonar-palette-red-50": "#DD3535"
      }
    }
  },
  {
    "name": "palette.red.56",
    "cssVar": "--sonar-palette-red-56",
    "type": "color",
    "group": "Danger: delays, overdue items, destructive actions.",
    "themed": false,
    "light": {
      "resolved": "#F04B4B",
      "css": {
        "--sonar-palette-red-56": "#F04B4B"
      }
    }
  },
  {
    "name": "palette.red.64",
    "cssVar": "--sonar-palette-red-64",
    "type": "color",
    "description": "Danger text: 4.5:1 on dark surfaces, selected rows included.",
    "group": "Danger: delays, overdue items, destructive actions.",
    "themed": false,
    "light": {
      "resolved": "#F97068",
      "css": {
        "--sonar-palette-red-64": "#F97068"
      }
    }
  },
  {
    "name": "palette.orange.46",
    "cssVar": "--sonar-palette-orange-46",
    "type": "color",
    "description": "Warning text: 4.5:1 on light surfaces.",
    "group": "Warning: pending and on-hold states.",
    "themed": false,
    "light": {
      "resolved": "#A15C00",
      "css": {
        "--sonar-palette-orange-46": "#A15C00"
      }
    }
  },
  {
    "name": "palette.orange.66",
    "cssVar": "--sonar-palette-orange-66",
    "type": "color",
    "group": "Warning: pending and on-hold states.",
    "themed": false,
    "light": {
      "resolved": "#DD8E35",
      "css": {
        "--sonar-palette-orange-66": "#DD8E35"
      }
    }
  },
  {
    "name": "palette.orange.73",
    "cssVar": "--sonar-palette-orange-73",
    "type": "color",
    "group": "Warning: pending and on-hold states.",
    "themed": false,
    "light": {
      "resolved": "#F2A23F",
      "css": {
        "--sonar-palette-orange-73": "#F2A23F"
      }
    }
  },
  {
    "name": "palette.orange.77",
    "cssVar": "--sonar-palette-orange-77",
    "type": "color",
    "group": "Warning: pending and on-hold states.",
    "themed": false,
    "light": {
      "resolved": "#FFAC32",
      "css": {
        "--sonar-palette-orange-77": "#FFAC32"
      }
    }
  },
  {
    "name": "palette.orange.78",
    "cssVar": "--sonar-palette-orange-78",
    "type": "color",
    "group": "Warning: pending and on-hold states.",
    "themed": false,
    "light": {
      "resolved": "#FFB040",
      "css": {
        "--sonar-palette-orange-78": "#FFB040"
      }
    }
  },
  {
    "name": "palette.neutral-dark.2",
    "cssVar": "--sonar-palette-neutral-dark-2",
    "type": "color",
    "group": "The exact neutrals of the product’s dark theme, where the formula lands one RGB step away: surfaces, lines and the text levels it names, and the search results’ head and highlighted row (1.1).",
    "themed": false,
    "light": {
      "resolved": "#050705",
      "css": {
        "--sonar-palette-neutral-dark-2": "#050705"
      }
    }
  },
  {
    "name": "palette.neutral-dark.6",
    "cssVar": "--sonar-palette-neutral-dark-6",
    "type": "color",
    "group": "The exact neutrals of the product’s dark theme, where the formula lands one RGB step away: surfaces, lines and the text levels it names, and the search results’ head and highlighted row (1.1).",
    "themed": false,
    "light": {
      "resolved": "#0F150F",
      "css": {
        "--sonar-palette-neutral-dark-6": "#0F150F"
      }
    }
  },
  {
    "name": "palette.neutral-dark.12",
    "cssVar": "--sonar-palette-neutral-dark-12",
    "type": "color",
    "group": "The exact neutrals of the product’s dark theme, where the formula lands one RGB step away: surfaces, lines and the text levels it names, and the search results’ head and highlighted row (1.1).",
    "themed": false,
    "light": {
      "resolved": "#1B221B",
      "css": {
        "--sonar-palette-neutral-dark-12": "#1B221B"
      }
    }
  },
  {
    "name": "palette.neutral-dark.14",
    "cssVar": "--sonar-palette-neutral-dark-14",
    "type": "color",
    "group": "The exact neutrals of the product’s dark theme, where the formula lands one RGB step away: surfaces, lines and the text levels it names, and the search results’ head and highlighted row (1.1).",
    "themed": false,
    "light": {
      "resolved": "#1F251F",
      "css": {
        "--sonar-palette-neutral-dark-14": "#1F251F"
      }
    }
  },
  {
    "name": "palette.neutral-dark.15",
    "cssVar": "--sonar-palette-neutral-dark-15",
    "type": "color",
    "group": "The exact neutrals of the product’s dark theme, where the formula lands one RGB step away: surfaces, lines and the text levels it names, and the search results’ head and highlighted row (1.1).",
    "themed": false,
    "light": {
      "resolved": "#212921",
      "css": {
        "--sonar-palette-neutral-dark-15": "#212921"
      }
    }
  },
  {
    "name": "palette.neutral-dark.16",
    "cssVar": "--sonar-palette-neutral-dark-16",
    "type": "color",
    "group": "The exact neutrals of the product’s dark theme, where the formula lands one RGB step away: surfaces, lines and the text levels it names, and the search results’ head and highlighted row (1.1).",
    "themed": false,
    "light": {
      "resolved": "#222B22",
      "css": {
        "--sonar-palette-neutral-dark-16": "#222B22"
      }
    }
  },
  {
    "name": "palette.neutral-dark.17",
    "cssVar": "--sonar-palette-neutral-dark-17",
    "type": "color",
    "group": "The exact neutrals of the product’s dark theme, where the formula lands one RGB step away: surfaces, lines and the text levels it names, and the search results’ head and highlighted row (1.1).",
    "themed": false,
    "light": {
      "resolved": "#252C25",
      "css": {
        "--sonar-palette-neutral-dark-17": "#252C25"
      }
    }
  },
  {
    "name": "palette.neutral-dark.21",
    "cssVar": "--sonar-palette-neutral-dark-21",
    "type": "color",
    "group": "The exact neutrals of the product’s dark theme, where the formula lands one RGB step away: surfaces, lines and the text levels it names, and the search results’ head and highlighted row (1.1).",
    "themed": false,
    "light": {
      "resolved": "#2C342B",
      "css": {
        "--sonar-palette-neutral-dark-21": "#2C342B"
      }
    }
  },
  {
    "name": "palette.neutral-dark.22",
    "cssVar": "--sonar-palette-neutral-dark-22",
    "type": "color",
    "group": "The exact neutrals of the product’s dark theme, where the formula lands one RGB step away: surfaces, lines and the text levels it names, and the search results’ head and highlighted row (1.1).",
    "themed": false,
    "light": {
      "resolved": "#2E362E",
      "css": {
        "--sonar-palette-neutral-dark-22": "#2E362E"
      }
    }
  },
  {
    "name": "palette.neutral-dark.23",
    "cssVar": "--sonar-palette-neutral-dark-23",
    "type": "color",
    "group": "The exact neutrals of the product’s dark theme, where the formula lands one RGB step away: surfaces, lines and the text levels it names, and the search results’ head and highlighted row (1.1).",
    "themed": false,
    "light": {
      "resolved": "#2E392E",
      "css": {
        "--sonar-palette-neutral-dark-23": "#2E392E"
      }
    }
  },
  {
    "name": "palette.neutral-dark.27",
    "cssVar": "--sonar-palette-neutral-dark-27",
    "type": "color",
    "group": "The exact neutrals of the product’s dark theme, where the formula lands one RGB step away: surfaces, lines and the text levels it names, and the search results’ head and highlighted row (1.1).",
    "themed": false,
    "light": {
      "resolved": "#3A433A",
      "css": {
        "--sonar-palette-neutral-dark-27": "#3A433A"
      }
    }
  },
  {
    "name": "palette.neutral-dark.48",
    "cssVar": "--sonar-palette-neutral-dark-48",
    "type": "color",
    "group": "The exact neutrals of the product’s dark theme, where the formula lands one RGB step away: surfaces, lines and the text levels it names, and the search results’ head and highlighted row (1.1).",
    "themed": false,
    "light": {
      "resolved": "#6C766A",
      "css": {
        "--sonar-palette-neutral-dark-48": "#6C766A"
      }
    }
  },
  {
    "name": "palette.neutral-dark.59",
    "cssVar": "--sonar-palette-neutral-dark-59",
    "type": "color",
    "group": "The exact neutrals of the product’s dark theme, where the formula lands one RGB step away: surfaces, lines and the text levels it names, and the search results’ head and highlighted row (1.1).",
    "themed": false,
    "light": {
      "resolved": "#889285",
      "css": {
        "--sonar-palette-neutral-dark-59": "#889285"
      }
    }
  },
  {
    "name": "palette.neutral-dark.67",
    "cssVar": "--sonar-palette-neutral-dark-67",
    "type": "color",
    "group": "The exact neutrals of the product’s dark theme, where the formula lands one RGB step away: surfaces, lines and the text levels it names, and the search results’ head and highlighted row (1.1).",
    "themed": false,
    "light": {
      "resolved": "#9CA699",
      "css": {
        "--sonar-palette-neutral-dark-67": "#9CA699"
      }
    }
  },
  {
    "name": "palette.neutral-dark.80",
    "cssVar": "--sonar-palette-neutral-dark-80",
    "type": "color",
    "group": "The exact neutrals of the product’s dark theme, where the formula lands one RGB step away: surfaces, lines and the text levels it names, and the search results’ head and highlighted row (1.1).",
    "themed": false,
    "light": {
      "resolved": "#C0C8BC",
      "css": {
        "--sonar-palette-neutral-dark-80": "#C0C8BC"
      }
    }
  },
  {
    "name": "palette.neutral-dark.88",
    "cssVar": "--sonar-palette-neutral-dark-88",
    "type": "color",
    "group": "The exact neutrals of the product’s dark theme, where the formula lands one RGB step away: surfaces, lines and the text levels it names, and the search results’ head and highlighted row (1.1).",
    "themed": false,
    "light": {
      "resolved": "#D5DFD2",
      "css": {
        "--sonar-palette-neutral-dark-88": "#D5DFD2"
      }
    }
  },
  {
    "name": "palette.neutral-dark.90",
    "cssVar": "--sonar-palette-neutral-dark-90",
    "type": "color",
    "group": "The exact neutrals of the product’s dark theme, where the formula lands one RGB step away: surfaces, lines and the text levels it names, and the search results’ head and highlighted row (1.1).",
    "themed": false,
    "light": {
      "resolved": "#DCE5D9",
      "css": {
        "--sonar-palette-neutral-dark-90": "#DCE5D9"
      }
    }
  },
  {
    "name": "palette.neutral-light.7",
    "cssVar": "--sonar-palette-neutral-light-7",
    "type": "color",
    "group": "The exact text levels of the product’s light theme, the ink of its scrim, and the search results’ head and highlighted row (1.1).",
    "themed": false,
    "light": {
      "resolved": "#141618",
      "css": {
        "--sonar-palette-neutral-light-7": "#141618"
      }
    }
  },
  {
    "name": "palette.neutral-light.28",
    "cssVar": "--sonar-palette-neutral-light-28",
    "type": "color",
    "group": "The exact text levels of the product’s light theme, the ink of its scrim, and the search results’ head and highlighted row (1.1).",
    "themed": false,
    "light": {
      "resolved": "#3D453B",
      "css": {
        "--sonar-palette-neutral-light-28": "#3D453B"
      }
    }
  },
  {
    "name": "palette.neutral-light.30",
    "cssVar": "--sonar-palette-neutral-light-30",
    "type": "color",
    "group": "The exact text levels of the product’s light theme, the ink of its scrim, and the search results’ head and highlighted row (1.1).",
    "themed": false,
    "light": {
      "resolved": "#424A40",
      "css": {
        "--sonar-palette-neutral-light-30": "#424A40"
      }
    }
  },
  {
    "name": "palette.neutral-light.76",
    "cssVar": "--sonar-palette-neutral-light-76",
    "type": "color",
    "group": "The exact text levels of the product’s light theme, the ink of its scrim, and the search results’ head and highlighted row (1.1).",
    "themed": false,
    "light": {
      "resolved": "#B4BEB1",
      "css": {
        "--sonar-palette-neutral-light-76": "#B4BEB1"
      }
    }
  },
  {
    "name": "palette.neutral-light.91",
    "cssVar": "--sonar-palette-neutral-light-91",
    "type": "color",
    "group": "The exact text levels of the product’s light theme, the ink of its scrim, and the search results’ head and highlighted row (1.1).",
    "themed": false,
    "light": {
      "resolved": "#E0E9DD",
      "css": {
        "--sonar-palette-neutral-light-91": "#E0E9DD"
      }
    }
  },
  {
    "name": "palette.neutral-light.96",
    "cssVar": "--sonar-palette-neutral-light-96",
    "type": "color",
    "group": "The exact text levels of the product’s light theme, the ink of its scrim, and the search results’ head and highlighted row (1.1).",
    "themed": false,
    "light": {
      "resolved": "#F1F4F0",
      "css": {
        "--sonar-palette-neutral-light-96": "#F1F4F0"
      }
    }
  },
  {
    "name": "palette.blue.36",
    "cssVar": "--sonar-palette-blue-36",
    "type": "color",
    "group": "Water on the route map.",
    "themed": false,
    "light": {
      "resolved": "#2E5B70",
      "css": {
        "--sonar-palette-blue-36": "#2E5B70"
      }
    }
  },
  {
    "name": "palette.blue.89",
    "cssVar": "--sonar-palette-blue-89",
    "type": "color",
    "group": "Water on the route map.",
    "themed": false,
    "light": {
      "resolved": "#D1E2E8",
      "css": {
        "--sonar-palette-blue-89": "#D1E2E8"
      }
    }
  },
  {
    "name": "font.family.sans",
    "cssVar": "--sonar-font-family-sans",
    "type": "fontFamily",
    "description": "Interface text. IBM Plex Sans Fallback is Arial resized to Plex’s width and line metrics, so the page does not move when Plex arrives; the site declares it.",
    "themed": false,
    "light": {
      "resolved": [
        "IBM Plex Sans",
        "IBM Plex Sans Fallback",
        "ui-sans-serif",
        "system-ui",
        "-apple-system",
        "Segoe UI",
        "sans-serif"
      ],
      "css": {
        "--sonar-font-family-sans": "\"IBM Plex Sans\", \"IBM Plex Sans Fallback\", ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", sans-serif"
      }
    }
  },
  {
    "name": "font.family.condensed",
    "cssVar": "--sonar-font-family-condensed",
    "type": "fontFamily",
    "description": "Weekday initials and the wordmark, where width is scarce.",
    "themed": false,
    "light": {
      "resolved": [
        "IBM Plex Sans Condensed",
        "IBM Plex Sans",
        "Arial Narrow",
        "sans-serif"
      ],
      "css": {
        "--sonar-font-family-condensed": "\"IBM Plex Sans Condensed\", \"IBM Plex Sans\", \"Arial Narrow\", sans-serif"
      }
    }
  },
  {
    "name": "font.family.mono",
    "cssVar": "--sonar-font-family-mono",
    "type": "fontFamily",
    "description": "Chart axes and section overlines.",
    "themed": false,
    "light": {
      "resolved": [
        "IBM Plex Mono",
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "monospace"
      ],
      "css": {
        "--sonar-font-family-mono": "\"IBM Plex Mono\", ui-monospace, SFMono-Regular, Menlo, monospace"
      }
    }
  },
  {
    "name": "font.weight.regular",
    "cssVar": "--sonar-font-weight-regular",
    "type": "fontWeight",
    "themed": false,
    "light": {
      "resolved": 400,
      "css": {
        "--sonar-font-weight-regular": "400"
      }
    }
  },
  {
    "name": "font.weight.medium",
    "cssVar": "--sonar-font-weight-medium",
    "type": "fontWeight",
    "themed": false,
    "light": {
      "resolved": 500,
      "css": {
        "--sonar-font-weight-medium": "500"
      }
    }
  },
  {
    "name": "font.weight.semibold",
    "cssVar": "--sonar-font-weight-semibold",
    "type": "fontWeight",
    "themed": false,
    "light": {
      "resolved": 600,
      "css": {
        "--sonar-font-weight-semibold": "600"
      }
    }
  },
  {
    "name": "type.headline-sm",
    "cssVar": "--sonar-type-headline-sm",
    "type": "typography",
    "description": "Amounts in detail panels.",
    "group": "Fourteen roles, named as in Material 3. Sizes are small and steady because the interface is dense with figures; hierarchy comes from weight and color more than from size.",
    "themed": false,
    "light": {
      "resolved": {
        "fontFamily": [
          "IBM Plex Sans",
          "IBM Plex Sans Fallback",
          "ui-sans-serif",
          "system-ui",
          "-apple-system",
          "Segoe UI",
          "sans-serif"
        ],
        "fontSize": {
          "value": 26,
          "unit": "px"
        },
        "fontWeight": 600,
        "lineHeight": 1.1,
        "letterSpacing": {
          "value": -0.26,
          "unit": "px"
        }
      },
      "css": {
        "--sonar-type-headline-sm": "var(--sonar-font-weight-semibold) 26px/1.1 var(--sonar-font-family-sans)",
        "--sonar-type-headline-sm-tracking": "-0.26px"
      }
    }
  },
  {
    "name": "type.title-lg",
    "cssVar": "--sonar-type-title-lg",
    "type": "typography",
    "description": "Card and panel titles.",
    "group": "Fourteen roles, named as in Material 3. Sizes are small and steady because the interface is dense with figures; hierarchy comes from weight and color more than from size.",
    "themed": false,
    "light": {
      "resolved": {
        "fontFamily": [
          "IBM Plex Sans",
          "IBM Plex Sans Fallback",
          "ui-sans-serif",
          "system-ui",
          "-apple-system",
          "Segoe UI",
          "sans-serif"
        ],
        "fontSize": {
          "value": 18,
          "unit": "px"
        },
        "fontWeight": 600,
        "lineHeight": 1.2,
        "letterSpacing": {
          "value": -0.27,
          "unit": "px"
        }
      },
      "css": {
        "--sonar-type-title-lg": "var(--sonar-font-weight-semibold) 18px/1.2 var(--sonar-font-family-sans)",
        "--sonar-type-title-lg-tracking": "-0.27px"
      }
    }
  },
  {
    "name": "type.title-md",
    "cssVar": "--sonar-type-title-md",
    "type": "typography",
    "description": "Highlighted figures and section titles inside panels.",
    "group": "Fourteen roles, named as in Material 3. Sizes are small and steady because the interface is dense with figures; hierarchy comes from weight and color more than from size.",
    "themed": false,
    "light": {
      "resolved": {
        "fontFamily": [
          "IBM Plex Sans",
          "IBM Plex Sans Fallback",
          "ui-sans-serif",
          "system-ui",
          "-apple-system",
          "Segoe UI",
          "sans-serif"
        ],
        "fontSize": {
          "value": 14,
          "unit": "px"
        },
        "fontWeight": 600,
        "lineHeight": 1.4,
        "letterSpacing": {
          "value": -0.21,
          "unit": "px"
        }
      },
      "css": {
        "--sonar-type-title-md": "var(--sonar-font-weight-semibold) 14px/1.4 var(--sonar-font-family-sans)",
        "--sonar-type-title-md-tracking": "-0.21px"
      }
    }
  },
  {
    "name": "type.title-sm",
    "cssVar": "--sonar-type-title-sm",
    "type": "typography",
    "description": "Summary lines, month names, document numbers.",
    "group": "Fourteen roles, named as in Material 3. Sizes are small and steady because the interface is dense with figures; hierarchy comes from weight and color more than from size.",
    "themed": false,
    "light": {
      "resolved": {
        "fontFamily": [
          "IBM Plex Sans",
          "IBM Plex Sans Fallback",
          "ui-sans-serif",
          "system-ui",
          "-apple-system",
          "Segoe UI",
          "sans-serif"
        ],
        "fontSize": {
          "value": 12,
          "unit": "px"
        },
        "fontWeight": 600,
        "lineHeight": 1.2,
        "letterSpacing": {
          "value": 0,
          "unit": "px"
        }
      },
      "css": {
        "--sonar-type-title-sm": "var(--sonar-font-weight-semibold) 12px/1.2 var(--sonar-font-family-sans)",
        "--sonar-type-title-sm-tracking": "0"
      }
    }
  },
  {
    "name": "type.body-lg",
    "cssVar": "--sonar-type-body-lg",
    "type": "typography",
    "description": "Dialog and empty-state text.",
    "group": "Fourteen roles, named as in Material 3. Sizes are small and steady because the interface is dense with figures; hierarchy comes from weight and color more than from size.",
    "themed": false,
    "light": {
      "resolved": {
        "fontFamily": [
          "IBM Plex Sans",
          "IBM Plex Sans Fallback",
          "ui-sans-serif",
          "system-ui",
          "-apple-system",
          "Segoe UI",
          "sans-serif"
        ],
        "fontSize": {
          "value": 14,
          "unit": "px"
        },
        "fontWeight": 400,
        "lineHeight": 1.45,
        "letterSpacing": {
          "value": 0,
          "unit": "px"
        }
      },
      "css": {
        "--sonar-type-body-lg": "var(--sonar-font-weight-regular) 14px/1.45 var(--sonar-font-family-sans)",
        "--sonar-type-body-lg-tracking": "0"
      }
    }
  },
  {
    "name": "type.body-md",
    "cssVar": "--sonar-type-body-md",
    "type": "typography",
    "description": "Rows, descriptions, list items.",
    "group": "Fourteen roles, named as in Material 3. Sizes are small and steady because the interface is dense with figures; hierarchy comes from weight and color more than from size.",
    "themed": false,
    "light": {
      "resolved": {
        "fontFamily": [
          "IBM Plex Sans",
          "IBM Plex Sans Fallback",
          "ui-sans-serif",
          "system-ui",
          "-apple-system",
          "Segoe UI",
          "sans-serif"
        ],
        "fontSize": {
          "value": 12,
          "unit": "px"
        },
        "fontWeight": 400,
        "lineHeight": 1.33,
        "letterSpacing": {
          "value": 0,
          "unit": "px"
        }
      },
      "css": {
        "--sonar-type-body-md": "var(--sonar-font-weight-regular) 12px/1.33 var(--sonar-font-family-sans)",
        "--sonar-type-body-md-tracking": "0"
      }
    }
  },
  {
    "name": "type.label-lg",
    "cssVar": "--sonar-type-label-lg",
    "type": "typography",
    "description": "Account selector, legend labels.",
    "group": "Fourteen roles, named as in Material 3. Sizes are small and steady because the interface is dense with figures; hierarchy comes from weight and color more than from size.",
    "themed": false,
    "light": {
      "resolved": {
        "fontFamily": [
          "IBM Plex Sans",
          "IBM Plex Sans Fallback",
          "ui-sans-serif",
          "system-ui",
          "-apple-system",
          "Segoe UI",
          "sans-serif"
        ],
        "fontSize": {
          "value": 14,
          "unit": "px"
        },
        "fontWeight": 500,
        "lineHeight": 1.2,
        "letterSpacing": {
          "value": 0,
          "unit": "px"
        }
      },
      "css": {
        "--sonar-type-label-lg": "var(--sonar-font-weight-medium) 14px/1.2 var(--sonar-font-family-sans)",
        "--sonar-type-label-lg-tracking": "0"
      }
    }
  },
  {
    "name": "type.label-md",
    "cssVar": "--sonar-type-label-md",
    "type": "typography",
    "description": "Figures in tables and lists, form labels, navigation items. The most used role.",
    "group": "Fourteen roles, named as in Material 3. Sizes are small and steady because the interface is dense with figures; hierarchy comes from weight and color more than from size.",
    "themed": false,
    "light": {
      "resolved": {
        "fontFamily": [
          "IBM Plex Sans",
          "IBM Plex Sans Fallback",
          "ui-sans-serif",
          "system-ui",
          "-apple-system",
          "Segoe UI",
          "sans-serif"
        ],
        "fontSize": {
          "value": 12,
          "unit": "px"
        },
        "fontWeight": 500,
        "lineHeight": 1.2,
        "letterSpacing": {
          "value": -0.18,
          "unit": "px"
        }
      },
      "css": {
        "--sonar-type-label-md": "var(--sonar-font-weight-medium) 12px/1.2 var(--sonar-font-family-sans)",
        "--sonar-type-label-md-tracking": "-0.18px"
      }
    }
  },
  {
    "name": "type.label-md-condensed",
    "cssVar": "--sonar-type-label-md-condensed",
    "type": "typography",
    "description": "Weekday initials in calendars and charts.",
    "group": "Fourteen roles, named as in Material 3. Sizes are small and steady because the interface is dense with figures; hierarchy comes from weight and color more than from size.",
    "themed": false,
    "light": {
      "resolved": {
        "fontFamily": [
          "IBM Plex Sans Condensed",
          "IBM Plex Sans",
          "Arial Narrow",
          "sans-serif"
        ],
        "fontSize": {
          "value": 12,
          "unit": "px"
        },
        "fontWeight": 400,
        "lineHeight": 1.2,
        "letterSpacing": {
          "value": 0,
          "unit": "px"
        }
      },
      "css": {
        "--sonar-type-label-md-condensed": "var(--sonar-font-weight-regular) 12px/1.2 var(--sonar-font-family-condensed)",
        "--sonar-type-label-md-condensed-tracking": "0"
      }
    }
  },
  {
    "name": "type.label-sm",
    "cssVar": "--sonar-type-label-sm",
    "type": "typography",
    "description": "Status chips, inline actions such as View, tooltips.",
    "group": "Fourteen roles, named as in Material 3. Sizes are small and steady because the interface is dense with figures; hierarchy comes from weight and color more than from size.",
    "themed": false,
    "light": {
      "resolved": {
        "fontFamily": [
          "IBM Plex Sans",
          "IBM Plex Sans Fallback",
          "ui-sans-serif",
          "system-ui",
          "-apple-system",
          "Segoe UI",
          "sans-serif"
        ],
        "fontSize": {
          "value": 11,
          "unit": "px"
        },
        "fontWeight": 500,
        "lineHeight": 1.2,
        "letterSpacing": {
          "value": -0.17,
          "unit": "px"
        }
      },
      "css": {
        "--sonar-type-label-sm": "var(--sonar-font-weight-medium) 11px/1.2 var(--sonar-font-family-sans)",
        "--sonar-type-label-sm-tracking": "-0.17px"
      }
    }
  },
  {
    "name": "type.button",
    "cssVar": "--sonar-type-button",
    "type": "typography",
    "description": "Filled and outlined buttons.",
    "group": "Fourteen roles, named as in Material 3. Sizes are small and steady because the interface is dense with figures; hierarchy comes from weight and color more than from size.",
    "themed": false,
    "light": {
      "resolved": {
        "fontFamily": [
          "IBM Plex Sans",
          "IBM Plex Sans Fallback",
          "ui-sans-serif",
          "system-ui",
          "-apple-system",
          "Segoe UI",
          "sans-serif"
        ],
        "fontSize": {
          "value": 13,
          "unit": "px"
        },
        "fontWeight": 600,
        "lineHeight": 1.2,
        "letterSpacing": {
          "value": -0.13,
          "unit": "px"
        }
      },
      "css": {
        "--sonar-type-button": "var(--sonar-font-weight-semibold) 13px/1.2 var(--sonar-font-family-sans)",
        "--sonar-type-button-tracking": "-0.13px"
      }
    }
  },
  {
    "name": "type.caption",
    "cssVar": "--sonar-type-caption",
    "type": "typography",
    "description": "Units in pills (PLT, KG). Always uppercase.",
    "group": "Fourteen roles, named as in Material 3. Sizes are small and steady because the interface is dense with figures; hierarchy comes from weight and color more than from size.",
    "extensions": {
      "textTransform": "uppercase"
    },
    "themed": false,
    "light": {
      "resolved": {
        "fontFamily": [
          "IBM Plex Sans",
          "IBM Plex Sans Fallback",
          "ui-sans-serif",
          "system-ui",
          "-apple-system",
          "Segoe UI",
          "sans-serif"
        ],
        "fontSize": {
          "value": 10,
          "unit": "px"
        },
        "fontWeight": 400,
        "lineHeight": 1.2,
        "letterSpacing": {
          "value": 0,
          "unit": "px"
        }
      },
      "css": {
        "--sonar-type-caption": "var(--sonar-font-weight-regular) 10px/1.2 var(--sonar-font-family-sans)",
        "--sonar-type-caption-tracking": "0"
      }
    }
  },
  {
    "name": "type.overline",
    "cssVar": "--sonar-type-overline",
    "type": "typography",
    "description": "Section headings in the navigation. Always uppercase.",
    "group": "Fourteen roles, named as in Material 3. Sizes are small and steady because the interface is dense with figures; hierarchy comes from weight and color more than from size.",
    "extensions": {
      "textTransform": "uppercase"
    },
    "themed": false,
    "light": {
      "resolved": {
        "fontFamily": [
          "IBM Plex Mono",
          "ui-monospace",
          "SFMono-Regular",
          "Menlo",
          "monospace"
        ],
        "fontSize": {
          "value": 12,
          "unit": "px"
        },
        "fontWeight": 500,
        "lineHeight": 1.2,
        "letterSpacing": {
          "value": 0,
          "unit": "px"
        }
      },
      "css": {
        "--sonar-type-overline": "var(--sonar-font-weight-medium) 12px/1.2 var(--sonar-font-family-mono)",
        "--sonar-type-overline-tracking": "0"
      }
    }
  },
  {
    "name": "type.data",
    "cssVar": "--sonar-type-data",
    "type": "typography",
    "description": "Chart axes and scales.",
    "group": "Fourteen roles, named as in Material 3. Sizes are small and steady because the interface is dense with figures; hierarchy comes from weight and color more than from size.",
    "themed": false,
    "light": {
      "resolved": {
        "fontFamily": [
          "IBM Plex Mono",
          "ui-monospace",
          "SFMono-Regular",
          "Menlo",
          "monospace"
        ],
        "fontSize": {
          "value": 10,
          "unit": "px"
        },
        "fontWeight": 400,
        "lineHeight": 1.2,
        "letterSpacing": {
          "value": -0.3,
          "unit": "px"
        }
      },
      "css": {
        "--sonar-type-data": "var(--sonar-font-weight-regular) 10px/1.2 var(--sonar-font-family-mono)",
        "--sonar-type-data-tracking": "-0.3px"
      }
    }
  },
  {
    "name": "shape.corner.none",
    "cssVar": "--sonar-shape-corner-none",
    "type": "dimension",
    "themed": false,
    "light": {
      "resolved": {
        "value": 0,
        "unit": "px"
      },
      "css": {
        "--sonar-shape-corner-none": "0"
      }
    }
  },
  {
    "name": "shape.corner.extra-small",
    "cssVar": "--sonar-shape-corner-extra-small",
    "type": "dimension",
    "description": "Tooltips, small marks.",
    "themed": false,
    "light": {
      "resolved": {
        "value": 4,
        "unit": "px"
      },
      "css": {
        "--sonar-shape-corner-extra-small": "4px"
      }
    }
  },
  {
    "name": "shape.corner.small",
    "cssVar": "--sonar-shape-corner-small",
    "type": "dimension",
    "description": "Chips, pressed buttons.",
    "themed": false,
    "light": {
      "resolved": {
        "value": 8,
        "unit": "px"
      },
      "css": {
        "--sonar-shape-corner-small": "8px"
      }
    }
  },
  {
    "name": "shape.corner.medium",
    "cssVar": "--sonar-shape-corner-medium",
    "type": "dimension",
    "description": "Cards, fields, menu items.",
    "themed": false,
    "light": {
      "resolved": {
        "value": 12,
        "unit": "px"
      },
      "css": {
        "--sonar-shape-corner-medium": "12px"
      }
    }
  },
  {
    "name": "shape.corner.large",
    "cssVar": "--sonar-shape-corner-large",
    "type": "dimension",
    "description": "Menus, banners, buttons.",
    "themed": false,
    "light": {
      "resolved": {
        "value": 16,
        "unit": "px"
      },
      "css": {
        "--sonar-shape-corner-large": "16px"
      }
    }
  },
  {
    "name": "shape.corner.large-increased",
    "cssVar": "--sonar-shape-corner-large-increased",
    "type": "dimension",
    "description": "The step between large and extra-large in the Material 3 scale. No component uses it yet.",
    "themed": false,
    "light": {
      "resolved": {
        "value": 20,
        "unit": "px"
      },
      "css": {
        "--sonar-shape-corner-large-increased": "20px"
      }
    }
  },
  {
    "name": "shape.corner.extra-large",
    "cssVar": "--sonar-shape-corner-extra-large",
    "type": "dimension",
    "description": "Side panels, search field.",
    "themed": false,
    "light": {
      "resolved": {
        "value": 28,
        "unit": "px"
      },
      "css": {
        "--sonar-shape-corner-extra-large": "28px"
      }
    }
  },
  {
    "name": "shape.corner.full",
    "cssVar": "--sonar-shape-corner-full",
    "type": "dimension",
    "description": "Pills, avatars, status dots.",
    "themed": false,
    "light": {
      "resolved": {
        "value": 9999,
        "unit": "px"
      },
      "css": {
        "--sonar-shape-corner-full": "9999px"
      }
    }
  },
  {
    "name": "space.0",
    "cssVar": "--sonar-space-0",
    "type": "dimension",
    "group": "Spacing on a 2 px base, denser at the small end where data needs fine control. Named by value in pixels.",
    "themed": false,
    "light": {
      "resolved": {
        "value": 0,
        "unit": "px"
      },
      "css": {
        "--sonar-space-0": "0"
      }
    }
  },
  {
    "name": "space.2",
    "cssVar": "--sonar-space-2",
    "type": "dimension",
    "group": "Spacing on a 2 px base, denser at the small end where data needs fine control. Named by value in pixels.",
    "themed": false,
    "light": {
      "resolved": {
        "value": 2,
        "unit": "px"
      },
      "css": {
        "--sonar-space-2": "2px"
      }
    }
  },
  {
    "name": "space.4",
    "cssVar": "--sonar-space-4",
    "type": "dimension",
    "group": "Spacing on a 2 px base, denser at the small end where data needs fine control. Named by value in pixels.",
    "themed": false,
    "light": {
      "resolved": {
        "value": 4,
        "unit": "px"
      },
      "css": {
        "--sonar-space-4": "4px"
      }
    }
  },
  {
    "name": "space.6",
    "cssVar": "--sonar-space-6",
    "type": "dimension",
    "group": "Spacing on a 2 px base, denser at the small end where data needs fine control. Named by value in pixels.",
    "themed": false,
    "light": {
      "resolved": {
        "value": 6,
        "unit": "px"
      },
      "css": {
        "--sonar-space-6": "6px"
      }
    }
  },
  {
    "name": "space.8",
    "cssVar": "--sonar-space-8",
    "type": "dimension",
    "group": "Spacing on a 2 px base, denser at the small end where data needs fine control. Named by value in pixels.",
    "themed": false,
    "light": {
      "resolved": {
        "value": 8,
        "unit": "px"
      },
      "css": {
        "--sonar-space-8": "8px"
      }
    }
  },
  {
    "name": "space.10",
    "cssVar": "--sonar-space-10",
    "type": "dimension",
    "group": "Spacing on a 2 px base, denser at the small end where data needs fine control. Named by value in pixels.",
    "themed": false,
    "light": {
      "resolved": {
        "value": 10,
        "unit": "px"
      },
      "css": {
        "--sonar-space-10": "10px"
      }
    }
  },
  {
    "name": "space.12",
    "cssVar": "--sonar-space-12",
    "type": "dimension",
    "group": "Spacing on a 2 px base, denser at the small end where data needs fine control. Named by value in pixels.",
    "themed": false,
    "light": {
      "resolved": {
        "value": 12,
        "unit": "px"
      },
      "css": {
        "--sonar-space-12": "12px"
      }
    }
  },
  {
    "name": "space.14",
    "cssVar": "--sonar-space-14",
    "type": "dimension",
    "group": "Spacing on a 2 px base, denser at the small end where data needs fine control. Named by value in pixels.",
    "themed": false,
    "light": {
      "resolved": {
        "value": 14,
        "unit": "px"
      },
      "css": {
        "--sonar-space-14": "14px"
      }
    }
  },
  {
    "name": "space.16",
    "cssVar": "--sonar-space-16",
    "type": "dimension",
    "group": "Spacing on a 2 px base, denser at the small end where data needs fine control. Named by value in pixels.",
    "themed": false,
    "light": {
      "resolved": {
        "value": 16,
        "unit": "px"
      },
      "css": {
        "--sonar-space-16": "16px"
      }
    }
  },
  {
    "name": "space.20",
    "cssVar": "--sonar-space-20",
    "type": "dimension",
    "group": "Spacing on a 2 px base, denser at the small end where data needs fine control. Named by value in pixels.",
    "themed": false,
    "light": {
      "resolved": {
        "value": 20,
        "unit": "px"
      },
      "css": {
        "--sonar-space-20": "20px"
      }
    }
  },
  {
    "name": "space.24",
    "cssVar": "--sonar-space-24",
    "type": "dimension",
    "group": "Spacing on a 2 px base, denser at the small end where data needs fine control. Named by value in pixels.",
    "themed": false,
    "light": {
      "resolved": {
        "value": 24,
        "unit": "px"
      },
      "css": {
        "--sonar-space-24": "24px"
      }
    }
  },
  {
    "name": "space.28",
    "cssVar": "--sonar-space-28",
    "type": "dimension",
    "group": "Spacing on a 2 px base, denser at the small end where data needs fine control. Named by value in pixels.",
    "themed": false,
    "light": {
      "resolved": {
        "value": 28,
        "unit": "px"
      },
      "css": {
        "--sonar-space-28": "28px"
      }
    }
  },
  {
    "name": "space.32",
    "cssVar": "--sonar-space-32",
    "type": "dimension",
    "group": "Spacing on a 2 px base, denser at the small end where data needs fine control. Named by value in pixels.",
    "themed": false,
    "light": {
      "resolved": {
        "value": 32,
        "unit": "px"
      },
      "css": {
        "--sonar-space-32": "32px"
      }
    }
  },
  {
    "name": "space.40",
    "cssVar": "--sonar-space-40",
    "type": "dimension",
    "group": "Spacing on a 2 px base, denser at the small end where data needs fine control. Named by value in pixels.",
    "themed": false,
    "light": {
      "resolved": {
        "value": 40,
        "unit": "px"
      },
      "css": {
        "--sonar-space-40": "40px"
      }
    }
  },
  {
    "name": "space.48",
    "cssVar": "--sonar-space-48",
    "type": "dimension",
    "group": "Spacing on a 2 px base, denser at the small end where data needs fine control. Named by value in pixels.",
    "themed": false,
    "light": {
      "resolved": {
        "value": 48,
        "unit": "px"
      },
      "css": {
        "--sonar-space-48": "48px"
      }
    }
  },
  {
    "name": "size.control.small",
    "cssVar": "--sonar-size-control-small",
    "type": "dimension",
    "description": "Card actions and toolbars.",
    "group": "Height of buttons, fields and segmented controls.",
    "themed": false,
    "light": {
      "resolved": {
        "value": 28,
        "unit": "px"
      },
      "css": {
        "--sonar-size-control-small": "28px"
      }
    }
  },
  {
    "name": "size.control.medium",
    "cssVar": "--sonar-size-control-medium",
    "type": "dimension",
    "description": "Forms, panels and dialogs.",
    "group": "Height of buttons, fields and segmented controls.",
    "themed": false,
    "light": {
      "resolved": {
        "value": 36,
        "unit": "px"
      },
      "css": {
        "--sonar-size-control-medium": "36px"
      }
    }
  },
  {
    "name": "size.icon.small",
    "cssVar": "--sonar-size-icon-small",
    "type": "dimension",
    "group": "Icon box sizes. Icons inherit the color of the text beside them.",
    "themed": false,
    "light": {
      "resolved": {
        "value": 16,
        "unit": "px"
      },
      "css": {
        "--sonar-size-icon-small": "16px"
      }
    }
  },
  {
    "name": "size.icon.medium",
    "cssVar": "--sonar-size-icon-medium",
    "type": "dimension",
    "group": "Icon box sizes. Icons inherit the color of the text beside them.",
    "themed": false,
    "light": {
      "resolved": {
        "value": 20,
        "unit": "px"
      },
      "css": {
        "--sonar-size-icon-medium": "20px"
      }
    }
  },
  {
    "name": "focus.width",
    "cssVar": "--sonar-focus-width",
    "type": "dimension",
    "group": "The keyboard focus ring: drawn outside the element, in color.focus, on every interactive component.",
    "themed": false,
    "light": {
      "resolved": {
        "value": 2,
        "unit": "px"
      },
      "css": {
        "--sonar-focus-width": "2px"
      }
    }
  },
  {
    "name": "focus.offset",
    "cssVar": "--sonar-focus-offset",
    "type": "dimension",
    "group": "The keyboard focus ring: drawn outside the element, in color.focus, on every interactive component.",
    "themed": false,
    "light": {
      "resolved": {
        "value": 2,
        "unit": "px"
      },
      "css": {
        "--sonar-focus-offset": "2px"
      }
    }
  },
  {
    "name": "motion.spatial.fast",
    "cssVar": "--sonar-motion-spatial-fast",
    "type": "duration",
    "description": "Small elements: switches, chips, menus.",
    "group": "For position, size and shape.",
    "extensions": {
      "spring": {
        "bounce": 0
      }
    },
    "themed": false,
    "light": {
      "resolved": {
        "value": 200,
        "unit": "ms"
      },
      "css": {
        "--sonar-motion-spatial-fast-duration": "200ms",
        "--sonar-motion-spatial-fast-easing": "linear(0, 0.0138, 0.0493, 0.0991, 0.1576, 0.2207, 0.2855, 0.3496, 0.4117, 0.4707, 0.526, 0.5773, 0.6243, 0.6672, 0.7061, 0.7411, 0.7724, 0.8004, 0.8253, 0.8473, 0.8668, 0.884, 0.8991, 0.9123, 0.9239, 0.9341, 0.9429, 0.9507, 0.9574, 0.9632, 0.9683, 0.9726, 0.9764, 0.9797, 0.9826, 0.985, 0.9871, 0.9889, 0.9905, 0.9919, 0.993, 0.994, 0.9949, 0.9956, 0.9963, 0.9968, 0.9973, 0.9977, 1)"
      }
    }
  },
  {
    "name": "motion.spatial.default",
    "cssVar": "--sonar-motion-spatial-default",
    "type": "duration",
    "description": "Most layout changes: accordions, cards settling, panels resizing.",
    "group": "For position, size and shape.",
    "extensions": {
      "spring": {
        "bounce": 0
      }
    },
    "themed": false,
    "light": {
      "resolved": {
        "value": 320,
        "unit": "ms"
      },
      "css": {
        "--sonar-motion-spatial-default-duration": "320ms",
        "--sonar-motion-spatial-default-easing": "linear(0, 0.0138, 0.0493, 0.0991, 0.1576, 0.2207, 0.2855, 0.3496, 0.4117, 0.4707, 0.526, 0.5773, 0.6243, 0.6672, 0.7061, 0.7411, 0.7724, 0.8004, 0.8253, 0.8473, 0.8668, 0.884, 0.8991, 0.9123, 0.9239, 0.9341, 0.9429, 0.9507, 0.9574, 0.9632, 0.9683, 0.9726, 0.9764, 0.9797, 0.9826, 0.985, 0.9871, 0.9889, 0.9905, 0.9919, 0.993, 0.994, 0.9949, 0.9956, 0.9963, 0.9968, 0.9973, 0.9977, 1)"
      }
    }
  },
  {
    "name": "motion.spatial.expressive",
    "cssVar": "--sonar-motion-spatial-expressive",
    "type": "duration",
    "description": "Only when a dragged card is dropped and for success confirmations.",
    "group": "For position, size and shape.",
    "extensions": {
      "spring": {
        "bounce": 0.3
      }
    },
    "themed": false,
    "light": {
      "resolved": {
        "value": 500,
        "unit": "ms"
      },
      "css": {
        "--sonar-motion-spatial-expressive-duration": "500ms",
        "--sonar-motion-spatial-expressive-easing": "linear(0, 0.0166, 0.0607, 0.1243, 0.2009, 0.285, 0.3722, 0.4589, 0.5425, 0.6211, 0.6933, 0.7584, 0.8159, 0.8658, 0.9083, 0.9437, 0.9726, 0.9956, 1.0134, 1.0266, 1.0358, 1.0417, 1.045, 1.046, 1.0453, 1.0433, 1.0405, 1.037, 1.0331, 1.0291, 1.0251, 1.0213, 1.0176, 1.0143, 1.0113, 1.0086, 1.0063, 1.0043, 1.0027, 1.0013, 1.0003, 0.9994, 0.9988, 0.9984, 0.9981, 0.9979, 0.9979, 0.9979, 1)"
      }
    }
  },
  {
    "name": "motion.effects.fast",
    "cssVar": "--sonar-motion-effects-fast",
    "type": "duration",
    "group": "For opacity and color.",
    "extensions": {
      "spring": {
        "bounce": 0
      }
    },
    "themed": false,
    "light": {
      "resolved": {
        "value": 138,
        "unit": "ms"
      },
      "css": {
        "--sonar-motion-effects-fast-duration": "138ms",
        "--sonar-motion-effects-fast-easing": "linear(0, 0.0138, 0.0493, 0.0991, 0.1576, 0.2207, 0.2855, 0.3496, 0.4117, 0.4707, 0.526, 0.5773, 0.6243, 0.6672, 0.7061, 0.7411, 0.7724, 0.8004, 0.8253, 0.8473, 0.8668, 0.884, 0.8991, 0.9123, 0.9239, 0.9341, 0.9429, 0.9507, 0.9574, 0.9632, 0.9683, 0.9726, 0.9764, 0.9797, 0.9826, 0.985, 0.9871, 0.9889, 0.9905, 0.9919, 0.993, 0.994, 0.9949, 0.9956, 0.9963, 0.9968, 0.9973, 0.9977, 1)"
      }
    }
  },
  {
    "name": "motion.effects.default",
    "cssVar": "--sonar-motion-effects-default",
    "type": "duration",
    "group": "For opacity and color.",
    "extensions": {
      "spring": {
        "bounce": 0
      }
    },
    "themed": false,
    "light": {
      "resolved": {
        "value": 212,
        "unit": "ms"
      },
      "css": {
        "--sonar-motion-effects-default-duration": "212ms",
        "--sonar-motion-effects-default-easing": "linear(0, 0.0138, 0.0493, 0.0991, 0.1576, 0.2207, 0.2855, 0.3496, 0.4117, 0.4707, 0.526, 0.5773, 0.6243, 0.6672, 0.7061, 0.7411, 0.7724, 0.8004, 0.8253, 0.8473, 0.8668, 0.884, 0.8991, 0.9123, 0.9239, 0.9341, 0.9429, 0.9507, 0.9574, 0.9632, 0.9683, 0.9726, 0.9764, 0.9797, 0.9826, 0.985, 0.9871, 0.9889, 0.9905, 0.9919, 0.993, 0.994, 0.9949, 0.9956, 0.9963, 0.9968, 0.9973, 0.9977, 1)"
      }
    }
  },
  {
    "name": "motion.effects.slow",
    "cssVar": "--sonar-motion-effects-slow",
    "type": "duration",
    "group": "For opacity and color.",
    "extensions": {
      "spring": {
        "bounce": 0
      }
    },
    "themed": false,
    "light": {
      "resolved": {
        "value": 300,
        "unit": "ms"
      },
      "css": {
        "--sonar-motion-effects-slow-duration": "300ms",
        "--sonar-motion-effects-slow-easing": "linear(0, 0.0138, 0.0493, 0.0991, 0.1576, 0.2207, 0.2855, 0.3496, 0.4117, 0.4707, 0.526, 0.5773, 0.6243, 0.6672, 0.7061, 0.7411, 0.7724, 0.8004, 0.8253, 0.8473, 0.8668, 0.884, 0.8991, 0.9123, 0.9239, 0.9341, 0.9429, 0.9507, 0.9574, 0.9632, 0.9683, 0.9726, 0.9764, 0.9797, 0.9826, 0.985, 0.9871, 0.9889, 0.9905, 0.9919, 0.993, 0.994, 0.9949, 0.9956, 0.9963, 0.9968, 0.9973, 0.9977, 1)"
      }
    }
  },
  {
    "name": "motion.easing.exit",
    "cssVar": "--sonar-motion-easing-exit",
    "type": "cubicBezier",
    "description": "Leaving the screen: starts at once and accelerates.",
    "themed": false,
    "light": {
      "resolved": [
        0.3,
        0,
        0.8,
        0.15
      ],
      "css": {
        "--sonar-motion-easing-exit": "cubic-bezier(0.3, 0, 0.8, 0.15)"
      }
    }
  },
  {
    "name": "motion.easing.decelerate",
    "cssVar": "--sonar-motion-easing-decelerate",
    "type": "cubicBezier",
    "description": "Entering elements that are not springs, such as panels.",
    "themed": false,
    "light": {
      "resolved": [
        0.23,
        1,
        0.32,
        1
      ],
      "css": {
        "--sonar-motion-easing-decelerate": "cubic-bezier(0.23, 1, 0.32, 1)"
      }
    }
  },
  {
    "name": "motion.easing.standard",
    "cssVar": "--sonar-motion-easing-standard",
    "type": "cubicBezier",
    "description": "Continuous transforms such as the sidebar folding.",
    "themed": false,
    "light": {
      "resolved": [
        0.25,
        0.1,
        0.25,
        1
      ],
      "css": {
        "--sonar-motion-easing-standard": "cubic-bezier(0.25, 0.1, 0.25, 1)"
      }
    }
  },
  {
    "name": "motion.easing.accelerate",
    "cssVar": "--sonar-motion-easing-accelerate",
    "type": "cubicBezier",
    "description": "Panels and sheets leaving: starts slow and leaves at speed.",
    "themed": false,
    "light": {
      "resolved": [
        0.4,
        0,
        1,
        1
      ],
      "css": {
        "--sonar-motion-easing-accelerate": "cubic-bezier(0.4, 0, 1, 1)"
      }
    }
  },
  {
    "name": "motion.easing.emphasized",
    "cssVar": "--sonar-motion-easing-emphasized",
    "type": "cubicBezier",
    "description": "The theme switch’s knob and cards moving between columns.",
    "themed": false,
    "light": {
      "resolved": [
        0.2,
        0,
        0,
        1
      ],
      "css": {
        "--sonar-motion-easing-emphasized": "cubic-bezier(0.2, 0, 0, 1)"
      }
    }
  },
  {
    "name": "motion.easing.crossfade",
    "cssVar": "--sonar-motion-easing-crossfade",
    "type": "cubicBezier",
    "description": "The page cross-fading from one theme to the other.",
    "themed": false,
    "light": {
      "resolved": [
        0.4,
        0,
        0.2,
        1
      ],
      "css": {
        "--sonar-motion-easing-crossfade": "cubic-bezier(0.4, 0, 0.2, 1)"
      }
    }
  },
  {
    "name": "motion.duration.state",
    "cssVar": "--sonar-motion-duration-state",
    "type": "duration",
    "description": "Hover and pressed colors of rows, pills and buttons, with easing.decelerate.",
    "group": "Fixed timings of particular moments, read from the product. Springs above stay the default for anything else.",
    "themed": false,
    "light": {
      "resolved": {
        "value": 160,
        "unit": "ms"
      },
      "css": {
        "--sonar-motion-duration-state": "160ms"
      }
    }
  },
  {
    "name": "motion.duration.panel-enter",
    "cssVar": "--sonar-motion-duration-panel-enter",
    "type": "duration",
    "description": "A side panel or a phone sheet arriving: its slide uses the spatial default spring stretched to this time.",
    "group": "Fixed timings of particular moments, read from the product. Springs above stay the default for anything else.",
    "themed": false,
    "light": {
      "resolved": {
        "value": 420,
        "unit": "ms"
      },
      "css": {
        "--sonar-motion-duration-panel-enter": "420ms"
      }
    }
  },
  {
    "name": "motion.duration.panel-exit",
    "cssVar": "--sonar-motion-duration-panel-exit",
    "type": "duration",
    "description": "A side panel leaving: 28 px and out of sight, with easing.accelerate.",
    "group": "Fixed timings of particular moments, read from the product. Springs above stay the default for anything else.",
    "themed": false,
    "light": {
      "resolved": {
        "value": 150,
        "unit": "ms"
      },
      "css": {
        "--sonar-motion-duration-panel-exit": "150ms"
      }
    }
  },
  {
    "name": "motion.duration.sheet-fade",
    "cssVar": "--sonar-motion-duration-sheet-fade",
    "type": "duration",
    "description": "A phone sheet’s opacity while it rises.",
    "group": "Fixed timings of particular moments, read from the product. Springs above stay the default for anything else.",
    "themed": false,
    "light": {
      "resolved": {
        "value": 200,
        "unit": "ms"
      },
      "css": {
        "--sonar-motion-duration-sheet-fade": "200ms"
      }
    }
  },
  {
    "name": "motion.duration.sheet-exit",
    "cssVar": "--sonar-motion-duration-sheet-exit",
    "type": "duration",
    "description": "A phone sheet going down, with easing.accelerate.",
    "group": "Fixed timings of particular moments, read from the product. Springs above stay the default for anything else.",
    "themed": false,
    "light": {
      "resolved": {
        "value": 220,
        "unit": "ms"
      },
      "css": {
        "--sonar-motion-duration-sheet-exit": "220ms"
      }
    }
  },
  {
    "name": "motion.duration.menu-exit",
    "cssVar": "--sonar-motion-duration-menu-exit",
    "type": "duration",
    "description": "A menu closing to 96 %, with easing.exit.",
    "group": "Fixed timings of particular moments, read from the product. Springs above stay the default for anything else.",
    "themed": false,
    "light": {
      "resolved": {
        "value": 110,
        "unit": "ms"
      },
      "css": {
        "--sonar-motion-duration-menu-exit": "110ms"
      }
    }
  },
  {
    "name": "motion.duration.dropdown",
    "cssVar": "--sonar-motion-duration-dropdown",
    "type": "duration",
    "description": "The search results opening, with easing.decelerate.",
    "group": "Fixed timings of particular moments, read from the product. Springs above stay the default for anything else.",
    "themed": false,
    "light": {
      "resolved": {
        "value": 180,
        "unit": "ms"
      },
      "css": {
        "--sonar-motion-duration-dropdown": "180ms"
      }
    }
  },
  {
    "name": "motion.duration.tooltip-delay",
    "cssVar": "--sonar-motion-duration-tooltip-delay",
    "type": "duration",
    "description": "The pointer rests this long before a tooltip opens.",
    "group": "Fixed timings of particular moments, read from the product. Springs above stay the default for anything else.",
    "themed": false,
    "light": {
      "resolved": {
        "value": 300,
        "unit": "ms"
      },
      "css": {
        "--sonar-motion-duration-tooltip-delay": "300ms"
      }
    }
  },
  {
    "name": "motion.duration.tooltip-enter",
    "cssVar": "--sonar-motion-duration-tooltip-enter",
    "type": "duration",
    "description": "A tooltip opening from 96 %, with easing.decelerate.",
    "group": "Fixed timings of particular moments, read from the product. Springs above stay the default for anything else.",
    "themed": false,
    "light": {
      "resolved": {
        "value": 140,
        "unit": "ms"
      },
      "css": {
        "--sonar-motion-duration-tooltip-enter": "140ms"
      }
    }
  },
  {
    "name": "motion.duration.tooltip-exit",
    "cssVar": "--sonar-motion-duration-tooltip-exit",
    "type": "duration",
    "description": "A tooltip fading out, with easing.exit.",
    "group": "Fixed timings of particular moments, read from the product. Springs above stay the default for anything else.",
    "themed": false,
    "light": {
      "resolved": {
        "value": 90,
        "unit": "ms"
      },
      "css": {
        "--sonar-motion-duration-tooltip-exit": "90ms"
      }
    }
  },
  {
    "name": "motion.duration.theme",
    "cssVar": "--sonar-motion-duration-theme",
    "type": "duration",
    "description": "The cross-fade of the whole page when the theme changes, with easing.crossfade.",
    "group": "Fixed timings of particular moments, read from the product. Springs above stay the default for anything else.",
    "themed": false,
    "light": {
      "resolved": {
        "value": 700,
        "unit": "ms"
      },
      "css": {
        "--sonar-motion-duration-theme": "700ms"
      }
    }
  },
  {
    "name": "motion.duration.theme-fallback",
    "cssVar": "--sonar-motion-duration-theme-fallback",
    "type": "duration",
    "description": "Color transitions when a browser cannot cross-fade the page.",
    "group": "Fixed timings of particular moments, read from the product. Springs above stay the default for anything else.",
    "themed": false,
    "light": {
      "resolved": {
        "value": 250,
        "unit": "ms"
      },
      "css": {
        "--sonar-motion-duration-theme-fallback": "250ms"
      }
    }
  },
  {
    "name": "motion.duration.reflow",
    "cssVar": "--sonar-motion-duration-reflow",
    "type": "duration",
    "description": "Cards moving to new places when the number of columns changes, with easing.emphasized.",
    "group": "Fixed timings of particular moments, read from the product. Springs above stay the default for anything else.",
    "themed": false,
    "light": {
      "resolved": {
        "value": 620,
        "unit": "ms"
      },
      "css": {
        "--sonar-motion-duration-reflow": "620ms"
      }
    }
  },
  {
    "name": "layout.breakpoint.medium",
    "cssVar": "--sonar-layout-breakpoint-medium",
    "type": "dimension",
    "description": "Tablets: two columns, navigation as a rail.",
    "group": "Minimum window width of each size class. Compact starts at 0.",
    "themed": false,
    "light": {
      "resolved": {
        "value": 768,
        "unit": "px"
      },
      "css": {
        "--sonar-layout-breakpoint-medium": "768px"
      }
    }
  },
  {
    "name": "layout.breakpoint.expanded",
    "cssVar": "--sonar-layout-breakpoint-expanded",
    "type": "dimension",
    "description": "Desktops: three columns, full sidebar.",
    "group": "Minimum window width of each size class. Compact starts at 0.",
    "themed": false,
    "light": {
      "resolved": {
        "value": 1280,
        "unit": "px"
      },
      "css": {
        "--sonar-layout-breakpoint-expanded": "1280px"
      }
    }
  },
  {
    "name": "layout.breakpoint.large",
    "cssVar": "--sonar-layout-breakpoint-large",
    "type": "dimension",
    "description": "Wide monitors: four columns, so a card never grows past 575 px.",
    "group": "Minimum window width of each size class. Compact starts at 0.",
    "themed": false,
    "light": {
      "resolved": {
        "value": 2048,
        "unit": "px"
      },
      "css": {
        "--sonar-layout-breakpoint-large": "2048px"
      }
    }
  },
  {
    "name": "layout.breakpoint.extra-large",
    "cssVar": "--sonar-layout-breakpoint-extra-large",
    "type": "dimension",
    "description": "Ultra-wide monitors: five columns, for the same reason.",
    "group": "Minimum window width of each size class. Compact starts at 0.",
    "themed": false,
    "light": {
      "resolved": {
        "value": 2650,
        "unit": "px"
      },
      "css": {
        "--sonar-layout-breakpoint-extra-large": "2650px"
      }
    }
  },
  {
    "name": "layout.columns.compact",
    "cssVar": "--sonar-layout-columns-compact",
    "type": "number",
    "group": "Card columns of the overview grid.",
    "themed": false,
    "light": {
      "resolved": 1,
      "css": {
        "--sonar-layout-columns-compact": "1"
      }
    }
  },
  {
    "name": "layout.columns.medium",
    "cssVar": "--sonar-layout-columns-medium",
    "type": "number",
    "group": "Card columns of the overview grid.",
    "themed": false,
    "light": {
      "resolved": 2,
      "css": {
        "--sonar-layout-columns-medium": "2"
      }
    }
  },
  {
    "name": "layout.columns.expanded",
    "cssVar": "--sonar-layout-columns-expanded",
    "type": "number",
    "group": "Card columns of the overview grid.",
    "themed": false,
    "light": {
      "resolved": 3,
      "css": {
        "--sonar-layout-columns-expanded": "3"
      }
    }
  },
  {
    "name": "layout.columns.large",
    "cssVar": "--sonar-layout-columns-large",
    "type": "number",
    "group": "Card columns of the overview grid.",
    "themed": false,
    "light": {
      "resolved": 4,
      "css": {
        "--sonar-layout-columns-large": "4"
      }
    }
  },
  {
    "name": "layout.columns.extra-large",
    "cssVar": "--sonar-layout-columns-extra-large",
    "type": "number",
    "group": "Card columns of the overview grid.",
    "themed": false,
    "light": {
      "resolved": 5,
      "css": {
        "--sonar-layout-columns-extra-large": "5"
      }
    }
  },
  {
    "name": "layout.margin.compact",
    "cssVar": "--sonar-layout-margin-compact",
    "type": "dimension",
    "group": "Space between the content and the window edge, or the navigation.",
    "themed": false,
    "light": {
      "resolved": {
        "value": 16,
        "unit": "px"
      },
      "css": {
        "--sonar-layout-margin-compact": "16px"
      }
    }
  },
  {
    "name": "layout.margin.medium",
    "cssVar": "--sonar-layout-margin-medium",
    "type": "dimension",
    "group": "Space between the content and the window edge, or the navigation.",
    "themed": false,
    "light": {
      "resolved": {
        "value": 24,
        "unit": "px"
      },
      "css": {
        "--sonar-layout-margin-medium": "24px"
      }
    }
  },
  {
    "name": "layout.margin.expanded",
    "cssVar": "--sonar-layout-margin-expanded",
    "type": "dimension",
    "group": "Space between the content and the window edge, or the navigation.",
    "themed": false,
    "light": {
      "resolved": {
        "value": 32,
        "unit": "px"
      },
      "css": {
        "--sonar-layout-margin-expanded": "32px"
      }
    }
  },
  {
    "name": "layout.gap",
    "cssVar": "--sonar-layout-gap",
    "type": "dimension",
    "description": "Between cards, in every size class.",
    "group": "Window size classes, as in Material 3, with thresholds tuned for a data-dense dashboard. A group keyed by size class is responsive: the build also writes one property that takes the value of the current class.",
    "themed": false,
    "light": {
      "resolved": {
        "value": 20,
        "unit": "px"
      },
      "css": {
        "--sonar-layout-gap": "20px"
      }
    }
  },
  {
    "name": "layout.sidebar",
    "cssVar": "--sonar-layout-sidebar",
    "type": "dimension",
    "description": "Full navigation beside the content on desktops. On tablets it opens over the content.",
    "group": "Window size classes, as in Material 3, with thresholds tuned for a data-dense dashboard. A group keyed by size class is responsive: the build also writes one property that takes the value of the current class.",
    "themed": false,
    "light": {
      "resolved": {
        "value": 224,
        "unit": "px"
      },
      "css": {
        "--sonar-layout-sidebar": "224px"
      }
    }
  },
  {
    "name": "layout.rail",
    "cssVar": "--sonar-layout-rail",
    "type": "dimension",
    "description": "Navigation as icons only: the rail on tablets and the collapsed sidebar on desktops.",
    "group": "Window size classes, as in Material 3, with thresholds tuned for a data-dense dashboard. A group keyed by size class is responsive: the build also writes one property that takes the value of the current class.",
    "themed": false,
    "light": {
      "resolved": {
        "value": 60,
        "unit": "px"
      },
      "css": {
        "--sonar-layout-rail": "60px"
      }
    }
  },
  {
    "name": "layout.drawer",
    "cssVar": "--sonar-layout-drawer",
    "type": "dimension",
    "description": "The sidebar as a drawer on phones. It never covers more than 84% of the window.",
    "group": "Window size classes, as in Material 3, with thresholds tuned for a data-dense dashboard. A group keyed by size class is responsive: the build also writes one property that takes the value of the current class.",
    "themed": false,
    "light": {
      "resolved": {
        "value": 304,
        "unit": "px"
      },
      "css": {
        "--sonar-layout-drawer": "304px"
      }
    }
  },
  {
    "name": "layout.bar.top.compact",
    "cssVar": "--sonar-layout-bar-top-compact",
    "type": "dimension",
    "group": "Top app bar: brand, search, notifications, assistant and account.",
    "themed": false,
    "light": {
      "resolved": {
        "value": 56,
        "unit": "px"
      },
      "css": {
        "--sonar-layout-bar-top-compact": "56px"
      }
    }
  },
  {
    "name": "layout.bar.top.medium",
    "cssVar": "--sonar-layout-bar-top-medium",
    "type": "dimension",
    "group": "Top app bar: brand, search, notifications, assistant and account.",
    "themed": false,
    "light": {
      "resolved": {
        "value": 68,
        "unit": "px"
      },
      "css": {
        "--sonar-layout-bar-top-medium": "68px"
      }
    }
  },
  {
    "name": "layout.bar.bottom",
    "cssVar": "--sonar-layout-bar-bottom",
    "type": "dimension",
    "description": "Bottom app bar on phones: Alerts, Assistant, Edit, Account and Menu.",
    "group": "Heights of the application bars, before safe areas are added.",
    "themed": false,
    "light": {
      "resolved": {
        "value": 60,
        "unit": "px"
      },
      "css": {
        "--sonar-layout-bar-bottom": "60px"
      }
    }
  },
  {
    "name": "layout.bar.footer",
    "cssVar": "--sonar-layout-bar-footer",
    "type": "dimension",
    "description": "Footer and edit bar on tablets and desktops.",
    "group": "Heights of the application bars, before safe areas are added.",
    "themed": false,
    "light": {
      "resolved": {
        "value": 46,
        "unit": "px"
      },
      "css": {
        "--sonar-layout-bar-footer": "46px"
      }
    }
  },
  {
    "name": "layout.card.s",
    "cssVar": "--sonar-layout-card-s",
    "type": "dimension",
    "group": "Card heights in the overview grid. M + L = S + XL, so two columns built from different sizes end level.",
    "themed": false,
    "light": {
      "resolved": {
        "value": 245,
        "unit": "px"
      },
      "css": {
        "--sonar-layout-card-s": "245px"
      }
    }
  },
  {
    "name": "layout.card.m",
    "cssVar": "--sonar-layout-card-m",
    "type": "dimension",
    "group": "Card heights in the overview grid. M + L = S + XL, so two columns built from different sizes end level.",
    "themed": false,
    "light": {
      "resolved": {
        "value": 375,
        "unit": "px"
      },
      "css": {
        "--sonar-layout-card-m": "375px"
      }
    }
  },
  {
    "name": "layout.card.l",
    "cssVar": "--sonar-layout-card-l",
    "type": "dimension",
    "group": "Card heights in the overview grid. M + L = S + XL, so two columns built from different sizes end level.",
    "themed": false,
    "light": {
      "resolved": {
        "value": 405,
        "unit": "px"
      },
      "css": {
        "--sonar-layout-card-l": "405px"
      }
    }
  },
  {
    "name": "layout.card.xl",
    "cssVar": "--sonar-layout-card-xl",
    "type": "dimension",
    "group": "Card heights in the overview grid. M + L = S + XL, so two columns built from different sizes end level.",
    "themed": false,
    "light": {
      "resolved": {
        "value": 535,
        "unit": "px"
      },
      "css": {
        "--sonar-layout-card-xl": "535px"
      }
    }
  },
  {
    "name": "layout.touch-target",
    "cssVar": "--sonar-layout-touch-target",
    "type": "dimension",
    "description": "Minimum hit area on touch screens.",
    "group": "Window size classes, as in Material 3, with thresholds tuned for a data-dense dashboard. A group keyed by size class is responsive: the build also writes one property that takes the value of the current class.",
    "themed": false,
    "light": {
      "resolved": {
        "value": 48,
        "unit": "px"
      },
      "css": {
        "--sonar-layout-touch-target": "48px"
      }
    }
  },
  {
    "name": "color.accent",
    "cssVar": "--sonar-color-accent",
    "type": "color",
    "description": "Brand green: primary buttons, active navigation, selected controls and link icons.",
    "group": "Semantic color roles, light theme. Components use these, never the palette.",
    "themed": true,
    "light": {
      "reference": "palette.green.50",
      "resolved": "#1A8838",
      "css": {
        "--sonar-color-accent": "var(--sonar-palette-green-50)"
      }
    },
    "dark": {
      "reference": "palette.green.67",
      "resolved": "#76B27C",
      "css": {
        "--sonar-color-accent": "var(--sonar-palette-green-67)"
      }
    }
  },
  {
    "name": "color.accent.container",
    "cssVar": "--sonar-color-accent-container",
    "type": "color",
    "description": "Soft accent background: drop placeholders, the slot a card lands in while the overview is edited.",
    "themed": true,
    "light": {
      "reference": "palette.green.91",
      "resolved": "#CDEFD0",
      "css": {
        "--sonar-color-accent-container": "var(--sonar-palette-green-91)"
      }
    },
    "dark": {
      "reference": "palette.green.81",
      "resolved": "#97D99C29",
      "css": {
        "--sonar-color-accent-container": "color-mix(in srgb, var(--sonar-palette-green-81) 16%, transparent)"
      }
    }
  },
  {
    "name": "color.accent.tonal",
    "cssVar": "--sonar-color-accent-tonal",
    "type": "color",
    "description": "Tonal fill for the selected item in navigation and segmented controls.",
    "themed": true,
    "light": {
      "reference": "palette.green.90",
      "resolved": "#D0E8CE",
      "css": {
        "--sonar-color-accent-tonal": "var(--sonar-palette-green-90)"
      }
    },
    "dark": {
      "reference": "palette.green.29",
      "resolved": "#2F4B31",
      "css": {
        "--sonar-color-accent-tonal": "var(--sonar-palette-green-29)"
      }
    }
  },
  {
    "name": "color.accent.inverse",
    "cssVar": "--sonar-color-accent-inverse",
    "type": "color",
    "description": "Accent on inverse surfaces, such as the action in a toast.",
    "themed": true,
    "light": {
      "reference": "palette.green.81",
      "resolved": "#97D99C",
      "css": {
        "--sonar-color-accent-inverse": "var(--sonar-palette-green-81)"
      }
    },
    "dark": {
      "reference": "palette.green.40",
      "resolved": "#1E6B30",
      "css": {
        "--sonar-color-accent-inverse": "var(--sonar-palette-green-40)"
      }
    }
  },
  {
    "name": "color.on.accent",
    "cssVar": "--sonar-color-on-accent",
    "type": "color",
    "description": "Text and icons on the accent fill.",
    "themed": true,
    "light": {
      "reference": "palette.white",
      "resolved": "#FFFFFF",
      "css": {
        "--sonar-color-on-accent": "var(--sonar-palette-white)"
      }
    },
    "dark": {
      "reference": "palette.green.20",
      "resolved": "#00390F",
      "css": {
        "--sonar-color-on-accent": "var(--sonar-palette-green-20)"
      }
    }
  },
  {
    "name": "color.on.accent-tonal",
    "cssVar": "--sonar-color-on-accent-tonal",
    "type": "color",
    "description": "Text and icons on the tonal accent fill.",
    "themed": true,
    "light": {
      "reference": "palette.green.11",
      "resolved": "#0F2112",
      "css": {
        "--sonar-color-on-accent-tonal": "var(--sonar-palette-green-11)"
      }
    },
    "dark": {
      "reference": "palette.green.90",
      "resolved": "#D0E8CE",
      "css": {
        "--sonar-color-on-accent-tonal": "var(--sonar-palette-green-90)"
      }
    }
  },
  {
    "name": "color.on.emphasis",
    "cssVar": "--sonar-color-on-emphasis",
    "type": "color",
    "description": "Text on saturated fills (accent or danger) that stays white in both themes, such as badges.",
    "themed": true,
    "light": {
      "reference": "palette.white",
      "resolved": "#FFFFFF",
      "css": {
        "--sonar-color-on-emphasis": "var(--sonar-palette-white)"
      }
    },
    "dark": {
      "reference": "palette.white",
      "resolved": "#FFFFFF",
      "css": {
        "--sonar-color-on-emphasis": "var(--sonar-palette-white)"
      }
    }
  },
  {
    "name": "color.danger",
    "cssVar": "--sonar-color-danger",
    "type": "color",
    "description": "Delays, overdue items, alerts and destructive actions: fills, icons and chart marks.",
    "group": "Semantic color roles, light theme. Components use these, never the palette.",
    "themed": true,
    "light": {
      "reference": "palette.red.50",
      "resolved": "#DD3535",
      "css": {
        "--sonar-color-danger": "var(--sonar-palette-red-50)"
      }
    },
    "dark": {
      "reference": "palette.red.56",
      "resolved": "#F04B4B",
      "css": {
        "--sonar-color-danger": "var(--sonar-palette-red-56)"
      }
    }
  },
  {
    "name": "color.danger.solid",
    "cssVar": "--sonar-color-danger-solid",
    "type": "color",
    "description": "Danger fill that carries text, such as notification badges: white on it reaches 4.5:1 in both themes.",
    "themed": true,
    "light": {
      "reference": "palette.red.50",
      "resolved": "#DD3535",
      "css": {
        "--sonar-color-danger-solid": "var(--sonar-palette-red-50)"
      }
    },
    "dark": {
      "reference": "palette.red.50",
      "resolved": "#DD3535",
      "css": {
        "--sonar-color-danger-solid": "var(--sonar-palette-red-50)"
      }
    }
  },
  {
    "name": "color.danger.container",
    "cssVar": "--sonar-color-danger-container",
    "type": "color",
    "description": "Background of alert notices.",
    "extensions": {
      "alpha": 0.12
    },
    "themed": true,
    "light": {
      "reference": "palette.red.50",
      "resolved": "#DD35351F",
      "css": {
        "--sonar-color-danger-container": "color-mix(in srgb, var(--sonar-palette-red-50) 12%, transparent)"
      }
    },
    "dark": {
      "reference": "palette.red.56",
      "resolved": "#F04B4B1C",
      "css": {
        "--sonar-color-danger-container": "color-mix(in srgb, var(--sonar-palette-red-56) 11%, transparent)"
      }
    }
  },
  {
    "name": "color.warning",
    "cssVar": "--sonar-color-warning",
    "type": "color",
    "description": "Pending and on-hold states: dots and icons.",
    "group": "Semantic color roles, light theme. Components use these, never the palette.",
    "themed": true,
    "light": {
      "reference": "palette.orange.77",
      "resolved": "#FFAC32",
      "css": {
        "--sonar-color-warning": "var(--sonar-palette-orange-77)"
      }
    },
    "dark": {
      "reference": "palette.orange.78",
      "resolved": "#FFB040",
      "css": {
        "--sonar-color-warning": "var(--sonar-palette-orange-78)"
      }
    }
  },
  {
    "name": "color.warning.container",
    "cssVar": "--sonar-color-warning-container",
    "type": "color",
    "description": "Background of warning notices.",
    "extensions": {
      "alpha": 0.16
    },
    "themed": true,
    "light": {
      "reference": "palette.orange.77",
      "resolved": "#FFAC3229",
      "css": {
        "--sonar-color-warning-container": "color-mix(in srgb, var(--sonar-palette-orange-77) 16%, transparent)"
      }
    },
    "dark": {
      "reference": "palette.orange.78",
      "resolved": "#FFB04029",
      "css": {
        "--sonar-color-warning-container": "color-mix(in srgb, var(--sonar-palette-orange-78) 16%, transparent)"
      }
    }
  },
  {
    "name": "color.success.container",
    "cssVar": "--sonar-color-success-container",
    "type": "color",
    "description": "Background of success notices.",
    "extensions": {
      "alpha": 0.1
    },
    "themed": true,
    "light": {
      "reference": "palette.green.50",
      "resolved": "#1A88381A",
      "css": {
        "--sonar-color-success-container": "color-mix(in srgb, var(--sonar-palette-green-50) 10%, transparent)"
      }
    },
    "dark": {
      "reference": "palette.green.67",
      "resolved": "#76B27C1A",
      "css": {
        "--sonar-color-success-container": "color-mix(in srgb, var(--sonar-palette-green-67) 10%, transparent)"
      }
    }
  },
  {
    "name": "color.text.strong",
    "cssVar": "--sonar-color-text-strong",
    "type": "color",
    "description": "Titles and key figures.",
    "group": "Emphasis levels, defined by contrast so both themes read alike. Every level meant to be read passes WCAG AA (4.5:1) on every surface, containers included. Disabled is exempt in WCAG, and is kept at 3:1 so it can still be read.",
    "themed": true,
    "light": {
      "reference": "palette.neutral.10",
      "resolved": "#171D17",
      "css": {
        "--sonar-color-text-strong": "var(--sonar-palette-neutral-10)"
      }
    },
    "dark": {
      "reference": "palette.neutral.92",
      "resolved": "#E3EADF",
      "css": {
        "--sonar-color-text-strong": "var(--sonar-palette-neutral-92)"
      }
    }
  },
  {
    "name": "color.text.default",
    "cssVar": "--sonar-color-text-default",
    "type": "color",
    "description": "Body text.",
    "group": "Emphasis levels, defined by contrast so both themes read alike. Every level meant to be read passes WCAG AA (4.5:1) on every surface, containers included. Disabled is exempt in WCAG, and is kept at 3:1 so it can still be read.",
    "themed": true,
    "light": {
      "reference": "palette.neutral.21",
      "resolved": "#2D352C",
      "css": {
        "--sonar-color-text-default": "var(--sonar-palette-neutral-21)"
      }
    },
    "dark": {
      "reference": "palette.neutral.90",
      "resolved": "#DDE5D9",
      "css": {
        "--sonar-color-text-default": "var(--sonar-palette-neutral-90)"
      }
    }
  },
  {
    "name": "color.text.secondary",
    "cssVar": "--sonar-color-text-secondary",
    "type": "color",
    "description": "Navigation at rest, secondary text and icons.",
    "group": "Emphasis levels, defined by contrast so both themes read alike. Every level meant to be read passes WCAG AA (4.5:1) on every surface, containers included. Disabled is exempt in WCAG, and is kept at 3:1 so it can still be read.",
    "themed": true,
    "light": {
      "reference": "palette.neutral-light.28",
      "resolved": "#3D453B",
      "css": {
        "--sonar-color-text-secondary": "var(--sonar-palette-neutral-light-28)"
      }
    },
    "dark": {
      "reference": "palette.neutral-dark.80",
      "resolved": "#C0C8BC",
      "css": {
        "--sonar-color-text-secondary": "var(--sonar-palette-neutral-dark-80)"
      }
    }
  },
  {
    "name": "color.text.muted",
    "cssVar": "--sonar-color-text-muted",
    "type": "color",
    "description": "Body text one step quieter than default, such as the reading of a search.",
    "group": "Emphasis levels, defined by contrast so both themes read alike. Every level meant to be read passes WCAG AA (4.5:1) on every surface, containers included. Disabled is exempt in WCAG, and is kept at 3:1 so it can still be read.",
    "themed": true,
    "light": {
      "reference": "palette.neutral-light.30",
      "resolved": "#424A40",
      "css": {
        "--sonar-color-text-muted": "var(--sonar-palette-neutral-light-30)"
      }
    },
    "dark": {
      "reference": "palette.neutral-dark.67",
      "resolved": "#9CA699",
      "css": {
        "--sonar-color-text-muted": "var(--sonar-palette-neutral-dark-67)"
      }
    }
  },
  {
    "name": "color.text.tertiary",
    "cssVar": "--sonar-color-text-tertiary",
    "type": "color",
    "description": "Placeholders, hints and inactive legend entries: the faintest text, still 4.5:1.",
    "group": "Emphasis levels, defined by contrast so both themes read alike. Every level meant to be read passes WCAG AA (4.5:1) on every surface, containers included. Disabled is exempt in WCAG, and is kept at 3:1 so it can still be read.",
    "themed": true,
    "light": {
      "reference": "palette.neutral.43",
      "resolved": "#5E685D",
      "css": {
        "--sonar-color-text-tertiary": "var(--sonar-palette-neutral-43)"
      }
    },
    "dark": {
      "reference": "palette.neutral.65",
      "resolved": "#97A194",
      "css": {
        "--sonar-color-text-tertiary": "var(--sonar-palette-neutral-65)"
      }
    }
  },
  {
    "name": "color.text.meta",
    "cssVar": "--sonar-color-text-meta",
    "type": "color",
    "description": "Metadata and small labels: dates, units, supporting figures. The same as tertiary in light, where the product’s own gray falls below 4.5:1; quieter than tertiary in dark.",
    "group": "Emphasis levels, defined by contrast so both themes read alike. Every level meant to be read passes WCAG AA (4.5:1) on every surface, containers included. Disabled is exempt in WCAG, and is kept at 3:1 so it can still be read.",
    "themed": true,
    "light": {
      "reference": "color.text.tertiary",
      "resolved": "#5E685D",
      "css": {
        "--sonar-color-text-meta": "var(--sonar-color-text-tertiary)"
      }
    },
    "dark": {
      "reference": "palette.neutral-dark.59",
      "resolved": "#889285",
      "css": {
        "--sonar-color-text-meta": "var(--sonar-palette-neutral-dark-59)"
      }
    }
  },
  {
    "name": "color.text.placeholder",
    "cssVar": "--sonar-color-text-placeholder",
    "type": "color",
    "description": "Placeholder text in fields. Placeholders are text, so they read at the tertiary level; a role of its own lets fields change it without touching tertiary.",
    "group": "Emphasis levels, defined by contrast so both themes read alike. Every level meant to be read passes WCAG AA (4.5:1) on every surface, containers included. Disabled is exempt in WCAG, and is kept at 3:1 so it can still be read.",
    "themed": true,
    "light": {
      "reference": "color.text.tertiary",
      "resolved": "#5E685D",
      "css": {
        "--sonar-color-text-placeholder": "var(--sonar-color-text-tertiary)"
      }
    },
    "dark": {
      "reference": "color.text.tertiary",
      "resolved": "#97A194",
      "css": {
        "--sonar-color-text-placeholder": "var(--sonar-color-text-tertiary)"
      }
    }
  },
  {
    "name": "color.text.disabled",
    "cssVar": "--sonar-color-text-disabled",
    "type": "color",
    "description": "Disabled controls. Exempt from contrast in WCAG; the control keeps its outline or shape so it still reads as present.",
    "group": "Emphasis levels, defined by contrast so both themes read alike. Every level meant to be read passes WCAG AA (4.5:1) on every surface, containers included. Disabled is exempt in WCAG, and is kept at 3:1 so it can still be read.",
    "themed": true,
    "light": {
      "reference": "palette.neutral-light.76",
      "resolved": "#B4BEB1",
      "css": {
        "--sonar-color-text-disabled": "var(--sonar-palette-neutral-light-76)"
      }
    },
    "dark": {
      "reference": "palette.neutral-dark.27",
      "resolved": "#3A433A",
      "css": {
        "--sonar-color-text-disabled": "var(--sonar-palette-neutral-dark-27)"
      }
    }
  },
  {
    "name": "color.text.inverse",
    "cssVar": "--sonar-color-text-inverse",
    "type": "color",
    "description": "Text on inverse surfaces: tooltips, toasts.",
    "group": "Emphasis levels, defined by contrast so both themes read alike. Every level meant to be read passes WCAG AA (4.5:1) on every surface, containers included. Disabled is exempt in WCAG, and is kept at 3:1 so it can still be read.",
    "themed": true,
    "light": {
      "reference": "palette.neutral.95",
      "resolved": "#EBF3E8",
      "css": {
        "--sonar-color-text-inverse": "var(--sonar-palette-neutral-95)"
      }
    },
    "dark": {
      "reference": "palette.neutral.12",
      "resolved": "#1B211B",
      "css": {
        "--sonar-color-text-inverse": "var(--sonar-palette-neutral-12)"
      }
    }
  },
  {
    "name": "color.text.accent",
    "cssVar": "--sonar-color-text-accent",
    "type": "color",
    "description": "Accent-colored text: positive figures, links.",
    "group": "Emphasis levels, defined by contrast so both themes read alike. Every level meant to be read passes WCAG AA (4.5:1) on every surface, containers included. Disabled is exempt in WCAG, and is kept at 3:1 so it can still be read.",
    "themed": true,
    "light": {
      "reference": "palette.green.46",
      "resolved": "#047E2F",
      "css": {
        "--sonar-color-text-accent": "var(--sonar-palette-green-46)"
      }
    },
    "dark": {
      "reference": "palette.green.67",
      "resolved": "#76B27C",
      "css": {
        "--sonar-color-text-accent": "var(--sonar-palette-green-67)"
      }
    }
  },
  {
    "name": "color.text.danger",
    "cssVar": "--sonar-color-text-danger",
    "type": "color",
    "description": "Danger-colored text.",
    "group": "Emphasis levels, defined by contrast so both themes read alike. Every level meant to be read passes WCAG AA (4.5:1) on every surface, containers included. Disabled is exempt in WCAG, and is kept at 3:1 so it can still be read.",
    "themed": true,
    "light": {
      "reference": "palette.red.46",
      "resolved": "#D1282D",
      "css": {
        "--sonar-color-text-danger": "var(--sonar-palette-red-46)"
      }
    },
    "dark": {
      "reference": "palette.red.64",
      "resolved": "#F97068",
      "css": {
        "--sonar-color-text-danger": "var(--sonar-palette-red-64)"
      }
    }
  },
  {
    "name": "color.text.warning",
    "cssVar": "--sonar-color-text-warning",
    "type": "color",
    "description": "Warning-colored text.",
    "group": "Emphasis levels, defined by contrast so both themes read alike. Every level meant to be read passes WCAG AA (4.5:1) on every surface, containers included. Disabled is exempt in WCAG, and is kept at 3:1 so it can still be read.",
    "themed": true,
    "light": {
      "reference": "palette.orange.46",
      "resolved": "#A15C00",
      "css": {
        "--sonar-color-text-warning": "var(--sonar-palette-orange-46)"
      }
    },
    "dark": {
      "reference": "palette.orange.73",
      "resolved": "#F2A23F",
      "css": {
        "--sonar-color-text-warning": "var(--sonar-palette-orange-73)"
      }
    }
  },
  {
    "name": "color.surface.canvas",
    "cssVar": "--sonar-color-surface-canvas",
    "type": "color",
    "description": "Behind the application frame.",
    "themed": true,
    "light": {
      "reference": "palette.gray.91",
      "resolved": "#E5E5E5",
      "css": {
        "--sonar-color-surface-canvas": "var(--sonar-palette-gray-91)"
      }
    },
    "dark": {
      "reference": "palette.neutral-dark.2",
      "resolved": "#050705",
      "css": {
        "--sonar-color-surface-canvas": "var(--sonar-palette-neutral-dark-2)"
      }
    }
  },
  {
    "name": "color.surface.page",
    "cssVar": "--sonar-color-surface-page",
    "type": "color",
    "description": "Dashboard background.",
    "themed": true,
    "light": {
      "reference": "palette.gray.97",
      "resolved": "#F6F6F6",
      "css": {
        "--sonar-color-surface-page": "var(--sonar-palette-gray-97)"
      }
    },
    "dark": {
      "reference": "palette.neutral-dark.6",
      "resolved": "#0F150F",
      "css": {
        "--sonar-color-surface-page": "var(--sonar-palette-neutral-dark-6)"
      }
    }
  },
  {
    "name": "color.surface.raised",
    "cssVar": "--sonar-color-surface-raised",
    "type": "color",
    "description": "Top bar and small raised controls.",
    "themed": true,
    "light": {
      "reference": "palette.white",
      "resolved": "#FFFFFF",
      "css": {
        "--sonar-color-surface-raised": "var(--sonar-palette-white)"
      }
    },
    "dark": {
      "reference": "palette.neutral-dark.12",
      "resolved": "#1B221B",
      "css": {
        "--sonar-color-surface-raised": "var(--sonar-palette-neutral-dark-12)"
      }
    }
  },
  {
    "name": "color.surface.card",
    "cssVar": "--sonar-color-surface-card",
    "type": "color",
    "description": "Cards, panels and sheets.",
    "themed": true,
    "light": {
      "reference": "palette.gray.99",
      "resolved": "#FCFCFC",
      "css": {
        "--sonar-color-surface-card": "var(--sonar-palette-gray-99)"
      }
    },
    "dark": {
      "reference": "palette.neutral-dark.14",
      "resolved": "#1F251F",
      "css": {
        "--sonar-color-surface-card": "var(--sonar-palette-neutral-dark-14)"
      }
    }
  },
  {
    "name": "color.surface.container",
    "cssVar": "--sonar-color-surface-container",
    "type": "color",
    "description": "Segmented tracks, neutral notices and chips.",
    "themed": true,
    "light": {
      "reference": "palette.neutral.91",
      "resolved": "#E0E8DC",
      "css": {
        "--sonar-color-surface-container": "var(--sonar-palette-neutral-91)"
      }
    },
    "dark": {
      "reference": "palette.neutral-tinted.19",
      "resolved": "#263126",
      "css": {
        "--sonar-color-surface-container": "var(--sonar-palette-neutral-tinted-19)"
      }
    }
  },
  {
    "name": "color.surface.container-low",
    "cssVar": "--sonar-color-surface-container-low",
    "type": "color",
    "description": "Fields, neutral notices, icon wells.",
    "themed": true,
    "light": {
      "reference": "palette.neutral.93",
      "resolved": "#E5EDE2",
      "css": {
        "--sonar-color-surface-container-low": "var(--sonar-palette-neutral-93)"
      }
    },
    "dark": {
      "reference": "palette.neutral.14",
      "resolved": "#1F251E",
      "css": {
        "--sonar-color-surface-container-low": "var(--sonar-palette-neutral-14)"
      }
    }
  },
  {
    "name": "color.surface.well",
    "cssVar": "--sonar-color-surface-well",
    "type": "color",
    "description": "Product thumbnails and add buttons.",
    "themed": true,
    "light": {
      "reference": "palette.neutral.93",
      "resolved": "#E5EDE2",
      "css": {
        "--sonar-color-surface-well": "var(--sonar-palette-neutral-93)"
      }
    },
    "dark": {
      "reference": "palette.neutral-dark.21",
      "resolved": "#2C342B",
      "css": {
        "--sonar-color-surface-well": "var(--sonar-palette-neutral-dark-21)"
      }
    }
  },
  {
    "name": "color.surface.well-hover",
    "cssVar": "--sonar-color-surface-well-hover",
    "type": "color",
    "description": "Hover on a control drawn on the well, such as New order in the Orders card (v38 .addbtn:hover). Since 1.1.",
    "themed": true,
    "light": {
      "reference": "palette.neutral.90",
      "resolved": "#DDE5D9",
      "css": {
        "--sonar-color-surface-well-hover": "var(--sonar-palette-neutral-90)"
      }
    },
    "dark": {
      "reference": "palette.neutral-dark.27",
      "resolved": "#3A433A",
      "css": {
        "--sonar-color-surface-well-hover": "var(--sonar-palette-neutral-dark-27)"
      }
    }
  },
  {
    "name": "color.surface.menu",
    "cssVar": "--sonar-color-surface-menu",
    "type": "color",
    "description": "Dropdown menus.",
    "themed": true,
    "light": {
      "reference": "palette.neutral.95",
      "resolved": "#EBF3E8",
      "css": {
        "--sonar-color-surface-menu": "var(--sonar-palette-neutral-95)"
      }
    },
    "dark": {
      "reference": "palette.neutral-dark.16",
      "resolved": "#222B22",
      "css": {
        "--sonar-color-surface-menu": "var(--sonar-palette-neutral-dark-16)"
      }
    }
  },
  {
    "name": "color.surface.hover",
    "cssVar": "--sonar-color-surface-hover",
    "type": "color",
    "description": "Row under the pointer.",
    "themed": true,
    "light": {
      "reference": "palette.neutral.96",
      "resolved": "#EEF6EB",
      "css": {
        "--sonar-color-surface-hover": "var(--sonar-palette-neutral-96)"
      }
    },
    "dark": {
      "reference": "palette.neutral-dark.15",
      "resolved": "#212921",
      "css": {
        "--sonar-color-surface-hover": "var(--sonar-palette-neutral-dark-15)"
      }
    }
  },
  {
    "name": "color.surface.selected",
    "cssVar": "--sonar-color-surface-selected",
    "type": "color",
    "description": "Row whose detail panel is open.",
    "themed": true,
    "light": {
      "reference": "palette.neutral.96",
      "resolved": "#EEF6EB",
      "css": {
        "--sonar-color-surface-selected": "var(--sonar-palette-neutral-96)"
      }
    },
    "dark": {
      "reference": "palette.neutral-dark.21",
      "resolved": "#2C342B",
      "css": {
        "--sonar-color-surface-selected": "var(--sonar-palette-neutral-dark-21)"
      }
    }
  },
  {
    "name": "color.surface.search-head",
    "cssVar": "--sonar-color-surface-search-head",
    "type": "color",
    "description": "Head row of search results: the status line (“Smart search · …”). Since 1.1.",
    "themed": true,
    "light": {
      "reference": "palette.neutral-light.96",
      "resolved": "#F1F4F0",
      "css": {
        "--sonar-color-surface-search-head": "var(--sonar-palette-neutral-light-96)"
      }
    },
    "dark": {
      "reference": "palette.neutral-dark.17",
      "resolved": "#252C25",
      "css": {
        "--sonar-color-surface-search-head": "var(--sonar-palette-neutral-dark-17)"
      }
    }
  },
  {
    "name": "color.surface.search-active",
    "cssVar": "--sonar-color-surface-search-active",
    "type": "color",
    "description": "The highlighted search result, the one Enter chooses. Since 1.1.",
    "themed": true,
    "light": {
      "reference": "palette.neutral-light.91",
      "resolved": "#E0E9DD",
      "css": {
        "--sonar-color-surface-search-active": "var(--sonar-palette-neutral-light-91)"
      }
    },
    "dark": {
      "reference": "palette.neutral-dark.23",
      "resolved": "#2E392E",
      "css": {
        "--sonar-color-surface-search-active": "var(--sonar-palette-neutral-dark-23)"
      }
    }
  },
  {
    "name": "color.surface.inverse",
    "cssVar": "--sonar-color-surface-inverse",
    "type": "color",
    "description": "Tooltips and toasts.",
    "themed": true,
    "light": {
      "reference": "palette.neutral-subdued.20",
      "resolved": "#2E312D",
      "css": {
        "--sonar-color-surface-inverse": "var(--sonar-palette-neutral-subdued-20)"
      }
    },
    "dark": {
      "reference": "palette.neutral-dark.88",
      "resolved": "#D5DFD2",
      "css": {
        "--sonar-color-surface-inverse": "var(--sonar-palette-neutral-dark-88)"
      }
    }
  },
  {
    "name": "color.scrim",
    "cssVar": "--sonar-color-scrim",
    "type": "color",
    "description": "Veil behind modal sheets and drawers.",
    "group": "Semantic color roles, light theme. Components use these, never the palette.",
    "extensions": {
      "alpha": 0.22
    },
    "themed": true,
    "light": {
      "reference": "palette.neutral-light.7",
      "resolved": "#14161838",
      "css": {
        "--sonar-color-scrim": "color-mix(in srgb, var(--sonar-palette-neutral-light-7) 22%, transparent)"
      }
    },
    "dark": {
      "reference": "palette.black",
      "resolved": "#0000008C",
      "css": {
        "--sonar-color-scrim": "color-mix(in srgb, var(--sonar-palette-black) 55%, transparent)"
      }
    }
  },
  {
    "name": "color.divider",
    "cssVar": "--sonar-color-divider",
    "type": "color",
    "description": "Rules between rows and blocks.",
    "group": "Semantic color roles, light theme. Components use these, never the palette.",
    "themed": true,
    "light": {
      "reference": "palette.neutral.88",
      "resolved": "#D7DFD4",
      "css": {
        "--sonar-color-divider": "var(--sonar-palette-neutral-88)"
      }
    },
    "dark": {
      "reference": "palette.neutral-dark.21",
      "resolved": "#2C342B",
      "css": {
        "--sonar-color-divider": "var(--sonar-palette-neutral-dark-21)"
      }
    }
  },
  {
    "name": "color.border.strong",
    "cssVar": "--sonar-color-border-strong",
    "type": "color",
    "description": "Outlined buttons, fields on hover.",
    "themed": true,
    "light": {
      "reference": "palette.neutral.10",
      "resolved": "#171D17",
      "css": {
        "--sonar-color-border-strong": "var(--sonar-palette-neutral-10)"
      }
    },
    "dark": {
      "reference": "palette.neutral.92",
      "resolved": "#E3EADF",
      "css": {
        "--sonar-color-border-strong": "var(--sonar-palette-neutral-92)"
      }
    }
  },
  {
    "name": "color.border.emphasis",
    "cssVar": "--sonar-color-border-emphasis",
    "type": "color",
    "description": "Dotted connectors, pending route segments, hover borders.",
    "themed": true,
    "light": {
      "reference": "palette.neutral.46",
      "resolved": "#667064",
      "css": {
        "--sonar-color-border-emphasis": "var(--sonar-palette-neutral-46)"
      }
    },
    "dark": {
      "reference": "palette.neutral.60",
      "resolved": "#899487",
      "css": {
        "--sonar-color-border-emphasis": "var(--sonar-palette-neutral-60)"
      }
    }
  },
  {
    "name": "color.border.control",
    "cssVar": "--sonar-color-border-control",
    "type": "color",
    "description": "Boundaries of fields, checkboxes and switches. At least 3:1 on card (WCAG 1.4.11).",
    "themed": true,
    "light": {
      "reference": "palette.neutral.59",
      "resolved": "#879184",
      "css": {
        "--sonar-color-border-control": "var(--sonar-palette-neutral-59)"
      }
    },
    "dark": {
      "reference": "palette.neutral-dark.48",
      "resolved": "#6C766A",
      "css": {
        "--sonar-color-border-control": "var(--sonar-palette-neutral-dark-48)"
      }
    }
  },
  {
    "name": "color.border.muted",
    "cssVar": "--sonar-color-border-muted",
    "type": "color",
    "description": "Sidebar separators.",
    "themed": true,
    "light": {
      "reference": "palette.neutral.76",
      "resolved": "#B5BEB2",
      "css": {
        "--sonar-color-border-muted": "var(--sonar-palette-neutral-76)"
      }
    },
    "dark": {
      "reference": "palette.neutral-dark.27",
      "resolved": "#3A433A",
      "css": {
        "--sonar-color-border-muted": "var(--sonar-palette-neutral-dark-27)"
      }
    }
  },
  {
    "name": "color.border.subtle",
    "cssVar": "--sonar-color-border-subtle",
    "type": "color",
    "description": "Dotted list separators.",
    "themed": true,
    "light": {
      "reference": "palette.neutral.84",
      "resolved": "#CBD4C8",
      "css": {
        "--sonar-color-border-subtle": "var(--sonar-palette-neutral-84)"
      }
    },
    "dark": {
      "reference": "palette.neutral-dark.22",
      "resolved": "#2E362E",
      "css": {
        "--sonar-color-border-subtle": "var(--sonar-palette-neutral-dark-22)"
      }
    }
  },
  {
    "name": "color.border.faint",
    "cssVar": "--sonar-color-border-faint",
    "type": "color",
    "description": "Separators inside grouped controls.",
    "themed": true,
    "light": {
      "reference": "palette.neutral.90",
      "resolved": "#DDE5D9",
      "css": {
        "--sonar-color-border-faint": "var(--sonar-palette-neutral-90)"
      }
    },
    "dark": {
      "reference": "palette.neutral.18",
      "resolved": "#272E26",
      "css": {
        "--sonar-color-border-faint": "var(--sonar-palette-neutral-18)"
      }
    }
  },
  {
    "name": "color.fill.strong",
    "cssVar": "--sonar-color-fill-strong",
    "type": "color",
    "description": "Today marker, text cursor.",
    "themed": true,
    "light": {
      "reference": "palette.neutral.10",
      "resolved": "#171D17",
      "css": {
        "--sonar-color-fill-strong": "var(--sonar-palette-neutral-10)"
      }
    },
    "dark": {
      "reference": "palette.neutral.92",
      "resolved": "#E3EADF",
      "css": {
        "--sonar-color-fill-strong": "var(--sonar-palette-neutral-92)"
      }
    }
  },
  {
    "name": "color.fill.faint",
    "cssVar": "--sonar-color-fill-faint",
    "type": "color",
    "description": "Neutral status dots, switch thumb.",
    "themed": true,
    "light": {
      "reference": "palette.neutral.59",
      "resolved": "#879184",
      "css": {
        "--sonar-color-fill-faint": "var(--sonar-palette-neutral-59)"
      }
    },
    "dark": {
      "reference": "palette.neutral.47",
      "resolved": "#687266",
      "css": {
        "--sonar-color-fill-faint": "var(--sonar-palette-neutral-47)"
      }
    }
  },
  {
    "name": "color.fill.muted",
    "cssVar": "--sonar-color-fill-muted",
    "type": "color",
    "description": "Inactive segments of bars and progress.",
    "themed": true,
    "light": {
      "reference": "palette.neutral.76",
      "resolved": "#B5BEB2",
      "css": {
        "--sonar-color-fill-muted": "var(--sonar-palette-neutral-76)"
      }
    },
    "dark": {
      "reference": "palette.neutral.27",
      "resolved": "#3A4239",
      "css": {
        "--sonar-color-fill-muted": "var(--sonar-palette-neutral-27)"
      }
    }
  },
  {
    "name": "color.fill.subtle",
    "cssVar": "--sonar-color-fill-subtle",
    "type": "color",
    "description": "Disabled buttons, calendar dots.",
    "themed": true,
    "light": {
      "reference": "palette.neutral.84",
      "resolved": "#CBD4C8",
      "css": {
        "--sonar-color-fill-subtle": "var(--sonar-palette-neutral-84)"
      }
    },
    "dark": {
      "reference": "palette.neutral.22",
      "resolved": "#2F372E",
      "css": {
        "--sonar-color-fill-subtle": "var(--sonar-palette-neutral-22)"
      }
    }
  },
  {
    "name": "color.state.hover",
    "cssVar": "--sonar-color-state-hover",
    "type": "color",
    "description": "State layer for hover on icon buttons and list items.",
    "extensions": {
      "alpha": 0.08
    },
    "themed": true,
    "light": {
      "reference": "palette.green.50",
      "resolved": "#1A883814",
      "css": {
        "--sonar-color-state-hover": "color-mix(in srgb, var(--sonar-palette-green-50) 8%, transparent)"
      }
    },
    "dark": {
      "reference": "palette.green.81",
      "resolved": "#97D99C1A",
      "css": {
        "--sonar-color-state-hover": "color-mix(in srgb, var(--sonar-palette-green-81) 10%, transparent)"
      }
    }
  },
  {
    "name": "color.state.pressed",
    "cssVar": "--sonar-color-state-pressed",
    "type": "color",
    "description": "State layer for pressed and active.",
    "extensions": {
      "alpha": 0.12
    },
    "themed": true,
    "light": {
      "reference": "palette.green.50",
      "resolved": "#1A88381F",
      "css": {
        "--sonar-color-state-pressed": "color-mix(in srgb, var(--sonar-palette-green-50) 12%, transparent)"
      }
    },
    "dark": {
      "reference": "palette.green.81",
      "resolved": "#97D99C29",
      "css": {
        "--sonar-color-state-pressed": "color-mix(in srgb, var(--sonar-palette-green-81) 16%, transparent)"
      }
    }
  },
  {
    "name": "color.state.on-accent-hover",
    "cssVar": "--sonar-color-state-on-accent-hover",
    "type": "color",
    "description": "State layer for hover on accent fills.",
    "extensions": {
      "alpha": 0.1
    },
    "themed": true,
    "light": {
      "reference": "palette.white",
      "resolved": "#FFFFFF1A",
      "css": {
        "--sonar-color-state-on-accent-hover": "color-mix(in srgb, var(--sonar-palette-white) 10%, transparent)"
      }
    },
    "dark": {
      "reference": "palette.black",
      "resolved": "#0000001A",
      "css": {
        "--sonar-color-state-on-accent-hover": "color-mix(in srgb, var(--sonar-palette-black) 10%, transparent)"
      }
    }
  },
  {
    "name": "color.state.on-accent-pressed",
    "cssVar": "--sonar-color-state-on-accent-pressed",
    "type": "color",
    "description": "State layer for pressed on accent fills.",
    "extensions": {
      "alpha": 0.12
    },
    "themed": true,
    "light": {
      "reference": "palette.white",
      "resolved": "#FFFFFF1F",
      "css": {
        "--sonar-color-state-on-accent-pressed": "color-mix(in srgb, var(--sonar-palette-white) 12%, transparent)"
      }
    },
    "dark": {
      "reference": "palette.black",
      "resolved": "#0000001F",
      "css": {
        "--sonar-color-state-on-accent-pressed": "color-mix(in srgb, var(--sonar-palette-black) 12%, transparent)"
      }
    }
  },
  {
    "name": "color.chart.primary",
    "cssVar": "--sonar-color-chart-primary",
    "type": "color",
    "description": "First series.",
    "themed": true,
    "light": {
      "reference": "color.accent",
      "resolved": "#1A8838",
      "css": {
        "--sonar-color-chart-primary": "var(--sonar-color-accent)"
      }
    },
    "dark": {
      "reference": "color.accent",
      "resolved": "#76B27C",
      "css": {
        "--sonar-color-chart-primary": "var(--sonar-color-accent)"
      }
    }
  },
  {
    "name": "color.chart.secondary",
    "cssVar": "--sonar-color-chart-secondary",
    "type": "color",
    "description": "Second series (cumulative).",
    "themed": true,
    "light": {
      "reference": "palette.black",
      "resolved": "#000000",
      "css": {
        "--sonar-color-chart-secondary": "var(--sonar-palette-black)"
      }
    },
    "dark": {
      "reference": "palette.neutral-dark.90",
      "resolved": "#DCE5D9",
      "css": {
        "--sonar-color-chart-secondary": "var(--sonar-palette-neutral-dark-90)"
      }
    }
  },
  {
    "name": "color.chart.alert",
    "cssVar": "--sonar-color-chart-alert",
    "type": "color",
    "description": "Values that need attention, such as stock on hold.",
    "themed": true,
    "light": {
      "reference": "color.danger",
      "resolved": "#DD3535",
      "css": {
        "--sonar-color-chart-alert": "var(--sonar-color-danger)"
      }
    },
    "dark": {
      "reference": "color.danger",
      "resolved": "#F04B4B",
      "css": {
        "--sonar-color-chart-alert": "var(--sonar-color-danger)"
      }
    }
  },
  {
    "name": "color.chart.rest",
    "cssVar": "--sonar-color-chart-rest",
    "type": "color",
    "description": "Remainder of a whole: the rest of a donut or bar.",
    "themed": true,
    "light": {
      "reference": "palette.neutral.76",
      "resolved": "#B5BEB2",
      "css": {
        "--sonar-color-chart-rest": "var(--sonar-palette-neutral-76)"
      }
    },
    "dark": {
      "reference": "palette.neutral-tinted.36",
      "resolved": "#4C584A",
      "css": {
        "--sonar-color-chart-rest": "var(--sonar-palette-neutral-tinted-36)"
      }
    }
  },
  {
    "name": "color.chart.grid",
    "cssVar": "--sonar-color-chart-grid",
    "type": "color",
    "description": "Grid lines.",
    "themed": true,
    "light": {
      "reference": "palette.neutral.90",
      "resolved": "#DDE5D9",
      "css": {
        "--sonar-color-chart-grid": "var(--sonar-palette-neutral-90)"
      }
    },
    "dark": {
      "reference": "palette.neutral.21",
      "resolved": "#2D352C",
      "css": {
        "--sonar-color-chart-grid": "var(--sonar-palette-neutral-21)"
      }
    }
  },
  {
    "name": "color.chart.axis",
    "cssVar": "--sonar-color-chart-axis",
    "type": "color",
    "description": "Axis figures.",
    "themed": true,
    "light": {
      "reference": "color.text.default",
      "resolved": "#2D352C",
      "css": {
        "--sonar-color-chart-axis": "var(--sonar-color-text-default)"
      }
    },
    "dark": {
      "reference": "color.text.default",
      "resolved": "#DDE5D9",
      "css": {
        "--sonar-color-chart-axis": "var(--sonar-color-text-default)"
      }
    }
  },
  {
    "name": "color.chart.tip-shadow",
    "cssVar": "--sonar-color-chart-tip-shadow",
    "type": "color",
    "description": "The chart bubble’s drop shadow; none in dark, where the bubble is light.",
    "extensions": {
      "alpha": 0.12
    },
    "themed": true,
    "light": {
      "reference": "palette.black",
      "resolved": "#0000001F",
      "css": {
        "--sonar-color-chart-tip-shadow": "color-mix(in srgb, var(--sonar-palette-black) 12%, transparent)"
      }
    },
    "dark": {
      "reference": "palette.black",
      "resolved": "#00000000",
      "css": {
        "--sonar-color-chart-tip-shadow": "color-mix(in srgb, var(--sonar-palette-black) 0%, transparent)"
      }
    }
  },
  {
    "name": "color.focus",
    "cssVar": "--sonar-color-focus",
    "type": "color",
    "description": "Keyboard focus ring. At least 3:1 on every surface (WCAG 2.4.13).",
    "group": "Semantic color roles, light theme. Components use these, never the palette.",
    "themed": true,
    "light": {
      "reference": "color.accent",
      "resolved": "#1A8838",
      "css": {
        "--sonar-color-focus": "var(--sonar-color-accent)"
      }
    },
    "dark": {
      "reference": "color.accent",
      "resolved": "#76B27C",
      "css": {
        "--sonar-color-focus": "var(--sonar-color-accent)"
      }
    }
  },
  {
    "name": "color.scrollbar",
    "cssVar": "--sonar-color-scrollbar",
    "type": "color",
    "description": "Scroll indicator thumb.",
    "group": "Semantic color roles, light theme. Components use these, never the palette.",
    "themed": true,
    "light": {
      "reference": "palette.neutral.90",
      "resolved": "#DDE5D9",
      "css": {
        "--sonar-color-scrollbar": "var(--sonar-palette-neutral-90)"
      }
    },
    "dark": {
      "reference": "palette.neutral.18",
      "resolved": "#272E26",
      "css": {
        "--sonar-color-scrollbar": "var(--sonar-palette-neutral-18)"
      }
    }
  },
  {
    "name": "elevation.1",
    "cssVar": "--sonar-elevation-1",
    "type": "shadow",
    "description": "Cards.",
    "group": "Four levels, as in Material 3, plus the edges of panels and sheets. Shadows are tinted with the darkest neutral in light mode and pure black in dark mode, where they are stronger to stay visible.",
    "themed": true,
    "light": {
      "resolved": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.0902,
              0.1137,
              0.0863
            ],
            "alpha": 0.064
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 1,
            "unit": "px"
          },
          "blur": {
            "value": 2,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          }
        },
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.0902,
              0.1137,
              0.0863
            ],
            "alpha": 0.04
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 1,
            "unit": "px"
          },
          "blur": {
            "value": 8,
            "unit": "px"
          },
          "spread": {
            "value": 2,
            "unit": "px"
          }
        }
      ],
      "css": {
        "--sonar-elevation-1": "0 1px 2px 0 rgb(23 29 22 / 0.064), 0 1px 8px 2px rgb(23 29 22 / 0.04)"
      }
    },
    "dark": {
      "resolved": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0,
              0,
              0
            ],
            "alpha": 0.282
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 1,
            "unit": "px"
          },
          "blur": {
            "value": 2,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          }
        },
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0,
              0,
              0
            ],
            "alpha": 0.176
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 1,
            "unit": "px"
          },
          "blur": {
            "value": 8,
            "unit": "px"
          },
          "spread": {
            "value": 2,
            "unit": "px"
          }
        }
      ],
      "css": {
        "--sonar-elevation-1": "0 1px 2px 0 rgb(0 0 0 / 0.282), 0 1px 8px 2px rgb(0 0 0 / 0.176)"
      }
    }
  },
  {
    "name": "elevation.2",
    "cssVar": "--sonar-elevation-2",
    "type": "shadow",
    "description": "Menus and map controls.",
    "group": "Four levels, as in Material 3, plus the edges of panels and sheets. Shadows are tinted with the darkest neutral in light mode and pure black in dark mode, where they are stronger to stay visible.",
    "themed": true,
    "light": {
      "resolved": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.0902,
              0.1137,
              0.0863
            ],
            "alpha": 0.128
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 1,
            "unit": "px"
          },
          "blur": {
            "value": 2,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          }
        },
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.0902,
              0.1137,
              0.0863
            ],
            "alpha": 0.08
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 2,
            "unit": "px"
          },
          "blur": {
            "value": 6,
            "unit": "px"
          },
          "spread": {
            "value": 2,
            "unit": "px"
          }
        }
      ],
      "css": {
        "--sonar-elevation-2": "0 1px 2px 0 rgb(23 29 22 / 0.128), 0 2px 6px 2px rgb(23 29 22 / 0.08)"
      }
    },
    "dark": {
      "resolved": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0,
              0,
              0
            ],
            "alpha": 0.563
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 1,
            "unit": "px"
          },
          "blur": {
            "value": 2,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          }
        },
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0,
              0,
              0
            ],
            "alpha": 0.352
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 2,
            "unit": "px"
          },
          "blur": {
            "value": 6,
            "unit": "px"
          },
          "spread": {
            "value": 2,
            "unit": "px"
          }
        }
      ],
      "css": {
        "--sonar-elevation-2": "0 1px 2px 0 rgb(0 0 0 / 0.563), 0 2px 6px 2px rgb(0 0 0 / 0.352)"
      }
    }
  },
  {
    "name": "elevation.3",
    "cssVar": "--sonar-elevation-3",
    "type": "shadow",
    "description": "Dialogs and toasts.",
    "group": "Four levels, as in Material 3, plus the edges of panels and sheets. Shadows are tinted with the darkest neutral in light mode and pure black in dark mode, where they are stronger to stay visible.",
    "themed": true,
    "light": {
      "resolved": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.0902,
              0.1137,
              0.0863
            ],
            "alpha": 0.16
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 1,
            "unit": "px"
          },
          "blur": {
            "value": 2,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          }
        },
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.0902,
              0.1137,
              0.0863
            ],
            "alpha": 0.1
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 4,
            "unit": "px"
          },
          "blur": {
            "value": 8,
            "unit": "px"
          },
          "spread": {
            "value": 2,
            "unit": "px"
          }
        }
      ],
      "css": {
        "--sonar-elevation-3": "0 1px 2px 0 rgb(23 29 22 / 0.16), 0 4px 8px 2px rgb(23 29 22 / 0.1)"
      }
    },
    "dark": {
      "resolved": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0,
              0,
              0
            ],
            "alpha": 0.704
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 1,
            "unit": "px"
          },
          "blur": {
            "value": 2,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          }
        },
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0,
              0,
              0
            ],
            "alpha": 0.44
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 4,
            "unit": "px"
          },
          "blur": {
            "value": 8,
            "unit": "px"
          },
          "spread": {
            "value": 2,
            "unit": "px"
          }
        }
      ],
      "css": {
        "--sonar-elevation-3": "0 1px 2px 0 rgb(0 0 0 / 0.704), 0 4px 8px 2px rgb(0 0 0 / 0.44)"
      }
    }
  },
  {
    "name": "elevation.4",
    "cssVar": "--sonar-elevation-4",
    "type": "shadow",
    "description": "A card lifted while it is dragged.",
    "group": "Four levels, as in Material 3, plus the edges of panels and sheets. Shadows are tinted with the darkest neutral in light mode and pure black in dark mode, where they are stronger to stay visible.",
    "themed": true,
    "light": {
      "resolved": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.0902,
              0.1137,
              0.0863
            ],
            "alpha": 0.192
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 1,
            "unit": "px"
          },
          "blur": {
            "value": 2,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          }
        },
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.0902,
              0.1137,
              0.0863
            ],
            "alpha": 0.12
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 6,
            "unit": "px"
          },
          "blur": {
            "value": 10,
            "unit": "px"
          },
          "spread": {
            "value": 4,
            "unit": "px"
          }
        }
      ],
      "css": {
        "--sonar-elevation-4": "0 1px 2px 0 rgb(23 29 22 / 0.192), 0 6px 10px 4px rgb(23 29 22 / 0.12)"
      }
    },
    "dark": {
      "resolved": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0,
              0,
              0
            ],
            "alpha": 0.845
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 1,
            "unit": "px"
          },
          "blur": {
            "value": 2,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          }
        },
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0,
              0,
              0
            ],
            "alpha": 0.528
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 6,
            "unit": "px"
          },
          "blur": {
            "value": 10,
            "unit": "px"
          },
          "spread": {
            "value": 4,
            "unit": "px"
          }
        }
      ],
      "css": {
        "--sonar-elevation-4": "0 1px 2px 0 rgb(0 0 0 / 0.845), 0 6px 10px 4px rgb(0 0 0 / 0.528)"
      }
    }
  },
  {
    "name": "elevation.panel",
    "cssVar": "--sonar-elevation-panel",
    "type": "shadow",
    "description": "Side panels entering from the end.",
    "group": "Four levels, as in Material 3, plus the edges of panels and sheets. Shadows are tinted with the darkest neutral in light mode and pure black in dark mode, where they are stronger to stay visible.",
    "themed": true,
    "light": {
      "resolved": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.0902,
              0.1137,
              0.0863
            ],
            "alpha": 0.2
          },
          "offsetX": {
            "value": -6,
            "unit": "px"
          },
          "offsetY": {
            "value": 0,
            "unit": "px"
          },
          "blur": {
            "value": 18,
            "unit": "px"
          },
          "spread": {
            "value": -7,
            "unit": "px"
          }
        }
      ],
      "css": {
        "--sonar-elevation-panel": "-6px 0 18px -7px rgb(23 29 22 / 0.2)"
      }
    },
    "dark": {
      "resolved": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.1059,
              0.1294,
              0.1059
            ],
            "hex": "#1B211B"
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 1,
            "unit": "px"
          },
          "blur": {
            "value": 0,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": true
        },
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.1059,
              0.1294,
              0.1059
            ],
            "hex": "#1B211B"
          },
          "offsetX": {
            "value": -1,
            "unit": "px"
          },
          "offsetY": {
            "value": 0,
            "unit": "px"
          },
          "blur": {
            "value": 0,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          }
        },
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0,
              0,
              0
            ],
            "alpha": 0.75
          },
          "offsetX": {
            "value": -16,
            "unit": "px"
          },
          "offsetY": {
            "value": 0,
            "unit": "px"
          },
          "blur": {
            "value": 36,
            "unit": "px"
          },
          "spread": {
            "value": -14,
            "unit": "px"
          }
        }
      ],
      "css": {
        "--sonar-elevation-panel": "inset 0 1px 0 0 var(--sonar-palette-neutral-12), -1px 0 0 0 var(--sonar-palette-neutral-12), -16px 0 36px -14px rgb(0 0 0 / 0.75)"
      }
    }
  },
  {
    "name": "elevation.sheet",
    "cssVar": "--sonar-elevation-sheet",
    "type": "shadow",
    "description": "Sheets that hang from the top bar, such as Customize overview: a short shadow below the sheet only. Restored in 1.0.0-alpha.14.",
    "group": "Four levels, as in Material 3, plus the edges of panels and sheets. Shadows are tinted with the darkest neutral in light mode and pure black in dark mode, where they are stronger to stay visible.",
    "themed": true,
    "light": {
      "resolved": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.0902,
              0.1137,
              0.0863
            ],
            "alpha": 0.2
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 8,
            "unit": "px"
          },
          "blur": {
            "value": 18,
            "unit": "px"
          },
          "spread": {
            "value": -7,
            "unit": "px"
          }
        }
      ],
      "css": {
        "--sonar-elevation-sheet": "0 8px 18px -7px rgb(23 29 22 / 0.2)"
      }
    },
    "dark": {
      "resolved": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0,
              0,
              0
            ],
            "alpha": 0.7
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 8,
            "unit": "px"
          },
          "blur": {
            "value": 18,
            "unit": "px"
          },
          "spread": {
            "value": -7,
            "unit": "px"
          }
        }
      ],
      "css": {
        "--sonar-elevation-sheet": "0 8px 18px -7px rgb(0 0 0 / 0.7)"
      }
    }
  },
  {
    "name": "elevation.sheet-up",
    "cssVar": "--sonar-elevation-sheet-up",
    "type": "shadow",
    "description": "Bottom sheets and the navigation drawer on phones.",
    "group": "Four levels, as in Material 3, plus the edges of panels and sheets. Shadows are tinted with the darkest neutral in light mode and pure black in dark mode, where they are stronger to stay visible.",
    "themed": true,
    "light": {
      "resolved": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0,
              0,
              0
            ],
            "alpha": 0.25
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": -12,
            "unit": "px"
          },
          "blur": {
            "value": 32,
            "unit": "px"
          },
          "spread": {
            "value": -8,
            "unit": "px"
          }
        }
      ],
      "css": {
        "--sonar-elevation-sheet-up": "0 -12px 32px -8px rgb(0 0 0 / 0.25)"
      }
    },
    "dark": {
      "resolved": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0,
              0,
              0
            ],
            "alpha": 0.25
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": -12,
            "unit": "px"
          },
          "blur": {
            "value": 32,
            "unit": "px"
          },
          "spread": {
            "value": -8,
            "unit": "px"
          }
        }
      ],
      "css": {
        "--sonar-elevation-sheet-up": "0 -12px 32px -8px rgb(0 0 0 / 0.25)"
      }
    }
  },
  {
    "name": "elevation.top-bar",
    "cssVar": "--sonar-elevation-top-bar",
    "type": "shadow",
    "description": "The top bar over the page: a faint shadow under it.",
    "group": "Four levels, as in Material 3, plus the edges of panels and sheets. Shadows are tinted with the darkest neutral in light mode and pure black in dark mode, where they are stronger to stay visible.",
    "themed": true,
    "light": {
      "resolved": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0,
              0,
              0
            ],
            "alpha": 0.035
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 2,
            "unit": "px"
          },
          "blur": {
            "value": 8,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          }
        }
      ],
      "css": {
        "--sonar-elevation-top-bar": "0 2px 8px 0 rgb(0 0 0 / 0.035)"
      }
    },
    "dark": {
      "resolved": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.1059,
              0.1294,
              0.1059
            ],
            "hex": "#1B211B"
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 1,
            "unit": "px"
          },
          "blur": {
            "value": 0,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          }
        }
      ],
      "css": {
        "--sonar-elevation-top-bar": "0 1px 0 0 var(--sonar-palette-neutral-12)"
      }
    }
  },
  {
    "name": "elevation.sidebar",
    "cssVar": "--sonar-elevation-sidebar",
    "type": "shadow",
    "description": "The edge of the sidebar against the page: none in light, where the surfaces already differ.",
    "group": "Four levels, as in Material 3, plus the edges of panels and sheets. Shadows are tinted with the darkest neutral in light mode and pure black in dark mode, where they are stronger to stay visible.",
    "themed": true,
    "light": {
      "resolved": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0,
              0,
              0
            ],
            "alpha": 0
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 0,
            "unit": "px"
          },
          "blur": {
            "value": 0,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          }
        }
      ],
      "css": {
        "--sonar-elevation-sidebar": "0 0 0 0 rgb(0 0 0 / 0)"
      }
    },
    "dark": {
      "resolved": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.0902,
              0.1137,
              0.0902
            ],
            "hex": "#171D17"
          },
          "offsetX": {
            "value": 1,
            "unit": "px"
          },
          "offsetY": {
            "value": 0,
            "unit": "px"
          },
          "blur": {
            "value": 0,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          }
        }
      ],
      "css": {
        "--sonar-elevation-sidebar": "1px 0 0 0 var(--sonar-palette-neutral-10)"
      }
    }
  },
  {
    "name": "elevation.edit-bar",
    "cssVar": "--sonar-elevation-edit-bar",
    "type": "shadow",
    "description": "The bar of Edit layout at the foot of the window: level 2.",
    "group": "Four levels, as in Material 3, plus the edges of panels and sheets. Shadows are tinted with the darkest neutral in light mode and pure black in dark mode, where they are stronger to stay visible.",
    "themed": true,
    "light": {
      "resolved": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.0902,
              0.1137,
              0.0863
            ],
            "alpha": 0.128
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 1,
            "unit": "px"
          },
          "blur": {
            "value": 2,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          }
        },
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.0902,
              0.1137,
              0.0863
            ],
            "alpha": 0.08
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 2,
            "unit": "px"
          },
          "blur": {
            "value": 6,
            "unit": "px"
          },
          "spread": {
            "value": 2,
            "unit": "px"
          }
        }
      ],
      "css": {
        "--sonar-elevation-edit-bar": "0 1px 2px 0 rgb(23 29 22 / 0.128), 0 2px 6px 2px rgb(23 29 22 / 0.08)"
      }
    },
    "dark": {
      "resolved": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.1059,
              0.1294,
              0.1059
            ],
            "hex": "#1B211B"
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": -1,
            "unit": "px"
          },
          "blur": {
            "value": 0,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          }
        }
      ],
      "css": {
        "--sonar-elevation-edit-bar": "0 -1px 0 0 var(--sonar-palette-neutral-12)"
      }
    }
  }
]