/**
 * Do not edit directly, this file was auto-generated.
 */

@property --kds-core-color-neutral-25 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(0, 0%, 99%);
}

@property --kds-core-color-neutral-50 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(0, 0%, 98%);
}

@property --kds-core-color-neutral-100 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(0, 0%, 94.1%);
}

@property --kds-core-color-neutral-175 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(0, 0%, 90.2%);
}

@property --kds-core-color-neutral-250 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(0, 0%, 72.5%);
}

@property --kds-core-color-neutral-275 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(0, 0%, 64%);
}

@property --kds-core-color-neutral-325 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(0, 0%, 48.2%);
}

@property --kds-core-color-neutral-375 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(0, 0%, 43%);
}

@property --kds-core-color-neutral-400 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(0, 0%, 32.2%);
}

@property --kds-core-color-neutral-475 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(0, 0%, 22%);
}

@property --kds-core-color-neutral-550 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(0, 0%, 18.8%);
}

@property --kds-core-color-neutral-650 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(0, 0%, 15.7%);
}

@property --kds-core-color-neutral-725 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(0, 0%, 12.9%);
}

@property --kds-core-color-neutral-800 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(0, 0%, 11.4%);
}

@property --kds-core-color-neutral-875 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(0, 0%, 10.2%);
}

@property --kds-core-color-red-25 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(0, 55.6%, 98.2%);
}

@property --kds-core-color-red-50 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(0, 100%, 97.1%);
}

@property --kds-core-color-red-100 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(1.5, 100%, 92.4%);
}

@property --kds-core-color-red-175 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(3.4, 100%, 86.1%);
}

@property --kds-core-color-red-250 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(3.5, 100%, 79.6%);
}

@property --kds-core-color-red-325 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(2.6, 100%, 72.4%);
}

@property --kds-core-color-red-400 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(0, 100%, 66.1%);
}

@property --kds-core-color-red-435 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(359.6, 84.3%, 62.5%);
}

@property --kds-core-color-red-475 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(356.3, 76.8%, 54.3%);
}

@property --kds-core-color-red-550 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(353, 74.7%, 44.9%);
}

@property --kds-core-color-red-650 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(348.8, 90.9%, 34.5%);
}

@property --kds-core-color-red-725 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(347.6, 97.1%, 27.3%);
}

@property --kds-core-color-red-800 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(348, 94.3%, 20.8%);
}

@property --kds-core-color-red-875 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(352.6, 84.4%, 15.1%);
}

@property --kds-core-color-orange-25 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(34.3, 53.8%, 97.5%);
}

@property --kds-core-color-orange-50 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(30, 95.2%, 91.8%);
}

@property --kds-core-color-orange-100 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(31, 100%, 82.5%);
}

@property --kds-core-color-orange-175 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(30.8, 79.3%, 73.5%);
}

@property --kds-core-color-orange-250 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(31.2, 82.8%, 65.9%);
}

@property --kds-core-color-orange-325 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(30, 80.4%, 60%);
}

@property --kds-core-color-orange-375 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(29.3, 88%, 59.8%);
}

@property --kds-core-color-orange-400 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(27.3, 67.8%, 54.9%);
}

@property --kds-core-color-orange-475 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(24.7, 58.7%, 50.6%);
}

@property --kds-core-color-orange-550 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(21.9, 60.4%, 44.5%);
}

@property --kds-core-color-orange-650 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(19, 63.1%, 38.2%);
}

@property --kds-core-color-orange-725 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(16, 66.9%, 30.8%);
}

@property --kds-core-color-orange-800 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(13.1, 66.1%, 23.1%);
}

@property --kds-core-color-orange-875 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(13.2, 57.7%, 13.9%);
}

@property --kds-core-color-yellow-25 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(42.9, 77.8%, 96.5%);
}

@property --kds-core-color-yellow-50 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(42.9, 100%, 89%);
}

@property --kds-core-color-yellow-100 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(45.4, 100%, 77.5%);
}

@property --kds-core-color-yellow-175 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(47.6, 100%, 67.6%);
}

@property --kds-core-color-yellow-250 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(50.8, 100%, 50%);
}

@property --kds-core-color-yellow-325 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(51.1, 99.2%, 46.9%);
}

@property --kds-core-color-yellow-400 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(49.1, 99.1%, 43.7%);
}

@property --kds-core-color-yellow-475 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(47, 100%, 39%);
}

@property --kds-core-color-yellow-550 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(45.6, 100%, 33.5%);
}

@property --kds-core-color-yellow-650 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(43.9, 100%, 26.3%);
}

@property --kds-core-color-yellow-725 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(43.1, 100%, 18.8%);
}

@property --kds-core-color-yellow-800 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(44.3, 94.2%, 13.5%);
}

@property --kds-core-color-yellow-875 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(50.8, 100%, 7.6%);
}

@property --kds-core-color-green-25 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(125.5, 64.7%, 96.7%);
}

@property --kds-core-color-green-50 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(120, 95.3%, 91.6%);
}

@property --kds-core-color-green-100 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(115.5, 71.7%, 82%);
}

@property --kds-core-color-green-175 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(112, 56.5%, 71.2%);
}

@property --kds-core-color-green-250 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(109, 47.2%, 61.4%);
}

@property --kds-core-color-green-325 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(106.5, 42.6%, 54.9%);
}

@property --kds-core-color-green-400 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(107.4, 42.2%, 44.1%);
}

@property --kds-core-color-green-475 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(107.6, 46%, 37.1%);
}

@property --kds-core-color-green-550 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(111.3, 47.5%, 31.4%);
}

@property --kds-core-color-green-650 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(116.1, 46.6%, 25.7%);
}

@property --kds-core-color-green-725 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(123.7, 46.7%, 20.6%);
}

@property --kds-core-color-green-800 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(132.3, 52%, 14.7%);
}

@property --kds-core-color-green-875 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(139.3, 56%, 9.8%);
}

@property --kds-core-color-teal-25 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(165, 80%, 96.1%);
}

@property --kds-core-color-teal-50 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(165.6, 67.6%, 92.7%);
}

@property --kds-core-color-teal-100 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(168, 46.7%, 85.3%);
}

@property --kds-core-color-teal-175 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(168.8, 34.4%, 75.5%);
}

@property --kds-core-color-teal-250 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(169.8, 30.6%, 66.1%);
}

@property --kds-core-color-teal-325 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(170.2, 27.6%, 56.7%);
}

@property --kds-core-color-teal-400 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(171.8, 27%, 47.8%);
}

@property --kds-core-color-teal-475 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(173.4, 37.1%, 38.6%);
}

@property --kds-core-color-teal-550 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(174.4, 47.8%, 30.8%);
}

@property --kds-core-color-teal-650 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(176.1, 66.7%, 22.4%);
}

@property --kds-core-color-teal-725 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(176.7, 82%, 17.5%);
}

@property --kds-core-color-teal-800 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(174.5, 93.2%, 11.6%);
}

@property --kds-core-color-teal-875 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(174.4, 72.7%, 8.6%);
}

@property --kds-core-color-blue-25 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(225, 40%, 98%);
}

@property --kds-core-color-blue-50 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(216.7, 100%, 96.5%);
}

@property --kds-core-color-blue-100 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(215.7, 100%, 91.8%);
}

@property --kds-core-color-blue-175 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(214.5, 100%, 84.3%);
}

@property --kds-core-color-blue-250 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(213.6, 91.6%, 76.7%);
}

@property --kds-core-color-blue-325 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(212.1, 78.2%, 67.6%);
}

@property --kds-core-color-blue-400 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(211.3, 67.3%, 59.2%);
}

@property --kds-core-color-blue-475 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(209.4, 57.3%, 49.6%);
}

@property --kds-core-color-blue-550 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(208.2, 62.9%, 41.2%);
}

@property --kds-core-color-blue-650 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(208.3, 60.5%, 33.7%);
}

@property --kds-core-color-blue-725 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(210, 50%, 27.5%);
}

@property --kds-core-color-blue-800 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(209.4, 49.5%, 20.2%);
}

@property --kds-core-color-blue-875 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(209.3, 59.4%, 13.5%);
}

@property --kds-core-color-purple-25 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(313.8, 39.4%, 93.5%);
}

@property --kds-core-color-purple-50 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(315.0, 41.7%, 90.6%);
}

@property --kds-core-color-purple-100 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(317.8, 42.9%, 87.6%);
}

@property --kds-core-color-purple-175 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(319.4, 43.6%, 84.7%);
}

@property --kds-core-color-purple-250 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(320.0, 44.7%, 81.6%);
}

@property --kds-core-color-purple-325 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(316.1, 40.6%, 72.9%);
}

@property --kds-core-color-purple-400 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(311.8, 35.9%, 63.9%);
}

@property --kds-core-color-purple-475 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(308.3, 31.6%, 55.3%);
}

@property --kds-core-color-purple-550 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(304.6, 27.4%, 46.5%);
}

@property --kds-core-color-purple-650 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(302.1, 29.3%, 38.8%);
}

@property --kds-core-color-purple-725 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(298.8, 31.6%, 31.0%);
}

@property --kds-core-color-purple-800 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(295.5, 33.9%, 23.1%);
}

@property --kds-core-color-purple-875 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(293.6, 35.9%, 15.3%);
}

@property --kds-core-color-aquamarine-25 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(185.5, 44.0%, 95.1%);
}

@property --kds-core-color-aquamarine-50 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(187.5, 47.1%, 93.3%);
}

@property --kds-core-color-aquamarine-100 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(186.0, 45.5%, 91.4%);
}

@property --kds-core-color-aquamarine-175 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(184.6, 48.1%, 89.4%);
}

