@maanlamp/react-web-ui 0.0.0-stage → 0.1.1

package/dist/tokens.css

@@ -0,0 +1,1085 @@
+@layer kit.reset, kit.base, kit.components;
+
+/* -------------------------------------------
+ *  Autogenerated by ⛋ Terrazzo. DO NOT EDIT!
+ * ------------------------------------------- */
+
+:root {
+	color-scheme: light;
+--ref-blue-0: oklch(100% 0 234.03);
+  --ref-blue-10: oklch(99.01% 0.0022 234.03);
+  --ref-blue-25: oklch(97.52% 0.0053 234.03);
+  --ref-blue-50: oklch(95.04% 0.0106 234.03);
+  --ref-blue-100: oklch(90.08% 0.0211 234.03);
+  --ref-blue-150: oklch(85.12% 0.0317 234.03);
+  --ref-blue-200: oklch(80.16% 0.0422 234.03);
+  --ref-blue-250: oklch(75.2% 0.0528 234.03);
+  --ref-blue-300: oklch(70.24% 0.0633 234.03);
+  --ref-blue-350: oklch(65.27% 0.0739 234.03);
+  --ref-blue-400: oklch(60.31% 0.0844 234.03);
+  --ref-blue-450: oklch(55.35% 0.0949 234.03);
+  --ref-blue-500: rgb(0% 42.745% 59.216%);
+  --ref-blue-550: oklch(45.35% 0.0949 234.03);
+  --ref-blue-600: oklch(40.31% 0.0844 234.03);
+  --ref-blue-650: oklch(35.27% 0.0738 234.03);
+  --ref-blue-700: oklch(30.24% 0.0633 234.03);
+  --ref-blue-750: oklch(25.2% 0.0527 234.03);
+  --ref-blue-800: oklch(20.16% 0.0422 234.03);
+  --ref-blue-850: oklch(15.12% 0.0316 234.03);
+  --ref-blue-900: oklch(10.08% 0.0211 234.03);
+  --ref-blue-950: oklch(5.04% 0.0105 234.03);
+  --ref-blue-975: oklch(2.52% 0.0053 234.03);
+  --ref-blue-990: oklch(1.01% 0.0021 234.03);
+  --ref-blue-1000: oklch(0% 0 234.03);
+  --ref-font-body-bold-1: var(--ref-font-body-bold-1-font-weight) var(--ref-font-body-bold-1-font-size)/var(--ref-font-body-bold-1-line-height) var(--ref-font-body-bold-1-font-family);
+  --ref-font-body-bold-1-font-family: "Roboto", sans-serif;
+  --ref-font-body-bold-1-font-size: 1rem;
+  --ref-font-body-bold-1-font-weight: 700;
+  --ref-font-body-bold-1-letter-spacing: 0px;
+  --ref-font-body-bold-1-line-height: 1.4;
+  --ref-font-body-bold-2: var(--ref-font-body-bold-2-font-weight) var(--ref-font-body-bold-2-font-size)/var(--ref-font-body-bold-2-line-height) var(--ref-font-body-bold-2-font-family);
+  --ref-font-body-bold-2-font-family: "Roboto", sans-serif;
+  --ref-font-body-bold-2-font-size: 1.167rem;
+  --ref-font-body-bold-2-font-weight: 700;
+  --ref-font-body-bold-2-letter-spacing: 0px;
+  --ref-font-body-bold-2-line-height: 1.4;
+  --ref-font-body-bold-3: var(--ref-font-body-bold-3-font-weight) var(--ref-font-body-bold-3-font-size)/var(--ref-font-body-bold-3-line-height) var(--ref-font-body-bold-3-font-family);
+  --ref-font-body-bold-3-font-family: "Roboto", sans-serif;
+  --ref-font-body-bold-3-font-size: 1.333rem;
+  --ref-font-body-bold-3-font-weight: 700;
+  --ref-font-body-bold-3-letter-spacing: 0px;
+  --ref-font-body-bold-3-line-height: 1.4;
+  --ref-font-body-bold-4: var(--ref-font-body-bold-4-font-weight) var(--ref-font-body-bold-4-font-size)/var(--ref-font-body-bold-4-line-height) var(--ref-font-body-bold-4-font-family);
+  --ref-font-body-bold-4-font-family: "Roboto", sans-serif;
+  --ref-font-body-bold-4-font-size: 1.5rem;
+  --ref-font-body-bold-4-font-weight: 700;
+  --ref-font-body-bold-4-letter-spacing: 0px;
+  --ref-font-body-bold-4-line-height: 1.4;
+  --ref-font-body-bold-5: var(--ref-font-body-bold-5-font-weight) var(--ref-font-body-bold-5-font-size)/var(--ref-font-body-bold-5-line-height) var(--ref-font-body-bold-5-font-family);
+  --ref-font-body-bold-5-font-family: "Roboto", sans-serif;
+  --ref-font-body-bold-5-font-size: 1.667rem;
+  --ref-font-body-bold-5-font-weight: 700;
+  --ref-font-body-bold-5-letter-spacing: 0px;
+  --ref-font-body-bold-5-line-height: 1.4;
+  --ref-font-body-extrabold-1: var(--ref-font-body-extrabold-1-font-weight) var(--ref-font-body-extrabold-1-font-size)/var(--ref-font-body-extrabold-1-line-height) var(--ref-font-body-extrabold-1-font-family);
+  --ref-font-body-extrabold-1-font-family: "Roboto", sans-serif;
+  --ref-font-body-extrabold-1-font-size: 1rem;
+  --ref-font-body-extrabold-1-font-weight: 800;
+  --ref-font-body-extrabold-1-letter-spacing: 0px;
+  --ref-font-body-extrabold-1-line-height: 1.4;
+  --ref-font-body-extrabold-2: var(--ref-font-body-extrabold-2-font-weight) var(--ref-font-body-extrabold-2-font-size)/var(--ref-font-body-extrabold-2-line-height) var(--ref-font-body-extrabold-2-font-family);
+  --ref-font-body-extrabold-2-font-family: "Roboto", sans-serif;
+  --ref-font-body-extrabold-2-font-size: 1.167rem;
+  --ref-font-body-extrabold-2-font-weight: 800;
+  --ref-font-body-extrabold-2-letter-spacing: 0px;
+  --ref-font-body-extrabold-2-line-height: 1.4;
+  --ref-font-body-extrabold-3: var(--ref-font-body-extrabold-3-font-weight) var(--ref-font-body-extrabold-3-font-size)/var(--ref-font-body-extrabold-3-line-height) var(--ref-font-body-extrabold-3-font-family);
+  --ref-font-body-extrabold-3-font-family: "Roboto", sans-serif;
+  --ref-font-body-extrabold-3-font-size: 1.333rem;
+  --ref-font-body-extrabold-3-font-weight: 800;
+  --ref-font-body-extrabold-3-letter-spacing: 0px;
+  --ref-font-body-extrabold-3-line-height: 1.4;
+  --ref-font-body-extrabold-4: var(--ref-font-body-extrabold-4-font-weight) var(--ref-font-body-extrabold-4-font-size)/var(--ref-font-body-extrabold-4-line-height) var(--ref-font-body-extrabold-4-font-family);
+  --ref-font-body-extrabold-4-font-family: "Roboto", sans-serif;
+  --ref-font-body-extrabold-4-font-size: 1.5rem;
+  --ref-font-body-extrabold-4-font-weight: 800;
+  --ref-font-body-extrabold-4-letter-spacing: 0px;
+  --ref-font-body-extrabold-4-line-height: 1.4;
+  --ref-font-body-extrabold-5: var(--ref-font-body-extrabold-5-font-weight) var(--ref-font-body-extrabold-5-font-size)/var(--ref-font-body-extrabold-5-line-height) var(--ref-font-body-extrabold-5-font-family);
+  --ref-font-body-extrabold-5-font-family: "Roboto", sans-serif;
+  --ref-font-body-extrabold-5-font-size: 1.667rem;
+  --ref-font-body-extrabold-5-font-weight: 800;
+  --ref-font-body-extrabold-5-letter-spacing: 0px;
+  --ref-font-body-extrabold-5-line-height: 1.4;
+  --ref-font-body-regular-1: var(--ref-font-body-regular-1-font-weight) var(--ref-font-body-regular-1-font-size)/var(--ref-font-body-regular-1-line-height) var(--ref-font-body-regular-1-font-family);
+  --ref-font-body-regular-1-font-family: "Roboto", sans-serif;
+  --ref-font-body-regular-1-font-size: 1rem;
+  --ref-font-body-regular-1-font-weight: 400;
+  --ref-font-body-regular-1-letter-spacing: 0px;
+  --ref-font-body-regular-1-line-height: 1.4;
+  --ref-font-body-regular-2: var(--ref-font-body-regular-2-font-weight) var(--ref-font-body-regular-2-font-size)/var(--ref-font-body-regular-2-line-height) var(--ref-font-body-regular-2-font-family);
+  --ref-font-body-regular-2-font-family: "Roboto", sans-serif;
+  --ref-font-body-regular-2-font-size: 1.167rem;
+  --ref-font-body-regular-2-font-weight: 400;
+  --ref-font-body-regular-2-letter-spacing: 0px;
+  --ref-font-body-regular-2-line-height: 1.4;
+  --ref-font-body-regular-3: var(--ref-font-body-regular-3-font-weight) var(--ref-font-body-regular-3-font-size)/var(--ref-font-body-regular-3-line-height) var(--ref-font-body-regular-3-font-family);
+  --ref-font-body-regular-3-font-family: "Roboto", sans-serif;
+  --ref-font-body-regular-3-font-size: 1.333rem;
+  --ref-font-body-regular-3-font-weight: 400;
+  --ref-font-body-regular-3-letter-spacing: 0px;
+  --ref-font-body-regular-3-line-height: 1.4;
+  --ref-font-body-regular-4: var(--ref-font-body-regular-4-font-weight) var(--ref-font-body-regular-4-font-size)/var(--ref-font-body-regular-4-line-height) var(--ref-font-body-regular-4-font-family);
+  --ref-font-body-regular-4-font-family: "Roboto", sans-serif;
+  --ref-font-body-regular-4-font-size: 1.5rem;
+  --ref-font-body-regular-4-font-weight: 400;
+  --ref-font-body-regular-4-letter-spacing: 0px;
+  --ref-font-body-regular-4-line-height: 1.4;
+  --ref-font-body-regular-5: var(--ref-font-body-regular-5-font-weight) var(--ref-font-body-regular-5-font-size)/var(--ref-font-body-regular-5-line-height) var(--ref-font-body-regular-5-font-family);
+  --ref-font-body-regular-5-font-family: "Roboto", sans-serif;
+  --ref-font-body-regular-5-font-size: 1.667rem;
+  --ref-font-body-regular-5-font-weight: 400;
+  --ref-font-body-regular-5-letter-spacing: 0px;
+  --ref-font-body-regular-5-line-height: 1.4;
+  --ref-font-body-semibold-1: var(--ref-font-body-semibold-1-font-weight) var(--ref-font-body-semibold-1-font-size)/var(--ref-font-body-semibold-1-line-height) var(--ref-font-body-semibold-1-font-family);
+  --ref-font-body-semibold-1-font-family: "Roboto", sans-serif;
+  --ref-font-body-semibold-1-font-size: 1rem;
+  --ref-font-body-semibold-1-font-weight: 600;
+  --ref-font-body-semibold-1-letter-spacing: 0px;
+  --ref-font-body-semibold-1-line-height: 1.4;
+  --ref-font-body-semibold-2: var(--ref-font-body-semibold-2-font-weight) var(--ref-font-body-semibold-2-font-size)/var(--ref-font-body-semibold-2-line-height) var(--ref-font-body-semibold-2-font-family);
+  --ref-font-body-semibold-2-font-family: "Roboto", sans-serif;
+  --ref-font-body-semibold-2-font-size: 1.167rem;
+  --ref-font-body-semibold-2-font-weight: 600;
+  --ref-font-body-semibold-2-letter-spacing: 0px;
+  --ref-font-body-semibold-2-line-height: 1.4;
+  --ref-font-body-semibold-3: var(--ref-font-body-semibold-3-font-weight) var(--ref-font-body-semibold-3-font-size)/var(--ref-font-body-semibold-3-line-height) var(--ref-font-body-semibold-3-font-family);
+  --ref-font-body-semibold-3-font-family: "Roboto", sans-serif;
+  --ref-font-body-semibold-3-font-size: 1.333rem;
+  --ref-font-body-semibold-3-font-weight: 600;
+  --ref-font-body-semibold-3-letter-spacing: 0px;
+  --ref-font-body-semibold-3-line-height: 1.4;
+  --ref-font-body-semibold-4: var(--ref-font-body-semibold-4-font-weight) var(--ref-font-body-semibold-4-font-size)/var(--ref-font-body-semibold-4-line-height) var(--ref-font-body-semibold-4-font-family);
+  --ref-font-body-semibold-4-font-family: "Roboto", sans-serif;
+  --ref-font-body-semibold-4-font-size: 1.5rem;
+  --ref-font-body-semibold-4-font-weight: 600;
+  --ref-font-body-semibold-4-letter-spacing: 0px;
+  --ref-font-body-semibold-4-line-height: 1.4;
+  --ref-font-body-semibold-5: var(--ref-font-body-semibold-5-font-weight) var(--ref-font-body-semibold-5-font-size)/var(--ref-font-body-semibold-5-line-height) var(--ref-font-body-semibold-5-font-family);
+  --ref-font-body-semibold-5-font-family: "Roboto", sans-serif;
+  --ref-font-body-semibold-5-font-size: 1.667rem;
+  --ref-font-body-semibold-5-font-weight: 600;
+  --ref-font-body-semibold-5-letter-spacing: 0px;
+  --ref-font-body-semibold-5-line-height: 1.4;
+  --ref-font-heading-bold-1: var(--ref-font-heading-bold-1-font-weight) var(--ref-font-heading-bold-1-font-size)/var(--ref-font-heading-bold-1-line-height) var(--ref-font-heading-bold-1-font-family);
+  --ref-font-heading-bold-1-font-family: "Satoshi", sans-serif;
+  --ref-font-heading-bold-1-font-size: 1.5rem;
+  --ref-font-heading-bold-1-font-weight: 700;
+  --ref-font-heading-bold-1-letter-spacing: 0px;
+  --ref-font-heading-bold-1-line-height: 1.4;
+  --ref-font-heading-bold-2: var(--ref-font-heading-bold-2-font-weight) var(--ref-font-heading-bold-2-font-size)/var(--ref-font-heading-bold-2-line-height) var(--ref-font-heading-bold-2-font-family);
+  --ref-font-heading-bold-2-font-family: "Satoshi", sans-serif;
+  --ref-font-heading-bold-2-font-size: 1.833rem;
+  --ref-font-heading-bold-2-font-weight: 700;
+  --ref-font-heading-bold-2-letter-spacing: 0px;
+  --ref-font-heading-bold-2-line-height: 1.4;
+  --ref-font-heading-bold-3: var(--ref-font-heading-bold-3-font-weight) var(--ref-font-heading-bold-3-font-size)/var(--ref-font-heading-bold-3-line-height) var(--ref-font-heading-bold-3-font-family);
+  --ref-font-heading-bold-3-font-family: "Satoshi", sans-serif;
+  --ref-font-heading-bold-3-font-size: 2.25rem;
+  --ref-font-heading-bold-3-font-weight: 700;
+  --ref-font-heading-bold-3-letter-spacing: 0px;
+  --ref-font-heading-bold-3-line-height: 1.4;
+  --ref-font-heading-bold-4: var(--ref-font-heading-bold-4-font-weight) var(--ref-font-heading-bold-4-font-size)/var(--ref-font-heading-bold-4-line-height) var(--ref-font-heading-bold-4-font-family);
+  --ref-font-heading-bold-4-font-family: "Satoshi", sans-serif;
+  --ref-font-heading-bold-4-font-size: 2.75rem;
+  --ref-font-heading-bold-4-font-weight: 700;
+  --ref-font-heading-bold-4-letter-spacing: 0px;
+  --ref-font-heading-bold-4-line-height: 1.4;
+  --ref-font-heading-bold-5: var(--ref-font-heading-bold-5-font-weight) var(--ref-font-heading-bold-5-font-size)/var(--ref-font-heading-bold-5-line-height) var(--ref-font-heading-bold-5-font-family);
+  --ref-font-heading-bold-5-font-family: "Satoshi", sans-serif;
+  --ref-font-heading-bold-5-font-size: 3.333rem;
+  --ref-font-heading-bold-5-font-weight: 700;
+  --ref-font-heading-bold-5-letter-spacing: 0px;
+  --ref-font-heading-bold-5-line-height: 1.4;
+  --ref-font-heading-regular-1: var(--ref-font-heading-regular-1-font-weight) var(--ref-font-heading-regular-1-font-size)/var(--ref-font-heading-regular-1-line-height) var(--ref-font-heading-regular-1-font-family);
+  --ref-font-heading-regular-1-font-family: "Satoshi", sans-serif;
+  --ref-font-heading-regular-1-font-size: 1.5rem;
+  --ref-font-heading-regular-1-font-weight: 400;
+  --ref-font-heading-regular-1-letter-spacing: 0px;
+  --ref-font-heading-regular-1-line-height: 1.4;
+  --ref-font-heading-regular-2: var(--ref-font-heading-regular-2-font-weight) var(--ref-font-heading-regular-2-font-size)/var(--ref-font-heading-regular-2-line-height) var(--ref-font-heading-regular-2-font-family);
+  --ref-font-heading-regular-2-font-family: "Satoshi", sans-serif;
+  --ref-font-heading-regular-2-font-size: 1.833rem;
+  --ref-font-heading-regular-2-font-weight: 400;
+  --ref-font-heading-regular-2-letter-spacing: 0px;
+  --ref-font-heading-regular-2-line-height: 1.4;
+  --ref-font-heading-regular-3: var(--ref-font-heading-regular-3-font-weight) var(--ref-font-heading-regular-3-font-size)/var(--ref-font-heading-regular-3-line-height) var(--ref-font-heading-regular-3-font-family);
+  --ref-font-heading-regular-3-font-family: "Satoshi", sans-serif;
+  --ref-font-heading-regular-3-font-size: 2.25rem;
+  --ref-font-heading-regular-3-font-weight: 400;
+  --ref-font-heading-regular-3-letter-spacing: 0px;
+  --ref-font-heading-regular-3-line-height: 1.4;
+  --ref-font-heading-regular-4: var(--ref-font-heading-regular-4-font-weight) var(--ref-font-heading-regular-4-font-size)/var(--ref-font-heading-regular-4-line-height) var(--ref-font-heading-regular-4-font-family);
+  --ref-font-heading-regular-4-font-family: "Satoshi", sans-serif;
+  --ref-font-heading-regular-4-font-size: 2.75rem;
+  --ref-font-heading-regular-4-font-weight: 400;
+  --ref-font-heading-regular-4-letter-spacing: 0px;
+  --ref-font-heading-regular-4-line-height: 1.4;
+  --ref-font-heading-regular-5: var(--ref-font-heading-regular-5-font-weight) var(--ref-font-heading-regular-5-font-size)/var(--ref-font-heading-regular-5-line-height) var(--ref-font-heading-regular-5-font-family);
+  --ref-font-heading-regular-5-font-family: "Satoshi", sans-serif;
+  --ref-font-heading-regular-5-font-size: 3.333rem;
+  --ref-font-heading-regular-5-font-weight: 400;
+  --ref-font-heading-regular-5-letter-spacing: 0px;
+  --ref-font-heading-regular-5-line-height: 1.4;
+  --ref-green-0: oklch(100% 0 170.81);
+  --ref-green-10: oklch(99.2% 0.0024 170.81);
+  --ref-green-25: oklch(98.01% 0.006 170.81);
+  --ref-green-50: oklch(96.02% 0.0119 170.81);
+  --ref-green-100: oklch(92.04% 0.0237 170.81);
+  --ref-green-150: oklch(88.06% 0.0355 170.81);
+  --ref-green-200: oklch(84.08% 0.0473 170.81);
+  --ref-green-250: oklch(80.1% 0.0591 170.81);
+  --ref-green-300: oklch(76.12% 0.0709 170.81);
+  --ref-green-350: oklch(72.14% 0.0827 170.81);
+  --ref-green-400: oklch(68.16% 0.0945 170.81);
+  --ref-green-450: oklch(64.18% 0.1063 170.81);
+  --ref-green-500: rgb(0% 59.216% 46.667%);
+  --ref-green-550: oklch(54.18% 0.1063 170.81);
+  --ref-green-600: oklch(48.16% 0.0945 170.81);
+  --ref-green-650: oklch(42.14% 0.0827 170.81);
+  --ref-green-700: oklch(36.12% 0.0709 170.81);
+  --ref-green-750: oklch(30.1% 0.0591 170.8);
+  --ref-green-800: oklch(24.08% 0.0472 170.81);
+  --ref-green-850: oklch(18.06% 0.0354 170.81);
+  --ref-green-900: oklch(12.04% 0.0236 170.81);
+  --ref-green-950: oklch(6.02% 0.0118 170.81);
+  --ref-green-975: oklch(3.01% 0.0059 170.81);
+  --ref-green-990: oklch(1.2% 0.0024 170.81);
+  --ref-green-1000: oklch(0% 0 170.81);
+  --ref-neutral-0: oklch(100% 0 272.74);
+  --ref-neutral-10: oklch(98.79% 0.0005 272.74);
+  --ref-neutral-25: oklch(96.98% 0.0013 272.74);
+  --ref-neutral-50: oklch(93.96% 0.0025 272.74);
+  --ref-neutral-100: oklch(87.92% 0.0049 272.74);
+  --ref-neutral-150: oklch(81.88% 0.0073 272.74);
+  --ref-neutral-200: oklch(75.84% 0.0097 272.74);
+  --ref-neutral-250: oklch(69.8% 0.0121 272.74);
+  --ref-neutral-300: oklch(63.76% 0.0145 272.74);
+  --ref-neutral-350: oklch(57.72% 0.017 272.74);
+  --ref-neutral-400: oklch(51.68% 0.0194 272.74);
+  --ref-neutral-450: oklch(45.64% 0.0218 272.74);
+  --ref-neutral-500: rgb(25.882% 27.451% 32.941%);
+  --ref-neutral-550: oklch(35.64% 0.0218 272.74);
+  --ref-neutral-600: oklch(31.68% 0.0194 272.74);
+  --ref-neutral-650: oklch(27.72% 0.0169 272.74);
+  --ref-neutral-700: oklch(23.76% 0.0145 272.74);
+  --ref-neutral-750: oklch(19.8% 0.0121 272.74);
+  --ref-neutral-800: oklch(15.84% 0.0097 272.74);
+  --ref-neutral-850: oklch(11.88% 0.0073 272.74);
+  --ref-neutral-900: oklch(7.92% 0.0048 272.74);
+  --ref-neutral-950: oklch(3.96% 0.0024 272.74);
+  --ref-neutral-975: oklch(1.98% 0.0012 272.74);
+  --ref-neutral-990: oklch(0.79% 0.0005 272.74);
+  --ref-neutral-1000: oklch(0% 0 272.74);
+  --ref-orange-0: oklch(100% 0 40.71);
+  --ref-orange-10: oklch(99.36% 0.0025 40.71);
+  --ref-orange-25: oklch(98.4% 0.0061 40.71);
+  --ref-orange-50: oklch(96.8% 0.0122 40.71);
+  --ref-orange-100: oklch(93.61% 0.0243 40.71);
+  --ref-orange-150: oklch(90.42% 0.0365 40.71);
+  --ref-orange-200: oklch(87.22% 0.0486 40.71);
+  --ref-orange-250: oklch(84.03% 0.0608 40.71);
+  --ref-orange-300: oklch(80.83% 0.0729 40.71);
+  --ref-orange-350: oklch(77.64% 0.085 40.71);
+  --ref-orange-400: oklch(74.44% 0.0972 40.71);
+  --ref-orange-450: oklch(71.25% 0.1093 40.71);
+  --ref-orange-500: rgb(84.314% 49.02% 36.078%);
+  --ref-orange-550: oklch(61.25% 0.1093 40.71);
+  --ref-orange-600: oklch(54.44% 0.0972 40.71);
+  --ref-orange-650: oklch(47.64% 0.085 40.71);
+  --ref-orange-700: oklch(40.83% 0.0729 40.71);
+  --ref-orange-750: oklch(34.03% 0.0607 40.71);
+  --ref-orange-800: oklch(27.22% 0.0486 40.71);
+  --ref-orange-850: oklch(20.42% 0.0364 40.71);
+  --ref-orange-900: oklch(13.61% 0.0243 40.71);
+  --ref-orange-950: oklch(6.81% 0.0121 40.71);
+  --ref-orange-975: oklch(3.4% 0.0061 40.71);
+  --ref-orange-990: oklch(1.36% 0.0024 40.71);
+  --ref-orange-1000: oklch(0% 0 40.71);
+  --ref-red-0: oklch(100% 0 21.65);
+  --ref-red-10: oklch(99.26% 0.0032 21.65);
+  --ref-red-25: oklch(98.15% 0.0078 21.65);
+  --ref-red-50: oklch(96.31% 0.0156 21.65);
+  --ref-red-100: oklch(92.61% 0.0311 21.65);
+  --ref-red-150: oklch(88.92% 0.0467 21.65);
+  --ref-red-200: oklch(85.22% 0.0622 21.65);
+  --ref-red-250: oklch(81.53% 0.0777 21.65);
+  --ref-red-300: oklch(77.84% 0.0933 21.65);
+  --ref-red-350: oklch(74.14% 0.1088 21.65);
+  --ref-red-400: oklch(70.45% 0.1243 21.65);
+  --ref-red-450: oklch(66.75% 0.1399 21.65);
+  --ref-red-500: rgb(84.314% 36.078% 36.863%);
+  --ref-red-550: oklch(56.75% 0.1398 21.65);
+  --ref-red-600: oklch(50.45% 0.1243 21.65);
+  --ref-red-650: oklch(44.14% 0.1088 21.65);
+  --ref-red-700: oklch(37.84% 0.0932 21.65);
+  --ref-red-750: oklch(31.53% 0.0777 21.65);
+  --ref-red-800: oklch(25.22% 0.0622 21.65);
+  --ref-red-850: oklch(18.92% 0.0466 21.65);
+  --ref-red-900: oklch(12.61% 0.0311 21.65);
+  --ref-red-950: oklch(6.31% 0.0155 21.65);
+  --ref-red-975: oklch(3.15% 0.0078 21.65);
+  --ref-red-990: oklch(1.26% 0.0031 21.65);
+  --ref-red-1000: oklch(0% 0 21.65);
+  --ref-sand-0: oklch(100% 0 17.89);
+  --ref-sand-10: oklch(99.13% 0.0005 17.89);
+  --ref-sand-25: oklch(97.83% 0.0012 17.89);
+  --ref-sand-50: oklch(95.66% 0.0024 17.89);
+  --ref-sand-100: oklch(91.33% 0.0048 17.89);
+  --ref-sand-150: oklch(86.99% 0.0072 17.89);
+  --ref-sand-200: oklch(82.66% 0.0096 17.89);
+  --ref-sand-250: oklch(78.32% 0.012 17.89);
+  --ref-sand-300: oklch(73.99% 0.0144 17.89);
+  --ref-sand-350: oklch(69.65% 0.0168 17.89);
+  --ref-sand-400: oklch(65.32% 0.0192 17.89);
+  --ref-sand-450: oklch(60.98% 0.0215 17.89);
+  --ref-sand-500: rgb(51.765% 44.314% 44.314%);
+  --ref-sand-550: oklch(50.98% 0.0215 17.89);
+  --ref-sand-600: oklch(45.32% 0.0191 17.89);
+  --ref-sand-650: oklch(39.65% 0.0167 17.89);
+  --ref-sand-700: oklch(33.99% 0.0144 17.89);
+  --ref-sand-750: oklch(28.32% 0.012 17.89);
+  --ref-sand-800: oklch(22.66% 0.0096 17.89);
+  --ref-sand-850: oklch(16.99% 0.0072 17.89);
+  --ref-sand-900: oklch(11.33% 0.0048 17.89);
+  --ref-sand-950: oklch(5.66% 0.0024 17.89);
+  --ref-sand-975: oklch(2.83% 0.0012 17.89);
+  --ref-sand-990: oklch(1.13% 0.0005 17.89);
+  --ref-sand-1000: oklch(0% 0 17.89);
+  --sys-color-bg: var(--ref-sand-25);
+  --sys-color-border: var(--ref-sand-150);
+  --sys-color-error-bg: var(--ref-red-50);
+  --sys-color-error-border: var(--ref-red-200);
+  --sys-color-error-fg: var(--ref-red-700);
+  --sys-color-error-outline: var(--ref-red-250);
+  --sys-color-focus-ring: var(--sys-color-primary);
+  --sys-color-identity-1-bg: oklch(96.02% 0.0119 84);
+  --sys-color-identity-1-fg: oklch(24.08% 0.0472 84);
+  --sys-color-identity-2-bg: oklch(96.02% 0.0119 127);
+  --sys-color-identity-2-fg: oklch(24.08% 0.0472 127);
+  --sys-color-identity-3-bg: oklch(96.02% 0.0119 283);
+  --sys-color-identity-3-fg: oklch(24.08% 0.0472 283);
+  --sys-color-identity-4-bg: oklch(96.02% 0.0119 333);
+  --sys-color-identity-4-fg: oklch(24.08% 0.0472 333);
+  --sys-color-info-bg: var(--ref-blue-50);
+  --sys-color-info-border: var(--ref-blue-200);
+  --sys-color-info-fg: var(--ref-blue-700);
+  --sys-color-neutral-bg: var(--ref-neutral-50);
+  --sys-color-neutral-border: var(--ref-neutral-200);
+  --sys-color-neutral-fg: var(--ref-neutral-700);
+  --sys-color-on-primary: var(--ref-neutral-0);
+  --sys-color-on-primary-container: var(--ref-green-800);
+  --sys-color-outline: var(--ref-sand-250);
+  --sys-color-primary: var(--ref-green-550);
+  --sys-color-primary-container: var(--ref-green-50);
+  --sys-color-selection-bg: var(--ref-green-100);
+  --sys-color-selection-fg: var(--ref-green-800);
+  --sys-color-success-bg: var(--ref-green-50);
+  --sys-color-success-border: var(--ref-green-200);
+  --sys-color-success-fg: var(--ref-green-700);
+  --sys-color-surface: var(--ref-neutral-0);
+  --sys-color-surface-high: var(--ref-sand-50);
+  --sys-color-surface-highest: var(--ref-sand-100);
+  --sys-color-surface-lowest: var(--ref-sand-10);
+  --sys-color-surface-overlay: var(--ref-neutral-0);
+  --sys-color-surface-overlay-high: var(--ref-neutral-0);
+  --sys-color-text: var(--ref-neutral-500);
+  --sys-color-text-inverse: var(--ref-neutral-0);
+  --sys-color-text-muted: var(--ref-neutral-400);
+  --sys-color-warning-bg: var(--ref-orange-50);
+  --sys-color-warning-border: var(--ref-orange-200);
+  --sys-color-warning-fg: var(--ref-orange-700);
+  /* The page */
+  --sys-elevation-0: 0px 0px rgb(0% 0% 0% / 0);
+  /* Popups and tooltips */
+  --sys-elevation-1: 0px 1px 2px var(--sys-shadow-umbra), 0px 2px 6px 2px var(--sys-shadow-penumbra);
+  /* Level 1 cast around a whole silhouette, such as a popup with its arrow. */
+  --sys-elevation-1-filter: drop-shadow(0px 1px 2px var(--sys-shadow-umbra)) drop-shadow(0px 2px 8px var(--sys-shadow-penumbra));
+  /* Toasts */
+  --sys-elevation-2: 0px 2px 3px var(--sys-shadow-umbra), 0px 6px 10px 4px var(--sys-shadow-penumbra);
+  --sys-focus-ring-offset: 2px;
+  --sys-focus-ring-width: 3px;
+  --sys-font-body-large: var(--sys-font-body-large-font-weight) var(--sys-font-body-large-font-size)/var(--sys-font-body-large-line-height) var(--sys-font-body-large-font-family);
+  --sys-font-body-large-font-family: var(--ref-font-body-regular-2-font-family);
+  --sys-font-body-large-font-size: var(--ref-font-body-regular-2-font-size);
+  --sys-font-body-large-font-weight: var(--ref-font-body-regular-2-font-weight);
+  --sys-font-body-large-letter-spacing: var(--ref-font-body-regular-2-letter-spacing);
+  --sys-font-body-large-line-height: var(--ref-font-body-regular-2-line-height);
+  --sys-font-body-medium: var(--sys-font-body-medium-font-weight) var(--sys-font-body-medium-font-size)/var(--sys-font-body-medium-line-height) var(--sys-font-body-medium-font-family);
+  --sys-font-body-medium-font-family: var(--ref-font-body-regular-1-font-family);
+  --sys-font-body-medium-font-size: var(--ref-font-body-regular-1-font-size);
+  --sys-font-body-medium-font-weight: var(--ref-font-body-regular-1-font-weight);
+  --sys-font-body-medium-letter-spacing: var(--ref-font-body-regular-1-letter-spacing);
+  --sys-font-body-medium-line-height: var(--ref-font-body-regular-1-line-height);
+  --sys-font-body-medium-strong: var(--sys-font-body-medium-strong-font-weight) var(--sys-font-body-medium-strong-font-size)/var(--sys-font-body-medium-strong-line-height) var(--sys-font-body-medium-strong-font-family);
+  --sys-font-body-medium-strong-font-family: var(--ref-font-body-semibold-1-font-family);
+  --sys-font-body-medium-strong-font-size: var(--ref-font-body-semibold-1-font-size);
+  --sys-font-body-medium-strong-font-weight: var(--ref-font-body-semibold-1-font-weight);
+  --sys-font-body-medium-strong-letter-spacing: var(--ref-font-body-semibold-1-letter-spacing);
+  --sys-font-body-medium-strong-line-height: var(--ref-font-body-semibold-1-line-height);
+  --sys-font-body-small: var(--sys-font-body-small-font-weight) var(--sys-font-body-small-font-size)/var(--sys-font-body-small-line-height) var(--sys-font-body-small-font-family);
+  --sys-font-body-small-font-family: "Roboto", sans-serif;
+  --sys-font-body-small-font-size: 0.917rem;
+  --sys-font-body-small-font-weight: 400;
+  --sys-font-body-small-letter-spacing: 0px;
+  --sys-font-body-small-line-height: 1.4;
+  --sys-font-heading-large: var(--sys-font-heading-large-font-weight) var(--sys-font-heading-large-font-size)/var(--sys-font-heading-large-line-height) var(--sys-font-heading-large-font-family);
+  --sys-font-heading-large-font-family: var(--ref-font-heading-bold-3-font-family);
+  --sys-font-heading-large-font-size: var(--ref-font-heading-bold-3-font-size);
+  --sys-font-heading-large-font-weight: var(--ref-font-heading-bold-3-font-weight);
+  --sys-font-heading-large-letter-spacing: var(--ref-font-heading-bold-3-letter-spacing);
+  --sys-font-heading-large-line-height: var(--ref-font-heading-bold-3-line-height);
+  --sys-font-heading-medium: var(--sys-font-heading-medium-font-weight) var(--sys-font-heading-medium-font-size)/var(--sys-font-heading-medium-line-height) var(--sys-font-heading-medium-font-family);
+  --sys-font-heading-medium-font-family: var(--ref-font-heading-bold-2-font-family);
+  --sys-font-heading-medium-font-size: var(--ref-font-heading-bold-2-font-size);
+  --sys-font-heading-medium-font-weight: var(--ref-font-heading-bold-2-font-weight);
+  --sys-font-heading-medium-letter-spacing: var(--ref-font-heading-bold-2-letter-spacing);
+  --sys-font-heading-medium-line-height: var(--ref-font-heading-bold-2-line-height);
+  --sys-font-heading-small: var(--sys-font-heading-small-font-weight) var(--sys-font-heading-small-font-size)/var(--sys-font-heading-small-line-height) var(--sys-font-heading-small-font-family);
+  --sys-font-heading-small-font-family: var(--ref-font-heading-bold-1-font-family);
+  --sys-font-heading-small-font-size: var(--ref-font-heading-bold-1-font-size);
+  --sys-font-heading-small-font-weight: var(--ref-font-heading-bold-1-font-weight);
+  --sys-font-heading-small-letter-spacing: var(--ref-font-heading-bold-1-letter-spacing);
+  --sys-font-heading-small-line-height: var(--ref-font-heading-bold-1-line-height);
+  --sys-font-label-large: var(--sys-font-label-large-font-weight) var(--sys-font-label-large-font-size)/var(--sys-font-label-large-line-height) var(--sys-font-label-large-font-family);
+  --sys-font-label-large-font-family: "Roboto", sans-serif;
+  --sys-font-label-large-font-size: 1.167rem;
+  --sys-font-label-large-font-weight: 700;
+  --sys-font-label-large-letter-spacing: 0px;
+  --sys-font-label-large-line-height: 1.2;
+  --sys-font-label-large-strong: var(--sys-font-label-large-strong-font-weight) var(--sys-font-label-large-strong-font-size)/var(--sys-font-label-large-strong-line-height) var(--sys-font-label-large-strong-font-family);
+  --sys-font-label-large-strong-font-family: "Roboto", sans-serif;
+  --sys-font-label-large-strong-font-size: 1.167rem;
+  --sys-font-label-large-strong-font-weight: 800;
+  --sys-font-label-large-strong-letter-spacing: 0px;
+  --sys-font-label-large-strong-line-height: 1.2;
+  --sys-font-label-medium: var(--sys-font-label-medium-font-weight) var(--sys-font-label-medium-font-size)/var(--sys-font-label-medium-line-height) var(--sys-font-label-medium-font-family);
+  --sys-font-label-medium-font-family: "Roboto", sans-serif;
+  --sys-font-label-medium-font-size: 1rem;
+  --sys-font-label-medium-font-weight: 600;
+  --sys-font-label-medium-letter-spacing: 0px;
+  --sys-font-label-medium-line-height: 1.2;
+  --sys-font-label-medium-strong: var(--sys-font-label-medium-strong-font-weight) var(--sys-font-label-medium-strong-font-size)/var(--sys-font-label-medium-strong-line-height) var(--sys-font-label-medium-strong-font-family);
+  --sys-font-label-medium-strong-font-family: "Roboto", sans-serif;
+  --sys-font-label-medium-strong-font-size: 1rem;
+  --sys-font-label-medium-strong-font-weight: 800;
+  --sys-font-label-medium-strong-letter-spacing: 0px;
+  --sys-font-label-medium-strong-line-height: 1.2;
+  --sys-font-label-small: var(--sys-font-label-small-font-weight) var(--sys-font-label-small-font-size)/var(--sys-font-label-small-line-height) var(--sys-font-label-small-font-family);
+  --sys-font-label-small-font-family: "Roboto", sans-serif;
+  --sys-font-label-small-font-size: 0.917rem;
+  --sys-font-label-small-font-weight: 600;
+  --sys-font-label-small-letter-spacing: 0px;
+  --sys-font-label-small-line-height: 1.2;
+  --sys-font-label-small-strong: var(--sys-font-label-small-strong-font-weight) var(--sys-font-label-small-strong-font-size)/var(--sys-font-label-small-strong-line-height) var(--sys-font-label-small-strong-font-family);
+  --sys-font-label-small-strong-font-family: "Roboto", sans-serif;
+  --sys-font-label-small-strong-font-size: 0.917rem;
+  --sys-font-label-small-strong-font-weight: 800;
+  --sys-font-label-small-strong-letter-spacing: 0px;
+  --sys-font-label-small-strong-line-height: 1.2;
+  /* Something leaving: a cleared selection */
+  --sys-motion-accelerate: cubic-bezier(0.3, 0, 1, 1);
+  /* Something arriving: a sent comment */
+  --sys-motion-decelerate: cubic-bezier(0, 0, 0, 1);
+  /* A larger move: a dialog opening */
+  --sys-motion-emphasized: cubic-bezier(0.32, 0.72, 0, 1);
+  /* Popups, tooltips, hover and press */
+  --sys-motion-instant: 100ms;
+  /* No consumer yet */
+  --sys-motion-long: 400ms;
+  /* Larger surfaces: the theme change */
+  --sys-motion-medium: 300ms;
+  /* A mark popping in: a check mark */
+  --sys-motion-overshoot: cubic-bezier(0.34, 1.56, 0.64, 1);
+  /* Dialogs, drawers, check marks */
+  --sys-motion-short: 200ms;
+  /* Most transitions: a menu opening */
+  --sys-motion-standard: cubic-bezier(0.2, 0, 0, 1);
+  /* Avatars and radio buttons. A circle, on a square element: the full radius rounds a square into one. */
+  --sys-radius-circle: var(--sys-radius-full);
+  /* Pills: buttons, chips, badges, switches, tabs */
+  --sys-radius-full: 999px;
+  /* Popovers and drawers */
+  --sys-radius-lg: 1rem;
+  /* Cards, tables, nav items, popups, toasts */
+  --sys-radius-md: 0.75rem;
+  /* Inner joins of a group that reads as one object */
+  --sys-radius-none: 0px;
+  /* Menu rows, tooltips, checkboxes, attachment tiles */
+  --sys-radius-sm: 0.5rem;
+  /* Dialogs and bottom sheets */
+  --sys-radius-xl: 1.75rem;
+  /* The densest chrome: skeleton lines, marks inside fields */
+  --sys-radius-xs: 0.25rem;
+  --sys-shadow-penumbra: rgb(0% 0% 0% / 0.06);
+  --sys-shadow-umbra: rgb(0% 0% 0% / 0.1);
+  --sys-state-dragged: 0.16;
+  --sys-state-focus: 0.1;
+  --sys-state-hover: 0.08;
+  --sys-state-pressed: 0.12;
+  --sys-unit-0: 0rem;
+  --sys-unit-1: 0.125rem;
+  --sys-unit-2: 0.25rem;
+  --sys-unit-3: 0.375rem;
+  --sys-unit-4: 0.5rem;
+  --sys-unit-5: 0.625rem;
+  --sys-unit-6: 0.75rem;
+  --sys-unit-7: 0.875rem;
+  --sys-unit-8: 1rem;
+  --sys-unit-9: 1.125rem;
+  --sys-unit-10: 1.25rem;
+  --sys-unit-11: 1.375rem;
+  --sys-unit-12: 1.5rem;
+  --sys-unit-13: 1.625rem;
+  --sys-unit-14: 1.75rem;
+  --sys-unit-15: 1.875rem;
+  --sys-unit-16: 2rem;
+  --sys-unit-17: 2.125rem;
+  --sys-unit-18: 2.25rem;
+  --sys-unit-19: 2.375rem;
+  --sys-unit-20: 2.5rem;
+  --sys-unit-21: 2.625rem;
+  --sys-unit-22: 2.75rem;
+  --sys-unit-23: 2.875rem;
+  --sys-unit-24: 3rem;
+  --sys-unit-25: 3.125rem;
+  --sys-unit-26: 3.25rem;
+  --sys-unit-27: 3.375rem;
+  --sys-unit-28: 3.5rem;
+  --sys-unit-29: 3.625rem;
+  --sys-unit-30: 3.75rem;
+  --sys-unit-31: 3.875rem;
+  --sys-unit-32: 4rem;
+  --sys-unit-33: 4.125rem;
+  --sys-unit-34: 4.25rem;
+  --sys-unit-35: 4.375rem;
+  --sys-unit-36: 4.5rem;
+  --sys-unit-37: 4.625rem;
+  --sys-unit-38: 4.75rem;
+  --sys-unit-39: 4.875rem;
+  --sys-unit-40: 5rem;
+  --sys-unit-41: 5.125rem;
+  --sys-unit-42: 5.25rem;
+  --sys-unit-43: 5.375rem;
+  --sys-unit-44: 5.5rem;
+  --sys-unit-45: 5.625rem;
+  --sys-unit-46: 5.75rem;
+  --sys-unit-47: 5.875rem;
+  --sys-unit-48: 6rem;
+  --sys-unit-49: 6.125rem;
+  --sys-unit-50: 6.25rem;
+  --sys-unit-51: 6.375rem;
+  --sys-unit-52: 6.5rem;
+  --sys-unit-53: 6.625rem;
+  --sys-unit-54: 6.75rem;
+  --sys-unit-55: 6.875rem;
+  --sys-unit-56: 7rem;
+  --sys-unit-57: 7.125rem;
+  --sys-unit-58: 7.25rem;
+  --sys-unit-59: 7.375rem;
+  --sys-unit-60: 7.5rem;
+  --sys-unit-61: 7.625rem;
+  --sys-unit-62: 7.75rem;
+  --sys-unit-63: 7.875rem;
+  --sys-unit-64: 8rem;
+}
+
+html[data-theme="dark"] {
+	color-scheme: dark;
+/* The page behind everything */
+  --sys-color-bg: var(--ref-neutral-800);
+  /* The quiet hairline that separation rations */
+  --sys-color-border: var(--ref-neutral-500);
+  --sys-color-error-bg: var(--ref-red-750);
+  --sys-color-error-border: var(--ref-red-650);
+  --sys-color-error-fg: var(--ref-red-100);
+  --sys-color-error-outline: var(--ref-red-400);
+  /* Keyboard focus, on every focusable element */
+  --sys-color-focus-ring: var(--sys-color-primary);
+  --sys-color-identity-1-bg: oklch(36.12% 0.0709 84);
+  --sys-color-identity-1-fg: oklch(92.04% 0.0237 84);
+  --sys-color-identity-2-bg: oklch(36.12% 0.0709 127);
+  --sys-color-identity-2-fg: oklch(92.04% 0.0237 127);
+  --sys-color-identity-3-bg: oklch(36.12% 0.0709 283);
+  --sys-color-identity-3-fg: oklch(92.04% 0.0237 283);
+  --sys-color-identity-4-bg: oklch(36.12% 0.0709 333);
+  --sys-color-identity-4-fg: oklch(92.04% 0.0237 333);
+  --sys-color-info-bg: var(--ref-blue-700);
+  --sys-color-info-border: var(--ref-blue-600);
+  --sys-color-info-fg: var(--ref-blue-100);
+  --sys-color-neutral-bg: var(--ref-neutral-600);
+  --sys-color-neutral-border: var(--ref-neutral-450);
+  --sys-color-neutral-fg: var(--ref-neutral-50);
+  --sys-color-on-primary: var(--ref-green-900);
+  --sys-color-on-primary-container: var(--ref-green-100);
+  /* A mark that has to be found: grab bars, scroll thumbs, control outlines */
+  --sys-color-outline: var(--ref-neutral-400);
+  /* Primary buttons and links */
+  --sys-color-primary: var(--ref-green-200);
+  /* Avatar fallbacks, mention pills, brand tints */
+  --sys-color-primary-container: var(--ref-green-700);
+  --sys-color-selection-bg: var(--ref-green-650);
+  --sys-color-selection-fg: var(--ref-green-50);
+  --sys-color-success-bg: var(--ref-green-750);
+  --sys-color-success-border: var(--ref-green-650);
+  --sys-color-success-fg: var(--ref-green-150);
+  /* The default card */
+  --sys-color-surface: var(--ref-neutral-700);
+  /* A fill nested in a card */
+  --sys-color-surface-high: var(--ref-neutral-650);
+  /* The deepest recess: fields, placeholders */
+  --sys-color-surface-highest: var(--ref-neutral-600);
+  /* The dimmest card: a table's sub-rows */
+  --sys-color-surface-lowest: var(--ref-neutral-750);
+  /* Popups and tooltips */
+  --sys-color-surface-overlay: var(--ref-neutral-550);
+  /* Toasts */
+  --sys-color-surface-overlay-high: var(--ref-neutral-500);
+  /* Body copy and headings */
+  --sys-color-text: var(--ref-neutral-50);
+  --sys-color-text-inverse: var(--ref-neutral-900);
+  /* Captions, help text and anything passive */
+  --sys-color-text-muted: var(--ref-neutral-150);
+  --sys-color-warning-bg: var(--ref-orange-750);
+  --sys-color-warning-border: var(--ref-orange-700);
+  --sys-color-warning-fg: var(--ref-orange-150);
+  /* The page */
+  --sys-elevation-0: 0px 0px rgb(0% 0% 0% / 0);
+  /* Popups and tooltips */
+  --sys-elevation-1: 0px 1px 2px var(--sys-shadow-umbra), 0px 2px 6px 2px var(--sys-shadow-penumbra);
+  /* Level 1 cast around a whole silhouette, such as a popup with its arrow. */
+  --sys-elevation-1-filter: drop-shadow(0px 1px 2px var(--sys-shadow-umbra)) drop-shadow(0px 2px 8px var(--sys-shadow-penumbra));
+  /* Toasts */
+  --sys-elevation-2: 0px 2px 3px var(--sys-shadow-umbra), 0px 6px 10px 4px var(--sys-shadow-penumbra);
+  --sys-focus-ring-offset: 2px;
+  --sys-focus-ring-width: 3px;
+  --sys-font-body-large: var(--sys-font-body-large-font-weight) var(--sys-font-body-large-font-size)/var(--sys-font-body-large-line-height) var(--sys-font-body-large-font-family);
+  --sys-font-body-large-font-family: var(--ref-font-body-regular-2-font-family);
+  --sys-font-body-large-font-size: var(--ref-font-body-regular-2-font-size);
+  --sys-font-body-large-font-weight: var(--ref-font-body-regular-2-font-weight);
+  --sys-font-body-large-letter-spacing: var(--ref-font-body-regular-2-letter-spacing);
+  --sys-font-body-large-line-height: var(--ref-font-body-regular-2-line-height);
+  --sys-font-body-medium: var(--sys-font-body-medium-font-weight) var(--sys-font-body-medium-font-size)/var(--sys-font-body-medium-line-height) var(--sys-font-body-medium-font-family);
+  --sys-font-body-medium-font-family: var(--ref-font-body-regular-1-font-family);
+  --sys-font-body-medium-font-size: var(--ref-font-body-regular-1-font-size);
+  --sys-font-body-medium-font-weight: var(--ref-font-body-regular-1-font-weight);
+  --sys-font-body-medium-letter-spacing: var(--ref-font-body-regular-1-letter-spacing);
+  --sys-font-body-medium-line-height: var(--ref-font-body-regular-1-line-height);
+  --sys-font-body-medium-strong: var(--sys-font-body-medium-strong-font-weight) var(--sys-font-body-medium-strong-font-size)/var(--sys-font-body-medium-strong-line-height) var(--sys-font-body-medium-strong-font-family);
+  --sys-font-body-medium-strong-font-family: var(--ref-font-body-semibold-1-font-family);
+  --sys-font-body-medium-strong-font-size: var(--ref-font-body-semibold-1-font-size);
+  --sys-font-body-medium-strong-font-weight: var(--ref-font-body-semibold-1-font-weight);
+  --sys-font-body-medium-strong-letter-spacing: var(--ref-font-body-semibold-1-letter-spacing);
+  --sys-font-body-medium-strong-line-height: var(--ref-font-body-semibold-1-line-height);
+  --sys-font-body-small: var(--sys-font-body-small-font-weight) var(--sys-font-body-small-font-size)/var(--sys-font-body-small-line-height) var(--sys-font-body-small-font-family);
+  --sys-font-body-small-font-family: "Roboto", sans-serif;
+  --sys-font-body-small-font-size: 0.917rem;
+  --sys-font-body-small-font-weight: 400;
+  --sys-font-body-small-letter-spacing: 0px;
+  --sys-font-body-small-line-height: 1.4;
+  --sys-font-heading-large: var(--sys-font-heading-large-font-weight) var(--sys-font-heading-large-font-size)/var(--sys-font-heading-large-line-height) var(--sys-font-heading-large-font-family);
+  --sys-font-heading-large-font-family: var(--ref-font-heading-bold-3-font-family);
+  --sys-font-heading-large-font-size: var(--ref-font-heading-bold-3-font-size);
+  --sys-font-heading-large-font-weight: var(--ref-font-heading-bold-3-font-weight);
+  --sys-font-heading-large-letter-spacing: var(--ref-font-heading-bold-3-letter-spacing);
+  --sys-font-heading-large-line-height: var(--ref-font-heading-bold-3-line-height);
+  --sys-font-heading-medium: var(--sys-font-heading-medium-font-weight) var(--sys-font-heading-medium-font-size)/var(--sys-font-heading-medium-line-height) var(--sys-font-heading-medium-font-family);
+  --sys-font-heading-medium-font-family: var(--ref-font-heading-bold-2-font-family);
+  --sys-font-heading-medium-font-size: var(--ref-font-heading-bold-2-font-size);
+  --sys-font-heading-medium-font-weight: var(--ref-font-heading-bold-2-font-weight);
+  --sys-font-heading-medium-letter-spacing: var(--ref-font-heading-bold-2-letter-spacing);
+  --sys-font-heading-medium-line-height: var(--ref-font-heading-bold-2-line-height);
+  --sys-font-heading-small: var(--sys-font-heading-small-font-weight) var(--sys-font-heading-small-font-size)/var(--sys-font-heading-small-line-height) var(--sys-font-heading-small-font-family);
+  --sys-font-heading-small-font-family: var(--ref-font-heading-bold-1-font-family);
+  --sys-font-heading-small-font-size: var(--ref-font-heading-bold-1-font-size);
+  --sys-font-heading-small-font-weight: var(--ref-font-heading-bold-1-font-weight);
+  --sys-font-heading-small-letter-spacing: var(--ref-font-heading-bold-1-letter-spacing);
+  --sys-font-heading-small-line-height: var(--ref-font-heading-bold-1-line-height);
+  --sys-font-label-large: var(--sys-font-label-large-font-weight) var(--sys-font-label-large-font-size)/var(--sys-font-label-large-line-height) var(--sys-font-label-large-font-family);
+  --sys-font-label-large-font-family: "Roboto", sans-serif;
+  --sys-font-label-large-font-size: 1.167rem;
+  --sys-font-label-large-font-weight: 700;
+  --sys-font-label-large-letter-spacing: 0px;
+  --sys-font-label-large-line-height: 1.2;
+  --sys-font-label-large-strong: var(--sys-font-label-large-strong-font-weight) var(--sys-font-label-large-strong-font-size)/var(--sys-font-label-large-strong-line-height) var(--sys-font-label-large-strong-font-family);
+  --sys-font-label-large-strong-font-family: "Roboto", sans-serif;
+  --sys-font-label-large-strong-font-size: 1.167rem;
+  --sys-font-label-large-strong-font-weight: 800;
+  --sys-font-label-large-strong-letter-spacing: 0px;
+  --sys-font-label-large-strong-line-height: 1.2;
+  --sys-font-label-medium: var(--sys-font-label-medium-font-weight) var(--sys-font-label-medium-font-size)/var(--sys-font-label-medium-line-height) var(--sys-font-label-medium-font-family);
+  --sys-font-label-medium-font-family: "Roboto", sans-serif;
+  --sys-font-label-medium-font-size: 1rem;
+  --sys-font-label-medium-font-weight: 600;
+  --sys-font-label-medium-letter-spacing: 0px;
+  --sys-font-label-medium-line-height: 1.2;
+  --sys-font-label-medium-strong: var(--sys-font-label-medium-strong-font-weight) var(--sys-font-label-medium-strong-font-size)/var(--sys-font-label-medium-strong-line-height) var(--sys-font-label-medium-strong-font-family);
+  --sys-font-label-medium-strong-font-family: "Roboto", sans-serif;
+  --sys-font-label-medium-strong-font-size: 1rem;
+  --sys-font-label-medium-strong-font-weight: 800;
+  --sys-font-label-medium-strong-letter-spacing: 0px;
+  --sys-font-label-medium-strong-line-height: 1.2;
+  --sys-font-label-small: var(--sys-font-label-small-font-weight) var(--sys-font-label-small-font-size)/var(--sys-font-label-small-line-height) var(--sys-font-label-small-font-family);
+  --sys-font-label-small-font-family: "Roboto", sans-serif;
+  --sys-font-label-small-font-size: 0.917rem;
+  --sys-font-label-small-font-weight: 600;
+  --sys-font-label-small-letter-spacing: 0px;
+  --sys-font-label-small-line-height: 1.2;
+  --sys-font-label-small-strong: var(--sys-font-label-small-strong-font-weight) var(--sys-font-label-small-strong-font-size)/var(--sys-font-label-small-strong-line-height) var(--sys-font-label-small-strong-font-family);
+  --sys-font-label-small-strong-font-family: "Roboto", sans-serif;
+  --sys-font-label-small-strong-font-size: 0.917rem;
+  --sys-font-label-small-strong-font-weight: 800;
+  --sys-font-label-small-strong-letter-spacing: 0px;
+  --sys-font-label-small-strong-line-height: 1.2;
+  /* Something leaving: a cleared selection */
+  --sys-motion-accelerate: cubic-bezier(0.3, 0, 1, 1);
+  /* Something arriving: a sent comment */
+  --sys-motion-decelerate: cubic-bezier(0, 0, 0, 1);
+  /* A larger move: a dialog opening */
+  --sys-motion-emphasized: cubic-bezier(0.32, 0.72, 0, 1);
+  /* Popups, tooltips, hover and press */
+  --sys-motion-instant: 100ms;
+  /* No consumer yet */
+  --sys-motion-long: 400ms;
+  /* Larger surfaces: the theme change */
+  --sys-motion-medium: 300ms;
+  /* A mark popping in: a check mark */
+  --sys-motion-overshoot: cubic-bezier(0.34, 1.56, 0.64, 1);
+  /* Dialogs, drawers, check marks */
+  --sys-motion-short: 200ms;
+  /* Most transitions: a menu opening */
+  --sys-motion-standard: cubic-bezier(0.2, 0, 0, 1);
+  /* Avatars and radio buttons. A circle, on a square element: the full radius rounds a square into one. */
+  --sys-radius-circle: var(--sys-radius-full);
+  /* Pills: buttons, chips, badges, switches, tabs */
+  --sys-radius-full: 999px;
+  /* Popovers and drawers */
+  --sys-radius-lg: 1rem;
+  /* Cards, tables, nav items, popups, toasts */
+  --sys-radius-md: 0.75rem;
+  /* Inner joins of a group that reads as one object */
+  --sys-radius-none: 0px;
+  /* Menu rows, tooltips, checkboxes, attachment tiles */
+  --sys-radius-sm: 0.5rem;
+  /* Dialogs and bottom sheets */
+  --sys-radius-xl: 1.75rem;
+  /* The densest chrome: skeleton lines, marks inside fields */
+  --sys-radius-xs: 0.25rem;
+  --sys-shadow-penumbra: rgb(0% 0% 0% / 0.2);
+  --sys-shadow-umbra: rgb(0% 0% 0% / 0.3);
+  --sys-state-dragged: 0.2;
+  --sys-state-focus: 0.12;
+  --sys-state-hover: 0.1;
+  --sys-state-pressed: 0.16;
+  --sys-unit-0: 0rem;
+  --sys-unit-1: 0.125rem;
+  --sys-unit-2: 0.25rem;
+  --sys-unit-3: 0.375rem;
+  --sys-unit-4: 0.5rem;
+  --sys-unit-5: 0.625rem;
+  --sys-unit-6: 0.75rem;
+  --sys-unit-7: 0.875rem;
+  --sys-unit-8: 1rem;
+  --sys-unit-9: 1.125rem;
+  --sys-unit-10: 1.25rem;
+  --sys-unit-11: 1.375rem;
+  --sys-unit-12: 1.5rem;
+  --sys-unit-13: 1.625rem;
+  --sys-unit-14: 1.75rem;
+  --sys-unit-15: 1.875rem;
+  --sys-unit-16: 2rem;
+  --sys-unit-17: 2.125rem;
+  --sys-unit-18: 2.25rem;
+  --sys-unit-19: 2.375rem;
+  --sys-unit-20: 2.5rem;
+  --sys-unit-21: 2.625rem;
+  --sys-unit-22: 2.75rem;
+  --sys-unit-23: 2.875rem;
+  --sys-unit-24: 3rem;
+  --sys-unit-25: 3.125rem;
+  --sys-unit-26: 3.25rem;
+  --sys-unit-27: 3.375rem;
+  --sys-unit-28: 3.5rem;
+  --sys-unit-29: 3.625rem;
+  --sys-unit-30: 3.75rem;
+  --sys-unit-31: 3.875rem;
+  --sys-unit-32: 4rem;
+  --sys-unit-33: 4.125rem;
+  --sys-unit-34: 4.25rem;
+  --sys-unit-35: 4.375rem;
+  --sys-unit-36: 4.5rem;
+  --sys-unit-37: 4.625rem;
+  --sys-unit-38: 4.75rem;
+  --sys-unit-39: 4.875rem;
+  --sys-unit-40: 5rem;
+  --sys-unit-41: 5.125rem;
+  --sys-unit-42: 5.25rem;
+  --sys-unit-43: 5.375rem;
+  --sys-unit-44: 5.5rem;
+  --sys-unit-45: 5.625rem;
+  --sys-unit-46: 5.75rem;
+  --sys-unit-47: 5.875rem;
+  --sys-unit-48: 6rem;
+  --sys-unit-49: 6.125rem;
+  --sys-unit-50: 6.25rem;
+  --sys-unit-51: 6.375rem;
+  --sys-unit-52: 6.5rem;
+  --sys-unit-53: 6.625rem;
+  --sys-unit-54: 6.75rem;
+  --sys-unit-55: 6.875rem;
+  --sys-unit-56: 7rem;
+  --sys-unit-57: 7.125rem;
+  --sys-unit-58: 7.25rem;
+  --sys-unit-59: 7.375rem;
+  --sys-unit-60: 7.5rem;
+  --sys-unit-61: 7.625rem;
+  --sys-unit-62: 7.75rem;
+  --sys-unit-63: 7.875rem;
+  --sys-unit-64: 8rem;
+}
+
+@media (prefers-color-scheme: dark) {
+	html:not([data-theme="light"]) {
+		color-scheme: dark;
+/* The page behind everything */
+  --sys-color-bg: var(--ref-neutral-800);
+  /* The quiet hairline that separation rations */
+  --sys-color-border: var(--ref-neutral-500);
+  --sys-color-error-bg: var(--ref-red-750);
+  --sys-color-error-border: var(--ref-red-650);
+  --sys-color-error-fg: var(--ref-red-100);
+  --sys-color-error-outline: var(--ref-red-400);
+  /* Keyboard focus, on every focusable element */
+  --sys-color-focus-ring: var(--sys-color-primary);
+  --sys-color-identity-1-bg: oklch(36.12% 0.0709 84);
+  --sys-color-identity-1-fg: oklch(92.04% 0.0237 84);
+  --sys-color-identity-2-bg: oklch(36.12% 0.0709 127);
+  --sys-color-identity-2-fg: oklch(92.04% 0.0237 127);
+  --sys-color-identity-3-bg: oklch(36.12% 0.0709 283);
+  --sys-color-identity-3-fg: oklch(92.04% 0.0237 283);
+  --sys-color-identity-4-bg: oklch(36.12% 0.0709 333);
+  --sys-color-identity-4-fg: oklch(92.04% 0.0237 333);
+  --sys-color-info-bg: var(--ref-blue-700);
+  --sys-color-info-border: var(--ref-blue-600);
+  --sys-color-info-fg: var(--ref-blue-100);
+  --sys-color-neutral-bg: var(--ref-neutral-600);
+  --sys-color-neutral-border: var(--ref-neutral-450);
+  --sys-color-neutral-fg: var(--ref-neutral-50);
+  --sys-color-on-primary: var(--ref-green-900);
+  --sys-color-on-primary-container: var(--ref-green-100);
+  /* A mark that has to be found: grab bars, scroll thumbs, control outlines */
+  --sys-color-outline: var(--ref-neutral-400);
+  /* Primary buttons and links */
+  --sys-color-primary: var(--ref-green-200);
+  /* Avatar fallbacks, mention pills, brand tints */
+  --sys-color-primary-container: var(--ref-green-700);
+  --sys-color-selection-bg: var(--ref-green-650);
+  --sys-color-selection-fg: var(--ref-green-50);
+  --sys-color-success-bg: var(--ref-green-750);
+  --sys-color-success-border: var(--ref-green-650);
+  --sys-color-success-fg: var(--ref-green-150);
+  /* The default card */
+  --sys-color-surface: var(--ref-neutral-700);
+  /* A fill nested in a card */
+  --sys-color-surface-high: var(--ref-neutral-650);
+  /* The deepest recess: fields, placeholders */
+  --sys-color-surface-highest: var(--ref-neutral-600);
+  /* The dimmest card: a table's sub-rows */
+  --sys-color-surface-lowest: var(--ref-neutral-750);
+  /* Popups and tooltips */
+  --sys-color-surface-overlay: var(--ref-neutral-550);
+  /* Toasts */
+  --sys-color-surface-overlay-high: var(--ref-neutral-500);
+  /* Body copy and headings */
+  --sys-color-text: var(--ref-neutral-50);
+  --sys-color-text-inverse: var(--ref-neutral-900);
+  /* Captions, help text and anything passive */
+  --sys-color-text-muted: var(--ref-neutral-150);
+  --sys-color-warning-bg: var(--ref-orange-750);
+  --sys-color-warning-border: var(--ref-orange-700);
+  --sys-color-warning-fg: var(--ref-orange-150);
+  /* The page */
+  --sys-elevation-0: 0px 0px rgb(0% 0% 0% / 0);
+  /* Popups and tooltips */
+  --sys-elevation-1: 0px 1px 2px var(--sys-shadow-umbra), 0px 2px 6px 2px var(--sys-shadow-penumbra);
+  /* Level 1 cast around a whole silhouette, such as a popup with its arrow. */
+  --sys-elevation-1-filter: drop-shadow(0px 1px 2px var(--sys-shadow-umbra)) drop-shadow(0px 2px 8px var(--sys-shadow-penumbra));
+  /* Toasts */
+  --sys-elevation-2: 0px 2px 3px var(--sys-shadow-umbra), 0px 6px 10px 4px var(--sys-shadow-penumbra);
+  --sys-focus-ring-offset: 2px;
+  --sys-focus-ring-width: 3px;
+  --sys-font-body-large: var(--sys-font-body-large-font-weight) var(--sys-font-body-large-font-size)/var(--sys-font-body-large-line-height) var(--sys-font-body-large-font-family);
+  --sys-font-body-large-font-family: var(--ref-font-body-regular-2-font-family);
+  --sys-font-body-large-font-size: var(--ref-font-body-regular-2-font-size);
+  --sys-font-body-large-font-weight: var(--ref-font-body-regular-2-font-weight);
+  --sys-font-body-large-letter-spacing: var(--ref-font-body-regular-2-letter-spacing);
+  --sys-font-body-large-line-height: var(--ref-font-body-regular-2-line-height);
+  --sys-font-body-medium: var(--sys-font-body-medium-font-weight) var(--sys-font-body-medium-font-size)/var(--sys-font-body-medium-line-height) var(--sys-font-body-medium-font-family);
+  --sys-font-body-medium-font-family: var(--ref-font-body-regular-1-font-family);
+  --sys-font-body-medium-font-size: var(--ref-font-body-regular-1-font-size);
+  --sys-font-body-medium-font-weight: var(--ref-font-body-regular-1-font-weight);
+  --sys-font-body-medium-letter-spacing: var(--ref-font-body-regular-1-letter-spacing);
+  --sys-font-body-medium-line-height: var(--ref-font-body-regular-1-line-height);
+  --sys-font-body-medium-strong: var(--sys-font-body-medium-strong-font-weight) var(--sys-font-body-medium-strong-font-size)/var(--sys-font-body-medium-strong-line-height) var(--sys-font-body-medium-strong-font-family);
+  --sys-font-body-medium-strong-font-family: var(--ref-font-body-semibold-1-font-family);
+  --sys-font-body-medium-strong-font-size: var(--ref-font-body-semibold-1-font-size);
+  --sys-font-body-medium-strong-font-weight: var(--ref-font-body-semibold-1-font-weight);
+  --sys-font-body-medium-strong-letter-spacing: var(--ref-font-body-semibold-1-letter-spacing);
+  --sys-font-body-medium-strong-line-height: var(--ref-font-body-semibold-1-line-height);
+  --sys-font-body-small: var(--sys-font-body-small-font-weight) var(--sys-font-body-small-font-size)/var(--sys-font-body-small-line-height) var(--sys-font-body-small-font-family);
+  --sys-font-body-small-font-family: "Roboto", sans-serif;
+  --sys-font-body-small-font-size: 0.917rem;
+  --sys-font-body-small-font-weight: 400;
+  --sys-font-body-small-letter-spacing: 0px;
+  --sys-font-body-small-line-height: 1.4;
+  --sys-font-heading-large: var(--sys-font-heading-large-font-weight) var(--sys-font-heading-large-font-size)/var(--sys-font-heading-large-line-height) var(--sys-font-heading-large-font-family);
+  --sys-font-heading-large-font-family: var(--ref-font-heading-bold-3-font-family);
+  --sys-font-heading-large-font-size: var(--ref-font-heading-bold-3-font-size);
+  --sys-font-heading-large-font-weight: var(--ref-font-heading-bold-3-font-weight);
+  --sys-font-heading-large-letter-spacing: var(--ref-font-heading-bold-3-letter-spacing);
+  --sys-font-heading-large-line-height: var(--ref-font-heading-bold-3-line-height);
+  --sys-font-heading-medium: var(--sys-font-heading-medium-font-weight) var(--sys-font-heading-medium-font-size)/var(--sys-font-heading-medium-line-height) var(--sys-font-heading-medium-font-family);
+  --sys-font-heading-medium-font-family: var(--ref-font-heading-bold-2-font-family);
+  --sys-font-heading-medium-font-size: var(--ref-font-heading-bold-2-font-size);
+  --sys-font-heading-medium-font-weight: var(--ref-font-heading-bold-2-font-weight);
+  --sys-font-heading-medium-letter-spacing: var(--ref-font-heading-bold-2-letter-spacing);
+  --sys-font-heading-medium-line-height: var(--ref-font-heading-bold-2-line-height);
+  --sys-font-heading-small: var(--sys-font-heading-small-font-weight) var(--sys-font-heading-small-font-size)/var(--sys-font-heading-small-line-height) var(--sys-font-heading-small-font-family);
+  --sys-font-heading-small-font-family: var(--ref-font-heading-bold-1-font-family);
+  --sys-font-heading-small-font-size: var(--ref-font-heading-bold-1-font-size);
+  --sys-font-heading-small-font-weight: var(--ref-font-heading-bold-1-font-weight);
+  --sys-font-heading-small-letter-spacing: var(--ref-font-heading-bold-1-letter-spacing);
+  --sys-font-heading-small-line-height: var(--ref-font-heading-bold-1-line-height);
+  --sys-font-label-large: var(--sys-font-label-large-font-weight) var(--sys-font-label-large-font-size)/var(--sys-font-label-large-line-height) var(--sys-font-label-large-font-family);
+  --sys-font-label-large-font-family: "Roboto", sans-serif;
+  --sys-font-label-large-font-size: 1.167rem;
+  --sys-font-label-large-font-weight: 700;
+  --sys-font-label-large-letter-spacing: 0px;
+  --sys-font-label-large-line-height: 1.2;
+  --sys-font-label-large-strong: var(--sys-font-label-large-strong-font-weight) var(--sys-font-label-large-strong-font-size)/var(--sys-font-label-large-strong-line-height) var(--sys-font-label-large-strong-font-family);
+  --sys-font-label-large-strong-font-family: "Roboto", sans-serif;
+  --sys-font-label-large-strong-font-size: 1.167rem;
+  --sys-font-label-large-strong-font-weight: 800;
+  --sys-font-label-large-strong-letter-spacing: 0px;
+  --sys-font-label-large-strong-line-height: 1.2;
+  --sys-font-label-medium: var(--sys-font-label-medium-font-weight) var(--sys-font-label-medium-font-size)/var(--sys-font-label-medium-line-height) var(--sys-font-label-medium-font-family);
+  --sys-font-label-medium-font-family: "Roboto", sans-serif;
+  --sys-font-label-medium-font-size: 1rem;
+  --sys-font-label-medium-font-weight: 600;
+  --sys-font-label-medium-letter-spacing: 0px;
+  --sys-font-label-medium-line-height: 1.2;
+  --sys-font-label-medium-strong: var(--sys-font-label-medium-strong-font-weight) var(--sys-font-label-medium-strong-font-size)/var(--sys-font-label-medium-strong-line-height) var(--sys-font-label-medium-strong-font-family);
+  --sys-font-label-medium-strong-font-family: "Roboto", sans-serif;
+  --sys-font-label-medium-strong-font-size: 1rem;
+  --sys-font-label-medium-strong-font-weight: 800;
+  --sys-font-label-medium-strong-letter-spacing: 0px;
+  --sys-font-label-medium-strong-line-height: 1.2;
+  --sys-font-label-small: var(--sys-font-label-small-font-weight) var(--sys-font-label-small-font-size)/var(--sys-font-label-small-line-height) var(--sys-font-label-small-font-family);
+  --sys-font-label-small-font-family: "Roboto", sans-serif;
+  --sys-font-label-small-font-size: 0.917rem;
+  --sys-font-label-small-font-weight: 600;
+  --sys-font-label-small-letter-spacing: 0px;
+  --sys-font-label-small-line-height: 1.2;
+  --sys-font-label-small-strong: var(--sys-font-label-small-strong-font-weight) var(--sys-font-label-small-strong-font-size)/var(--sys-font-label-small-strong-line-height) var(--sys-font-label-small-strong-font-family);
+  --sys-font-label-small-strong-font-family: "Roboto", sans-serif;
+  --sys-font-label-small-strong-font-size: 0.917rem;
+  --sys-font-label-small-strong-font-weight: 800;
+  --sys-font-label-small-strong-letter-spacing: 0px;
+  --sys-font-label-small-strong-line-height: 1.2;
+  /* Something leaving: a cleared selection */
+  --sys-motion-accelerate: cubic-bezier(0.3, 0, 1, 1);
+  /* Something arriving: a sent comment */
+  --sys-motion-decelerate: cubic-bezier(0, 0, 0, 1);
+  /* A larger move: a dialog opening */
+  --sys-motion-emphasized: cubic-bezier(0.32, 0.72, 0, 1);
+  /* Popups, tooltips, hover and press */
+  --sys-motion-instant: 100ms;
+  /* No consumer yet */
+  --sys-motion-long: 400ms;
+  /* Larger surfaces: the theme change */
+  --sys-motion-medium: 300ms;
+  /* A mark popping in: a check mark */
+  --sys-motion-overshoot: cubic-bezier(0.34, 1.56, 0.64, 1);
+  /* Dialogs, drawers, check marks */
+  --sys-motion-short: 200ms;
+  /* Most transitions: a menu opening */
+  --sys-motion-standard: cubic-bezier(0.2, 0, 0, 1);
+  /* Avatars and radio buttons. A circle, on a square element: the full radius rounds a square into one. */
+  --sys-radius-circle: var(--sys-radius-full);
+  /* Pills: buttons, chips, badges, switches, tabs */
+  --sys-radius-full: 999px;
+  /* Popovers and drawers */
+  --sys-radius-lg: 1rem;
+  /* Cards, tables, nav items, popups, toasts */
+  --sys-radius-md: 0.75rem;
+  /* Inner joins of a group that reads as one object */
+  --sys-radius-none: 0px;
+  /* Menu rows, tooltips, checkboxes, attachment tiles */
+  --sys-radius-sm: 0.5rem;
+  /* Dialogs and bottom sheets */
+  --sys-radius-xl: 1.75rem;
+  /* The densest chrome: skeleton lines, marks inside fields */
+  --sys-radius-xs: 0.25rem;
+  --sys-shadow-penumbra: rgb(0% 0% 0% / 0.2);
+  --sys-shadow-umbra: rgb(0% 0% 0% / 0.3);
+  --sys-state-dragged: 0.2;
+  --sys-state-focus: 0.12;
+  --sys-state-hover: 0.1;
+  --sys-state-pressed: 0.16;
+  --sys-unit-0: 0rem;
+  --sys-unit-1: 0.125rem;
+  --sys-unit-2: 0.25rem;
+  --sys-unit-3: 0.375rem;
+  --sys-unit-4: 0.5rem;
+  --sys-unit-5: 0.625rem;
+  --sys-unit-6: 0.75rem;
+  --sys-unit-7: 0.875rem;
+  --sys-unit-8: 1rem;
+  --sys-unit-9: 1.125rem;
+  --sys-unit-10: 1.25rem;
+  --sys-unit-11: 1.375rem;
+  --sys-unit-12: 1.5rem;
+  --sys-unit-13: 1.625rem;
+  --sys-unit-14: 1.75rem;
+  --sys-unit-15: 1.875rem;
+  --sys-unit-16: 2rem;
+  --sys-unit-17: 2.125rem;
+  --sys-unit-18: 2.25rem;
+  --sys-unit-19: 2.375rem;
+  --sys-unit-20: 2.5rem;
+  --sys-unit-21: 2.625rem;
+  --sys-unit-22: 2.75rem;
+  --sys-unit-23: 2.875rem;
+  --sys-unit-24: 3rem;
+  --sys-unit-25: 3.125rem;
+  --sys-unit-26: 3.25rem;
+  --sys-unit-27: 3.375rem;
+  --sys-unit-28: 3.5rem;
+  --sys-unit-29: 3.625rem;
+  --sys-unit-30: 3.75rem;
+  --sys-unit-31: 3.875rem;
+  --sys-unit-32: 4rem;
+  --sys-unit-33: 4.125rem;
+  --sys-unit-34: 4.25rem;
+  --sys-unit-35: 4.375rem;
+  --sys-unit-36: 4.5rem;
+  --sys-unit-37: 4.625rem;
+  --sys-unit-38: 4.75rem;
+  --sys-unit-39: 4.875rem;
+  --sys-unit-40: 5rem;
+  --sys-unit-41: 5.125rem;
+  --sys-unit-42: 5.25rem;
+  --sys-unit-43: 5.375rem;
+  --sys-unit-44: 5.5rem;
+  --sys-unit-45: 5.625rem;
+  --sys-unit-46: 5.75rem;
+  --sys-unit-47: 5.875rem;
+  --sys-unit-48: 6rem;
+  --sys-unit-49: 6.125rem;
+  --sys-unit-50: 6.25rem;
+  --sys-unit-51: 6.375rem;
+  --sys-unit-52: 6.5rem;
+  --sys-unit-53: 6.625rem;
+  --sys-unit-54: 6.75rem;
+  --sys-unit-55: 6.875rem;
+  --sys-unit-56: 7rem;
+  --sys-unit-57: 7.125rem;
+  --sys-unit-58: 7.25rem;
+  --sys-unit-59: 7.375rem;
+  --sys-unit-60: 7.5rem;
+  --sys-unit-61: 7.625rem;
+  --sys-unit-62: 7.75rem;
+  --sys-unit-63: 7.875rem;
+  --sys-unit-64: 8rem;
+	}
+}