@custom-variant dark (&:where(.dark, .dark *));

@theme {
  /* primitives-color-white */
  --color-white-0: rgb(255 255 255 / 0);
  --color-white-100: rgb(255 255 255 / 0.05);
  --color-white-200: rgb(255 255 255 / 0.1);
  --color-white-300: rgb(255 255 255 / 0.2);
  --color-white-400: rgb(255 255 255 / 0.4);
  --color-white-500: rgb(255 255 255 / 0.7);
  --color-white-600: rgb(255 255 255 / 0.8);
  --color-white-700: rgb(255 255 255 / 0.85);
  --color-white-800: rgb(255 255 255 / 0.9);
  --color-white-900: rgb(255 255 255 / 0.95);
  --color-white-1000: rgb(255 255 255);

  /* primitives-transparent-sky */
  --color-primitives-transparent-sky-400: rgb(7 145 240 / 0.4);
  --color-primitives-transparent-sky-600: rgb(7 145 240 / 0.6);

  /* primitives-color-black */
  --color-black-0: rgb(0 0 0 / 0);
  --color-black-100: rgb(0 0 0 / 0.05);
  --color-black-200: rgb(0 0 0 / 0.1);
  --color-black-300: rgb(0 0 0 / 0.2);
  --color-black-400: rgb(0 0 0 / 0.4);
  --color-black-500: rgb(0 0 0 / 0.7);
  --color-black-600: rgb(0 0 0 / 0.8);
  --color-black-700: rgb(0 0 0 / 0.85);
  --color-black-800: rgb(0 0 0 / 0.9);
  --color-black-900: rgb(0 0 0 / 0.95);
  --color-black-1000: rgb(0 0 0);

  /* primitives-color-grey */
  --color-grey-0: rgb(250 250 250);
  --color-grey-50: rgb(245 244 244);
  --color-grey-100: rgb(240 240 240);
  --color-grey-200: rgb(229 229 229);
  --color-grey-300: rgb(206 206 207);
  --color-grey-400: rgb(181 181 183);
  --color-grey-500: rgb(157 157 160);
  --color-grey-600: rgb(133 133 137);
  --color-grey-700: rgb(109 109 113);
  --color-grey-800: rgb(80 80 87);
  --color-grey-850: rgb(55 55 62);
  --color-grey-900: rgb(36 36 43);
  --color-grey-950: rgb(17 17 20);
  --color-grey-1000: rgb(0 0 0);

  /* primitives-color-red */
  --color-red-50: rgb(254 242 242);
  --color-red-100: rgb(254 226 226);
  --color-red-200: rgb(253 203 203);
  --color-red-300: rgb(251 166 166);
  --color-red-400: rgb(246 115 115);
  --color-red-500: rgb(237 70 70);
  --color-red-600: rgb(218 40 40);
  --color-red-700: rgb(197 32 32);
  --color-red-800: rgb(152 28 28);
  --color-red-900: rgb(126 30 30);
  --color-red-1000: rgb(68 11 11);

  /* primitives-color-orange */
  --color-orange-50: rgb(255 244 237);
  --color-orange-100: rgb(255 231 212);
  --color-orange-200: rgb(255 202 168);
  --color-orange-300: rgb(255 165 112);
  --color-orange-400: rgb(255 116 55);
  --color-orange-500: rgb(255 90 31);
  --color-orange-600: rgb(240 52 6);
  --color-orange-700: rgb(199 35 7);
  --color-orange-800: rgb(158 29 14);
  --color-orange-900: rgb(127 28 15);
  --color-orange-1000: rgb(69 10 5);

  /* primitives-color-yellow */
  --color-yellow-50: rgb(253 251 233);
  --color-yellow-100: rgb(252 246 197);
  --color-yellow-200: rgb(250 235 142);
  --color-yellow-300: rgb(246 216 78);
  --color-yellow-400: rgb(241 194 27);
  --color-yellow-500: rgb(225 171 17);
  --color-yellow-600: rgb(194 132 12);
  --color-yellow-700: rgb(155 94 13);
  --color-yellow-800: rgb(128 75 19);
  --color-yellow-900: rgb(109 61 22);
  --color-yellow-1000: rgb(64 31 8);

  /* primitives-brand */
  --color-brand-0: rgb(255 254 247);
  --color-brand-50: rgb(254 249 230);
  --color-brand-100: rgb(253 240 192);
  --color-brand-200: rgb(252 228 138);
  --color-brand-300: rgb(248 213 90);
  --color-brand-400: rgb(245 200 58);
  --color-brand-500: rgb(243 188 44);
  --color-brand-600: rgb(241 183 41);
  --color-brand-700: rgb(204 147 24);
  --color-brand-800: rgb(166 114 16);
  --color-brand-900: rgb(122 83 11);
  --color-brand-950: rgb(94 63 8);
  --color-brand-1000: rgb(59 37 4);

  /* primitives-color-pear */
  --color-pear-50: rgb(253 253 232);
  --color-pear-100: rgb(248 250 205);
  --color-pear-200: rgb(239 244 162);
  --color-pear-300: rgb(224 235 107);
  --color-pear-400: rgb(208 223 73);
  --color-pear-500: rgb(176 195 31);
  --color-pear-600: rgb(137 155 21);
  --color-pear-700: rgb(103 118 21);
  --color-pear-800: rgb(82 94 22);
  --color-pear-900: rgb(70 80 23);
  --color-pear-1000: rgb(36 44 7);

  /* primitives-color-lime */
  --color-lime-50: rgb(247 254 231);
  --color-lime-100: rgb(236 252 203);
  --color-lime-200: rgb(217 249 157);
  --color-lime-300: rgb(190 242 100);
  --color-lime-400: rgb(163 230 53);
  --color-lime-500: rgb(132 204 22);
  --color-lime-600: rgb(101 163 13);
  --color-lime-700: rgb(77 124 15);
  --color-lime-800: rgb(63 98 18);
  --color-lime-900: rgb(54 83 20);
  --color-lime-1000: rgb(26 46 5);

  /* primitives-color-green */
  --color-green-50: rgb(240 253 243);
  --color-green-100: rgb(220 252 228);
  --color-green-200: rgb(186 248 203);
  --color-green-300: rgb(133 240 163);
  --color-green-400: rgb(72 224 115);
  --color-green-500: rgb(32 197 79);
  --color-green-600: rgb(21 164 62);
  --color-green-700: rgb(20 129 52);
  --color-green-800: rgb(21 102 45);
  --color-green-900: rgb(19 84 40);
  --color-green-1000: rgb(5 46 19);

  /* primitives-color-teal */
  --color-teal-50: rgb(239 254 252);
  --color-teal-100: rgb(200 255 247);
  --color-teal-200: rgb(144 255 238);
  --color-teal-300: rgb(81 247 229);
  --color-teal-400: rgb(29 228 213);
  --color-teal-500: rgb(5 199 187);
  --color-teal-600: rgb(0 161 154);
  --color-teal-700: rgb(5 128 124);
  --color-teal-800: rgb(10 101 99);
  --color-teal-900: rgb(14 83 82);
  --color-teal-1000: rgb(0 50 51);

  /* primitives-color-ocean */
  --color-ocean-50: rgb(240 250 255);
  --color-ocean-100: rgb(225 244 253);
  --color-ocean-200: rgb(188 234 251);
  --color-ocean-300: rgb(129 219 248);
  --color-ocean-400: rgb(66 201 242);
  --color-ocean-500: rgb(21 177 226);
  --color-ocean-600: rgb(8 144 193);
  --color-ocean-700: rgb(8 115 156);
  --color-ocean-800: rgb(11 97 129);
  --color-ocean-900: rgb(15 80 107);
  --color-ocean-1000: rgb(10 52 71);

  /* primitives-color-sky */
  --color-sky-50: rgb(239 247 255);
  --color-sky-100: rgb(227 241 255);
  --color-sky-200: rgb(184 224 255);
  --color-sky-300: rgb(121 199 255);
  --color-sky-400: rgb(50 171 254);
  --color-sky-500: rgb(7 145 240);
  --color-sky-600: rgb(0 113 206);
  --color-sky-700: rgb(0 90 166);
  --color-sky-800: rgb(3 77 137);
  --color-sky-900: rgb(9 65 113);
  --color-sky-1000: rgb(6 40 75);

  /* primitives-color-blue */
  --color-blue-50: rgb(232 247 255);
  --color-blue-100: rgb(213 239 255);
  --color-blue-200: rgb(179 223 255);
  --color-blue-300: rgb(133 199 255);
  --color-blue-400: rgb(86 160 255);
  --color-blue-500: rgb(47 121 255);
  --color-blue-600: rgb(12 75 255);
  --color-blue-700: rgb(0 59 235);
  --color-blue-800: rgb(6 59 205);
  --color-blue-900: rgb(16 58 159);
  --color-blue-1000: rgb(10 32 92);

  /* primitives-color-indigo */
  --color-indigo-50: rgb(245 244 255);
  --color-indigo-100: rgb(232 233 255);
  --color-indigo-200: rgb(213 217 255);
  --color-indigo-300: rgb(179 184 255);
  --color-indigo-400: rgb(136 139 253);
  --color-indigo-500: rgb(102 102 255);
  --color-indigo-600: rgb(72 53 242);
  --color-indigo-700: rgb(57 35 222);
  --color-indigo-800: rgb(47 29 186);
  --color-indigo-900: rgb(41 26 152);
  --color-indigo-1000: rgb(0 0 102);

  /* primitives-color-violet */
  --color-violet-50: rgb(249 245 255);
  --color-violet-100: rgb(240 231 255);
  --color-violet-200: rgb(228 212 255);
  --color-violet-300: rgb(207 178 255);
  --color-violet-400: rgb(177 128 255);
  --color-violet-500: rgb(138 63 252);
  --color-violet-600: rgb(124 45 240);
  --color-violet-700: rgb(105 28 212);
  --color-violet-800: rgb(90 29 172);
  --color-violet-900: rgb(75 25 138);
  --color-violet-1000: rgb(48 4 103);

  /* primitives-color-fuchsia */
  --color-fuchsia-50: rgb(253 244 255);
  --color-fuchsia-100: rgb(250 232 255);
  --color-fuchsia-200: rgb(245 208 254);
  --color-fuchsia-300: rgb(240 171 252);
  --color-fuchsia-400: rgb(232 121 249);
  --color-fuchsia-500: rgb(217 70 239);
  --color-fuchsia-600: rgb(192 38 211);
  --color-fuchsia-700: rgb(162 28 175);
  --color-fuchsia-800: rgb(134 25 143);
  --color-fuchsia-900: rgb(112 26 117);
  --color-fuchsia-1000: rgb(74 4 78);

  /* primitives-color-pink */
  --color-pink-50: rgb(253 242 248);
  --color-pink-100: rgb(252 231 243);
  --color-pink-200: rgb(251 207 232);
  --color-pink-300: rgb(249 168 212);
  --color-pink-400: rgb(244 114 182);
  --color-pink-500: rgb(236 72 153);
  --color-pink-600: rgb(219 39 119);
  --color-pink-700: rgb(190 24 93);
  --color-pink-800: rgb(157 23 77);
  --color-pink-900: rgb(131 24 67);
  --color-pink-1000: rgb(80 7 36);

  /* primitives-color-sand */
  --color-sand-50: rgb(248 246 244);
  --color-sand-100: rgb(237 233 227);
  --color-sand-200: rgb(222 214 202);
  --color-sand-300: rgb(200 186 169);
  --color-sand-400: rgb(177 155 134);
  --color-sand-500: rgb(161 133 110);
  --color-sand-600: rgb(148 117 98);
  --color-sand-700: rgb(124 96 82);
  --color-sand-800: rgb(102 79 70);
  --color-sand-900: rgb(83 66 59);
  --color-sand-1000: rgb(44 34 30);

  /* primitives-color-brown */
  --color-brown-50: rgb(247 244 239);
  --color-brown-100: rgb(235 227 214);
  --color-brown-200: rgb(217 200 175);
  --color-brown-300: rgb(194 166 130);
  --color-brown-400: rgb(176 137 95);
  --color-brown-500: rgb(161 119 81);
  --color-brown-600: rgb(138 95 68);
  --color-brown-700: rgb(111 74 57);
  --color-brown-800: rgb(95 63 52);
  --color-brown-900: rgb(78 52 46);
  --color-brown-1000: rgb(47 29 25);

  /* color-roles-neutral */
  --color-neutral-white: var(--color-grey-0);
  --color-neutral-50: var(--color-grey-50);
  --color-neutral-100: var(--color-grey-100);
  --color-neutral-200: var(--color-grey-200);
  --color-neutral-300: var(--color-grey-300);
  --color-neutral-400: var(--color-grey-400);
  --color-neutral-500: var(--color-grey-500);
  --color-neutral-600: var(--color-grey-600);
  --color-neutral-700: var(--color-grey-700);
  --color-neutral-800: var(--color-grey-800);
  --color-neutral-850: var(--color-grey-850);
  --color-neutral-900: var(--color-grey-900);
  --color-neutral-950: var(--color-grey-950);
  --color-neutral-black: var(--color-grey-1000);

  /* color-roles-transparent */
  --color-transparent-black-0: var(--color-black-0);
  --color-transparent-black-100: var(--color-black-100);
  --color-transparent-black-200: var(--color-black-200);
  --color-transparent-black-300: var(--color-black-300);
  --color-transparent-black-400: var(--color-black-400);
  --color-transparent-black-500: var(--color-black-500);
  --color-transparent-black-600: var(--color-black-600);
  --color-transparent-black-700: var(--color-black-700);
  --color-transparent-black-800: var(--color-black-800);
  --color-transparent-black-900: var(--color-black-900);
  --color-transparent-white-0: var(--color-white-0);
  --color-transparent-white-100: var(--color-white-100);
  --color-transparent-white-200: var(--color-white-200);
  --color-transparent-white-300: var(--color-white-300);
  --color-transparent-white-400: var(--color-white-400);
  --color-transparent-white-500: var(--color-white-500);
  --color-transparent-white-600: var(--color-white-600);
  --color-transparent-white-700: var(--color-white-700);
  --color-transparent-white-800: var(--color-white-800);
  --color-transparent-white-900: var(--color-white-900);

  /* color-roles-feedback */
  --color-feedback-information-50: var(--color-ocean-50);
  --color-feedback-information-100: var(--color-ocean-100);
  --color-feedback-information-200: var(--color-ocean-200);
  --color-feedback-information-300: var(--color-ocean-300);
  --color-feedback-information-400: var(--color-ocean-400);
  --color-feedback-information-500: var(--color-ocean-500);
  --color-feedback-information-600: var(--color-ocean-600);
  --color-feedback-information-700: var(--color-ocean-700);
  --color-feedback-information-800: var(--color-ocean-800);
  --color-feedback-information-900: var(--color-ocean-900);
  --color-feedback-information-1000: var(--color-ocean-1000);
  --color-feedback-negative-50: var(--color-red-50);
  --color-feedback-negative-100: var(--color-red-100);
  --color-feedback-negative-200: var(--color-red-200);
  --color-feedback-negative-300: var(--color-red-300);
  --color-feedback-negative-400: var(--color-red-400);
  --color-feedback-negative-500: var(--color-red-500);
  --color-feedback-negative-600: var(--color-red-600);
  --color-feedback-negative-700: var(--color-red-700);
  --color-feedback-negative-800: var(--color-red-800);
  --color-feedback-negative-900: var(--color-red-900);
  --color-feedback-negative-1000: var(--color-red-1000);
  --color-feedback-positive-50: var(--color-green-50);
  --color-feedback-positive-100: var(--color-green-100);
  --color-feedback-positive-200: var(--color-green-200);
  --color-feedback-positive-300: var(--color-green-300);
  --color-feedback-positive-400: var(--color-green-400);
  --color-feedback-positive-500: var(--color-green-500);
  --color-feedback-positive-600: var(--color-green-600);
  --color-feedback-positive-700: var(--color-green-700);
  --color-feedback-positive-800: var(--color-green-800);
  --color-feedback-positive-900: var(--color-green-900);
  --color-feedback-positive-1000: var(--color-green-1000);
  --color-feedback-warning-50: var(--color-yellow-50);
  --color-feedback-warning-100: var(--color-yellow-100);
  --color-feedback-warning-200: var(--color-yellow-200);
  --color-feedback-warning-300: var(--color-yellow-300);
  --color-feedback-warning-400: var(--color-yellow-400);
  --color-feedback-warning-500: var(--color-yellow-500);
  --color-feedback-warning-600: var(--color-yellow-600);
  --color-feedback-warning-700: var(--color-yellow-700);
  --color-feedback-warning-800: var(--color-yellow-800);
  --color-feedback-warning-900: var(--color-yellow-900);
  --color-feedback-warning-1000: var(--color-yellow-1000);

  /* color-roles-feedback-focus */
  --color-feedback-focus-400: var(--color-primitives-transparent-sky-400);
  --color-feedback-focus-600: var(--color-primitives-transparent-sky-600);

  /* color-roles-brand */
  --color-brand-primary-50: var(--color-grey-0);
  --color-brand-primary-100: var(--color-grey-100);
  --color-brand-primary-200: var(--color-grey-200);
  --color-brand-primary-300: var(--color-grey-300);
  --color-brand-primary-400: var(--color-grey-400);
  --color-brand-primary-500: var(--color-grey-500);
  --color-brand-primary-600: var(--color-grey-600);
  --color-brand-primary-700: var(--color-grey-700);
  --color-brand-primary-800: var(--color-grey-800);
  --color-brand-primary-900: var(--color-grey-900);
  --color-brand-primary-1000: var(--color-grey-1000);
  --color-brand-secondary-50: var(--color-sky-50);
  --color-brand-secondary-100: var(--color-sky-100);
  --color-brand-secondary-200: var(--color-sky-200);
  --color-brand-secondary-300: var(--color-sky-300);
  --color-brand-secondary-400: var(--color-sky-400);
  --color-brand-secondary-500: var(--color-sky-500);
  --color-brand-secondary-600: var(--color-sky-600);
  --color-brand-secondary-700: var(--color-sky-700);
  --color-brand-secondary-800: var(--color-sky-800);
  --color-brand-secondary-900: var(--color-sky-900);
  --color-brand-secondary-1000: var(--color-sky-1000);

  /* color-roles-ui */
  --color-ui-blue-50: var(--color-blue-50);
  --color-ui-blue-100: var(--color-blue-100);
  --color-ui-blue-200: var(--color-blue-200);
  --color-ui-blue-300: var(--color-blue-300);
  --color-ui-blue-400: var(--color-blue-400);
  --color-ui-blue-500: var(--color-blue-500);
  --color-ui-blue-600: var(--color-blue-600);
  --color-ui-blue-700: var(--color-blue-700);
  --color-ui-blue-800: var(--color-blue-800);
  --color-ui-blue-900: var(--color-blue-900);
  --color-ui-blue-1000: var(--color-blue-1000);
  --color-ui-green-50: var(--color-green-50);
  --color-ui-green-100: var(--color-green-100);
  --color-ui-green-200: var(--color-green-200);
  --color-ui-green-300: var(--color-green-300);
  --color-ui-green-400: var(--color-green-400);
  --color-ui-green-500: var(--color-green-500);
  --color-ui-green-600: var(--color-green-600);
  --color-ui-green-700: var(--color-green-700);
  --color-ui-green-800: var(--color-green-800);
  --color-ui-green-900: var(--color-green-900);
  --color-ui-green-1000: var(--color-green-1000);
  --color-ui-purple-50: var(--color-violet-50);
  --color-ui-purple-100: var(--color-violet-100);
  --color-ui-purple-200: var(--color-violet-200);
  --color-ui-purple-300: var(--color-violet-300);
  --color-ui-purple-400: var(--color-violet-400);
  --color-ui-purple-500: var(--color-violet-500);
  --color-ui-purple-600: var(--color-violet-600);
  --color-ui-purple-700: var(--color-violet-700);
  --color-ui-purple-800: var(--color-violet-800);
  --color-ui-purple-900: var(--color-violet-900);
  --color-ui-purple-1000: var(--color-violet-1000);
  --color-ui-red-50: var(--color-red-50);
  --color-ui-red-100: var(--color-red-100);
  --color-ui-red-200: var(--color-red-200);
  --color-ui-red-300: var(--color-red-300);
  --color-ui-red-400: var(--color-red-400);
  --color-ui-red-500: var(--color-red-500);
  --color-ui-red-600: var(--color-red-600);
  --color-ui-red-700: var(--color-red-700);
  --color-ui-red-800: var(--color-red-800);
  --color-ui-red-900: var(--color-red-900);
  --color-ui-red-1000: var(--color-red-1000);
  --color-ui-yellow-50: var(--color-yellow-50);
  --color-ui-yellow-100: var(--color-yellow-100);
  --color-ui-yellow-200: var(--color-yellow-200);
  --color-ui-yellow-300: var(--color-yellow-300);
  --color-ui-yellow-400: var(--color-yellow-400);
  --color-ui-yellow-500: var(--color-yellow-500);
  --color-ui-yellow-600: var(--color-yellow-600);
  --color-ui-yellow-700: var(--color-yellow-700);
  --color-ui-yellow-800: var(--color-yellow-800);
  --color-ui-yellow-900: var(--color-yellow-900);
  --color-ui-yellow-1000: var(--color-yellow-1000);

  /* themes-brand-solid */
  --color-brand-solid-default: var(--color-brand-primary-900);
  --color-brand-solid-hover: var(--color-brand-primary-700);
  --color-brand-solid-active: var(--color-brand-primary-800);
  --color-brand-secondary-solid-default: var(--color-brand-secondary-500);
  --color-brand-secondary-solid-hover: var(--color-brand-secondary-400);
  --color-brand-secondary-solid-active: var(--color-brand-secondary-600);

  /* themes-toolctrl-subtle */
  --color-brand-subtle-default: var(--color-brand-primary-200);
  --color-brand-subtle-hover: var(--color-brand-primary-300);
  --color-brand-subtle-active: var(--color-brand-primary-400);
  --color-brand-secondary-subtle-default: var(--color-brand-secondary-100);
  --color-brand-secondary-subtle-hover: var(--color-brand-secondary-200);
  --color-brand-secondary-subtle-active: var(--color-brand-secondary-300);

  /* theme-text-neutral */
  --color-text-neutral-primary: var(--color-neutral-900);
  --color-text-neutral-secondary: var(--color-neutral-800);
  /* a11y: neutral-600 auf Weiss = 3,68:1 und damit unter WCAG AA.
     neutral-700 (5,15:1) — identisch zum Zielsystem HiveGrid Cloud. */
  --color-text-neutral-tertiary: var(--color-neutral-700);
  --color-text-neutral-subtle: var(--color-neutral-300);
  --color-text-neutral-disabled: var(--color-neutral-300);
  --color-text-neutral-on-solid: var(--color-neutral-white);
  --color-text-neutral-on-subtle: var(--color-neutral-900);

  /* theme-text-feedback */
  --color-text-feedback-neutral: var(--color-neutral-950);
  --color-text-feedback-information: var(--color-feedback-information-700);
  --color-text-feedback-warning: var(--color-feedback-warning-700);
  --color-text-feedback-negative: var(--color-feedback-negative-700);
  --color-text-feedback-positive: var(--color-feedback-positive-700);
  --color-text-feedback-link-default: var(--color-feedback-information-700);
  --color-text-feedback-link-hover: var(--color-feedback-information-700);
  --color-text-feedback-link-active: var(--color-feedback-information-900);

  /* theme-text-ui */
  --color-text-ui-blue: var(--color-ui-blue-700);
  --color-text-ui-yellow: var(--color-ui-yellow-700);
  --color-text-ui-red: var(--color-ui-red-700);
  --color-text-ui-green: var(--color-ui-green-700);
  --color-text-ui-purple: var(--color-ui-purple-700);

  /* theme-icon-neutral */
  --color-icon-neutral-primary: var(--color-neutral-900);
  --color-icon-neutral-secondary: var(--color-neutral-800);
  --color-icon-neutral-tertiary: var(--color-neutral-600);
  --color-icon-neutral-subtle: var(--color-neutral-300);
  --color-icon-neutral-disabled: var(--color-neutral-300);
  --color-icon-neutral-on-solid: var(--color-neutral-white);
  --color-icon-neutral-on-subtle: var(--color-neutral-900);

  /* theme-icon-feedback */
  --color-icon-feedback-neutral: var(--color-neutral-900);
  --color-icon-feedback-information: var(--color-feedback-information-700);
  --color-icon-feedback-warning: var(--color-feedback-warning-700);
  --color-icon-feedback-negative: var(--color-feedback-negative-700);
  --color-icon-feedback-positive: var(--color-feedback-positive-700);
  --color-icon-feedback-link-default: var(--color-feedback-information-600);
  --color-icon-feedback-link-hover: var(--color-feedback-information-700);
  --color-icon-feedback-link-active: var(--color-feedback-information-900);

  /* theme-icon-ui */
  --color-icon-ui-blue: var(--color-ui-blue-700);
  --color-icon-ui-yellow: var(--color-ui-yellow-700);
  --color-icon-ui-red: var(--color-ui-red-700);
  --color-icon-ui-green: var(--color-ui-green-700);
  --color-icon-ui-purple: var(--color-ui-purple-700);

  /* theme-surface-neutral */
  --color-surface-neutral-primary: var(--color-neutral-50);
  --color-surface-neutral-secondary: var(--color-neutral-white);
  --color-surface-neutral-tertiary: var(--color-neutral-100);
  --color-surface-neutral-modal: var(--color-neutral-50);
  --color-surface-neutral-overlay: var(--color-transparent-black-400);
  --color-surface-neutral-disabled: var(--color-neutral-100);

  /* theme-surface-feedback-solid */
  --color-surface-feedback-solid-positive-default: var(
    --color-feedback-positive-600
  );
  --color-surface-feedback-solid-positive-hover: var(
    --color-feedback-positive-500
  );
  --color-surface-feedback-solid-positive-active: var(
    --color-feedback-positive-700
  );
  --color-surface-feedback-solid-negative-default: var(
    --color-feedback-negative-600
  );
  --color-surface-feedback-solid-negative-hover: var(
    --color-feedback-negative-500
  );
  --color-surface-feedback-solid-negative-active: var(
    --color-feedback-negative-700
  );
  --color-surface-feedback-solid-warning: var(--color-feedback-warning-600);
  --color-surface-feedback-solid-warning-hover: var(
    --color-feedback-warning-500
  );
  --color-surface-feedback-solid-warning-active: var(
    --color-feedback-warning-700
  );
  --color-surface-feedback-solid-information: var(
    --color-feedback-information-600
  );
  --color-surface-feedback-solid-information-hover: var(
    --color-feedback-information-500
  );
  --color-surface-feedback-solid-information-active: var(
    --color-feedback-information-700
  );
  --color-surface-feedback-solid-neutral: var(--color-neutral-800);
  --color-surface-feedback-solid-neutral-hover: var(--color-neutral-700);
  --color-surface-feedback-solid-neutral-active: var(--color-neutral-900);

  /* theme-surface-feedback-subtle */
  --color-surface-feedback-subtle-positive: var(--color-feedback-positive-100);
  --color-surface-feedback-subtle-positive-hover: var(
    --color-feedback-positive-200
  );
  --color-surface-feedback-subtle-positive-active: var(
    --color-feedback-positive-200
  );
  --color-surface-feedback-subtle-negative: var(--color-feedback-negative-100);
  --color-surface-feedback-subtle-negative-hover: var(
    --color-feedback-negative-200
  );
  --color-surface-feedback-subtle-negative-active: var(
    --color-feedback-negative-300
  );
  --color-surface-feedback-subtle-warning: var(--color-feedback-warning-100);
  --color-surface-feedback-subtle-warning-hover: var(
    --color-feedback-warning-200
  );
  --color-surface-feedback-subtle-warning-active: var(
    --color-feedback-warning-300
  );
  --color-surface-feedback-subtle-information: var(
    --color-feedback-information-100
  );
  --color-surface-feedback-subtle-information-hover: var(
    --color-feedback-information-200
  );
  --color-surface-feedback-subtle-information-active: var(
    --color-feedback-information-300
  );
  --color-surface-feedback-subtle-neutral: var(--color-neutral-100);
  --color-surface-feedback-subtle-neutral-hover: var(--color-neutral-200);
  --color-surface-feedback-subtle-neutral-active: var(--color-neutral-300);

  /* theme-surface-ui-solid */
  --color-surface-ui-solid-green-default: var(--color-ui-green-600);
  --color-surface-ui-solid-green-hover: var(--color-ui-green-500);
  --color-surface-ui-solid-green-active: var(--color-ui-green-700);
  --color-surface-ui-solid-red-default: var(--color-ui-red-600);
  --color-surface-ui-solid-red-hover: var(--color-ui-red-500);
  --color-surface-ui-solid-red-active: var(--color-ui-red-700);
  --color-surface-ui-solid-yellow-default: var(--color-ui-yellow-600);
  --color-surface-ui-solid-yellow-hover: var(--color-ui-yellow-500);
  --color-surface-ui-solid-yellow-active: var(--color-ui-yellow-700);
  --color-surface-ui-solid-blue-default: var(--color-ui-blue-600);
  --color-surface-ui-solid-blue-hover: var(--color-ui-blue-500);
  --color-surface-ui-solid-blue-active: var(--color-ui-blue-700);
  --color-surface-ui-solid-purple-default: var(--color-ui-purple-600);
  --color-surface-ui-solid-purple-hover: var(--color-ui-purple-500);
  --color-surface-ui-solid-purple-active: var(--color-ui-purple-700);

  /* theme-surface-ui-subtle */
  --color-surface-ui-subtle-green-default: var(--color-ui-green-100);
  --color-surface-ui-subtle-green-hover: var(--color-ui-green-200);
  --color-surface-ui-subtle-green-active: var(--color-ui-green-300);
  --color-surface-ui-subtle-red-default: var(--color-ui-red-100);
  --color-surface-ui-subtle-red-hover: var(--color-ui-red-200);
  --color-surface-ui-subtle-red-active: var(--color-ui-red-300);
  --color-surface-ui-subtle-yellow-default: var(--color-ui-yellow-100);
  --color-surface-ui-subtle-yellow-hover: var(--color-ui-yellow-200);
  --color-surface-ui-subtle-yellow-active: var(--color-ui-yellow-300);
  --color-surface-ui-subtle-blue-default: var(--color-ui-blue-100);
  --color-surface-ui-subtle-blue-hover: var(--color-ui-blue-200);
  --color-surface-ui-subtle-blue-active: var(--color-ui-blue-300);
  --color-surface-ui-subtle-purple-default: var(--color-ui-purple-100);
  --color-surface-ui-subtle-purple-hover: var(--color-ui-purple-200);
  --color-surface-ui-subtle-purple-active: var(--color-ui-purple-300);

  /* theme-border-neutral */
  --color-border-default: var(--color-neutral-200);
  --color-border-strong: var(--color-neutral-400);
  --color-border-disabled: var(--color-neutral-200);
  --color-border-on-primary: var(--color-neutral-white);

  /* theme-border-solid */
  --color-border-positive-solid: var(--color-feedback-positive-600);
  --color-border-negative-solid: var(--color-feedback-negative-600);
  --color-border-warning-solid: var(--color-feedback-warning-500);
  --color-border-information-solid: var(--color-feedback-information-600);

  /* theme-border-subtle */
  --color-border-positive-subtle: var(--color-feedback-positive-200);
  --color-border-negative-subtle: var(--color-feedback-negative-200);
  --color-border-warning-subtle: var(--color-feedback-warning-200);
  --color-border-information-subtle: var(--color-feedback-information-200);

  /* brand-surface-solid */
  --color-brand-brand-surface-solid-default: var(--color-brand-solid-default);
  --color-brand-brand-surface-solid-hover: var(--color-brand-solid-hover);
  --color-brand-brand-surface-solid-active: var(--color-brand-solid-active);
  --color-brand-brand-secondary-surface-solid-default: var(
    --color-brand-secondary-solid-default
  );
  --color-brand-brand-secondary-surface-solid-hover: var(
    --color-brand-secondary-solid-hover
  );
  --color-brand-brand-secondary-surface-solid-active: var(
    --color-brand-secondary-solid-active
  );

  /* brand-toolctrl-surface-subtle */
  --color-brand-brand-surface-subtle-default: var(--color-brand-subtle-default);
  --color-brand-brand-surface-subtle-hover: var(--color-brand-subtle-hover);
  --color-brand-brand-surface-subtle-active: var(--color-brand-subtle-active);
  --color-brand-brand-secondary-surface-subtle-default: var(
    --color-brand-secondary-subtle-default
  );
  --color-brand-brand-secondary-surface-subtle-hover: var(
    --color-brand-secondary-subtle-hover
  );
  --color-brand-brand-secondary-surface-subtle-active: var(
    --color-brand-secondary-subtle-active
  );

  /* brand-toolctrl-border-solid */
  --color-brand-brand-border-solid-default: var(--color-brand-solid-default);
  --color-brand-brand-border-solid-hover: var(--color-brand-solid-hover);
  --color-brand-brand-border-solid-active: var(--color-brand-solid-active);
  --color-brand-brand-secondary-border-solid-default: var(
    --color-brand-secondary-solid-default
  );
  --color-brand-brand-secondary-border-solid-hover: var(
    --color-brand-secondary-solid-hover
  );
  --color-brand-brand-secondary-border-solid-active: var(
    --color-brand-secondary-solid-active
  );

  /* brand-toolctrl-border-subtle */
  --color-brand-brand-border-subtle-default: var(--color-brand-subtle-default);
  --color-brand-brand-border-subtle-hover: var(--color-brand-subtle-hover);
  --color-brand-brand-border-subtle-active: var(--color-brand-subtle-active);
  --color-brand-brand-secondary-border-subtle-default: var(
    --color-brand-secondary-subtle-default
  );
  --color-brand-brand-secondary-border-subtle-hover: var(
    --color-brand-secondary-subtle-hover
  );
  --color-brand-brand-secondary-border-subtle-active: var(
    --color-brand-secondary-subtle-active
  );

  /* Fonts */
  --text-title-hero: 72px;
  --text-title-hero--font-weight: 600;
  --text-title-hero--letter-spacing: 0em;
  --text-title-hero--line-height: 72px;
  --text-title-page: 48px;
  --text-title-page--font-weight: 600;
  --text-title-page--letter-spacing: 0em;
  --text-title-page--line-height: 56px;
  --text-subtitle: 32px;
  --text-subtitle--font-weight: 600;
  --text-subtitle--letter-spacing: 0em;
  --text-subtitle--line-height: 40px;
  --text-heading-: 24px;
  --text-heading---font-weight: 500;
  --text-heading---letter-spacing: 0em;
  --text-heading---line-height: 32px;
  --text-body-extra-small-regular-150: 12px;
  --text-body-extra-small-regular-150--font-weight: 400;
  --text-body-extra-small-regular-150--letter-spacing: 0em;
  --text-body-extra-small-regular-150--line-height: 18px;
  --text-body-small-medium-150: 14px;
  --text-body-small-medium-150--font-weight: 500;
  --text-body-small-medium-150--letter-spacing: 0em;
  --text-body-small-medium-150--line-height: 21px;
  --text-body-default-medium-150: 16px;
  --text-body-default-medium-150--font-weight: 500;
  --text-body-default-medium-150--letter-spacing: 0em;
  --text-body-default-medium-150--line-height: 24px;
  --text-body-large: 20px;
  --text-body-large--font-weight: 500;
  --text-body-large--letter-spacing: 0em;
  --text-body-large--line-height: 24px;
  --text-body-small-regular-150: 14px;
  --text-body-small-regular-150--font-weight: 400;
  --text-body-small-regular-150--letter-spacing: 0em;
  --text-body-small-regular-150--line-height: 21px;
  --text-body-default-regular-150: 16px;
  --text-body-default-regular-150--font-weight: 400;
  --text-body-default-regular-150--letter-spacing: 0em;
  --text-body-default-regular-150--line-height: 24px;
  --text-body-extra-small-medium-150: 12px;
  --text-body-extra-small-medium-150--font-weight: 500;
  --text-body-extra-small-medium-150--letter-spacing: 0em;
  --text-body-extra-small-medium-150--line-height: 18px;
  --text-body-extra-small-semibold-150: 12px;
  --text-body-extra-small-semibold-150--font-weight: 600;
  --text-body-extra-small-semibold-150--letter-spacing: 0em;
  --text-body-extra-small-semibold-150--line-height: 18px;
  --text-body-small-semibold-150: 14px;
  --text-body-small-semibold-150--font-weight: 600;
  --text-body-small-semibold-150--letter-spacing: 0em;
  --text-body-small-semibold-150--line-height: 21px;
  --text-body-default-semibold-150: 16px;
  --text-body-default-semibold-150--font-weight: 600;
  --text-body-default-semibold-150--letter-spacing: 0em;
  --text-body-default-semibold-150--line-height: 24px;
  --text-body-small-medium-0: 14px;
  --text-body-small-medium-0--font-weight: 500;
  --text-body-small-medium-0--letter-spacing: 0em;
  --text-body-small-medium-0--line-height: 15px;
  --text-body-extra-small-semibold-0: 12px;
  --text-body-extra-small-semibold-0--font-weight: 600;
  --text-body-extra-small-semibold-0--letter-spacing: 0em;
  --text-body-extra-small-semibold-0--line-height: 13px;
  --text-body-extra-small-medium-0: 12px;
  --text-body-extra-small-medium-0--font-weight: 500;
  --text-body-extra-small-medium-0--letter-spacing: 0em;
  --text-body-extra-small-medium-0--line-height: 13px;
  --text-body-extra-small-regular-0: 12px;
  --text-body-extra-small-regular-0--font-weight: 400;
  --text-body-extra-small-regular-0--letter-spacing: 0em;
  --text-body-extra-small-regular-0--line-height: 13px;
  --text-body-small-regular-0: 14px;
  --text-body-small-regular-0--font-weight: 400;
  --text-body-small-regular-0--letter-spacing: 0em;
  --text-body-small-regular-0--line-height: 15px;
  --text-body-small-semibold-0: 14px;
  --text-body-small-semibold-0--font-weight: 600;
  --text-body-small-semibold-0--letter-spacing: 0em;
  --text-body-small-semibold-0--line-height: 15px;
  --text-body-default-regular-0: 16px;
  --text-body-default-regular-0--font-weight: 400;
  --text-body-default-regular-0--letter-spacing: 0em;
  --text-body-default-regular-0--line-height: 17px;
  --text-body-default-medium-0: 16px;
  --text-body-default-medium-0--font-weight: 500;
  --text-body-default-medium-0--letter-spacing: 0em;
  --text-body-default-medium-0--line-height: 17px;
  --text-body-default-semibold-0: 16px;
  --text-body-default-semibold-0--font-weight: 600;
  --text-body-default-semibold-0--letter-spacing: 0em;
  --text-body-default-semibold-0--line-height: 17px;
  --text-body-large-0: 20px;
  --text-body-large-0--font-weight: 500;
  --text-body-large-0--letter-spacing: 0em;
  --text-body-large-0--line-height: 21px;
  --text-subtitle-0: 32px;
  --text-subtitle-0--font-weight: 600;
  --text-subtitle-0--letter-spacing: 0em;
  --text-subtitle-0--line-height: 33px;
  --text-heading-0: 24px;
  --text-heading-0--font-weight: 500;
  --text-heading-0--letter-spacing: 0em;
  --text-heading-0--line-height: 25px;

  /* Font families */
  --font-title-hero: "Instrument Sans";
  --font-title-page: "Instrument Sans";
  --font-subtitle: "Instrument Sans";
  --font-heading-: "Instrument Sans";
  --font-body-extra-small-regular-150: "Instrument Sans";
  --font-body-small-medium-150: "Instrument Sans";
  --font-body-default-medium-150: "Instrument Sans";
  --font-body-large: "Instrument Sans";
  --font-body-small-regular-150: "Instrument Sans";
  --font-body-default-regular-150: "Instrument Sans";
  --font-body-extra-small-medium-150: "Instrument Sans";
  --font-body-extra-small-semibold-150: "Instrument Sans";
  --font-body-small-semibold-150: "Instrument Sans";
  --font-body-default-semibold-150: "Instrument Sans";
  --font-body-small-medium-0: "Instrument Sans";
  --font-body-extra-small-semibold-0: "Instrument Sans";
  --font-body-extra-small-medium-0: "Instrument Sans";
  --font-body-extra-small-regular-0: "Instrument Sans";
  --font-body-small-regular-0: "Instrument Sans";
  --font-body-small-semibold-0: "Instrument Sans";
  --font-body-default-regular-0: "Instrument Sans";
  --font-body-default-medium-0: "Instrument Sans";
  --font-body-default-semibold-0: "Instrument Sans";
  --font-body-large-0: "Instrument Sans";
  --font-subtitle-0: "Instrument Sans";
  --font-heading-0: "Instrument Sans";

  /* Box shadows */
  --shadow-sm: 0px 1px 2px 0px rgb(0 0 0 / 0.08);
  --shadow-default: 0px 1px 2px 0px rgb(0 0 0 / 0.08);
  --shadow-md: 0px 4px 16px -2px rgb(0 0 0 / 0.08),
    0px 2px 4px -1px rgb(0 0 0 / 0.08);
  --shadow-lg: 0px 12px 32px -4px rgb(0 0 0 / 0.08),
    0px 4px 8px -2px rgb(0 0 0 / 0.08);
  --shadow-overlay: 0px 12px 32px -4px rgb(0 0 0 / 0.08),
    0px 4px 8px -2px rgb(0 0 0 / 0.08);
  --shadow-focus: 0px 0px 0px 3px rgb(7 145 240 / 0.4);

  /* Border radiuses */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-round: 9999px;

  /* Spacing */
  --spacing-112: 28rem;
  --spacing-144: 36rem;
  --spacing-192: 48rem;
  --spacing-256: 64rem;
  --spacing-320: 80rem;
}

/* Container */
@utility container {
  padding-left: 16px;
  padding-right: 16px;

  @media (width >= theme(--breakpoint-sm)) {
    padding-left: calc((100vw + 16px - 640px) / 2);
    padding-right: calc((100vw + 16px - 640px) / 2);
  }

  @media (width >= theme(--breakpoint-md)) {
    padding-left: calc((100vw + 16px - 768px) / 2);
    padding-right: calc((100vw + 16px - 768px) / 2);
  }

  @media (width >= theme(--breakpoint-lg)) {
    padding-left: calc((100vw + 16px - 1024px) / 2);
    padding-right: calc((100vw + 16px - 1024px) / 2);
  }

  @media (width >= theme(--breakpoint-xl)) {
    padding-left: calc((100vw + 16px - 1280px) / 2);
    padding-right: calc((100vw + 16px - 1280px) / 2);
  }

  @media (width >= theme(--breakpoint-2xl)) {
    padding-left: calc((100vw + 16px - 1536px) / 2);
    padding-right: calc((100vw + 16px - 1536px) / 2);
  }
}

@custom-variant mobile (@media (max-width: 767px));