@property --kds-core-color-aquamarine-250 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(185.8, 49.2%, 87.6%);
}

@property --kds-core-color-aquamarine-325 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(187.7, 51.7%, 76.5%);
}

@property --kds-core-color-aquamarine-400 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(189.4, 54.5%, 65.5%);
}

@property --kds-core-color-aquamarine-475 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(191.3, 57.1%, 54.3%);
}

@property --kds-core-color-aquamarine-550 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(193.1, 60.2%, 43.3%);
}

@property --kds-core-color-aquamarine-650 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(195.8, 61.5%, 37.6%);
}

@property --kds-core-color-aquamarine-725 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(198.2, 62.2%, 32.2%);
}

@property --kds-core-color-aquamarine-800 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(200.9, 63.2%, 26.7%);
}

@property --kds-core-color-aquamarine-875 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(203.5, 64.5%, 21.0%);
}

@property --kds-core-color-grassgreen-25 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(76.4, 52.4%, 95.9%);
}

@property --kds-core-color-grassgreen-50 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(73.3, 57.4%, 90.8%);
}

@property --kds-core-color-grassgreen-100 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(69.5, 59.5%, 85.5%);
}

@property --kds-core-color-grassgreen-175 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(66.5, 64.4%, 80.2%);
}

@property --kds-core-color-grassgreen-250 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(63.4, 68.5%, 75.1%);
}

@property --kds-core-color-grassgreen-325 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(64.6, 68.6%, 70.0%);
}

@property --kds-core-color-grassgreen-400 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(65.4, 68.5%, 65.1%);
}

@property --kds-core-color-grassgreen-475 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(66.0, 67.8%, 59.8%);
}

@property --kds-core-color-grassgreen-550 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(67.3, 67.8%, 54.9%);
}

@property --kds-core-color-grassgreen-650 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(68.6, 61.0%, 47.3%);
}

@property --kds-core-color-grassgreen-725 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(69.4, 53.5%, 39.6%);
}

@property --kds-core-color-grassgreen-800 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(71.1, 46.3%, 32.2%);
}

@property --kds-core-color-grassgreen-875 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(72.2, 39.2%, 24.5%);
}

@property --kds-core-color-brown-25 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(35, 60%, 95%);
}

@property --kds-core-color-brown-50 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(33, 55%, 89%);
}

@property --kds-core-color-brown-100 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(32, 50%, 82%);
}

@property --kds-core-color-brown-175 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(31, 48%, 74%);
}

@property --kds-core-color-brown-250 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(30, 47%, 68%);
}

@property --kds-core-color-brown-325 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(29, 43%, 58%);
}

@property --kds-core-color-brown-400 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(28, 39%, 50%);
}

@property --kds-core-color-brown-475 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(27, 35%, 44%);
}

@property --kds-core-color-brown-550 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(26, 32%, 39%);
}

@property --kds-core-color-brown-650 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(25, 30%, 35%);
}

@property --kds-core-color-brown-725 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(24, 28%, 30%);
}

@property --kds-core-color-brown-800 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(23, 27%, 24%);
}

@property --kds-core-color-brown-875 {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(22, 25%, 18%);
}

@property --kds-core-color-transparent {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(345 0% 11.4% / 0);
}

@property --kds-core-font-size-0-5x {
syntax: "<length>";
  inherits: true;
  initial-value: 8px;
}

@property --kds-core-font-size-0-56x {
syntax: "<length>";
  inherits: true;
  initial-value: 9px;
}

@property --kds-core-font-size-0-62x {
syntax: "<length>";
  inherits: true;
  initial-value: 10px;
}

@property --kds-core-font-size-0-68x {
syntax: "<length>";
  inherits: true;
  initial-value: 11px;
}

@property --kds-core-font-size-0-75x {
syntax: "<length>";
  inherits: true;
  initial-value: 12px;
}

@property --kds-core-font-size-0-81x {
syntax: "<length>";
  inherits: true;
  initial-value: 13px;
}

@property --kds-core-font-size-0-87x {
syntax: "<length>";
  inherits: true;
  initial-value: 14px;
}

@property --kds-core-font-size-1x {
syntax: "<length>";
  inherits: true;
  initial-value: 16px;
}

@property --kds-core-font-size-1-13x {
syntax: "<length>";
  inherits: true;
  initial-value: 18px;
}

@property --kds-core-font-size-1-25x {
syntax: "<length>";
  inherits: true;
  initial-value: 20px;
}

@property --kds-core-font-size-1-375x {
syntax: "<length>";
  inherits: true;
  initial-value: 22px;
}

@property --kds-core-font-size-1-625x {
syntax: "<length>";
  inherits: true;
  initial-value: 26px;
}

@property --kds-core-font-size-1-5x {
syntax: "<length>";
  inherits: true;
  initial-value: 24px;
}

@property --kds-core-font-size-1-75x {
syntax: "<length>";
  inherits: true;
  initial-value: 28px;
}

@property --kds-core-font-size-1-875x {
syntax: "<length>";
  inherits: true;
  initial-value: 30px;
}

@property --kds-core-font-size-2x {
syntax: "<length>";
  inherits: true;
  initial-value: 32px;
}

@property --kds-core-font-size-2-25x {
syntax: "<length>";
  inherits: true;
  initial-value: 36px;
}

@property --kds-core-font-size-2-5x {
syntax: "<length>";
  inherits: true;
  initial-value: 40px;
}

@property --kds-core-font-size-2-75x {
syntax: "<length>";
  inherits: true;
  initial-value: 44px;
}

@property --kds-core-font-size-3x {
syntax: "<length>";
  inherits: true;
  initial-value: 48px;
}

@property --kds-core-font-size-3-25x {
syntax: "<length>";
  inherits: true;
  initial-value: 52px;
}

@property --kds-core-font-size-3-5x {
syntax: "<length>";
  inherits: true;
  initial-value: 56px;
}

@property --kds-core-font-size-3-75x {
syntax: "<length>";
  inherits: true;
  initial-value: 60px;
}

@property --kds-core-font-size-4x {
syntax: "<length>";
  inherits: true;
  initial-value: 64px;
}

@property --kds-core-font-size-4-5x {
syntax: "<length>";
  inherits: true;
  initial-value: 72px;
}

@property --kds-core-font-size-5x {
syntax: "<length>";
  inherits: true;
  initial-value: 80px;
}

@property --kds-core-font-size-5-5x {
syntax: "<length>";
  inherits: true;
  initial-value: 88px;
}

@property --kds-core-font-size-6x {
syntax: "<length>";
  inherits: true;
  initial-value: 96px;
}

@property --kds-core-paragraph-spacing-none {
syntax: "<length>";
  inherits: false;
  initial-value: 0.0;
}

@property --kds-core-paragraph-spacing-small {
syntax: "<length>";
  inherits: false;
  initial-value: 0.25px;
}

@property --kds-core-paragraph-spacing-medium {
syntax: "<length>";
  inherits: false;
  initial-value: 0.5px;
}

@property --kds-core-paragraph-spacing-large {
syntax: "<length>";
  inherits: false;
  initial-value: 0.75px;
}

@property --kds-core-paragraph-spacing-extra-large {
syntax: "<length>";
  inherits: false;
  initial-value: 1px;
}

@property --kds-core-font-family-roboto {
syntax: "<string>#";
  inherits: true;
  initial-value: Roboto, sans-serif;
}

@property --kds-core-font-family-roboto-condensed {
syntax: "<string>#";
  inherits: true;
  initial-value: 'Roboto Condensed', sans-serif;
}

@property --kds-core-font-family-roboto-mono {
syntax: "<string>#";
  inherits: true;
  initial-value: 'Roboto Mono', monospace;
}

@property --kds-core-font-weight-light {
syntax: "<number>";
  inherits: true;
  initial-value: 300;
}

@property --kds-core-font-weight-regular {
syntax: "<number>";
  inherits: true;
  initial-value: 400;
}

@property --kds-core-font-weight-regular-italic-weight {
syntax: "<number>";
  inherits: true;
  initial-value: 400;
}

@property --kds-core-font-weight-regular-italic-style {
syntax: "<string>";
  inherits: true;
  initial-value: italic;
}

@property --kds-core-font-weight-medium {
syntax: "<number>";
  inherits: true;
  initial-value: 500;
}

@property --kds-core-font-weight-strong {
syntax: "<number>";
  inherits: true;
  initial-value: 700;
}

@property --kds-core-font-weight-strong-italic-weight {
syntax: "<number>";
  inherits: true;
  initial-value: 700;
}

@property --kds-core-font-weight-strong-italic-style {
syntax: "<string>";
  inherits: true;
  initial-value: italic;
}

@property --kds-core-line-height-singleline {
syntax: "<number> | <percentage> | <string>";
  inherits: true;
  initial-value: normal;
}

@property --kds-core-line-height-multiline-wide {
syntax: "<number> | <percentage> | <string>";
  inherits: true;
  initial-value: 1.5;
}

@property --kds-core-size-scale {
syntax: "<length>";
  inherits: false;
  initial-value: 16px;
}

@property --kds-core-border-width-none {
syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --kds-core-border-width-xs {
syntax: "<length>";
  inherits: false;
  initial-value: 1px;
}

@property --kds-core-border-width-s {
syntax: "<length>";
  inherits: false;
  initial-value: 1.2496px;
}

@property --kds-core-border-width-m {
syntax: "<length>";
  inherits: false;
  initial-value: 1.5px;
}

@property --kds-core-border-width-l {
syntax: "<length>";
  inherits: false;
  initial-value: 2px;
}

@property --kds-color-surface-default {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(0, 0%, 98%), hsl(0, 0%, 15.7%));
}

@property --kds-color-surface-muted {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(0, 0%, 94.1%), hsl(0, 0%, 18.8%));
}

@property --kds-color-surface-subtle {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(0, 0%, 90.2%), hsl(0, 0%, 22%));
}

@property --kds-color-page-default {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(0, 0%, 99%), hsl(0, 0%, 12.9%));
}

@property --kds-color-background-neutral-initial {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(345 0% 11.4% / 0);
}

@property --kds-color-background-neutral-hover {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(340 0% 48.2% / 0.1), hsl(180 0% 90.2% / 0.1));
}

@property --kds-color-background-neutral-active {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(340 0% 48.2% / 0.2), hsl(340 0% 48.2% / 0.36));
}

@property --kds-color-background-neutral-bold-initial {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(210 0% 72.5% / 0.4), hsl(0, 0%, 32.2%));
}

@property --kds-color-background-neutral-bold-hover {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(210 0% 62.977% / 0.4), hsl(0, 0%, 48.2%));
}

@property --kds-color-background-neutral-bold-active {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(0 0% 59.859% / 0.4), hsl(0, 0%, 72.5%));
}

@property --kds-color-background-primary-initial {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(168, 46.7%, 85.3%), hsl(169.8, 30.6%, 66.1%));
}

@property --kds-color-background-primary-hover {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(167.99 27.818% 77.703%), hsl(169.6 30.517% 68.835%));
}

@property --kds-color-background-primary-active {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(167.97 18.664% 70.242%), hsl(168.98 30.352% 78.334%));
}

@property --kds-color-background-primary-bold-initial {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(176.1, 66.7%, 22.4%), hsl(174.4, 47.8%, 30.8%));
}

@property --kds-color-background-primary-bold-hover {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(175.79 58.284% 19.792%), hsl(173.26 27.023% 42.409%));
}

@property --kds-color-background-primary-bold-active {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(175.36 48.936% 16.164%), hsl(171.91 19.296% 64.061%));
}

@property --kds-color-background-selected-initial {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(165.6, 67.6%, 92.7%), hsl(176.1 66.7% 22.4% / 0.32));
}

@property --kds-color-background-selected-hover {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(168, 46.7%, 85.3%), hsl(174.4 47.8% 30.8% / 0.56));
}

@property --kds-color-background-selected-active {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(168.8, 34.4%, 75.5%), hsl(171.8 27% 47.8% / 0.72));
}

@property --kds-color-background-selected-bold-initial {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(174.4, 47.8%, 30.8%), hsl(176.1, 66.7%, 22.4%));
}

@property --kds-color-background-selected-bold-hover {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(176.1, 66.7%, 22.4%), hsl(174.4, 47.8%, 30.8%));
}

@property --kds-color-background-selected-bold-active {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(176.7, 82%, 17.5%), hsl(171.8, 27%, 47.8%));
}

@property --kds-color-background-danger-initial {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(0, 100%, 97.1%), hsl(356.76 65.215% 15.117%));
}

@property --kds-color-background-danger-hover {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(1.5, 100%, 92.4%), hsl(348.8 90.9% 34.5% / 0.72));
}

@property --kds-color-background-danger-active {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(3.4, 100%, 86.1%), hsl(353 74.7% 44.9% / 0.72));
}

@property --kds-color-background-danger-bold-initial {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(348.8, 90.9%, 34.5%), hsl(347.6, 97.1%, 27.3%));
}

@property --kds-color-background-danger-bold-hover {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(347.6, 97.1%, 27.3%), hsl(353 74.7% 44.9% / 0.8));
}

@property --kds-color-background-danger-bold-active {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(348, 94.3%, 20.8%), hsl(356.3 76.8% 54.3% / 0.8));
}

@property --kds-color-background-input-initial {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(0, 0%, 99%), hsl(0, 0%, 22%));
}

@property --kds-color-background-input-hover {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(330 0% 94.521%), hsl(330 0% 30.187%));
}

@property --kds-color-background-input-active {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(330 0% 85.683%), hsl(336 0% 38.771%));
}

@property --kds-color-background-disabled-default {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(340 0% 48.2% / 0.48);
}

@property --kds-color-background-disabled-primary {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(173.91 18.134% 40.592%);
}

@property --kds-color-background-disabled-danger {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(1.3489 43.031% 37.79%);
}

@property --kds-color-background-success-bold-initial {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(111.3, 47.5%, 31.4%), hsl(123.7, 46.7%, 20.6%));
}

@property --kds-color-background-info-bold-initial {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(209.4, 57.3%, 49.6%), hsl(212.1, 78.2%, 67.6%));
}

@property --kds-color-background-info-bold-hover {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(208.2, 62.9%, 41.2%), hsl(213.6, 91.6%, 76.7%));
}

@property --kds-color-background-info-bold-active {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(208.3, 60.5%, 33.7%), hsl(214.5, 100%, 84.3%));
}

@property --kds-color-background-static-info {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(216.7, 100%, 96.5%), hsl(210, 50%, 27.5%));
}

@property --kds-color-background-static-info-muted {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(216.83 100.14% 97.347%), hsl(211.86 40.97% 17.58%));
}

@property --kds-color-background-static-warning {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(30, 95.2%, 91.8%), hsl(13.1, 66.1%, 23.1%));
}

@property --kds-color-background-static-warning-muted {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(29.601 98.108% 95.778%), hsl(14.687 60.252% 14.775%));
}

@property --kds-color-background-static-danger {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(1.5, 100%, 92.4%), hsl(347.6, 97.1%, 27.3%));
}

@property --kds-color-background-static-danger-muted {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(0, 100%, 97.1%), hsl(356.76 65.215% 15.117%));
}

@property --kds-color-background-static-success {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(119.4 96.139% 93.64%), hsl(123.7, 46.7%, 20.6%));
}

@property --kds-color-background-static-success-muted {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(125.38 64.795% 97.496%), hsl(128.3 38.542% 10.352%));
}

@property --kds-color-background-static-brand {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(50.8, 100%, 50%);
}

@property --kds-color-background-static-overlay {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(0, 0%, 12.9%), hsl(0, 0%, 22%));
}

@property --kds-color-text-and-icon-neutral {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(0, 0%, 15.7%), hsl(0, 0%, 94.1%));
}

@property --kds-color-text-and-icon-muted {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(0, 0%, 32.2%), hsl(0, 0%, 90.2%));
}

@property --kds-color-text-and-icon-subtle {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(0, 0%, 43%), hsl(0, 0%, 72.5%));
}

@property --kds-color-text-and-icon-neutral-inverted {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(0, 0%, 98%), hsl(0, 0%, 15.7%));
}

@property --kds-color-text-and-icon-primary {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(176.1, 66.7%, 22.4%);
}

@property --kds-color-text-and-icon-primary-inverted {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(165.6, 67.6%, 92.7%);
}

@property --kds-color-text-and-icon-selected {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(176.1, 66.7%, 22.4%), hsl(168.8, 34.4%, 75.5%));
}

@property --kds-color-text-and-icon-selected-inverted {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(165, 80%, 96.1%);
}

@property --kds-color-text-and-icon-warning {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(19, 63.1%, 38.2%), hsl(31.2, 82.8%, 65.9%));
}

@property --kds-color-text-and-icon-warning-inverted {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(31, 100%, 82.5%);
}

@property --kds-color-text-and-icon-danger {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(348.8, 90.9%, 34.5%), hsl(3.5, 100%, 79.6%));
}

@property --kds-color-text-and-icon-danger-inverted {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(0, 100%, 97.1%), hsl(1.5, 100%, 92.4%));
}

@property --kds-color-text-and-icon-success {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(116.1, 46.6%, 25.7%), hsl(109, 47.2%, 61.4%));
}

@property --kds-color-text-and-icon-success-inverted {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(120, 95.3%, 91.6%);
}

@property --kds-color-text-and-icon-disabled {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(0, 0%, 64%), hsl(0, 0%, 48.2%));
}

@property --kds-color-text-and-icon-disabled-inverted {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(0, 0%, 72.5%);
}

@property --kds-color-text-and-icon-info {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(208.3, 60.5%, 33.7%), hsl(213.6, 91.6%, 76.7%));
}

@property --kds-color-text-and-icon-editor {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(0, 0%, 11.4%), hsl(0, 0%, 94.1%));
}

@property --kds-color-border-neutral {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(330 0% 10.2% / 0.4), hsl(330 0% 99% / 0.5));
}

@property --kds-color-border-muted {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(330 0% 10.2% / 0.2), hsl(330 0% 99% / 0.2));
}

@property --kds-color-border-subtle {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(330 0% 10.2% / 0.1), hsl(330 0% 99% / 0.1));
}

@property --kds-color-border-primary-bold {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(176.7, 82%, 17.5%);
}

@property --kds-color-border-primary {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(169.8, 30.6%, 66.1%), hsl(168.8, 34.4%, 75.5%));
}

@property --kds-color-border-selected-bold {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(174.4, 47.8%, 30.8%), hsl(168.8, 34.4%, 75.5%));
}

@property --kds-color-border-selected {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(171.8, 27%, 47.8%), hsl(168, 46.7%, 85.3%));
}

@property --kds-color-border-selected-accent {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(209.4, 57.3%, 49.6%), hsl(213.6, 91.6%, 76.7%));
}

@property --kds-color-border-warning-bold {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(19, 63.1%, 38.2%), hsl(31, 100%, 82.5%));
}

@property --kds-color-border-warning {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(30.8, 79.3%, 73.5%), hsl(13.1, 66.1%, 23.1%));
}

@property --kds-color-border-danger-bold {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(348.8, 90.9%, 34.5%), hsl(3.5, 100%, 79.6%));
}

@property --kds-color-border-danger {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(3.4, 100%, 86.1%), hsl(348, 94.3%, 20.8%));
}

@property --kds-color-border-success-bold {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(116.1, 46.6%, 25.7%), hsl(112, 56.5%, 71.2%));
}

@property --kds-color-border-success {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(112, 56.5%, 71.2%), hsl(123.7, 46.7%, 20.6%));
}

@property --kds-color-border-info-bold {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(208.3, 60.5%, 33.7%), hsl(214.5, 100%, 84.3%));
}

@property --kds-color-border-info {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(214.5, 100%, 84.3%), hsl(210, 50%, 27.5%));
}

@property --kds-color-border-transparent {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(345 0% 11.4% / 0);
}

@property --kds-color-border-disabled {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(0, 0%, 72.5%), hsl(0, 0%, 48.2%));
}

@property --kds-color-border-brand {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(50.8, 100%, 50%);
}

@property --kds-color-border-neutral-bold-initial {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(330 0% 10.2% / 0.4), hsl(330 0% 99% / 0.4));
}

@property --kds-color-border-neutral-bold-hover {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(330 0% 10.2% / 0.64), hsl(330 0% 99% / 0.58));
}

@property --kds-color-border-neutral-bold-active {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(330 0% 10.2% / 0.74), hsl(330 0% 99% / 0.68));
}

@property --kds-color-focus-outline {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(209.4, 57.3%, 49.6%), hsl(213.6, 91.6%, 76.7%));
}

@property --kds-color-focus-background {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(215.7 100% 91.8% / 0.4), hsl(209.4 49.5% 20.2% / 0.5));
}

@property --kds-color-blanket-default {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(345 0% 11.4% / 0.8);
}

@property --kds-color-chart-data-series-1 {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(173.4, 37.1%, 38.6%), hsl(169.8, 30.6%, 66.1%));
}

@property --kds-color-chart-data-series-2 {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(211.3, 67.3%, 59.2%), hsl(213.6, 91.6%, 76.7%));
}

@property --kds-color-chart-data-series-3 {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(359.6, 84.3%, 62.5%), hsl(2.6, 100%, 72.4%));
}

@property --kds-color-chart-data-series-4 {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(0, 0%, 22%), hsl(0, 0%, 72.5%));
}

@property --kds-color-chart-data-series-5 {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(28, 39%, 50%), hsl(30, 47%, 68%));
}

@property --kds-color-chart-data-series-6 {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(208.2, 62.9%, 41.2%), hsl(209.4, 57.3%, 49.6%));
}

@property --kds-color-chart-data-series-7 {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(71.1, 46.3%, 32.2%), hsl(68.6, 61.0%, 47.3%));
}

@property --kds-color-chart-data-series-8 {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(308.3, 31.6%, 55.3%), hsl(316.1, 40.6%, 72.9%));
}

@property --kds-color-chart-data-series-9 {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(193.1, 60.2%, 43.3%), hsl(191.3, 57.1%, 54.3%));
}

@property --kds-color-chart-data-track {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(0, 0%, 94.1%), hsl(0, 0%, 32.2%));
}

@property --kds-color-chart-status-positive {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(107.4, 42.2%, 44.1%), hsl(109, 47.2%, 61.4%));
}

@property --kds-color-chart-status-negative {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(356.3, 76.8%, 54.3%), hsl(0, 100%, 66.1%));
}

@property --kds-color-chart-status-warning {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(19, 63.1%, 38.2%), hsl(31.2, 82.8%, 65.9%));
}

@property --kds-color-chart-status-error {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(348.8, 90.9%, 34.5%), hsl(3.5, 100%, 79.6%));
}

@property --kds-color-chart-scaffolding-axis {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(330 0% 10.2% / 0.2), hsl(330 0% 99% / 0.2));
}

@property --kds-color-chart-scaffolding-grid {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(330 0% 10.2% / 0.1), hsl(330 0% 99% / 0.1));
}

@property --kds-color-chart-scaffolding-border {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(330 0% 10.2% / 0.1), hsl(330 0% 99% / 0.1));
}

@property --kds-color-chart-scaffolding-segment {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(0, 0%, 98%), hsl(0, 0%, 15.7%));
}

@property --kds-color-chart-scaffolding-surface {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(0, 0%, 98%), hsl(0, 0%, 15.7%));
}

@property --kds-color-chart-scaffolding-tooltip-surface {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(0, 0%, 12.9%), hsl(0, 0%, 22%));
}

@property --kds-color-chart-control-default {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(0, 0%, 43%), hsl(0, 0%, 72.5%));
}

@property --kds-color-chart-control-hover {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(0, 0%, 15.7%), hsl(0, 0%, 94.1%));
}

@property --kds-color-chart-control-selected {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(174.4, 47.8%, 30.8%), hsl(176.1, 66.7%, 22.4%));
}

@property --kds-color-chart-control-disabled {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(0, 0%, 64%), hsl(0, 0%, 48.2%));
}

@property --kds-color-chart-text-title {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(0, 0%, 15.7%), hsl(0, 0%, 94.1%));
}

@property --kds-color-chart-text-subtitle {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(0, 0%, 43%), hsl(0, 0%, 72.5%));
}

@property --kds-color-chart-text-axis-name {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(0, 0%, 43%), hsl(0, 0%, 72.5%));
}

@property --kds-color-chart-text-axis-label {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(0, 0%, 43%), hsl(0, 0%, 72.5%));
}

@property --kds-color-chart-text-legend {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(0, 0%, 15.7%), hsl(0, 0%, 94.1%));
}

@property --kds-color-chart-text-tooltip {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(0, 0%, 98%), hsl(0, 0%, 94.1%));
}

@property --kds-color-chart-text-label {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(0, 0%, 15.7%), hsl(0, 0%, 94.1%));
}

@property --kds-color-chart-text-on-fill-dark {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(0, 0%, 15.7%);
}

@property --kds-color-chart-text-on-fill-light {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(0, 0%, 98%);
}

@property --kds-color-nodes-and-variables-flow-variable {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(359.6, 84.3%, 62.5%), hsl(0, 100%, 66.1%));
}

@property --kds-color-nodes-and-variables-loop {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(187.7, 51.7%, 76.5%);
}

@property --kds-color-nodes-and-variables-manipulator {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(50.8, 100%, 50%);
}

@property --kds-color-nodes-and-variables-predictor {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(106.5, 42.6%, 54.9%), hsl(109, 47.2%, 61.4%));
}

@property --kds-color-nodes-and-variables-source {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(30, 80.4%, 60%);
}

@property --kds-color-nodes-and-variables-visualizer {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(193.1, 60.2%, 43.3%), hsl(191.3, 57.1%, 54.3%));
}

@property --kds-color-nodes-and-variables-widget {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(193.1, 60.2%, 43.3%), hsl(191.3, 57.1%, 54.3%));
}

@property --kds-color-nodes-and-variables-scope {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(304.6, 27.4%, 46.5%), hsl(308.3, 31.6%, 55.3%));
}

@property --kds-color-nodes-and-variables-learner {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(67.3, 67.8%, 54.9%), hsl(65.4, 68.5%, 65.1%));
}

@property --kds-color-nodes-and-variables-sink {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(359.6, 84.3%, 62.5%), hsl(0, 100%, 66.1%));
}

@property --kds-color-nodes-and-variables-container {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(69.4, 53.5%, 39.6%);
}

@property --kds-color-nodes-and-variables-unknown {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(353, 74.7%, 44.9%), hsl(356.3, 76.8%, 54.3%));
}

@property --kds-color-nodes-and-variables-other {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(29, 43%, 58%), hsl(30, 47%, 68%));
}

@property --kds-color-nodes-and-variables-metanode {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(0, 0%, 99%), hsl(0, 0%, 12.9%));
}

@property --kds-color-nodes-and-variables-metanode-border {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(0, 0%, 32.2%), hsl(0, 0%, 94.1%));
}

@property --kds-color-nodes-and-variables-component {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(0, 0%, 72.5%), hsl(0, 0%, 43%));
}

@property --kds-color-nodes-and-variables-special-state {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(0, 0%, 99%), hsl(0, 0%, 12.9%));
}

@property --kds-color-nodes-and-variables-forbidden-border {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(0, 0%, 18.8%), hsl(0, 0%, 90.2%));
}

@property --kds-color-nodes-and-variables-forbidden {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(0, 0%, 90.2%), hsl(0, 0%, 22%));
}

@property --kds-color-nodes-and-variables-warning-border {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(19, 63.1%, 38.2%), hsl(31.2, 82.8%, 65.9%));
}

@property --kds-color-nodes-and-variables-warning {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(31, 100%, 82.5%), hsl(0, 0%, 22%));
}

@property --kds-color-nodes-and-variables-error-border {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(348.8, 90.9%, 34.5%), hsl(0, 100%, 66.1%));
}

@property --kds-color-nodes-and-variables-error {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(1.5, 100%, 92.4%), hsl(0, 0%, 22%));
}

@property --kds-color-nodes-and-variables-loading-border {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(208.3, 60.5%, 33.7%), hsl(214.5, 100%, 84.3%));
}

@property --kds-color-nodes-and-variables-loading {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(215.7, 100%, 91.8%), hsl(209.4, 49.5%, 20.2%));
}

@property --kds-color-nodes-and-variables-configuration {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(64.6, 68.6%, 70.0%), hsl(69.5, 59.5%, 85.5%));
}

@property --kds-color-nodes-and-variables-quickform {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(212.1, 78.2%, 67.6%), hsl(214.5, 100%, 84.3%));
}

@property --kds-color-port-data {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(0, 0%, 11.4%), hsl(0, 0%, 94.1%));
}

@property --kds-color-port-flow-variable {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(359.6, 84.3%, 62.5%);
}

@property --kds-color-port-neutral-inverted {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(0, 0%, 99%), hsl(0, 0%, 12.9%));
}

@property --kds-color-annotations-special-nodes {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(0, 0%, 72.5%), hsl(0, 0%, 32.2%));
}

@property --kds-color-annotations-special-nodes-bold {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(0, 0%, 32.2%), hsl(0, 0%, 90.2%));
}

@property --kds-color-annotations-visualizer {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(193.1, 60.2%, 43.3%), hsl(191.3, 57.1%, 54.3%));
}

@property --kds-color-annotations-loading-bold {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(208.3, 60.5%, 33.7%), hsl(214.5, 100%, 84.3%));
}

@property --kds-color-annotations-manipulator {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(50.8, 100%, 50%);
}

@property --kds-color-annotations-source {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(30, 80.4%, 60%);
}

@property --kds-color-annotations-sink {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(359.6, 84.3%, 62.5%), hsl(0, 100%, 66.1%));
}

@property --kds-color-annotations-learner {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(67.3, 67.8%, 54.9%), hsl(65.4, 68.5%, 65.1%));
}

@property --kds-color-annotations-predictor {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(106.5, 42.6%, 54.9%), hsl(109, 47.2%, 61.4%));
}

@property --kds-color-annotations-container {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(66.5, 64.4%, 80.2%), hsl(69.5, 59.5%, 85.5%));
}

@property --kds-color-annotations-flow-variable {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(173.4, 37.1%, 38.6%), hsl(171.8, 27%, 47.8%));
}

@property --kds-color-annotations-teal-dark {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(176.7, 82%, 17.5%), hsl(176.1, 66.7%, 22.4%));
}

@property --kds-color-annotations-other {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(29, 43%, 58%), hsl(30, 47%, 68%));
}

@property --kds-color-annotations-loop {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(25, 30%, 35%), hsl(27, 35%, 44%));
}

@property --kds-color-state-error {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(353, 74.7%, 44.9%), hsl(347.6, 97.1%, 27.3%));
}

@property --kds-color-state-error-border {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(348, 94.3%, 20.8%), hsl(2.6, 100%, 72.4%));
}

@property --kds-color-state-warning {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(47.6, 100%, 67.6%), hsl(43.9, 100%, 26.3%));
}

@property --kds-color-state-warning-border {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(19, 63.1%, 38.2%), hsl(49.1, 99.1%, 43.7%));
}

@property --kds-color-state-success {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(106.5, 42.6%, 54.9%), hsl(107.6, 46%, 37.1%));
}

@property --kds-color-state-success-border {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(116.1, 46.6%, 25.7%), hsl(106.5, 42.6%, 54.9%));
}

@property --kds-color-state-loading {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(208.3, 60.5%, 33.7%), hsl(214.5, 100%, 84.3%));
}

@property --kds-color-state-inactive {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(0, 0%, 99%), hsl(0, 0%, 11.4%));
}

@property --kds-color-state-inactive-border {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(0, 0%, 90.2%), hsl(0, 0%, 32.2%));
}

@property --kds-color-state-disabled {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(0, 0%, 72.5%), hsl(0, 0%, 22%));
}

@property --kds-color-state-disabled-border {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(0, 0%, 48.2%);
}

@property --kds-color-state-background {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(0, 0%, 90.2%), hsl(0, 0%, 32.2%));
}

@property --kds-color-connector-data {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(0, 0%, 43%), hsl(0, 0%, 48.2%));
}

@property --kds-color-connector-flow-variable {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(359.6, 84.3%, 62.5%);
}

@property --kds-color-connector-selected {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(209.4, 57.3%, 49.6%), hsl(213.6, 91.6%, 76.7%));
}

@property --kds-color-connector-highlighted {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(0, 0%, 15.7%), hsl(0, 0%, 94.1%));
}

@property --kds-color-connector-insertable {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(116.1, 46.6%, 25.7%), hsl(106.5, 42.6%, 54.9%));
}

@property --kds-color-elevation-top {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(210 0% 72.5% / 0.32), hsl(330 0% 10.2% / 0.9));
}

@property --kds-color-elevation-middle {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(180 0% 32.2% / 0.14), hsl(330 0% 10.2% / 0.94));
}

@property --kds-color-elevation-bottom {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(180 0% 32.2% / 0.12), hsl(330 0% 10.2% / 0.98));
}

@property --kds-color-elevation-knob {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(180 0% 32.2% / 0.5), hsl(330 0% 10.2% / 0.6));
}

@property --kds-color-desktop-header-background-default {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(0, 0%, 10.2%);
}

@property --kds-color-desktop-header-background-muted {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(0, 0%, 98%), hsl(0, 0%, 15.7%));
}

@property --kds-color-desktop-header-background-accent {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(0, 0%, 98%), hsl(0, 0%, 15.7%));
}

@property --kds-color-desktop-header-text-and-icon-neutral {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(0, 0%, 15.7%), hsl(0, 0%, 94.1%));
}

@property --kds-color-desktop-header-text-and-icon-muted {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(0, 0%, 32.2%), hsl(0, 0%, 90.2%));
}

@property --kds-color-desktop-header-border-default {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(330 0% 10.2% / 0.1), hsl(330 0% 99% / 0.1));
}

@property --kds-color-table-header-background-default {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(0, 0%, 99%);
}

@property --kds-color-toggle-switch-knob-initial {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(0, 0%, 99%);
}

@property --kds-color-toggle-switch-knob-disabled {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(0, 0%, 90.2%);
}

@property --kds-color-toggle-switch-icon-on {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(176.1, 66.7%, 22.4%);
}

@property --kds-color-toggle-switch-icon-off {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(0, 0%, 43%);
}

@property --kds-color-toggle-switch-icon-disabled {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(0, 0%, 64%);
}

@property --kds-color-loading-spinner-progress-on-primary {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(165.6 67.6% 92.7%);
}

@property --kds-color-loading-spinner-progress-on-surface {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(0, 0%, 15.7%), hsl(0, 0%, 94.1%));
}

@property --kds-color-loading-spinner-track-on-primary {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(165.6 67.6% 92.7% / 0.24);
}

@property --kds-color-loading-spinner-track-on-surface {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(332.73 0% 15.7% / 0.24), hsl(240 0% 94.1% / 0.24));
}

@property --kds-color-tooltip-background-default {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(0, 0%, 12.9%), hsl(0, 0%, 22%));
}

@property --kds-color-tooltip-text-and-icon-neutral {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(0, 0%, 98%);
}

@property --kds-color-text-highlight-background-default {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(212.1 78.2% 67.6% / 0.6);
}

@property --kds-color-avatar-background-red {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(3.5, 100%, 79.6%);
}

@property --kds-color-avatar-background-orange {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(31.2, 82.8%, 65.9%);
}

@property --kds-color-avatar-background-yellow {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(50.8, 100%, 50%);
}

@property --kds-color-avatar-background-green {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(109, 47.2%, 61.4%);
}

@property --kds-color-avatar-background-teal {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(169.8, 30.6%, 66.1%);
}

@property --kds-color-avatar-background-blue {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(213.6, 91.6%, 76.7%);
}

@property --kds-color-avatar-background-purple {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(320.0, 44.7%, 81.6%);
}

@property --kds-color-avatar-background-aquamarine {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(185.8, 49.2%, 87.6%);
}

@property --kds-color-avatar-background-grassgreen {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(63.4, 68.5%, 75.1%);
}

@property --kds-color-avatar-background-brown {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(30, 47%, 68%);
}

@property --kds-color-avatar-background-empty {
syntax: "<color>";
  inherits: true;
  initial-value: light-dark(hsl(330 0% 94.521%), hsl(330 0% 30.187%));
}

@property --kds-color-avatar-text-and-icon-red {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(348, 94.3%, 20.8%);
}

@property --kds-color-avatar-text-and-icon-orange {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(13.1, 66.1%, 23.1%);
}

@property --kds-color-avatar-text-and-icon-yellow {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(44.3, 94.2%, 13.5%);
}

@property --kds-color-avatar-text-and-icon-green {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(132.3, 52%, 14.7%);
}

@property --kds-color-avatar-text-and-icon-teal {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(174.5, 93.2%, 11.6%);
}

@property --kds-color-avatar-text-and-icon-blue {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(209.4, 49.5%, 20.2%);
}

@property --kds-color-avatar-text-and-icon-purple {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(295.5, 33.9%, 23.1%);
}

@property --kds-color-avatar-text-and-icon-aquamarine {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(200.9, 63.2%, 26.7%);
}

@property --kds-color-avatar-text-and-icon-grassgreen {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(72.2, 39.2%, 24.5%);
}

@property --kds-color-avatar-text-and-icon-brown {
syntax: "<color>";
  inherits: true;
  initial-value: hsl(23, 27%, 24%);
}

@property --kds-border-radius-container-none {
syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --kds-border-radius-container-0-12x {
syntax: "<length>";
  inherits: false;
  initial-value: 2px;
}

@property --kds-border-radius-container-0-25x {
syntax: "<length>";
  inherits: false;
  initial-value: 4px;
}

@property --kds-border-radius-container-0-31x {
syntax: "<length>";
  inherits: false;
  initial-value: 5px;
}

@property --kds-border-radius-container-0-37x {
syntax: "<length>";
  inherits: false;
  initial-value: 6px;
}

@property --kds-border-radius-container-0-44x {
syntax: "<length>";
  inherits: false;
  initial-value: 7px;
}

@property --kds-border-radius-container-0-50x {
syntax: "<length>";
  inherits: false;
  initial-value: 8px;
}

@property --kds-border-radius-container-0-56x {
syntax: "<length>";
  inherits: false;
  initial-value: 9px;
}

@property --kds-border-radius-container-1x {
syntax: "<length>";
  inherits: false;
  initial-value: 16px;
}

@property --kds-border-radius-container-pill {
syntax: "<length>";
  inherits: false;
  initial-value: 1000px;
}

@property --kds-border-width-icon-stroke-s {
syntax: "<length>";
  inherits: false;
  initial-value: 1px;
}

@property --kds-border-width-icon-stroke-m {
syntax: "<length>";
  inherits: false;
  initial-value: 1.2496px;
}

@property --kds-border-width-icon-stroke-l {
syntax: "<length>";
  inherits: false;
  initial-value: 1.5px;
}

@property --kds-border-action-transparent {
syntax: "<string>";
  inherits: false;
  initial-value: 1px solid hsl(345 0% 11.4% / 0);
}

@property --kds-border-action-default {
syntax: "<string>";
  inherits: false;
  initial-value: 1px solid light-dark(hsl(330 0% 10.2% / 0.4), hsl(330 0% 99% / 0.5));
}

@property --kds-border-action-disabled {
syntax: "<string>";
  inherits: false;
  initial-value: 1px solid light-dark(hsl(0, 0%, 72.5%), hsl(0, 0%, 48.2%));
}

@property --kds-border-action-focused {
syntax: "<string>";
  inherits: false;
  initial-value: 2px solid light-dark(hsl(209.4, 57.3%, 49.6%), hsl(213.6, 91.6%, 76.7%));
}

@property --kds-border-action-selected {
syntax: "<string>";
  inherits: false;
  initial-value: 1px solid light-dark(hsl(171.8, 27%, 47.8%), hsl(168, 46.7%, 85.3%));
}

@property --kds-border-action-selected-accent {
syntax: "<string>";
  inherits: false;
  initial-value: 1px solid light-dark(hsl(209.4, 57.3%, 49.6%), hsl(213.6, 91.6%, 76.7%));
}

@property --kds-border-action-error {
syntax: "<string>";
  inherits: false;
  initial-value: 1px solid light-dark(hsl(348.8, 90.9%, 34.5%), hsl(3.5, 100%, 79.6%));
}

@property --kds-border-action-primary {
syntax: "<string>";
  inherits: false;
  initial-value: 1px solid hsl(176.7, 82%, 17.5%);
}

@property --kds-border-action-input {
syntax: "<string>";
  inherits: false;
  initial-value: 1px solid light-dark(hsl(330 0% 10.2% / 0.4), hsl(330 0% 99% / 0.5));
}

@property --kds-border-base-default {
syntax: "<string>";
  inherits: false;
  initial-value: 1px solid light-dark(hsl(330 0% 10.2% / 0.4), hsl(330 0% 99% / 0.5));
}

@property --kds-border-base-muted {
syntax: "<string>";
  inherits: false;
  initial-value: 1px solid light-dark(hsl(330 0% 10.2% / 0.2), hsl(330 0% 99% / 0.2));
}

@property --kds-border-base-subtle {
syntax: "<string>";
  inherits: false;
  initial-value: 1px solid light-dark(hsl(330 0% 10.2% / 0.1), hsl(330 0% 99% / 0.1));
}

@property --kds-border-base-brand {
syntax: "<string>";
  inherits: false;
  initial-value: 1px solid hsl(50.8, 100%, 50%);
}

@property --kds-border-base-danger {
syntax: "<string>";
  inherits: false;
  initial-value: 1px solid light-dark(hsl(3.4, 100%, 86.1%), hsl(348, 94.3%, 20.8%));
}

@property --kds-border-base-warning {
syntax: "<string>";
  inherits: false;
  initial-value: 1px solid light-dark(hsl(30.8, 79.3%, 73.5%), hsl(13.1, 66.1%, 23.1%));
}

@property --kds-border-base-success {
syntax: "<string>";
  inherits: false;
  initial-value: 1px solid light-dark(hsl(112, 56.5%, 71.2%), hsl(123.7, 46.7%, 20.6%));
}

@property --kds-border-base-info {
syntax: "<string>";
  inherits: false;
  initial-value: 1px solid light-dark(hsl(214.5, 100%, 84.3%), hsl(210, 50%, 27.5%));
}

@property --kds-border-node-status-empty {
syntax: "<string>";
  inherits: false;
  initial-value: 1px solid light-dark(hsl(0, 0%, 90.2%), hsl(0, 0%, 32.2%));
}

@property --kds-border-node-status-error {
syntax: "<string>";
  inherits: false;
  initial-value: 1px solid light-dark(hsl(348, 94.3%, 20.8%), hsl(2.6, 100%, 72.4%));
}

@property --kds-border-node-status-warning {
syntax: "<string>";
  inherits: false;
  initial-value: 1px solid light-dark(hsl(19, 63.1%, 38.2%), hsl(49.1, 99.1%, 43.7%));
}

@property --kds-border-node-status-success {
syntax: "<string>";
  inherits: false;
  initial-value: 1px solid light-dark(hsl(116.1, 46.6%, 25.7%), hsl(106.5, 42.6%, 54.9%));
}

@property --kds-border-resize-handle-initial {
syntax: "<string>";
  inherits: false;
  initial-value: 2px solid light-dark(hsl(330 0% 10.2% / 0.4), hsl(330 0% 99% / 0.4));
}

@property --kds-border-resize-handle-hover {
syntax: "<string>";
  inherits: false;
  initial-value: 2px solid light-dark(hsl(330 0% 10.2% / 0.64), hsl(330 0% 99% / 0.58));
}

@property --kds-border-resize-handle-active {
syntax: "<string>";
  inherits: false;
  initial-value: 2px solid light-dark(hsl(330 0% 10.2% / 0.74), hsl(330 0% 99% / 0.68));
}

@property --kds-border-color-picker-handle-initial {
syntax: "<string>";
  inherits: false;
  initial-value: 2px solid hsl(0, 0%, 99%);
}

@property --kds-sizing-viewport-breakpoints-576 {
syntax: "<length>";
  inherits: false;
  initial-value: 576px;
}

@property --kds-sizing-viewport-breakpoints-768 {
syntax: "<length>";
  inherits: false;
  initial-value: 768px;
}

@property --kds-sizing-viewport-breakpoints-1024 {
syntax: "<length>";
  inherits: false;
  initial-value: 1024px;
}

@property --kds-sizing-viewport-breakpoints-1200 {
syntax: "<length>";
  inherits: false;
  initial-value: 1200px;
}

@property --kds-sizing-viewport-breakpoints-1400 {
syntax: "<length>";
  inherits: false;
  initial-value: 1400px;
}

@property --kds-sizing-viewport-breakpoints-1728 {
syntax: "<length>";
  inherits: false;
  initial-value: 1728px;
}

@property --kds-spacing-container-negative-0-25x {
syntax: "<length>";
  inherits: false;
  initial-value: -4px;
}

@property --kds-spacing-container-negative-0-375x {
syntax: "<length>";
  inherits: false;
  initial-value: -6px;
}

@property --kds-spacing-container-negative-0-5x {
syntax: "<length>";
  inherits: false;
  initial-value: -8px;
}

@property --kds-spacing-container-none {
syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --kds-spacing-container-0-10x {
syntax: "<length>";
  inherits: false;
  initial-value: 1px;
}

@property --kds-spacing-container-0-12x {
syntax: "<length>";
  inherits: false;
  initial-value: 2px;
}

@property --kds-spacing-container-0-25x {
syntax: "<length>";
  inherits: false;
  initial-value: 4px;
}

@property --kds-spacing-container-0-37x {
syntax: "<length>";
  inherits: false;
  initial-value: 6px;
}

@property --kds-spacing-container-0-5x {
syntax: "<length>";
  inherits: false;
  initial-value: 8px;
}

@property --kds-spacing-container-0-75x {
syntax: "<length>";
  inherits: false;
  initial-value: 12px;
}

@property --kds-spacing-container-1x {
syntax: "<length>";
  inherits: false;
  initial-value: 16px;
}

@property --kds-spacing-container-1-25x {
syntax: "<length>";
  inherits: false;
  initial-value: 20px;
}

@property --kds-spacing-container-1-5x {
syntax: "<length>";
  inherits: false;
  initial-value: 24px;
}

@property --kds-spacing-container-2x {
syntax: "<length>";
  inherits: false;
  initial-value: 32px;
}

@property --kds-spacing-container-3x {
syntax: "<length>";
  inherits: false;
  initial-value: 48px;
}

@property --kds-spacing-container-4x {
syntax: "<length>";
  inherits: false;
  initial-value: 64px;
}

@property --kds-spacing-container-5x {
syntax: "<length>";
  inherits: false;
  initial-value: 80px;
}

@property --kds-spacing-offset-focus {
syntax: "<length>";
  inherits: false;
  initial-value: 1px;
}

@property --kds-spacing-input-label-spacing-bottom {
syntax: "<length>";
  inherits: false;
  initial-value: 4px;
}

@property --kds-spacing-sub-text-spacing-top {
syntax: "<length>";
  inherits: false;
  initial-value: 4px;
}

@property --kds-dimension-component-height-0-125x {
syntax: "<length>";
  inherits: false;
  initial-value: 2px;
}

@property --kds-dimension-component-height-0-25x {
syntax: "<length>";
  inherits: false;
  initial-value: 4px;
}

@property --kds-dimension-component-height-0-75x {
syntax: "<length>";
  inherits: false;
  initial-value: 12px;
}

@property --kds-dimension-component-height-0-88x {
syntax: "<length>";
  inherits: false;
  initial-value: 14px;
}

@property --kds-dimension-component-height-1x {
syntax: "<length>";
  inherits: false;
  initial-value: 16px;
}

@property --kds-dimension-component-height-1-25x {
syntax: "<length>";
  inherits: false;
  initial-value: 20px;
}

@property --kds-dimension-component-height-1-5x {
syntax: "<length>";
  inherits: false;
  initial-value: 24px;
}

@property --kds-dimension-component-height-1-75x {
syntax: "<length>";
  inherits: false;
  initial-value: 28px;
}

@property --kds-dimension-component-height-2-25x {
syntax: "<length>";
  inherits: false;
  initial-value: 36px;
}

@property --kds-dimension-component-height-2-75x {
syntax: "<length>";
  inherits: false;
  initial-value: 44px;
}

@property --kds-dimension-component-height-2-5x {
syntax: "<length>";
  inherits: false;
  initial-value: 40px;
}

@property --kds-dimension-component-height-4x {
syntax: "<length>";
  inherits: false;
  initial-value: 64px;
}

@property --kds-dimension-component-height-5x {
syntax: "<length>";
  inherits: false;
  initial-value: 80px;
}

@property --kds-dimension-component-height-12x {
syntax: "<length>";
  inherits: false;
  initial-value: 192px;
}

@property --kds-dimension-component-height-12-5x {
syntax: "<length>";
  inherits: false;
  initial-value: 200px;
}

@property --kds-dimension-component-height-20x {
syntax: "<length>";
  inherits: false;
  initial-value: 320px;
}

@property --kds-dimension-component-height-25x {
syntax: "<length>";
  inherits: false;
  initial-value: 400px;
}

@property --kds-dimension-component-height-45x {
syntax: "<length>";
  inherits: false;
  initial-value: 720px;
}

@property --kds-dimension-component-width-0-125x {
syntax: "<length>";
  inherits: false;
  initial-value: 2px;
}

@property --kds-dimension-component-width-0-25x {
syntax: "<length>";
  inherits: false;
  initial-value: 4px;
}

@property --kds-dimension-component-width-0-75x {
syntax: "<length>";
  inherits: false;
  initial-value: 12px;
}

@property --kds-dimension-component-width-0-88x {
syntax: "<length>";
  inherits: false;
  initial-value: 14px;
}

@property --kds-dimension-component-width-1x {
syntax: "<length>";
  inherits: false;
  initial-value: 16px;
}

@property --kds-dimension-component-width-1-25x {
syntax: "<length>";
  inherits: false;
  initial-value: 20px;
}

@property --kds-dimension-component-width-1-5x {
syntax: "<length>";
  inherits: false;
  initial-value: 24px;
}

@property --kds-dimension-component-width-1-75x {
syntax: "<length>";
  inherits: false;
  initial-value: 28px;
}

@property --kds-dimension-component-width-2x {
syntax: "<length>";
  inherits: false;
  initial-value: 32px;
}

@property --kds-dimension-component-width-2-25x {
syntax: "<length>";
  inherits: false;
  initial-value: 36px;
}

@property --kds-dimension-component-width-2-75x {
syntax: "<length>";
  inherits: false;
  initial-value: 44px;
}

@property --kds-dimension-component-width-4x {
syntax: "<length>";
  inherits: false;
  initial-value: 64px;
}

@property --kds-dimension-component-width-6x {
syntax: "<length>";
  inherits: false;
  initial-value: 96px;
}

@property --kds-dimension-component-width-8x {
syntax: "<length>";
  inherits: false;
  initial-value: 128px;
}

@property --kds-dimension-component-width-12x {
syntax: "<length>";
  inherits: false;
  initial-value: 192px;
}

@property --kds-dimension-component-width-12-5x {
syntax: "<length>";
  inherits: false;
  initial-value: 200px;
}

@property --kds-dimension-component-width-16x {
syntax: "<length>";
  inherits: false;
  initial-value: 256px;
}

@property --kds-dimension-component-width-17-5x {
syntax: "<length>";
  inherits: false;
  initial-value: 280px;
}

@property --kds-dimension-component-width-20x {
syntax: "<length>";
  inherits: false;
  initial-value: 320px;
}

@property --kds-dimension-component-width-25x {
syntax: "<length>";
  inherits: false;
  initial-value: 400px;
}

@property --kds-dimension-component-width-32x {
syntax: "<length>";
  inherits: false;
  initial-value: 512px;
}

@property --kds-dimension-component-width-35x {
syntax: "<length>";
  inherits: false;
  initial-value: 560px;
}

@property --kds-dimension-component-width-45x {
syntax: "<length>";
  inherits: false;
  initial-value: 720px;
}

@property --kds-dimension-component-width-52-5x {
syntax: "<length>";
  inherits: false;
  initial-value: 840px;
}

@property --kds-dimension-component-width-61x {
syntax: "<length>";
  inherits: false;
  initial-value: 976px;
}

@property --kds-dimension-icon-0-56x {
syntax: "<length>";
  inherits: false;
  initial-value: 9px;
}

@property --kds-dimension-icon-0-75x {
syntax: "<length>";
  inherits: false;
  initial-value: 12px;
}

@property --kds-dimension-icon-1x {
syntax: "<length>";
  inherits: false;
  initial-value: 16px;
}

@property --kds-dimension-icon-1-25x {
syntax: "<length>";
  inherits: false;
  initial-value: 20px;
}

@property --kds-dimension-chart-line-width {
syntax: "<length>";
  inherits: false;
  initial-value: 1.5px;
}

@property --kds-dimension-chart-segment-gap {
syntax: "<length>";
  inherits: false;
  initial-value: 0.75px;
}

@property --kds-font-base-display-xsmall {
syntax: "<string>";
  inherits: true;
  initial-value: 700 18px/normal Roboto, sans-serif;
}

@property --kds-font-base-display-small {
syntax: "<string>";
  inherits: true;
  initial-value: 700 20px/normal Roboto, sans-serif;
}

@property --kds-font-base-display-medium {
syntax: "<string>";
  inherits: true;
  initial-value: 700 24px/normal Roboto, sans-serif;
}

@property --kds-font-base-display-large {
syntax: "<string>";
  inherits: true;
  initial-value: 700 32px/normal Roboto, sans-serif;
}

@property --kds-font-base-display-xlarge {
syntax: "<string>";
  inherits: true;
  initial-value: 700 40px/normal Roboto, sans-serif;
}

@property --kds-font-base-title-xsmall {
syntax: "<string>";
  inherits: true;
  initial-value: 500 10px/normal Roboto, sans-serif;
}

@property --kds-font-base-title-small {
syntax: "<string>";
  inherits: true;
  initial-value: 500 12px/normal Roboto, sans-serif;
}

@property --kds-font-base-title-small-strong {
syntax: "<string>";
  inherits: true;
  initial-value: 700 12px/normal Roboto, sans-serif;
}

@property --kds-font-base-title-medium {
syntax: "<string>";
  inherits: true;
  initial-value: 500 14px/normal Roboto, sans-serif;
}

@property --kds-font-base-title-medium-strong {
syntax: "<string>";
  inherits: true;
  initial-value: 700 14px/normal Roboto, sans-serif;
}

@property --kds-font-base-title-large {
syntax: "<string>";
  inherits: true;
  initial-value: 500 16px/normal Roboto, sans-serif;
}

@property --kds-font-base-title-large-strong {
syntax: "<string>";
  inherits: true;
  initial-value: 700 16px/normal Roboto, sans-serif;
}

@property --kds-font-base-body-small {
syntax: "<string>";
  inherits: true;
  initial-value: 400 12px/1.5 Roboto, sans-serif;
}

@property --kds-font-base-body-small-italic {
syntax: "<string>";
  inherits: true;
  initial-value: italic 400 12px/1.5 Roboto, sans-serif;
}

@property --kds-font-base-body-small-strong {
syntax: "<string>";
  inherits: true;
  initial-value: 700 12px/1.5 Roboto, sans-serif;
}

@property --kds-font-base-body-small-strong-italic {
syntax: "<string>";
  inherits: true;
  initial-value: italic 700 12px/1.5 Roboto, sans-serif;
}

@property --kds-font-base-body-medium {
syntax: "<string>";
  inherits: true;
  initial-value: 400 14px/1.5 Roboto, sans-serif;
}

@property --kds-font-base-body-medium-strong {
syntax: "<string>";
  inherits: true;
  initial-value: 700 14px/1.5 Roboto, sans-serif;
}

@property --kds-font-base-body-large {
syntax: "<string>";
  inherits: true;
  initial-value: 400 16px/1.5 Roboto, sans-serif;
}

@property --kds-font-base-body-large-strong {
syntax: "<string>";
  inherits: true;
  initial-value: 700 16px/1.5 Roboto, sans-serif;
}

@property --kds-font-base-body-xlarge {
syntax: "<string>";
  inherits: true;
  initial-value: 400 20px/1.5 Roboto, sans-serif;
}

@property --kds-font-base-subtext-xsmall {
syntax: "<string>";
  inherits: true;
  initial-value: 400 9px/normal Roboto, sans-serif;
}

@property --kds-font-base-subtext-small {
syntax: "<string>";
  inherits: true;
  initial-value: 400 10px/normal Roboto, sans-serif;
}

@property --kds-font-base-subtext-medium {
syntax: "<string>";
  inherits: true;
  initial-value: 400 12px/normal Roboto, sans-serif;
}

@property --kds-font-base-interactive-xsmall-strong {
syntax: "<string>";
  inherits: true;
  initial-value: 500 11px/normal Roboto, sans-serif;
}

@property --kds-font-base-interactive-small {
syntax: "<string>";
  inherits: true;
  initial-value: 400 12px/normal Roboto, sans-serif;
}

@property --kds-font-base-interactive-small-italic {
syntax: "<string>";
  inherits: true;
  initial-value: italic 400 12px/normal Roboto, sans-serif;
}

@property --kds-font-base-interactive-small-strong {
syntax: "<string>";
  inherits: true;
  initial-value: 500 12px/normal Roboto, sans-serif;
}

@property --kds-font-base-interactive-medium {
syntax: "<string>";
  inherits: true;
  initial-value: 400 14px/normal Roboto, sans-serif;
}

@property --kds-font-base-interactive-medium-strong {
syntax: "<string>";
  inherits: true;
  initial-value: 500 14px/normal Roboto, sans-serif;
}

@property --kds-font-base-interactive-large {
syntax: "<string>";
  inherits: true;
  initial-value: 400 16px/normal Roboto, sans-serif;
}

@property --kds-font-base-interactive-large-strong {
syntax: "<string>";
  inherits: true;
  initial-value: 500 16px/normal Roboto, sans-serif;
}

@property --kds-font-base-code-xsmall {
syntax: "<string>";
  inherits: true;
  initial-value: 300 10px/normal 'Roboto Mono', monospace;
}

@property --kds-font-base-code-small {
syntax: "<string>";
  inherits: true;
  initial-value: 300 12px/normal 'Roboto Mono', monospace;
}

@property --kds-font-workflow-annotation-headline-h1 {
syntax: "<string>";
  inherits: true;
  initial-value: 700 36px/1.5 'Roboto Condensed', sans-serif;
}

@property --kds-font-workflow-annotation-headline-h2 {
syntax: "<string>";
  inherits: true;
  initial-value: 700 30px/1.5 'Roboto Condensed', sans-serif;
}

@property --kds-font-workflow-annotation-headline-h3 {
syntax: "<string>";
  inherits: true;
  initial-value: 700 26px/1.5 'Roboto Condensed', sans-serif;
}

@property --kds-font-workflow-annotation-headline-h4 {
syntax: "<string>";
  inherits: true;
  initial-value: 700 22px/1.5 'Roboto Condensed', sans-serif;
}

@property --kds-font-workflow-annotation-headline-h5 {
syntax: "<string>";
  inherits: true;
  initial-value: 700 16px/1.5 'Roboto Condensed', sans-serif;
}

@property --kds-font-workflow-annotation-headline-h1-italic {
syntax: "<string>";
  inherits: true;
  initial-value: 700 36px/1.5 'Roboto Condensed', sans-serif;
}

@property --kds-font-workflow-annotation-headline-h2-italic {
syntax: "<string>";
  inherits: true;
  initial-value: 700 30px/1.5 'Roboto Condensed', sans-serif;
}

@property --kds-font-workflow-annotation-headline-h3-italic {
syntax: "<string>";
  inherits: true;
  initial-value: 700 26px/1.5 'Roboto Condensed', sans-serif;
}

@property --kds-font-workflow-annotation-headline-h4-italic {
syntax: "<string>";
  inherits: true;
  initial-value: 700 22px/1.5 'Roboto Condensed', sans-serif;
}

@property --kds-font-workflow-annotation-headline-h5-italic {
syntax: "<string>";
  inherits: true;
  initial-value: 700 16px/1.5 'Roboto Condensed', sans-serif;
}

@property --kds-font-workflow-annotation-headline-h6 {
syntax: "<string>";
  inherits: true;
  initial-value: 700 13px/1.5 'Roboto Condensed', sans-serif;
}

@property --kds-font-workflow-annotation-headline-h6-italic {
syntax: "<string>";
  inherits: true;
  initial-value: 700 13px/1.5 'Roboto Condensed', sans-serif;
}

@property --kds-font-workflow-annotation-body-small {
syntax: "<string>";
  inherits: true;
  initial-value: 400 13px/1.5 'Roboto Condensed', sans-serif;
}

@property --kds-font-workflow-annotation-body-small-italic {
syntax: "<string>";
  inherits: true;
  initial-value: italic 400 13px/1.5 'Roboto Condensed', sans-serif;
}

@property --kds-font-workflow-annotation-body-small-strong {
syntax: "<string>";
  inherits: true;
  initial-value: 700 13px/1.5 'Roboto Condensed', sans-serif;
}

@property --kds-font-workflow-annotation-body-small-strong-italic {
syntax: "<string>";
  inherits: true;
  initial-value: italic 700 13px/1.5 'Roboto Condensed', sans-serif;
}

@property --kds-font-workflow-node-name {
syntax: "<string>";
  inherits: true;
  initial-value: 700 13px 'Roboto Condensed', sans-serif;
}

@property --kds-font-workflow-node-label {
syntax: "<string>";
  inherits: true;
  initial-value: 400 12px 'Roboto Condensed', sans-serif;
}

@property --kds-font-workflow-node-status {
syntax: "<string>";
  inherits: true;
  initial-value: 400 8px 'Roboto Condensed', sans-serif;
}

@property --kds-font-dataapp-h1 {
syntax: "<string>";
  inherits: true;
  initial-value: 700 36px/1.5 Roboto, sans-serif;
}

@property --kds-font-dataapp-h2 {
syntax: "<string>";
  inherits: true;
  initial-value: 700 30px/1.5 Roboto, sans-serif;
}

@property --kds-font-dataapp-h3 {
syntax: "<string>";
  inherits: true;
  initial-value: 700 26px/1.5 Roboto, sans-serif;
}

@property --kds-font-dataapp-h4 {
syntax: "<string>";
  inherits: true;
  initial-value: 700 22px/1.5 Roboto, sans-serif;
}

@property --kds-font-dataapp-h5 {
syntax: "<string>";
  inherits: true;
  initial-value: 700 16px/1.5 Roboto, sans-serif;
}

@property --kds-font-dataapp-h6 {
syntax: "<string>";
  inherits: true;
  initial-value: 700 13px/1.5 Roboto, sans-serif;
}

@property --kds-font-dataapp-body {
syntax: "<string>";
  inherits: true;
  initial-value: 700 13px/1.5 Roboto, sans-serif;
}

@property --kds-font-dataapp-body-small {
syntax: "<string>";
  inherits: true;
  initial-value: 700 10px/1.5 Roboto, sans-serif;
}

@property --kds-font-chart-title {
syntax: "<string>";
  inherits: true;
  initial-value: 700 18px/normal Roboto, sans-serif;
}

@property --kds-font-chart-subtitle {
syntax: "<string>";
  inherits: true;
  initial-value: 400 12px/1.5 Roboto, sans-serif;
}

@property --kds-font-chart-axis-name {
syntax: "<string>";
  inherits: true;
  initial-value: 400 12px/1.5 Roboto, sans-serif;
}

@property --kds-font-chart-axis-label {
syntax: "<string>";
  inherits: true;
  initial-value: 500 11px/normal Roboto, sans-serif;
}

@property --kds-font-chart-legend {
syntax: "<string>";
  inherits: true;
  initial-value: 500 11px/normal Roboto, sans-serif;
}

@property --kds-font-chart-tooltip {
syntax: "<string>";
  inherits: true;
  initial-value: 400 12px/1.5 Roboto, sans-serif;
}

@property --kds-font-chart-label {
syntax: "<string>";
  inherits: true;
  initial-value: 400 10px/normal Roboto, sans-serif;
}

@property --kds-elevation-level-0 {
syntax: "<string>";
  inherits: false;
  initial-value: 0 0 0 0 light-dark(hsl(210 0% 72.5% / 0.32), hsl(330 0% 10.2% / 0.9));
}

@property --kds-elevation-level-1 {
syntax: "<string>";
  inherits: false;
  initial-value: 0 1px 1px 0 light-dark(hsl(210 0% 72.5% / 0.32), hsl(330 0% 10.2% / 0.9)), 0 0 1px 0 light-dark(hsl(180 0% 32.2% / 0.14), hsl(330 0% 10.2% / 0.94)), 0 0 8px 0 light-dark(hsl(180 0% 32.2% / 0.12), hsl(330 0% 10.2% / 0.98));
}

@property --kds-elevation-level-3 {
syntax: "<string>";
  inherits: false;
  initial-value: 0 2px 4px 0 light-dark(hsl(210 0% 72.5% / 0.32), hsl(330 0% 10.2% / 0.9)), 0 4px 8px 0 light-dark(hsl(180 0% 32.2% / 0.14), hsl(330 0% 10.2% / 0.94)), 0 0 20px 0 light-dark(hsl(180 0% 32.2% / 0.12), hsl(330 0% 10.2% / 0.98));
}

@property --kds-fake-border-xs-muted {
syntax: "<string>";
  inherits: false;
  initial-value: 0 0 0 0.5px light-dark(hsl(330 0% 10.2% / 0.2), hsl(330 0% 99% / 0.2));
}

@property --kds-box-shadow-knob {
syntax: "<string>";
  inherits: false;
  initial-value: 0 1px 2px 0 light-dark(hsl(180 0% 32.2% / 0.5), hsl(330 0% 10.2% / 0.6));
}

@property --kds-width-side-drawer-default {
syntax: "<length>";
  inherits: false;
  initial-value: 420px;
}