/* -------------------------------------------
 *  Autogenerated by ⛋ Terrazzo. DO NOT EDIT!
 * ------------------------------------------- */

:root {
  color-scheme: light dark;
  --primitive-color-amethyst-violet: oklch(71.61% 0.0906 295);
  --primitive-color-amethyst-violet-25: oklch(97.85% 0.002 295);
  --primitive-color-amethyst-violet-40: oklch(96.57% 0.0035 295);
  --primitive-color-amethyst-violet-50: oklch(95.71% 0.0047 295);
  --primitive-color-amethyst-violet-80: oklch(93.13% 0.009 295);
  --primitive-color-amethyst-violet-100: oklch(91.41% 0.0127 295);
  --primitive-color-amethyst-violet-140: oklch(87.97% 0.022 295);
  --primitive-color-amethyst-violet-180: oklch(84.53% 0.0342 295);
  --primitive-color-amethyst-violet-200: oklch(82.81% 0.0414 295);
  --primitive-color-amethyst-violet-220: oklch(81.09% 0.0493 295);
  --primitive-color-amethyst-violet-260: oklch(77.65% 0.0672 295);
  --primitive-color-amethyst-violet-300: oklch(74.2% 0.0875 295);
  --primitive-color-amethyst-violet-320: oklch(72.47% 0.0984 295);
  --primitive-color-amethyst-violet-360: oklch(69.02% 0.1208 295);
  --primitive-color-amethyst-violet-400: oklch(65.56% 0.1426 295);
  --primitive-color-amethyst-violet-420: oklch(63.83% 0.1525 295);
  --primitive-color-amethyst-violet-460: oklch(60.36% 0.1682 295);
  --primitive-color-amethyst-violet-500: oklch(56.88% 0.1761 295);
  --primitive-color-amethyst-violet-540: oklch(53.4% 0.1741 295);
  --primitive-color-amethyst-violet-580: oklch(49.9% 0.161 295);
  --primitive-color-amethyst-violet-600: oklch(48.15% 0.1519 295);
  --primitive-color-amethyst-violet-640: oklch(44.62% 0.1303 295);
  --primitive-color-amethyst-violet-680: oklch(41.07% 0.1071 295);
  --primitive-color-amethyst-violet-700: oklch(39.29% 0.0957 295);
  --primitive-color-amethyst-violet-720: oklch(37.49% 0.0846 295);
  --primitive-color-amethyst-violet-740: oklch(35.68% 0.0741 295);
  --primitive-color-amethyst-violet-760: oklch(33.86% 0.0643 295);
  --primitive-color-amethyst-violet-780: oklch(32.02% 0.0553 295);
  --primitive-color-amethyst-violet-800: oklch(30.15% 0.047 295);
  --primitive-color-amethyst-violet-820: oklch(28.26% 0.0395 295);
  --primitive-color-amethyst-violet-860: oklch(24.34% 0.027 295);
  --primitive-color-amethyst-violet-900: oklch(20.1% 0.0173 295);
  --primitive-color-black: oklch(17.76% 0 0);
  --primitive-color-calamine-blue: oklch(79.95% 0.0732 202.43);
  --primitive-color-calamine-blue-25: oklch(97.85% 0.0022 202.43);
  --primitive-color-calamine-blue-40: oklch(96.57% 0.0039 202.43);
  --primitive-color-calamine-blue-50: oklch(95.71% 0.0052 202.43);
  --primitive-color-calamine-blue-80: oklch(93.13% 0.0103 202.43);
  --primitive-color-calamine-blue-100: oklch(91.41% 0.0147 202.43);
  --primitive-color-calamine-blue-140: oklch(87.97% 0.0259 202.43);
  --primitive-color-calamine-blue-180: oklch(84.53% 0.0397 202.43);
  --primitive-color-calamine-blue-200: oklch(82.81% 0.0471 202.43);
  --primitive-color-calamine-blue-220: oklch(81.09% 0.0544 202.43);
  --primitive-color-calamine-blue-260: oklch(77.65% 0.0676 202.43);
  --primitive-color-calamine-blue-300: oklch(74.2% 0.0778 202.43);
  --primitive-color-calamine-blue-320: oklch(72.47% 0.0816 202.43);
  --primitive-color-calamine-blue-360: oklch(69.02% 0.0865 202.43);
  --primitive-color-calamine-blue-400: oklch(65.56% 0.0881 202.43);
  --primitive-color-calamine-blue-420: oklch(63.83% 0.0878 202.43);
  --primitive-color-calamine-blue-460: oklch(60.36% 0.0856 202.43);
  --primitive-color-calamine-blue-500: oklch(56.88% 0.0816 202.43);
  --primitive-color-calamine-blue-540: oklch(53.4% 0.0762 202.43);
  --primitive-color-calamine-blue-580: oklch(49.9% 0.0699 202.43);
  --primitive-color-calamine-blue-600: oklch(48.15% 0.0664 202.43);
  --primitive-color-calamine-blue-640: oklch(44.62% 0.059 202.43);
  --primitive-color-calamine-blue-680: oklch(41.07% 0.0513 202.43);
  --primitive-color-calamine-blue-700: oklch(39.29% 0.0474 202.43);
  --primitive-color-calamine-blue-720: oklch(37.49% 0.0435 202.43);
  --primitive-color-calamine-blue-740: oklch(35.68% 0.0396 202.43);
  --primitive-color-calamine-blue-760: oklch(33.86% 0.0358 202.43);
  --primitive-color-calamine-blue-780: oklch(32.02% 0.032 202.43);
  --primitive-color-calamine-blue-800: oklch(30.15% 0.0284 202.43);
  --primitive-color-calamine-blue-820: oklch(28.26% 0.0249 202.43);
  --primitive-color-calamine-blue-860: oklch(24.34% 0.0184 202.43);
  --primitive-color-calamine-blue-900: oklch(20.1% 0.0127 202.43);
  --primitive-color-cerulian-blue: oklch(65.23% 0.0938 231.49);
  --primitive-color-cerulian-blue-25: oklch(97.85% 0.002 231.49);
  --primitive-color-cerulian-blue-40: oklch(96.57% 0.0035 231.49);
  --primitive-color-cerulian-blue-50: oklch(95.71% 0.0047 231.49);
  --primitive-color-cerulian-blue-80: oklch(93.13% 0.009 231.49);
  --primitive-color-cerulian-blue-100: oklch(91.41% 0.0127 231.49);
  --primitive-color-cerulian-blue-140: oklch(87.97% 0.0219 231.49);
  --primitive-color-cerulian-blue-180: oklch(84.53% 0.0338 231.49);
  --primitive-color-cerulian-blue-200: oklch(82.81% 0.0407 231.49);
  --primitive-color-cerulian-blue-220: oklch(81.09% 0.048 231.49);
  --primitive-color-cerulian-blue-260: oklch(77.65% 0.0631 231.49);
  --primitive-color-cerulian-blue-300: oklch(74.2% 0.077 231.49);
  --primitive-color-cerulian-blue-320: oklch(72.47% 0.0828 231.49);
  --primitive-color-cerulian-blue-360: oklch(69.02% 0.0914 231.49);
  --primitive-color-cerulian-blue-400: oklch(65.56% 0.0959 231.49);
  --primitive-color-cerulian-blue-420: oklch(63.83% 0.0967 231.49);
  --primitive-color-cerulian-blue-460: oklch(60.36% 0.0958 231.49);
  --primitive-color-cerulian-blue-500: oklch(56.88% 0.0921 231.49);
  --primitive-color-cerulian-blue-540: oklch(53.4% 0.0863 231.49);
  --primitive-color-cerulian-blue-580: oklch(49.9% 0.079 231.49);
  --primitive-color-cerulian-blue-600: oklch(48.15% 0.075 231.49);
  --primitive-color-cerulian-blue-640: oklch(44.62% 0.0663 231.49);
  --primitive-color-cerulian-blue-680: oklch(41.07% 0.0571 231.49);
  --primitive-color-cerulian-blue-700: oklch(39.29% 0.0525 231.49);
  --primitive-color-cerulian-blue-720: oklch(37.49% 0.0479 231.49);
  --primitive-color-cerulian-blue-740: oklch(35.68% 0.0434 231.49);
  --primitive-color-cerulian-blue-760: oklch(33.86% 0.0389 231.49);
  --primitive-color-cerulian-blue-780: oklch(32.02% 0.0346 231.49);
  --primitive-color-cerulian-blue-800: oklch(30.15% 0.0305 231.49);
  --primitive-color-cerulian-blue-820: oklch(28.26% 0.0265 231.49);
  --primitive-color-cerulian-blue-860: oklch(24.34% 0.0194 231.49);
  --primitive-color-cerulian-blue-900: oklch(20.1% 0.0132 231.49);
  --primitive-color-coral-red: oklch(75.05% 0.1191 25);
  --primitive-color-coral-red-25: oklch(97.85% 0.002 25);
  --primitive-color-coral-red-40: oklch(96.57% 0.0037 25);
  --primitive-color-coral-red-50: oklch(95.71% 0.005 25);
  --primitive-color-coral-red-80: oklch(93.13% 0.0099 25);
  --primitive-color-coral-red-100: oklch(91.41% 0.0142 25);
  --primitive-color-coral-red-140: oklch(87.97% 0.0253 25);
  --primitive-color-coral-red-180: oklch(84.53% 0.0402 25);
  --primitive-color-coral-red-200: oklch(82.81% 0.0491 25);
  --primitive-color-coral-red-220: oklch(81.09% 0.0591 25);
  --primitive-color-coral-red-260: oklch(77.65% 0.0821 25);
  --primitive-color-coral-red-300: oklch(74.2% 0.1087 25);
  --primitive-color-coral-red-320: oklch(72.47% 0.123 25);
  --primitive-color-coral-red-360: oklch(69.02% 0.152 25);
  --primitive-color-coral-red-400: oklch(65.56% 0.1795 25);
  --primitive-color-coral-red-420: oklch(63.83% 0.1927 25);
  --primitive-color-coral-red-460: oklch(60.36% 0.2048 25);
  --primitive-color-coral-red-500: oklch(56.88% 0.2013 25);
  --primitive-color-coral-red-540: oklch(53.4% 0.1877 25);
  --primitive-color-coral-red-580: oklch(49.9% 0.1682 25);
  --primitive-color-coral-red-600: oklch(48.15% 0.1571 25);
  --primitive-color-coral-red-640: oklch(44.62% 0.1343 25);
  --primitive-color-coral-red-680: oklch(41.07% 0.1113 25);
  --primitive-color-coral-red-700: oklch(39.29% 0.1 25);
  --primitive-color-coral-red-720: oklch(37.49% 0.0891 25);
  --primitive-color-coral-red-740: oklch(35.68% 0.0786 25);
  --primitive-color-coral-red-760: oklch(33.86% 0.0687 25);
  --primitive-color-coral-red-780: oklch(32.02% 0.0594 25);
  --primitive-color-coral-red-800: oklch(30.15% 0.0508 25);
  --primitive-color-coral-red-820: oklch(28.26% 0.043 25);
  --primitive-color-coral-red-860: oklch(24.34% 0.0294 25);
  --primitive-color-coral-red-900: oklch(20.1% 0.0186 25);
  --primitive-color-cream-yellow: oklch(82.82% 0.1322 82.36);
  --primitive-color-cream-yellow-25: oklch(97.85% 0.0105 82.36);
  --primitive-color-cream-yellow-40: oklch(96.57% 0.0174 82.36);
  --primitive-color-cream-yellow-50: oklch(95.71% 0.0221 82.36);
  --primitive-color-cream-yellow-80: oklch(93.13% 0.0376 82.36);
  --primitive-color-cream-yellow-100: oklch(91.41% 0.049 82.36);
  --primitive-color-cream-yellow-140: oklch(87.97% 0.0738 82.36);
  --primitive-color-cream-yellow-180: oklch(84.53% 0.0989 82.36);
  --primitive-color-cream-yellow-200: oklch(82.81% 0.1101 82.36);
  --primitive-color-cream-yellow-220: oklch(81.09% 0.1192 82.36);
  --primitive-color-cream-yellow-260: oklch(77.65% 0.1324 82.36);
  --primitive-color-cream-yellow-300: oklch(74.2% 0.1384 82.36);
  --primitive-color-cream-yellow-320: oklch(72.47% 0.1389 82.36);
  --primitive-color-cream-yellow-360: oklch(69.02% 0.1368 82.36);
  --primitive-color-cream-yellow-400: oklch(65.56% 0.1325 82.36);
  --primitive-color-cream-yellow-420: oklch(63.83% 0.1299 82.36);
  --primitive-color-cream-yellow-460: oklch(60.36% 0.1239 82.36);
  --primitive-color-cream-yellow-500: oklch(56.88% 0.1171 82.36);
  --primitive-color-cream-yellow-540: oklch(53.4% 0.1096 82.36);
  --primitive-color-cream-yellow-580: oklch(49.9% 0.1014 82.36);
  --primitive-color-cream-yellow-600: oklch(48.15% 0.0971 82.36);
  --primitive-color-cream-yellow-640: oklch(44.62% 0.0882 82.36);
  --primitive-color-cream-yellow-680: oklch(41.07% 0.0789 82.36);
  --primitive-color-cream-yellow-700: oklch(39.29% 0.0742 82.36);
  --primitive-color-cream-yellow-720: oklch(37.49% 0.0694 82.36);
  --primitive-color-cream-yellow-740: oklch(35.68% 0.0647 82.36);
  --primitive-color-cream-yellow-760: oklch(33.86% 0.0601 82.36);
  --primitive-color-cream-yellow-780: oklch(32.02% 0.0556 82.36);
  --primitive-color-cream-yellow-800: oklch(30.15% 0.0511 82.36);
  --primitive-color-cream-yellow-820: oklch(28.26% 0.0468 82.36);
  --primitive-color-cream-yellow-860: oklch(24.34% 0.0384 82.36);
  --primitive-color-cream-yellow-900: oklch(20.1% 0.0303 82.36);
  --primitive-color-data-viz-100: oklch(57.53% 0.0799 251.64);
  --primitive-color-data-viz-200: oklch(72.04% 0.1526 59.43);
  --primitive-color-data-viz-300: oklch(61.38% 0.165 19.81);
  --primitive-color-data-viz-400: oklch(74.44% 0.0602 186.39);
  --primitive-color-data-viz-500: oklch(64.9% 0.1299 137.59);
  --primitive-color-data-viz-600: oklch(83.7% 0.1433 93.45);
  --primitive-color-data-viz-700: oklch(63.98% 0.0791 334.07);
  --primitive-color-data-viz-800: oklch(78.6% 0.1108 10.75);
  --primitive-color-data-viz-900: oklch(58.87% 0.0558 52.75);
  --primitive-color-data-viz-1000: oklch(76.32% 0.0125 51.27);
  --primitive-color-graphite: oklch(53.76% 0 0);
  --primitive-color-graphite-25: oklch(97.85% 0 0);
  --primitive-color-graphite-40: oklch(96.57% 0 0);
  --primitive-color-graphite-50: oklch(95.71% 0 0);
  --primitive-color-graphite-80: oklch(93.13% 0 0);
  --primitive-color-graphite-100: oklch(91.41% 0 0);
  --primitive-color-graphite-140: oklch(87.97% 0 0);
  --primitive-color-graphite-180: oklch(84.53% 0 0);
  --primitive-color-graphite-200: oklch(82.81% 0 0);
  --primitive-color-graphite-220: oklch(81.09% 0 0);
  --primitive-color-graphite-260: oklch(77.65% 0 0);
  --primitive-color-graphite-300: oklch(74.2% 0 0);
  --primitive-color-graphite-320: oklch(72.47% 0 0);
  --primitive-color-graphite-360: oklch(69.02% 0 0);
  --primitive-color-graphite-400: oklch(65.56% 0 0);
  --primitive-color-graphite-420: oklch(63.83% 0 0);
  --primitive-color-graphite-460: oklch(60.36% 0 0);
  --primitive-color-graphite-500: oklch(56.88% 0 0);
  --primitive-color-graphite-540: oklch(53.4% 0 0);
  --primitive-color-graphite-580: oklch(49.9% 0 0);
  --primitive-color-graphite-600: oklch(48.15% 0 0);
  --primitive-color-graphite-640: oklch(44.62% 0 0);
  --primitive-color-graphite-680: oklch(41.07% 0 0);
  --primitive-color-graphite-700: oklch(39.29% 0 0);
  --primitive-color-graphite-720: oklch(37.49% 0 0);
  --primitive-color-graphite-740: oklch(35.68% 0 0);
  --primitive-color-graphite-760: oklch(33.86% 0 0);
  --primitive-color-graphite-780: oklch(32.02% 0 0);
  --primitive-color-graphite-800: oklch(30.15% 0 0);
  --primitive-color-graphite-820: oklch(28.26% 0 0);
  --primitive-color-graphite-860: oklch(24.34% 0 0);
  --primitive-color-graphite-900: oklch(20.1% 0 0);
  --primitive-color-transparent: oklch(0% 0 0 / 0);
  --primitive-color-turquoise-green: oklch(72.29% 0.1012 158.68);
  --primitive-color-turquoise-green-25: oklch(97.85% 0.0023 158.68);
  --primitive-color-turquoise-green-40: oklch(96.57% 0.0041 158.68);
  --primitive-color-turquoise-green-50: oklch(95.71% 0.0056 158.68);
  --primitive-color-turquoise-green-80: oklch(93.13% 0.0113 158.68);
  --primitive-color-turquoise-green-100: oklch(91.41% 0.0163 158.68);
  --primitive-color-turquoise-green-140: oklch(87.97% 0.0295 158.68);
  --primitive-color-turquoise-green-180: oklch(84.53% 0.046 158.68);
  --primitive-color-turquoise-green-200: oklch(82.81% 0.0549 158.68);
  --primitive-color-turquoise-green-220: oklch(81.09% 0.0639 158.68);
  --primitive-color-turquoise-green-260: oklch(77.65% 0.0808 158.68);
  --primitive-color-turquoise-green-300: oklch(74.2% 0.0946 158.68);
  --primitive-color-turquoise-green-320: oklch(72.47% 0.0999 158.68);
  --primitive-color-turquoise-green-360: oklch(69.02% 0.1072 158.68);
  --primitive-color-turquoise-green-400: oklch(65.56% 0.1101 158.68);
  --primitive-color-turquoise-green-420: oklch(63.83% 0.1101 158.68);
  --primitive-color-turquoise-green-460: oklch(60.36% 0.1077 158.68);
  --primitive-color-turquoise-green-500: oklch(56.88% 0.1026 158.68);
  --primitive-color-turquoise-green-540: oklch(53.4% 0.0956 158.68);
  --primitive-color-turquoise-green-580: oklch(49.9% 0.0872 158.68);
  --primitive-color-turquoise-green-600: oklch(48.15% 0.0826 158.68);
  --primitive-color-turquoise-green-640: oklch(44.62% 0.0728 158.68);
  --primitive-color-turquoise-green-680: oklch(41.07% 0.0627 158.68);
  --primitive-color-turquoise-green-700: oklch(39.29% 0.0575 158.68);
  --primitive-color-turquoise-green-720: oklch(37.49% 0.0524 158.68);
  --primitive-color-turquoise-green-740: oklch(35.68% 0.0474 158.68);
  --primitive-color-turquoise-green-760: oklch(33.86% 0.0425 158.68);
  --primitive-color-turquoise-green-780: oklch(32.02% 0.0377 158.68);
  --primitive-color-turquoise-green-800: oklch(30.15% 0.0332 158.68);
  --primitive-color-turquoise-green-820: oklch(28.26% 0.0288 158.68);
  --primitive-color-turquoise-green-860: oklch(24.34% 0.0209 158.68);
  --primitive-color-turquoise-green-900: oklch(20.1% 0.0141 158.68);
  --primitive-color-white: oklch(97.31% 0 0);
  --primitive-cubic-bezier-ease-in-out-cubic: cubic-bezier(0.65, 0, 0.35, 1);
  /* The CSS `ease-out` curve. */
  --primitive-cubic-bezier-ease-out: cubic-bezier(0, 0, 0.58, 1);
  /* Passes its target by about 4.6% halfway through, then settles; gentler than the common back curve (about 10%). */
  --primitive-cubic-bezier-ease-out-back: cubic-bezier(0.2, 1.37, 0.4, 1);
  --primitive-cubic-bezier-ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1);
  --primitive-cubic-bezier-ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --primitive-cubic-bezier-ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --primitive-dimension-0: 0rem;
  --primitive-dimension-25: 0.0625rem;
  --primitive-dimension-50: 0.125rem;
  --primitive-dimension-100: 0.25rem;
  --primitive-dimension-150: 0.375rem;
  --primitive-dimension-200: 0.5rem;
  --primitive-dimension-300: 0.75rem;
  --primitive-dimension-400: 1rem;
  --primitive-dimension-500: 1.25rem;
  --primitive-dimension-600: 1.5rem;
  --primitive-dimension-800: 2rem;
  --primitive-dimension-1000: 2.5rem;
  --primitive-dimension-1200: 3rem;
  --primitive-dimension-1400: 3.5rem;
  --primitive-dimension-1600: 4rem;
  --primitive-dimension-2000: 5rem;
  --primitive-dimension-2400: 6rem;
  --primitive-dimension-3200: 8rem;
  --primitive-dimension-5250: 13.125rem;
  --primitive-dimension-12000: 30rem;
  --primitive-dimension-16000: 40rem;
  --primitive-dimension-19200: 48rem;
  --primitive-dimension-20800: 52rem;
  --primitive-dimension-30400: 76rem;
  --primitive-dimension-border-width-100: 1px;
  --primitive-dimension-border-width-200: 2px;
  --primitive-dimension-border-width-300: 4px;
  --primitive-dimension-breakpoint-250: 40rem;
  --primitive-dimension-breakpoint-300: 48rem;
  --primitive-dimension-breakpoint-400: 64rem;
  --primitive-dimension-breakpoint-500: 80rem;
  --primitive-dimension-breakpoint-600: 96rem;
  --primitive-dimension-font-size-100: 0.625rem;
  --primitive-dimension-font-size-200: 0.75rem;
  --primitive-dimension-font-size-300: 0.875rem;
  --primitive-dimension-font-size-400: 1rem;
  --primitive-dimension-font-size-500: 1.125rem;
  --primitive-dimension-font-size-600: 1.3125rem;
  --primitive-dimension-font-size-700: 1.5rem;
  --primitive-dimension-font-size-800: 1.75rem;
  --primitive-dimension-font-size-900: 2rem;
  --primitive-dimension-font-size-1000: 2.25rem;
  --primitive-dimension-font-size-1100: 2.625rem;
  --primitive-dimension-font-size-1200: 3rem;
  --primitive-dimension-font-size-1300: 3.4375rem;
  --primitive-dimension-font-size-1400: 3.9375rem;
  --primitive-dimension-font-size-1500: 4.5625rem;
  --primitive-dimension-font-size-1600: 5.25rem;
  --primitive-dimension-font-size-1700: 6rem;
  /* Uses the font's default letter spacing without additional tracking. */
  --primitive-dimension-letter-spacing-normal: 0rem;
  --primitive-dimension-radius-100: 0.1875rem;
  --primitive-dimension-radius-200: 0.375rem;
  --primitive-dimension-radius-300: 0.75rem;
  --primitive-dimension-radius-full: 100rem;
  --primitive-duration-0: 0ms;
  --primitive-duration-150: 150ms;
  --primitive-duration-200: 200ms;
  --primitive-duration-300: 300ms;
  --primitive-duration-450: 450ms;
  --primitive-duration-600: 600ms;
  --primitive-duration-1000: 1000ms;
  --primitive-font-family-mono: "Commit Mono", "SFMono-Regular", ui-monospace, "Menlo", "Monaco", "Consolas", monospace;
  --primitive-font-family-sans-serif: "Inter", "Helvetica Neue", "Arial", sans-serif;
  --primitive-font-family-serif: "Earendil", "Georgia", serif;
  --primitive-font-weight-black: 900;
  --primitive-font-weight-bold: 700;
  --primitive-font-weight-extra-black: 950;
  --primitive-font-weight-extra-bold: 800;
  --primitive-font-weight-extra-light: 200;
  --primitive-font-weight-light: 300;
  --primitive-font-weight-medium: 500;
  --primitive-font-weight-normal: 400;
  --primitive-font-weight-semi-bold: 600;
  --primitive-font-weight-thin: 100;
  --primitive-number-layer-1: 1;
  --primitive-number-layer-10: 10;
  --primitive-number-layer-100: 100;
  --primitive-number-layer-1000: 1000;
  --primitive-number-layer-below: -1;
  --primitive-number-line-height-100: 1.2;
  --primitive-number-line-height-200: 1.333333;
  --primitive-number-line-height-300: 1.428571;
  --primitive-number-line-height-400: 1.5;
  --primitive-number-line-height-500: 1.333333;
  --primitive-number-line-height-600: 1.333333;
  --primitive-number-line-height-700: 1.333333;
  --primitive-number-line-height-800: 1.285714;
  --primitive-number-line-height-900: 1.25;
  --primitive-number-line-height-1000: 1.333333;
  --primitive-number-line-height-1100: 1.238095;
  --primitive-number-line-height-1200: 1.166667;
  --primitive-number-line-height-1300: 1.163636;
  --primitive-number-line-height-1400: 1.142857;
  --primitive-number-line-height-1500: 1.09589;
  --primitive-number-line-height-1600: 1.142857;
  --primitive-number-line-height-1700: 1.083333;
  --primitive-number-opacity-0: 0;
  --primitive-number-opacity-150: 0.15;
  --primitive-number-opacity-250: 0.25;
  --primitive-number-opacity-400: 0.4;
  --primitive-number-opacity-600: 0.6;
  --primitive-number-opacity-1000: 1;
  --primitive-number-scale-900: 0.9;
  --primitive-number-scale-980: 0.98;
  --primitive-number-scale-1000: 1;
  --semantic-color-background-backdrop: oklch(17.76% 0 0 / 0.15);
  --semantic-color-background-canvas: var(--primitive-color-graphite-25);
  --semantic-color-background-checkbox: var(--semantic-color-background-fill-ghost-neutral);
  --semantic-color-background-checkbox-active: var(--semantic-color-background-fill-ghost-neutral-active);
  --semantic-color-background-checkbox-hover: var(--semantic-color-background-fill-ghost-neutral-hover);
  --semantic-color-background-checkbox-selected: var(--semantic-color-background-fill-selected);
  --semantic-color-background-fill-data-viz-100: var(--primitive-color-data-viz-100);
  --semantic-color-background-fill-data-viz-200: var(--primitive-color-data-viz-200);
  --semantic-color-background-fill-data-viz-300: var(--primitive-color-data-viz-300);
  --semantic-color-background-fill-data-viz-400: var(--primitive-color-data-viz-400);
  --semantic-color-background-fill-data-viz-500: var(--primitive-color-data-viz-500);
  --semantic-color-background-fill-data-viz-600: var(--primitive-color-data-viz-600);
  --semantic-color-background-fill-data-viz-700: var(--primitive-color-data-viz-700);
  --semantic-color-background-fill-data-viz-800: var(--primitive-color-data-viz-800);
  --semantic-color-background-fill-data-viz-900: var(--primitive-color-data-viz-900);
  --semantic-color-background-fill-data-viz-1000: var(--primitive-color-data-viz-1000);
  --semantic-color-background-fill-ghost: var(--primitive-color-transparent);
  --semantic-color-background-fill-ghost-active: var(--primitive-color-cerulian-blue-80);
  --semantic-color-background-fill-ghost-hover: var(--primitive-color-cerulian-blue-40);
  --semantic-color-background-fill-ghost-information: var(--primitive-color-transparent);
  --semantic-color-background-fill-ghost-information-active: var(--primitive-color-cerulian-blue-80);
  --semantic-color-background-fill-ghost-information-hover: var(--primitive-color-cerulian-blue-40);
  --semantic-color-background-fill-ghost-negative: var(--primitive-color-transparent);
  --semantic-color-background-fill-ghost-negative-active: var(--primitive-color-coral-red-80);
  --semantic-color-background-fill-ghost-negative-hover: var(--primitive-color-coral-red-40);
  --semantic-color-background-fill-ghost-neutral: var(--primitive-color-transparent);
  --semantic-color-background-fill-ghost-neutral-active: var(--primitive-color-graphite-80);
  --semantic-color-background-fill-ghost-neutral-hover: var(--primitive-color-graphite-40);
  --semantic-color-background-fill-ghost-positive: var(--primitive-color-transparent);
  --semantic-color-background-fill-ghost-positive-active: var(--primitive-color-turquoise-green-80);
  --semantic-color-background-fill-ghost-positive-hover: var(--primitive-color-turquoise-green-40);
  --semantic-color-background-fill-primary: var(--primitive-color-cerulian-blue-600);
  --semantic-color-background-fill-primary-active: var(--primitive-color-cerulian-blue-680);
  --semantic-color-background-fill-primary-hover: var(--primitive-color-cerulian-blue-640);
  --semantic-color-background-fill-primary-information: var(--primitive-color-cerulian-blue-600);
  --semantic-color-background-fill-primary-information-active: var(--primitive-color-cerulian-blue-680);
  --semantic-color-background-fill-primary-information-hover: var(--primitive-color-cerulian-blue-640);
  --semantic-color-background-fill-primary-negative: var(--primitive-color-coral-red-600);
  --semantic-color-background-fill-primary-negative-active: var(--primitive-color-coral-red-680);
  --semantic-color-background-fill-primary-negative-hover: var(--primitive-color-coral-red-640);
  --semantic-color-background-fill-primary-neutral: var(--primitive-color-graphite-600);
  --semantic-color-background-fill-primary-neutral-active: var(--primitive-color-graphite-680);
  --semantic-color-background-fill-primary-neutral-hover: var(--primitive-color-graphite-640);
  --semantic-color-background-fill-primary-positive: var(--primitive-color-turquoise-green-600);
  --semantic-color-background-fill-primary-positive-active: var(--primitive-color-turquoise-green-680);
  --semantic-color-background-fill-primary-positive-hover: var(--primitive-color-turquoise-green-640);
  --semantic-color-background-fill-secondary: var(--primitive-color-graphite-100);
  --semantic-color-background-fill-secondary-active: var(--primitive-color-graphite-180);
  --semantic-color-background-fill-secondary-hover: var(--primitive-color-graphite-140);
  --semantic-color-background-fill-secondary-information: var(--primitive-color-cerulian-blue-100);
  --semantic-color-background-fill-secondary-information-active: var(--primitive-color-cerulian-blue-180);
  --semantic-color-background-fill-secondary-information-hover: var(--primitive-color-cerulian-blue-140);
  --semantic-color-background-fill-secondary-negative: var(--primitive-color-coral-red-100);
  --semantic-color-background-fill-secondary-negative-active: var(--primitive-color-coral-red-180);
  --semantic-color-background-fill-secondary-negative-hover: var(--primitive-color-coral-red-140);
  --semantic-color-background-fill-secondary-positive: var(--primitive-color-turquoise-green-100);
  --semantic-color-background-fill-secondary-positive-active: var(--primitive-color-turquoise-green-180);
  --semantic-color-background-fill-secondary-positive-hover: var(--primitive-color-turquoise-green-140);
  --semantic-color-background-fill-secondary-warning: var(--primitive-color-cream-yellow-100);
  --semantic-color-background-fill-secondary-warning-active: var(--primitive-color-cream-yellow-180);
  --semantic-color-background-fill-secondary-warning-hover: var(--primitive-color-cream-yellow-140);
  --semantic-color-background-fill-selected: var(--primitive-color-cerulian-blue-500);
  --semantic-color-background-fill-selected-active: var(--primitive-color-cerulian-blue-580);
  --semantic-color-background-fill-selected-hover: var(--primitive-color-cerulian-blue-540);
  --semantic-color-background-radio: var(--semantic-color-background-fill-ghost-neutral);
  --semantic-color-background-radio-active: var(--semantic-color-background-fill-ghost-neutral-active);
  --semantic-color-background-radio-hover: var(--semantic-color-background-fill-ghost-neutral-hover);
  --semantic-color-background-radio-selected: var(--semantic-color-background-fill-selected);
  --semantic-color-background-radio-selected-active: var(--semantic-color-background-fill-selected-active);
  --semantic-color-background-radio-selected-hover: var(--semantic-color-background-fill-selected-hover);
  --semantic-color-background-skeleton: var(--primitive-color-graphite-100);
  --semantic-color-background-slider-progress: var(--semantic-color-background-fill-selected);
  --semantic-color-background-slider-progress-active: var(--semantic-color-background-fill-selected-active);
  --semantic-color-background-slider-progress-hover: var(--semantic-color-background-fill-selected-hover);
  --semantic-color-background-slider-track: var(--semantic-color-background-fill-secondary);
  --semantic-color-background-slider-track-active: var(--semantic-color-background-fill-secondary-active);
  --semantic-color-background-slider-track-endstop: var(--semantic-color-border-primary);
  --semantic-color-background-slider-track-hover: var(--semantic-color-background-fill-secondary-hover);
  --semantic-color-background-surface: var(--primitive-color-graphite-50);
  --semantic-color-background-switch: var(--primitive-color-graphite-500);
  --semantic-color-background-switch-knob: var(--primitive-color-white);
  --semantic-color-background-switch-selected: var(--semantic-color-background-fill-selected);
  --semantic-color-border-information: var(--primitive-color-cerulian-blue-500);
  --semantic-color-border-negative: var(--primitive-color-coral-red-500);
  --semantic-color-border-positive: var(--primitive-color-turquoise-green-500);
  --semantic-color-border-primary: var(--primitive-color-graphite-500);
  --semantic-color-border-secondary: var(--primitive-color-graphite-100);
  --semantic-color-border-warning: var(--primitive-color-cream-yellow-500);
  --semantic-color-focus-ring: var(--primitive-color-cerulian-blue-500);
  --semantic-color-focus-ring-negative: var(--primitive-color-coral-red-500);
  --semantic-color-focus-ring-positive: var(--primitive-color-turquoise-green-500);
  --semantic-color-focus-ring-warning: var(--primitive-color-cream-yellow-500);
  --semantic-color-icon-checkbox-indicator: var(--semantic-color-icon-on-selected-fill);
  --semantic-color-icon-information: var(--semantic-color-text-information);
  --semantic-color-icon-link: var(--semantic-color-text-link);
  --semantic-color-icon-negative: var(--semantic-color-text-negative);
  --semantic-color-icon-on-primary-fill: var(--semantic-color-text-on-primary-fill);
  --semantic-color-icon-on-secondary-fill: var(--semantic-color-text-on-secondary-fill);
  --semantic-color-icon-on-secondary-fill-information: var(--semantic-color-text-on-secondary-fill-information);
  --semantic-color-icon-on-secondary-fill-negative: var(--semantic-color-text-on-secondary-fill-negative);
  --semantic-color-icon-on-secondary-fill-positive: var(--semantic-color-text-on-secondary-fill-positive);
  --semantic-color-icon-on-secondary-fill-warning: var(--semantic-color-text-on-secondary-fill-warning);
  --semantic-color-icon-on-selected-fill: var(--primitive-color-white);
  --semantic-color-icon-positive: var(--semantic-color-text-positive);
  --semantic-color-icon-primary: var(--semantic-color-text-primary);
  --semantic-color-icon-radio-indicator: var(--semantic-color-icon-on-selected-fill);
  --semantic-color-icon-secondary: var(--semantic-color-text-secondary);
  --semantic-color-icon-warning: var(--semantic-color-text-warning);
  --semantic-color-logo-earendil: var(--primitive-color-graphite);
  --semantic-color-logo-monochrome: var(--primitive-color-black);
  --semantic-color-logo-symbol-1: var(--primitive-color-cerulian-blue);
  --semantic-color-logo-symbol-2: var(--primitive-color-coral-red);
  --semantic-color-logo-symbol-3: var(--primitive-color-cream-yellow);
  --semantic-color-logo-symbol-4: var(--primitive-color-calamine-blue);
  --semantic-color-logo-wordmark: var(--primitive-color-graphite);
  --semantic-color-text-code: var(--primitive-color-graphite-700);
  --semantic-color-text-code-comment: var(--primitive-color-graphite-600);
  --semantic-color-text-code-function: var(--primitive-color-cream-yellow-600);
  --semantic-color-text-code-keyword: var(--primitive-color-cerulian-blue-600);
  --semantic-color-text-code-number: var(--primitive-color-turquoise-green-600);
  --semantic-color-text-code-punctuation: var(--primitive-color-graphite-600);
  --semantic-color-text-code-string: var(--primitive-color-coral-red-600);
  --semantic-color-text-code-type: var(--primitive-color-amethyst-violet-600);
  --semantic-color-text-code-variable: var(--primitive-color-calamine-blue-600);
  --semantic-color-text-information: var(--primitive-color-cerulian-blue-600);
  --semantic-color-text-link: var(--primitive-color-cerulian-blue-600);
  --semantic-color-text-negative: var(--primitive-color-coral-red-600);
  --semantic-color-text-on-primary-fill: var(--primitive-color-white);
  --semantic-color-text-on-secondary-fill: var(--primitive-color-graphite-600);
  --semantic-color-text-on-secondary-fill-information: var(--primitive-color-cerulian-blue-600);
  --semantic-color-text-on-secondary-fill-negative: var(--primitive-color-coral-red-600);
  --semantic-color-text-on-secondary-fill-positive: var(--primitive-color-turquoise-green-600);
  --semantic-color-text-on-secondary-fill-warning: var(--primitive-color-cream-yellow-600);
  --semantic-color-text-positive: var(--primitive-color-turquoise-green-600);
  --semantic-color-text-primary: var(--primitive-color-black);
  --semantic-color-text-secondary: var(--primitive-color-graphite-600);
  --semantic-color-text-warning: var(--primitive-color-cream-yellow-600);
  --semantic-dimension-border-width-default: var(--semantic-dimension-border-width-medium);
  --semantic-dimension-border-width-large: var(--primitive-dimension-border-width-300);
  --semantic-dimension-border-width-medium: var(--primitive-dimension-border-width-200);
  --semantic-dimension-border-width-small: var(--primitive-dimension-border-width-100);
  --semantic-dimension-breakpoint-large: var(--primitive-dimension-breakpoint-500);
  --semantic-dimension-breakpoint-medium: var(--primitive-dimension-breakpoint-400);
  --semantic-dimension-breakpoint-small: var(--primitive-dimension-breakpoint-300);
  --semantic-dimension-breakpoint-x-large: var(--primitive-dimension-breakpoint-600);
  --semantic-dimension-breakpoint-x-small: var(--primitive-dimension-breakpoint-250);
  --semantic-dimension-radius-default: var(--semantic-dimension-radius-medium);
  --semantic-dimension-radius-full: var(--primitive-dimension-radius-full);
  --semantic-dimension-radius-large: var(--primitive-dimension-radius-300);
  --semantic-dimension-radius-medium: var(--primitive-dimension-radius-200);
  --semantic-dimension-radius-small: var(--primitive-dimension-radius-100);
  --semantic-dimension-size-icon: var(--primitive-dimension-500);
  --semantic-dimension-size-large: var(--primitive-dimension-1000);
  --semantic-dimension-size-max-height-search-dialog: var(--primitive-dimension-12000);
  --semantic-dimension-size-max-width-content-large: var(--primitive-dimension-30400);
  --semantic-dimension-size-max-width-content-medium: var(--primitive-dimension-19200);
  --semantic-dimension-size-max-width-content-small: var(--primitive-dimension-12000);
  --semantic-dimension-size-max-width-drawer: var(--primitive-dimension-12000);
  --semantic-dimension-size-max-width-modal: var(--primitive-dimension-19200);
  --semantic-dimension-size-max-width-popover: var(--primitive-dimension-16000);
  --semantic-dimension-size-max-width-text: var(--primitive-dimension-20800);
  --semantic-dimension-size-medium: var(--primitive-dimension-800);
  --semantic-dimension-size-sidebar: var(--primitive-dimension-5250);
  --semantic-dimension-size-small: var(--primitive-dimension-600);
  --semantic-dimension-size-top-navigation: var(--primitive-dimension-1600);
  --semantic-dimension-size-x-large: var(--primitive-dimension-1200);
  --semantic-dimension-size-x-small: var(--primitive-dimension-400);
  --semantic-dimension-size-xx-small: var(--primitive-dimension-200);
  --semantic-dimension-size-xxx-small: var(--primitive-dimension-100);
  --semantic-dimension-space-control-gap-large: var(--primitive-dimension-200);
  --semantic-dimension-space-control-gap-medium: var(--primitive-dimension-150);
  --semantic-dimension-space-control-gap-small: var(--primitive-dimension-100);
  --semantic-dimension-space-control-gap-x-large: var(--primitive-dimension-400);
  --semantic-dimension-space-control-padding-block-large: var(--primitive-dimension-200);
  --semantic-dimension-space-control-padding-block-medium: var(--primitive-dimension-150);
  --semantic-dimension-space-control-padding-block-small: var(--primitive-dimension-100);
  --semantic-dimension-space-control-padding-inline-large: var(--primitive-dimension-400);
  --semantic-dimension-space-control-padding-inline-medium: var(--primitive-dimension-300);
  --semantic-dimension-space-control-padding-inline-small: var(--primitive-dimension-200);
  --semantic-dimension-space-control-padding-inline-x-small: var(--primitive-dimension-100);
  --semantic-dimension-space-flow-large: var(--primitive-dimension-800);
  --semantic-dimension-space-flow-medium: var(--primitive-dimension-600);
  --semantic-dimension-space-flow-small: var(--primitive-dimension-400);
  --semantic-dimension-space-flow-x-large: var(--primitive-dimension-1200);
  --semantic-dimension-space-flow-x-small: var(--primitive-dimension-200);
  --semantic-dimension-space-gap-large: var(--primitive-dimension-600);
  --semantic-dimension-space-gap-medium: var(--primitive-dimension-400);
  --semantic-dimension-space-gap-small: var(--primitive-dimension-200);
  --semantic-dimension-space-gap-x-large: var(--primitive-dimension-800);
  --semantic-dimension-space-gap-x-small: var(--primitive-dimension-100);
  --semantic-dimension-space-gap-xx-small: var(--primitive-dimension-50);
  --semantic-dimension-space-padding-large: var(--primitive-dimension-300);
  --semantic-dimension-space-padding-medium: var(--primitive-dimension-200);
  --semantic-dimension-space-padding-none: var(--primitive-dimension-0);
  --semantic-dimension-space-padding-small: var(--primitive-dimension-150);
  --semantic-dimension-space-padding-x-large: var(--primitive-dimension-400);
  --semantic-dimension-space-padding-x-small: var(--primitive-dimension-100);
  --semantic-dimension-space-padding-xx-large: var(--primitive-dimension-600);
  --semantic-dimension-space-padding-xx-small: var(--primitive-dimension-50);
  --semantic-dimension-space-padding-xxx-large: var(--primitive-dimension-800);
  --semantic-dimension-space-padding-xxx-small: var(--primitive-dimension-25);
  --semantic-dimension-space-padding-xxxx-large: var(--primitive-dimension-1200);
  --semantic-dimension-travel-keyboard-key: var(--primitive-dimension-25);
  --semantic-dimension-travel-popup: var(--primitive-dimension-100);
  --semantic-dimension-travel-rest: var(--primitive-dimension-0);
  --semantic-font-family-code: var(--primitive-font-family-mono);
  --semantic-font-family-prose: var(--primitive-font-family-serif);
  --semantic-font-family-ui: var(--primitive-font-family-serif);
  --semantic-font-weight-emphasis: var(--primitive-font-weight-bold);
  --semantic-font-weight-ui-emphasis: var(--primitive-font-weight-bold);
  --semantic-font-weight-ui-selected: var(--primitive-font-weight-semi-bold);
  --semantic-number-layer-background: var(--primitive-number-layer-below);
  --semantic-number-layer-floating: var(--primitive-number-layer-10);
  --semantic-number-layer-overlay: var(--primitive-number-layer-1000);
  --semantic-number-layer-raised: var(--primitive-number-layer-1);
  --semantic-number-layer-sticky: var(--primitive-number-layer-100);
  --semantic-number-opacity-disabled: var(--primitive-number-opacity-400);
  --semantic-number-opacity-hidden: var(--primitive-number-opacity-0);
  --semantic-number-opacity-pulse: var(--primitive-number-opacity-600);
  --semantic-number-opacity-stale: var(--primitive-number-opacity-250);
  --semantic-number-opacity-visible: var(--primitive-number-opacity-1000);
  --semantic-number-scale-navigation-menu: var(--primitive-number-scale-900);
  --semantic-number-scale-popup: var(--primitive-number-scale-980);
  --semantic-number-scale-rest: var(--primitive-number-scale-1000);
  /* Use to separate floating panels such as dropdowns from the surface beneath them. */
  --semantic-shadow-popup: 2px 2px 8px 0px rgb(0% 0% 0% / 0.15);
  /* Use under sticky elements, such as a pinned toolbar or table of contents, while content scrolls beneath them. Fade it in as content starts to pass underneath. */
  --semantic-shadow-sticky: 0px 4px 8px 0px rgb(0% 0% 0% / 0.15);
  /* Use for opacity when something appears or disappears, such as popups, scrollbars, backdrops, and page crossfades. */
  --semantic-transition-fade: var(--semantic-transition-fade-duration) var(--semantic-transition-fade-delay) var(--semantic-transition-fade-timing-function);
  /* Use for opacity when something appears or disappears, such as popups, scrollbars, backdrops, and page crossfades. */
  --semantic-transition-fade-delay: var(--primitive-duration-0);
  /* Use for opacity when something appears or disappears, such as popups, scrollbars, backdrops, and page crossfades. */
  --semantic-transition-fade-duration: var(--primitive-duration-150);
  /* Use for opacity when something appears or disappears, such as popups, scrollbars, backdrops, and page crossfades. */
  --semantic-transition-fade-timing-function: var(--primitive-cubic-bezier-ease-out);
  /* Use for color, background, border, and shadow changes, such as hover, press, and the switch track. */
  --semantic-transition-feedback: var(--semantic-transition-feedback-duration) var(--semantic-transition-feedback-delay) var(--semantic-transition-feedback-timing-function);
  /* Use for color, background, border, and shadow changes, such as hover, press, and the switch track. */
  --semantic-transition-feedback-delay: var(--primitive-duration-0);
  /* Use for color, background, border, and shadow changes, such as hover, press, and the switch track. */
  --semantic-transition-feedback-duration: var(--primitive-duration-150);
  /* Use for color, background, border, and shadow changes, such as hover, press, and the switch track. */
  --semantic-transition-feedback-timing-function: var(--primitive-cubic-bezier-ease-out);
  /* Use when content expands or collapses, for chevrons that turn with it, and for menu panels that slide in and out. */
  --semantic-transition-movement-disclosure: var(--semantic-transition-movement-disclosure-duration) var(--semantic-transition-movement-disclosure-delay) var(--semantic-transition-movement-disclosure-timing-function);
  /* Use when content expands or collapses, for chevrons that turn with it, and for menu panels that slide in and out. */
  --semantic-transition-movement-disclosure-delay: var(--primitive-duration-0);
  /* Use when content expands or collapses, for chevrons that turn with it, and for menu panels that slide in and out. */
  --semantic-transition-movement-disclosure-duration: var(--primitive-duration-300);
  /* Use when content expands or collapses, for chevrons that turn with it, and for menu panels that slide in and out. */
  --semantic-transition-movement-disclosure-timing-function: var(--primitive-cubic-bezier-ease-in-out-cubic);
  /* Component token for a drawer opening and closing, and snapping back after a swipe. Fade its backdrop with `transition.fade`. */
  --semantic-transition-movement-drawer: var(--semantic-transition-movement-drawer-duration) var(--semantic-transition-movement-drawer-delay) var(--semantic-transition-movement-drawer-timing-function);
  /* Component token for a drawer opening and closing, and snapping back after a swipe. Fade its backdrop with `transition.fade`. */
  --semantic-transition-movement-drawer-delay: var(--primitive-duration-0);
  /* Component token for a drawer opening and closing, and snapping back after a swipe. Fade its backdrop with `transition.fade`. */
  --semantic-transition-movement-drawer-duration: var(--primitive-duration-450);
  /* Component token for a drawer opening and closing, and snapping back after a swipe. Fade its backdrop with `transition.fade`. */
  --semantic-transition-movement-drawer-timing-function: var(--primitive-cubic-bezier-ease-out-quart);
  /* Use when a selection indicator answering a click moves to a new position or size, such as a tab indicator or a switch thumb. */
  --semantic-transition-movement-indicator: var(--semantic-transition-movement-indicator-duration) var(--semantic-transition-movement-indicator-delay) var(--semantic-transition-movement-indicator-timing-function);
  /* Use when a selection indicator answering a click moves to a new position or size, such as a tab indicator or a switch thumb. */
  --semantic-transition-movement-indicator-delay: var(--primitive-duration-0);
  /* Use when a selection indicator answering a click moves to a new position or size, such as a tab indicator or a switch thumb. */
  --semantic-transition-movement-indicator-duration: var(--primitive-duration-200);
  /* Use when a selection indicator answering a click moves to a new position or size, such as a tab indicator or a switch thumb. */
  --semantic-transition-movement-indicator-timing-function: var(--primitive-cubic-bezier-ease-out-cubic);
  /* Component token for the navigation menu popup moving and resizing between triggers, and for its entry scale. */
  --semantic-transition-movement-navigation-menu: var(--semantic-transition-movement-navigation-menu-duration) var(--semantic-transition-movement-navigation-menu-delay) var(--semantic-transition-movement-navigation-menu-timing-function);
  /* Component token for the navigation menu popup moving and resizing between triggers, and for its entry scale. */
  --semantic-transition-movement-navigation-menu-delay: var(--primitive-duration-0);
  /* Component token for the navigation menu popup moving and resizing between triggers, and for its entry scale. */
  --semantic-transition-movement-navigation-menu-duration: var(--primitive-duration-300);
  /* Component token for the navigation menu popup moving and resizing between triggers, and for its entry scale. */
  --semantic-transition-movement-navigation-menu-timing-function: var(--primitive-cubic-bezier-ease-out-quint);
  /* Use for the scale or slide of popups as they open and close, such as dropdowns, menus, popovers, tooltips, and modals. Fade their opacity with `transition.fade`. */
  --semantic-transition-movement-popup: var(--semantic-transition-movement-popup-duration) var(--semantic-transition-movement-popup-delay) var(--semantic-transition-movement-popup-timing-function);
  /* Use for the scale or slide of popups as they open and close, such as dropdowns, menus, popovers, tooltips, and modals. Fade their opacity with `transition.fade`. */
  --semantic-transition-movement-popup-delay: var(--primitive-duration-0);
  /* Use for the scale or slide of popups as they open and close, such as dropdowns, menus, popovers, tooltips, and modals. Fade their opacity with `transition.fade`. */
  --semantic-transition-movement-popup-duration: var(--primitive-duration-150);
  /* Use for the scale or slide of popups as they open and close, such as dropdowns, menus, popovers, tooltips, and modals. Fade their opacity with `transition.fade`. */
  --semantic-transition-movement-popup-timing-function: var(--primitive-cubic-bezier-ease-out-cubic);
  /* Component token for the table of contents indicator following the reading position. Overshoots slightly before it settles. */
  --semantic-transition-movement-table-of-contents-indicator: var(--semantic-transition-movement-table-of-contents-indicator-duration) var(--semantic-transition-movement-table-of-contents-indicator-delay) var(--semantic-transition-movement-table-of-contents-indicator-timing-function);
  /* Component token for the table of contents indicator following the reading position. Overshoots slightly before it settles. */
  --semantic-transition-movement-table-of-contents-indicator-delay: var(--primitive-duration-0);
  /* Component token for the table of contents indicator following the reading position. Overshoots slightly before it settles. */
  --semantic-transition-movement-table-of-contents-indicator-duration: var(--primitive-duration-600);
  /* Component token for the table of contents indicator following the reading position. Overshoots slightly before it settles. */
  --semantic-transition-movement-table-of-contents-indicator-timing-function: var(--primitive-cubic-bezier-ease-out-back);
  /* Use for one half of a repeating opacity pulse that shows content is loading, such as a skeleton, between `opacity.visible` and `opacity.pulse`. Do not use for elements appearing or disappearing; use `fade`. */
  --semantic-transition-pulse: var(--semantic-transition-pulse-duration) var(--semantic-transition-pulse-delay) var(--semantic-transition-pulse-timing-function);
  /* Use for one half of a repeating opacity pulse that shows content is loading, such as a skeleton, between `opacity.visible` and `opacity.pulse`. Do not use for elements appearing or disappearing; use `fade`. */
  --semantic-transition-pulse-delay: var(--primitive-duration-0);
  /* Use for one half of a repeating opacity pulse that shows content is loading, such as a skeleton, between `opacity.visible` and `opacity.pulse`. Do not use for elements appearing or disappearing; use `fade`. */
  --semantic-transition-pulse-duration: var(--primitive-duration-1000);
  /* Use for one half of a repeating opacity pulse that shows content is loading, such as a skeleton, between `opacity.visible` and `opacity.pulse`. Do not use for elements appearing or disappearing; use `fade`. */
  --semantic-transition-pulse-timing-function: var(--primitive-cubic-bezier-ease-in-out-cubic);
  /* Use to dim content to `opacity.stale`; the delay keeps fast updates from flickering. Apply it only in the stale state, so content restores instantly. */
  --semantic-transition-stale: var(--semantic-transition-stale-duration) var(--semantic-transition-stale-delay) var(--semantic-transition-stale-timing-function);
  /* Use to dim content to `opacity.stale`; the delay keeps fast updates from flickering. Apply it only in the stale state, so content restores instantly. */
  --semantic-transition-stale-delay: var(--primitive-duration-200);
  /* Use to dim content to `opacity.stale`; the delay keeps fast updates from flickering. Apply it only in the stale state, so content restores instantly. */
  --semantic-transition-stale-duration: var(--primitive-duration-200);
  /* Use to dim content to `opacity.stale`; the delay keeps fast updates from flickering. Apply it only in the stale state, so content restores instantly. */
  --semantic-transition-stale-timing-function: var(--primitive-cubic-bezier-ease-out);
  /* Use for primary code content, including source code, commands, and structured machine-readable text. */
  --semantic-typography-code-primary: var(--semantic-typography-code-primary-font-weight) var(--semantic-typography-code-primary-font-size)/var(--semantic-typography-code-primary-line-height) var(--semantic-typography-code-primary-font-family);
  /* Use for primary code content, including source code, commands, and structured machine-readable text. */
  --semantic-typography-code-primary-font-family: var(--semantic-font-family-code);
  /* Use for primary code content, including source code, commands, and structured machine-readable text. */
  --semantic-typography-code-primary-font-size: var(--primitive-dimension-font-size-300);
  /* Use for primary code content, including source code, commands, and structured machine-readable text. */
  --semantic-typography-code-primary-font-weight: var(--primitive-font-weight-normal);
  /* Use for primary code content, including source code, commands, and structured machine-readable text. */
  --semantic-typography-code-primary-letter-spacing: var(--primitive-dimension-letter-spacing-normal);
  /* Use for primary code content, including source code, commands, and structured machine-readable text. */
  --semantic-typography-code-primary-line-height: var(--primitive-number-line-height-300);
  /* Use for supporting code content, such as annotations or ancillary technical metadata. Use the primary code style for the main code content. */
  --semantic-typography-code-secondary: var(--semantic-typography-code-secondary-font-weight) var(--semantic-typography-code-secondary-font-size)/var(--semantic-typography-code-secondary-line-height) var(--semantic-typography-code-secondary-font-family);
  /* Use for supporting code content, such as annotations or ancillary technical metadata. Use the primary code style for the main code content. */
  --semantic-typography-code-secondary-font-family: var(--semantic-font-family-code);
  /* Use for supporting code content, such as annotations or ancillary technical metadata. Use the primary code style for the main code content. */
  --semantic-typography-code-secondary-font-size: var(--primitive-dimension-font-size-200);
  /* Use for supporting code content, such as annotations or ancillary technical metadata. Use the primary code style for the main code content. */
  --semantic-typography-code-secondary-font-weight: var(--primitive-font-weight-normal);
  /* Use for supporting code content, such as annotations or ancillary technical metadata. Use the primary code style for the main code content. */
  --semantic-typography-code-secondary-letter-spacing: var(--primitive-dimension-letter-spacing-normal);
  /* Use for supporting code content, such as annotations or ancillary technical metadata. Use the primary code style for the main code content. */
  --semantic-typography-code-secondary-line-height: var(--primitive-number-line-height-200);
  /* Use for the highest-level heading in an application interface, such as a page title. */
  --semantic-typography-heading-app-1: var(--semantic-typography-heading-app-1-font-weight) var(--semantic-typography-heading-app-1-font-size)/var(--semantic-typography-heading-app-1-line-height) var(--semantic-typography-heading-app-1-font-family);
  /* Use for the highest-level heading in an application interface, such as a page title. */
  --semantic-typography-heading-app-1-font-family: var(--semantic-font-family-ui);
  /* Use for the highest-level heading in an application interface, such as a page title. */
  --semantic-typography-heading-app-1-font-size: var(--primitive-dimension-font-size-1000);
  /* Use for the highest-level heading in an application interface, such as a page title. */
  --semantic-typography-heading-app-1-font-weight: var(--primitive-font-weight-semi-bold);
  /* Use for the highest-level heading in an application interface, such as a page title. */
  --semantic-typography-heading-app-1-letter-spacing: var(--primitive-dimension-letter-spacing-normal);
  /* Use for the highest-level heading in an application interface, such as a page title. */
  --semantic-typography-heading-app-1-line-height: var(--primitive-number-line-height-1000);
  /* Use for second-level headings in an application interface beneath a level 1 heading. */
  --semantic-typography-heading-app-2: var(--semantic-typography-heading-app-2-font-weight) var(--semantic-typography-heading-app-2-font-size)/var(--semantic-typography-heading-app-2-line-height) var(--semantic-typography-heading-app-2-font-family);
  /* Use for second-level headings in an application interface beneath a level 1 heading. */
  --semantic-typography-heading-app-2-font-family: var(--semantic-font-family-ui);
  /* Use for second-level headings in an application interface beneath a level 1 heading. */
  --semantic-typography-heading-app-2-font-size: var(--primitive-dimension-font-size-900);
  /* Use for second-level headings in an application interface beneath a level 1 heading. */
  --semantic-typography-heading-app-2-font-weight: var(--primitive-font-weight-semi-bold);
  /* Use for second-level headings in an application interface beneath a level 1 heading. */
  --semantic-typography-heading-app-2-letter-spacing: var(--primitive-dimension-letter-spacing-normal);
  /* Use for second-level headings in an application interface beneath a level 1 heading. */
  --semantic-typography-heading-app-2-line-height: var(--primitive-number-line-height-900);
  /* Use for third-level headings in an application interface beneath a level 2 heading. */
  --semantic-typography-heading-app-3: var(--semantic-typography-heading-app-3-font-weight) var(--semantic-typography-heading-app-3-font-size)/var(--semantic-typography-heading-app-3-line-height) var(--semantic-typography-heading-app-3-font-family);
  /* Use for third-level headings in an application interface beneath a level 2 heading. */
  --semantic-typography-heading-app-3-font-family: var(--semantic-font-family-ui);
  /* Use for third-level headings in an application interface beneath a level 2 heading. */
  --semantic-typography-heading-app-3-font-size: var(--primitive-dimension-font-size-800);
  /* Use for third-level headings in an application interface beneath a level 2 heading. */
  --semantic-typography-heading-app-3-font-weight: var(--primitive-font-weight-semi-bold);
  /* Use for third-level headings in an application interface beneath a level 2 heading. */
  --semantic-typography-heading-app-3-letter-spacing: var(--primitive-dimension-letter-spacing-normal);
  /* Use for third-level headings in an application interface beneath a level 2 heading. */
  --semantic-typography-heading-app-3-line-height: var(--primitive-number-line-height-800);
  /* Use for fourth-level headings in an application interface beneath a level 3 heading. */
  --semantic-typography-heading-app-4: var(--semantic-typography-heading-app-4-font-weight) var(--semantic-typography-heading-app-4-font-size)/var(--semantic-typography-heading-app-4-line-height) var(--semantic-typography-heading-app-4-font-family);
  /* Use for fourth-level headings in an application interface beneath a level 3 heading. */
  --semantic-typography-heading-app-4-font-family: var(--semantic-font-family-ui);
  /* Use for fourth-level headings in an application interface beneath a level 3 heading. */
  --semantic-typography-heading-app-4-font-size: var(--primitive-dimension-font-size-700);
  /* Use for fourth-level headings in an application interface beneath a level 3 heading. */
  --semantic-typography-heading-app-4-font-weight: var(--primitive-font-weight-semi-bold);
  /* Use for fourth-level headings in an application interface beneath a level 3 heading. */
  --semantic-typography-heading-app-4-letter-spacing: var(--primitive-dimension-letter-spacing-normal);
  /* Use for fourth-level headings in an application interface beneath a level 3 heading. */
  --semantic-typography-heading-app-4-line-height: var(--primitive-number-line-height-700);
  /* Use for fifth-level headings in an application interface beneath a level 4 heading. */
  --semantic-typography-heading-app-5: var(--semantic-typography-heading-app-5-font-weight) var(--semantic-typography-heading-app-5-font-size)/var(--semantic-typography-heading-app-5-line-height) var(--semantic-typography-heading-app-5-font-family);
  /* Use for fifth-level headings in an application interface beneath a level 4 heading. */
  --semantic-typography-heading-app-5-font-family: var(--semantic-font-family-ui);
  /* Use for fifth-level headings in an application interface beneath a level 4 heading. */
  --semantic-typography-heading-app-5-font-size: var(--primitive-dimension-font-size-600);
  /* Use for fifth-level headings in an application interface beneath a level 4 heading. */
  --semantic-typography-heading-app-5-font-weight: var(--primitive-font-weight-semi-bold);
  /* Use for fifth-level headings in an application interface beneath a level 4 heading. */
  --semantic-typography-heading-app-5-letter-spacing: var(--primitive-dimension-letter-spacing-normal);
  /* Use for fifth-level headings in an application interface beneath a level 4 heading. */
  --semantic-typography-heading-app-5-line-height: var(--primitive-number-line-height-600);
  /* Use for sixth-level headings in an application interface beneath a level 5 heading; it is the lowest application heading level. */
  --semantic-typography-heading-app-6: var(--semantic-typography-heading-app-6-font-weight) var(--semantic-typography-heading-app-6-font-size)/var(--semantic-typography-heading-app-6-line-height) var(--semantic-typography-heading-app-6-font-family);
  /* Use for sixth-level headings in an application interface beneath a level 5 heading; it is the lowest application heading level. */
  --semantic-typography-heading-app-6-font-family: var(--semantic-font-family-ui);
  /* Use for sixth-level headings in an application interface beneath a level 5 heading; it is the lowest application heading level. */
  --semantic-typography-heading-app-6-font-size: var(--primitive-dimension-font-size-500);
  /* Use for sixth-level headings in an application interface beneath a level 5 heading; it is the lowest application heading level. */
  --semantic-typography-heading-app-6-font-weight: var(--primitive-font-weight-semi-bold);
  /* Use for sixth-level headings in an application interface beneath a level 5 heading; it is the lowest application heading level. */
  --semantic-typography-heading-app-6-letter-spacing: var(--primitive-dimension-letter-spacing-normal);
  /* Use for sixth-level headings in an application interface beneath a level 5 heading; it is the lowest application heading level. */
  --semantic-typography-heading-app-6-line-height: var(--primitive-number-line-height-500);
  /* Use for the highest-level document heading in marketing content. Use the display style only for promotional text outside the heading hierarchy. */
  --semantic-typography-heading-marketing-1: var(--semantic-typography-heading-marketing-1-font-weight) var(--semantic-typography-heading-marketing-1-font-size)/var(--semantic-typography-heading-marketing-1-line-height) var(--semantic-typography-heading-marketing-1-font-family);
  /* Use for the highest-level document heading in marketing content. Use the display style only for promotional text outside the heading hierarchy. */
  --semantic-typography-heading-marketing-1-font-family: var(--semantic-font-family-prose);
  /* Use for the highest-level document heading in marketing content. Use the display style only for promotional text outside the heading hierarchy. */
  --semantic-typography-heading-marketing-1-font-size: var(--primitive-dimension-font-size-1500);
  /* Use for the highest-level document heading in marketing content. Use the display style only for promotional text outside the heading hierarchy. */
  --semantic-typography-heading-marketing-1-font-weight: var(--primitive-font-weight-bold);
  /* Use for the highest-level document heading in marketing content. Use the display style only for promotional text outside the heading hierarchy. */
  --semantic-typography-heading-marketing-1-letter-spacing: var(--primitive-dimension-letter-spacing-normal);
  /* Use for the highest-level document heading in marketing content. Use the display style only for promotional text outside the heading hierarchy. */
  --semantic-typography-heading-marketing-1-line-height: var(--primitive-number-line-height-1500);
  /* Use for second-level headings in marketing content beneath a level 1 heading. */
  --semantic-typography-heading-marketing-2: var(--semantic-typography-heading-marketing-2-font-weight) var(--semantic-typography-heading-marketing-2-font-size)/var(--semantic-typography-heading-marketing-2-line-height) var(--semantic-typography-heading-marketing-2-font-family);
  /* Use for second-level headings in marketing content beneath a level 1 heading. */
  --semantic-typography-heading-marketing-2-font-family: var(--semantic-font-family-prose);
  /* Use for second-level headings in marketing content beneath a level 1 heading. */
  --semantic-typography-heading-marketing-2-font-size: var(--primitive-dimension-font-size-1300);
  /* Use for second-level headings in marketing content beneath a level 1 heading. */
  --semantic-typography-heading-marketing-2-font-weight: var(--primitive-font-weight-bold);
  /* Use for second-level headings in marketing content beneath a level 1 heading. */
  --semantic-typography-heading-marketing-2-letter-spacing: var(--primitive-dimension-letter-spacing-normal);
  /* Use for second-level headings in marketing content beneath a level 1 heading. */
  --semantic-typography-heading-marketing-2-line-height: var(--primitive-number-line-height-1300);
  /* Use for third-level headings in marketing content beneath a level 2 heading. */
  --semantic-typography-heading-marketing-3: var(--semantic-typography-heading-marketing-3-font-weight) var(--semantic-typography-heading-marketing-3-font-size)/var(--semantic-typography-heading-marketing-3-line-height) var(--semantic-typography-heading-marketing-3-font-family);
  /* Use for third-level headings in marketing content beneath a level 2 heading. */
  --semantic-typography-heading-marketing-3-font-family: var(--semantic-font-family-prose);
  /* Use for third-level headings in marketing content beneath a level 2 heading. */
  --semantic-typography-heading-marketing-3-font-size: var(--primitive-dimension-font-size-1100);
  /* Use for third-level headings in marketing content beneath a level 2 heading. */
  --semantic-typography-heading-marketing-3-font-weight: var(--primitive-font-weight-bold);
  /* Use for third-level headings in marketing content beneath a level 2 heading. */
  --semantic-typography-heading-marketing-3-letter-spacing: var(--primitive-dimension-letter-spacing-normal);
  /* Use for third-level headings in marketing content beneath a level 2 heading. */
  --semantic-typography-heading-marketing-3-line-height: var(--primitive-number-line-height-1100);
  /* Use for fourth-level headings in marketing content beneath a level 3 heading. */
  --semantic-typography-heading-marketing-4: var(--semantic-typography-heading-marketing-4-font-weight) var(--semantic-typography-heading-marketing-4-font-size)/var(--semantic-typography-heading-marketing-4-line-height) var(--semantic-typography-heading-marketing-4-font-family);
  /* Use for fourth-level headings in marketing content beneath a level 3 heading. */
  --semantic-typography-heading-marketing-4-font-family: var(--semantic-font-family-prose);
  /* Use for fourth-level headings in marketing content beneath a level 3 heading. */
  --semantic-typography-heading-marketing-4-font-size: var(--primitive-dimension-font-size-900);
  /* Use for fourth-level headings in marketing content beneath a level 3 heading. */
  --semantic-typography-heading-marketing-4-font-weight: var(--primitive-font-weight-bold);
  /* Use for fourth-level headings in marketing content beneath a level 3 heading. */
  --semantic-typography-heading-marketing-4-letter-spacing: var(--primitive-dimension-letter-spacing-normal);
  /* Use for fourth-level headings in marketing content beneath a level 3 heading. */
  --semantic-typography-heading-marketing-4-line-height: var(--primitive-number-line-height-900);
  /* Use for fifth-level headings in marketing content beneath a level 4 heading. */
  --semantic-typography-heading-marketing-5: var(--semantic-typography-heading-marketing-5-font-weight) var(--semantic-typography-heading-marketing-5-font-size)/var(--semantic-typography-heading-marketing-5-line-height) var(--semantic-typography-heading-marketing-5-font-family);
  /* Use for fifth-level headings in marketing content beneath a level 4 heading. */
  --semantic-typography-heading-marketing-5-font-family: var(--semantic-font-family-prose);
  /* Use for fifth-level headings in marketing content beneath a level 4 heading. */
  --semantic-typography-heading-marketing-5-font-size: var(--primitive-dimension-font-size-700);
  /* Use for fifth-level headings in marketing content beneath a level 4 heading. */
  --semantic-typography-heading-marketing-5-font-weight: var(--primitive-font-weight-bold);
  /* Use for fifth-level headings in marketing content beneath a level 4 heading. */
  --semantic-typography-heading-marketing-5-letter-spacing: var(--primitive-dimension-letter-spacing-normal);
  /* Use for fifth-level headings in marketing content beneath a level 4 heading. */
  --semantic-typography-heading-marketing-5-line-height: var(--primitive-number-line-height-700);
  /* Use for sixth-level headings in marketing content beneath a level 5 heading; it is the lowest marketing heading level. */
  --semantic-typography-heading-marketing-6: var(--semantic-typography-heading-marketing-6-font-weight) var(--semantic-typography-heading-marketing-6-font-size)/var(--semantic-typography-heading-marketing-6-line-height) var(--semantic-typography-heading-marketing-6-font-family);
  /* Use for sixth-level headings in marketing content beneath a level 5 heading; it is the lowest marketing heading level. */
  --semantic-typography-heading-marketing-6-font-family: var(--semantic-font-family-prose);
  /* Use for sixth-level headings in marketing content beneath a level 5 heading; it is the lowest marketing heading level. */
  --semantic-typography-heading-marketing-6-font-size: var(--primitive-dimension-font-size-500);
  /* Use for sixth-level headings in marketing content beneath a level 5 heading; it is the lowest marketing heading level. */
  --semantic-typography-heading-marketing-6-font-weight: var(--primitive-font-weight-bold);
  /* Use for sixth-level headings in marketing content beneath a level 5 heading; it is the lowest marketing heading level. */
  --semantic-typography-heading-marketing-6-letter-spacing: var(--primitive-dimension-letter-spacing-normal);
  /* Use for sixth-level headings in marketing content beneath a level 5 heading; it is the lowest marketing heading level. */
  --semantic-typography-heading-marketing-6-line-height: var(--primitive-number-line-height-500);
  /* Use for oversized promotional text above the standard marketing heading hierarchy. Do not use for document headings. */
  --semantic-typography-heading-marketing-display: var(--semantic-typography-heading-marketing-display-font-weight) var(--semantic-typography-heading-marketing-display-font-size)/var(--semantic-typography-heading-marketing-display-line-height) var(--semantic-typography-heading-marketing-display-font-family);
  /* Use for oversized promotional text above the standard marketing heading hierarchy. Do not use for document headings. */
  --semantic-typography-heading-marketing-display-font-family: var(--semantic-font-family-prose);
  /* Use for oversized promotional text above the standard marketing heading hierarchy. Do not use for document headings. */
  --semantic-typography-heading-marketing-display-font-size: var(--primitive-dimension-font-size-1700);
  /* Use for oversized promotional text above the standard marketing heading hierarchy. Do not use for document headings. */
  --semantic-typography-heading-marketing-display-font-weight: var(--primitive-font-weight-bold);
  /* Use for oversized promotional text above the standard marketing heading hierarchy. Do not use for document headings. */
  --semantic-typography-heading-marketing-display-letter-spacing: var(--primitive-dimension-letter-spacing-normal);
  /* Use for oversized promotional text above the standard marketing heading hierarchy. Do not use for document headings. */
  --semantic-typography-heading-marketing-display-line-height: var(--primitive-number-line-height-1700);
  /* Use for default running text in components that adapt to their context, such as paragraphs, lists, and links. Resolves to the UI style in interfaces and to the prose style inside long-form content. */
  --semantic-typography-primary: var(--semantic-typography-primary-font-weight) var(--semantic-typography-primary-font-size)/var(--semantic-typography-primary-line-height) var(--semantic-typography-primary-font-family);
  /* Use for default running text in components that adapt to their context, such as paragraphs, lists, and links. Resolves to the UI style in interfaces and to the prose style inside long-form content. */
  --semantic-typography-primary-font-family: var(--semantic-typography-ui-primary-font-family);
  /* Use for default running text in components that adapt to their context, such as paragraphs, lists, and links. Resolves to the UI style in interfaces and to the prose style inside long-form content. */
  --semantic-typography-primary-font-size: var(--semantic-typography-ui-primary-font-size);
  /* Use for default running text in components that adapt to their context, such as paragraphs, lists, and links. Resolves to the UI style in interfaces and to the prose style inside long-form content. */
  --semantic-typography-primary-font-weight: var(--semantic-typography-ui-primary-font-weight);
  /* Use for default running text in components that adapt to their context, such as paragraphs, lists, and links. Resolves to the UI style in interfaces and to the prose style inside long-form content. */
  --semantic-typography-primary-letter-spacing: var(--semantic-typography-ui-primary-letter-spacing);
  /* Use for default running text in components that adapt to their context, such as paragraphs, lists, and links. Resolves to the UI style in interfaces and to the prose style inside long-form content. */
  --semantic-typography-primary-line-height: var(--semantic-typography-ui-primary-line-height);
  /* Use for default body copy in long-form content. */
  --semantic-typography-prose-primary: var(--semantic-typography-prose-primary-font-weight) var(--semantic-typography-prose-primary-font-size)/var(--semantic-typography-prose-primary-line-height) var(--semantic-typography-prose-primary-font-family);
  /* Use for default body copy in long-form content. */
  --semantic-typography-prose-primary-font-family: var(--semantic-font-family-prose);
  /* Use for default body copy in long-form content. */
  --semantic-typography-prose-primary-font-size: var(--primitive-dimension-font-size-500);
  /* Use for default body copy in long-form content. */
  --semantic-typography-prose-primary-font-weight: var(--primitive-font-weight-normal);
  /* Use for default body copy in long-form content. */
  --semantic-typography-prose-primary-letter-spacing: var(--primitive-dimension-letter-spacing-normal);
  /* Use for default body copy in long-form content. */
  --semantic-typography-prose-primary-line-height: var(--primitive-number-line-height-500);
  /* Use for supporting long-form content, such as annotations or ancillary copy. Use the primary prose style for default body copy. */
  --semantic-typography-prose-secondary: var(--semantic-typography-prose-secondary-font-weight) var(--semantic-typography-prose-secondary-font-size)/var(--semantic-typography-prose-secondary-line-height) var(--semantic-typography-prose-secondary-font-family);
  /* Use for supporting long-form content, such as annotations or ancillary copy. Use the primary prose style for default body copy. */
  --semantic-typography-prose-secondary-font-family: var(--semantic-font-family-prose);
  /* Use for supporting long-form content, such as annotations or ancillary copy. Use the primary prose style for default body copy. */
  --semantic-typography-prose-secondary-font-size: var(--primitive-dimension-font-size-400);
  /* Use for supporting long-form content, such as annotations or ancillary copy. Use the primary prose style for default body copy. */
  --semantic-typography-prose-secondary-font-weight: var(--primitive-font-weight-normal);
  /* Use for supporting long-form content, such as annotations or ancillary copy. Use the primary prose style for default body copy. */
  --semantic-typography-prose-secondary-letter-spacing: var(--primitive-dimension-letter-spacing-normal);
  /* Use for supporting long-form content, such as annotations or ancillary copy. Use the primary prose style for default body copy. */
  --semantic-typography-prose-secondary-line-height: var(--primitive-number-line-height-400);
  /* Use for supporting running text in components that adapt to their context. Resolves to the secondary UI style in interfaces and to the secondary prose style inside long-form content. */
  --semantic-typography-secondary: var(--semantic-typography-secondary-font-weight) var(--semantic-typography-secondary-font-size)/var(--semantic-typography-secondary-line-height) var(--semantic-typography-secondary-font-family);
  /* Use for supporting running text in components that adapt to their context. Resolves to the secondary UI style in interfaces and to the secondary prose style inside long-form content. */
  --semantic-typography-secondary-font-family: var(--semantic-typography-ui-secondary-font-family);
  /* Use for supporting running text in components that adapt to their context. Resolves to the secondary UI style in interfaces and to the secondary prose style inside long-form content. */
  --semantic-typography-secondary-font-size: var(--semantic-typography-ui-secondary-font-size);
  /* Use for supporting running text in components that adapt to their context. Resolves to the secondary UI style in interfaces and to the secondary prose style inside long-form content. */
  --semantic-typography-secondary-font-weight: var(--semantic-typography-ui-secondary-font-weight);
  /* Use for supporting running text in components that adapt to their context. Resolves to the secondary UI style in interfaces and to the secondary prose style inside long-form content. */
  --semantic-typography-secondary-letter-spacing: var(--semantic-typography-ui-secondary-letter-spacing);
  /* Use for supporting running text in components that adapt to their context. Resolves to the secondary UI style in interfaces and to the secondary prose style inside long-form content. */
  --semantic-typography-secondary-line-height: var(--semantic-typography-ui-secondary-line-height);
  /* Use for structural interface labels, such as navigation and menu group labels and the table of contents title: the primary UI style's size in a heavier weight. Do not use for default interface copy. */
  --semantic-typography-ui-label: var(--semantic-typography-ui-label-font-weight) var(--semantic-typography-ui-label-font-size)/var(--semantic-typography-ui-label-line-height) var(--semantic-typography-ui-label-font-family);
  /* Use for structural interface labels, such as navigation and menu group labels and the table of contents title: the primary UI style's size in a heavier weight. Do not use for default interface copy. */
  --semantic-typography-ui-label-font-family: var(--semantic-font-family-ui);
  /* Use for structural interface labels, such as navigation and menu group labels and the table of contents title: the primary UI style's size in a heavier weight. Do not use for default interface copy. */
  --semantic-typography-ui-label-font-size: var(--primitive-dimension-font-size-400);
  /* Use for structural interface labels, such as navigation and menu group labels and the table of contents title: the primary UI style's size in a heavier weight. Do not use for default interface copy. */
  --semantic-typography-ui-label-font-weight: var(--primitive-font-weight-bold);
  /* Use for structural interface labels, such as navigation and menu group labels and the table of contents title: the primary UI style's size in a heavier weight. Do not use for default interface copy. */
  --semantic-typography-ui-label-letter-spacing: var(--primitive-dimension-letter-spacing-normal);
  /* Use for structural interface labels, such as navigation and menu group labels and the table of contents title: the primary UI style's size in a heavier weight. Do not use for default interface copy. */
  --semantic-typography-ui-label-line-height: var(--primitive-number-line-height-400);
  /* Use for default text in application interfaces, including controls, labels, and navigation. */
  --semantic-typography-ui-primary: var(--semantic-typography-ui-primary-font-weight) var(--semantic-typography-ui-primary-font-size)/var(--semantic-typography-ui-primary-line-height) var(--semantic-typography-ui-primary-font-family);
  /* Use for default text in application interfaces, including controls, labels, and navigation. */
  --semantic-typography-ui-primary-font-family: var(--semantic-font-family-ui);
  /* Use for default text in application interfaces, including controls, labels, and navigation. */
  --semantic-typography-ui-primary-font-size: var(--primitive-dimension-font-size-400);
  /* Use for default text in application interfaces, including controls, labels, and navigation. */
  --semantic-typography-ui-primary-font-weight: var(--primitive-font-weight-normal);
  /* Use for default text in application interfaces, including controls, labels, and navigation. */
  --semantic-typography-ui-primary-letter-spacing: var(--primitive-dimension-letter-spacing-normal);
  /* Use for default text in application interfaces, including controls, labels, and navigation. */
  --semantic-typography-ui-primary-line-height: var(--primitive-number-line-height-400);
  /* Component token for the search dialog's field, the dialog's main input. Larger than the primary UI style, so the query reads as the dialog's heading. Do not use for other fields. */
  --semantic-typography-ui-search-dialog-input: var(--semantic-typography-ui-search-dialog-input-font-weight) var(--semantic-typography-ui-search-dialog-input-font-size)/var(--semantic-typography-ui-search-dialog-input-line-height) var(--semantic-typography-ui-search-dialog-input-font-family);
  /* Component token for the search dialog's field, the dialog's main input. Larger than the primary UI style, so the query reads as the dialog's heading. Do not use for other fields. */
  --semantic-typography-ui-search-dialog-input-font-family: var(--semantic-font-family-ui);
  /* Component token for the search dialog's field, the dialog's main input. Larger than the primary UI style, so the query reads as the dialog's heading. Do not use for other fields. */
  --semantic-typography-ui-search-dialog-input-font-size: var(--primitive-dimension-font-size-500);
  /* Component token for the search dialog's field, the dialog's main input. Larger than the primary UI style, so the query reads as the dialog's heading. Do not use for other fields. */
  --semantic-typography-ui-search-dialog-input-font-weight: var(--primitive-font-weight-normal);
  /* Component token for the search dialog's field, the dialog's main input. Larger than the primary UI style, so the query reads as the dialog's heading. Do not use for other fields. */
  --semantic-typography-ui-search-dialog-input-letter-spacing: var(--primitive-dimension-letter-spacing-normal);
  /* Component token for the search dialog's field, the dialog's main input. Larger than the primary UI style, so the query reads as the dialog's heading. Do not use for other fields. */
  --semantic-typography-ui-search-dialog-input-line-height: var(--primitive-number-line-height-500);
  /* Use for supporting interface text, such as helper text or secondary labels. Use the primary UI style for default interface copy. */
  --semantic-typography-ui-secondary: var(--semantic-typography-ui-secondary-font-weight) var(--semantic-typography-ui-secondary-font-size)/var(--semantic-typography-ui-secondary-line-height) var(--semantic-typography-ui-secondary-font-family);
  /* Use for supporting interface text, such as helper text or secondary labels. Use the primary UI style for default interface copy. */
  --semantic-typography-ui-secondary-font-family: var(--semantic-font-family-ui);
  /* Use for supporting interface text, such as helper text or secondary labels. Use the primary UI style for default interface copy. */
  --semantic-typography-ui-secondary-font-size: var(--primitive-dimension-font-size-300);
  /* Use for supporting interface text, such as helper text or secondary labels. Use the primary UI style for default interface copy. */
  --semantic-typography-ui-secondary-font-weight: var(--primitive-font-weight-normal);
  /* Use for supporting interface text, such as helper text or secondary labels. Use the primary UI style for default interface copy. */
  --semantic-typography-ui-secondary-letter-spacing: var(--primitive-dimension-letter-spacing-normal);
  /* Use for supporting interface text, such as helper text or secondary labels. Use the primary UI style for default interface copy. */
  --semantic-typography-ui-secondary-line-height: var(--primitive-number-line-height-300);
  /* Use for the lowest-priority interface text, such as compact metadata or supplemental labels. Do not use when the primary or secondary UI style provides sufficient hierarchy. */
  --semantic-typography-ui-tertiary: var(--semantic-typography-ui-tertiary-font-weight) var(--semantic-typography-ui-tertiary-font-size)/var(--semantic-typography-ui-tertiary-line-height) var(--semantic-typography-ui-tertiary-font-family);
  /* Use for the lowest-priority interface text, such as compact metadata or supplemental labels. Do not use when the primary or secondary UI style provides sufficient hierarchy. */
  --semantic-typography-ui-tertiary-font-family: var(--semantic-font-family-ui);
  /* Use for the lowest-priority interface text, such as compact metadata or supplemental labels. Do not use when the primary or secondary UI style provides sufficient hierarchy. */
  --semantic-typography-ui-tertiary-font-size: var(--primitive-dimension-font-size-200);
  /* Use for the lowest-priority interface text, such as compact metadata or supplemental labels. Do not use when the primary or secondary UI style provides sufficient hierarchy. */
  --semantic-typography-ui-tertiary-font-weight: var(--primitive-font-weight-normal);
  /* Use for the lowest-priority interface text, such as compact metadata or supplemental labels. Do not use when the primary or secondary UI style provides sufficient hierarchy. */
  --semantic-typography-ui-tertiary-letter-spacing: var(--primitive-dimension-letter-spacing-normal);
  /* Use for the lowest-priority interface text, such as compact metadata or supplemental labels. Do not use when the primary or secondary UI style provides sufficient hierarchy. */
  --semantic-typography-ui-tertiary-line-height: var(--primitive-number-line-height-200);
}

:root[data-color-scheme="light"] {
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-color-scheme]) {
    color-scheme: dark;
    /* Use behind modal dialogs, drawers, and other blocking overlays to dim underlying content. */
    --semantic-color-background-backdrop: oklch(17.76% 0 0 / 0.15);
    /* Use as the foundational background of a page or application. */
    --semantic-color-background-canvas: var(--primitive-color-graphite-900);
    /* Use for the checkbox container when it is not selected. */
    --semantic-color-background-checkbox: var(--semantic-color-background-fill-ghost-neutral);
    /* Use for an unselected checkbox container while it is actively pressed. */
    --semantic-color-background-checkbox-active: var(--semantic-color-background-fill-ghost-neutral-active);
    /* Use for an unselected checkbox container when it is hovered. */
    --semantic-color-background-checkbox-hover: var(--semantic-color-background-fill-ghost-neutral-hover);
    /* Use for the checkbox container when it is selected. */
    --semantic-color-background-checkbox-selected: var(--semantic-color-background-fill-selected);
    /* Use for the first data series in charts and for meter indicators. Do not use to signal status. */
    --semantic-color-background-fill-data-viz-100: var(--primitive-color-data-viz-100);
    /* Use for the second data series in charts. Do not use to signal status. */
    --semantic-color-background-fill-data-viz-200: var(--primitive-color-data-viz-200);
    /* Use for the third data series in charts. Do not use to signal status. */
    --semantic-color-background-fill-data-viz-300: var(--primitive-color-data-viz-300);
    /* Use for the fourth data series in charts. Do not use to signal status. */
    --semantic-color-background-fill-data-viz-400: var(--primitive-color-data-viz-400);
    /* Use for the fifth data series in charts. Do not use to signal status. */
    --semantic-color-background-fill-data-viz-500: var(--primitive-color-data-viz-500);
    /* Use for the sixth data series in charts. Do not use to signal status. */
    --semantic-color-background-fill-data-viz-600: var(--primitive-color-data-viz-600);
    /* Use for the seventh data series in charts. Do not use to signal status. */
    --semantic-color-background-fill-data-viz-700: var(--primitive-color-data-viz-700);
    /* Use for the eighth data series in charts. Do not use to signal status. */
    --semantic-color-background-fill-data-viz-800: var(--primitive-color-data-viz-800);
    /* Use for the ninth data series in charts. Do not use to signal status. */
    --semantic-color-background-fill-data-viz-900: var(--primitive-color-data-viz-900);
    /* Use for the tenth data series in charts. Do not use to signal status. */
    --semantic-color-background-fill-data-viz-1000: var(--primitive-color-data-viz-1000);
    /* Use when a default bounded element intentionally has no visible fill and should reveal its parent background. */
    --semantic-color-background-fill-ghost: var(--primitive-color-transparent);
    /* Use while a default ghost filled interactive element is actively pressed. */
    --semantic-color-background-fill-ghost-active: var(--primitive-color-cerulian-blue-820);
    /* Use when a default ghost filled interactive element is hovered. */
    --semantic-color-background-fill-ghost-hover: var(--primitive-color-cerulian-blue-860);
    /* Use when an informational bounded element intentionally has no visible fill and should reveal its parent background. */
    --semantic-color-background-fill-ghost-information: var(--primitive-color-transparent);
    /* Use while an informational ghost filled interactive element is actively pressed. */
    --semantic-color-background-fill-ghost-information-active: var(--primitive-color-cerulian-blue-820);
    /* Use when an informational ghost filled interactive element is hovered. */
    --semantic-color-background-fill-ghost-information-hover: var(--primitive-color-cerulian-blue-860);
    /* Use when a negative bounded element intentionally has no visible fill and should reveal its parent background. */
    --semantic-color-background-fill-ghost-negative: var(--primitive-color-transparent);
    /* Use while a negative ghost filled interactive element is actively pressed. */
    --semantic-color-background-fill-ghost-negative-active: var(--primitive-color-coral-red-820);
    /* Use when a negative ghost filled interactive element is hovered. */
    --semantic-color-background-fill-ghost-negative-hover: var(--primitive-color-coral-red-860);
    /* Use when a neutral bounded element intentionally has no visible fill and should reveal its parent background. */
    --semantic-color-background-fill-ghost-neutral: var(--primitive-color-transparent);
    /* Use while a neutral ghost filled interactive element is actively pressed. */
    --semantic-color-background-fill-ghost-neutral-active: var(--primitive-color-graphite-820);
    /* Use when a neutral ghost filled interactive element is hovered. */
    --semantic-color-background-fill-ghost-neutral-hover: var(--primitive-color-graphite-860);
    /* Use when a positive bounded element intentionally has no visible fill and should reveal its parent background. */
    --semantic-color-background-fill-ghost-positive: var(--primitive-color-transparent);
    /* Use while a positive ghost filled interactive element is actively pressed. */
    --semantic-color-background-fill-ghost-positive-active: var(--primitive-color-turquoise-green-820);
    /* Use when a positive ghost filled interactive element is hovered. */
    --semantic-color-background-fill-ghost-positive-hover: var(--primitive-color-turquoise-green-860);
    /* Use for default high-prominence filled elements such as primary buttons, strong badges, or prominent actions. */
    --semantic-color-background-fill-primary: var(--primitive-color-cerulian-blue-400);
    /* Use while a default high-prominence filled interactive element is actively pressed. */
    --semantic-color-background-fill-primary-active: var(--primitive-color-cerulian-blue-320);
    /* Use when a default high-prominence filled interactive element is hovered. */
    --semantic-color-background-fill-primary-hover: var(--primitive-color-cerulian-blue-360);
    /* Use for high-prominence filled elements that communicate neutral information or guidance. */
    --semantic-color-background-fill-primary-information: var(--primitive-color-cerulian-blue-400);
    /* Use while an informational high-prominence filled interactive element is actively pressed. */
    --semantic-color-background-fill-primary-information-active: var(--primitive-color-cerulian-blue-320);
    /* Use when an informational high-prominence filled interactive element is hovered. */
    --semantic-color-background-fill-primary-information-hover: var(--primitive-color-cerulian-blue-360);
    /* Use for high-prominence filled elements that trigger or communicate a negative action or outcome. */
    --semantic-color-background-fill-primary-negative: var(--primitive-color-coral-red-400);
    /* Use while a negative high-prominence filled interactive element is actively pressed. */
    --semantic-color-background-fill-primary-negative-active: var(--primitive-color-coral-red-320);
    /* Use when a negative high-prominence filled interactive element is hovered. */
    --semantic-color-background-fill-primary-negative-hover: var(--primitive-color-coral-red-360);
    /* Use for high-prominence filled elements that require a neutral treatment. */
    --semantic-color-background-fill-primary-neutral: var(--primitive-color-graphite-400);
    /* Use while a neutral high-prominence filled interactive element is actively pressed. */
    --semantic-color-background-fill-primary-neutral-active: var(--primitive-color-graphite-320);
    /* Use when a neutral high-prominence filled interactive element is hovered. */
    --semantic-color-background-fill-primary-neutral-hover: var(--primitive-color-graphite-360);
    /* Use for high-prominence filled elements that trigger or communicate a positive action or outcome. */
    --semantic-color-background-fill-primary-positive: var(--primitive-color-turquoise-green-400);
    /* Use while a positive high-prominence filled interactive element is actively pressed. */
    --semantic-color-background-fill-primary-positive-active: var(--primitive-color-turquoise-green-320);
    /* Use when a positive high-prominence filled interactive element is hovered. */
    --semantic-color-background-fill-primary-positive-hover: var(--primitive-color-turquoise-green-360);
    /* Use for lower-prominence filled elements such as secondary buttons, neutral chips, or subtle selected states. */
    --semantic-color-background-fill-secondary: var(--primitive-color-graphite-800);
    /* Use while a neutral lower-prominence filled interactive element is actively pressed. */
    --semantic-color-background-fill-secondary-active: var(--primitive-color-graphite-720);
    /* Use when a neutral lower-prominence filled interactive element is hovered. */
    --semantic-color-background-fill-secondary-hover: var(--primitive-color-graphite-760);
    /* Use for lower-prominence filled elements that communicate neutral information or guidance. */
    --semantic-color-background-fill-secondary-information: var(--primitive-color-cerulian-blue-800);
    /* Use while an informational lower-prominence filled interactive element is actively pressed. */
    --semantic-color-background-fill-secondary-information-active: var(--primitive-color-cerulian-blue-720);
    /* Use when an informational lower-prominence filled interactive element is hovered. */
    --semantic-color-background-fill-secondary-information-hover: var(--primitive-color-cerulian-blue-760);
    /* Use for lower-prominence filled elements that communicate an error, unfavorable outcome, or negative consequence. */
    --semantic-color-background-fill-secondary-negative: var(--primitive-color-coral-red-800);
    /* Use while a negative lower-prominence filled interactive element is actively pressed. */
    --semantic-color-background-fill-secondary-negative-active: var(--primitive-color-coral-red-720);
    /* Use when a negative lower-prominence filled interactive element is hovered. */
    --semantic-color-background-fill-secondary-negative-hover: var(--primitive-color-coral-red-760);
    /* Use for lower-prominence filled elements that communicate success, a favorable outcome, or positive confirmation. */
    --semantic-color-background-fill-secondary-positive: var(--primitive-color-turquoise-green-800);
    /* Use while a positive lower-prominence filled interactive element is actively pressed. */
    --semantic-color-background-fill-secondary-positive-active: var(--primitive-color-turquoise-green-720);
    /* Use when a positive lower-prominence filled interactive element is hovered. */
    --semantic-color-background-fill-secondary-positive-hover: var(--primitive-color-turquoise-green-760);
    /* Use for lower-prominence filled elements that warn about a potential issue requiring attention. */
    --semantic-color-background-fill-secondary-warning: var(--primitive-color-cream-yellow-800);
    /* Use while a warning lower-prominence filled interactive element is actively pressed. */
    --semantic-color-background-fill-secondary-warning-active: var(--primitive-color-cream-yellow-720);
    /* Use when a warning lower-prominence filled interactive element is hovered. */
    --semantic-color-background-fill-secondary-warning-hover: var(--primitive-color-cream-yellow-760);
    /* Use for selected controls and progress indicators that require a distinct accent fill. */
    --semantic-color-background-fill-selected: var(--primitive-color-cerulian-blue-500);
    /* Use while a selected accent-filled interactive element is actively pressed. */
    --semantic-color-background-fill-selected-active: var(--primitive-color-cerulian-blue-420);
    /* Use when a selected accent-filled interactive element is hovered. */
    --semantic-color-background-fill-selected-hover: var(--primitive-color-cerulian-blue-460);
    /* Use when a neutral bounded element intentionally has no visible fill and should reveal its parent background. */
    --semantic-color-background-radio: var(--semantic-color-background-fill-ghost-neutral);
    /* Use while a neutral ghost filled interactive element is actively pressed. */
    --semantic-color-background-radio-active: var(--semantic-color-background-fill-ghost-neutral-active);
    /* Use when a neutral ghost filled interactive element is hovered. */
    --semantic-color-background-radio-hover: var(--semantic-color-background-fill-ghost-neutral-hover);
    /* Use for selected controls and progress indicators that require a distinct accent fill. */
    --semantic-color-background-radio-selected: var(--semantic-color-background-fill-selected);
    /* Use while a selected accent-filled interactive element is actively pressed. */
    --semantic-color-background-radio-selected-active: var(--semantic-color-background-fill-selected-active);
    /* Use when a selected accent-filled interactive element is hovered. */
    --semantic-color-background-radio-selected-hover: var(--semantic-color-background-fill-selected-hover);
    /* Use for placeholders that stand in for content while it loads, on canvas and surfaces. Do not use for empty or disabled states. */
    --semantic-color-background-skeleton: var(--primitive-color-graphite-700);
    /* Use for selected controls and progress indicators that require a distinct accent fill. */
    --semantic-color-background-slider-progress: var(--semantic-color-background-fill-selected);
    /* Use while a selected accent-filled interactive element is actively pressed. */
    --semantic-color-background-slider-progress-active: var(--semantic-color-background-fill-selected-active);
    /* Use when a selected accent-filled interactive element is hovered. */
    --semantic-color-background-slider-progress-hover: var(--semantic-color-background-fill-selected-hover);
    /* Use for lower-prominence filled elements such as secondary buttons, neutral chips, or subtle selected states. */
    --semantic-color-background-slider-track: var(--semantic-color-background-fill-secondary);
    /* Use while a neutral lower-prominence filled interactive element is actively pressed. */
    --semantic-color-background-slider-track-active: var(--semantic-color-background-fill-secondary-active);
    /* Use for markers at the ends of a slider track. */
    --semantic-color-background-slider-track-endstop: var(--semantic-color-border-primary);
    /* Use when a neutral lower-prominence filled interactive element is hovered. */
    --semantic-color-background-slider-track-hover: var(--semantic-color-background-fill-secondary-hover);
    /* Use for standard structural containers such as cards, panels, and content sections. */
    --semantic-color-background-surface: var(--primitive-color-graphite-800);
    /* Use for the switch track when it is off. */
    --semantic-color-background-switch: var(--primitive-color-graphite-400);
    /* Use for the movable knob inside a switch track. */
    --semantic-color-background-switch-knob: var(--primitive-color-black);
    /* Use for selected controls and progress indicators that require a distinct accent fill. */
    --semantic-color-background-switch-selected: var(--semantic-color-background-fill-selected);
    /* Use for boundaries around elements that communicate neutral information or guidance. */
    --semantic-color-border-information: var(--primitive-color-cerulian-blue-400);
    /* Use for boundaries around elements that communicate an error, unfavorable outcome, or negative consequence. */
    --semantic-color-border-negative: var(--primitive-color-coral-red-400);
    /* Use for boundaries around elements that communicate success, a favorable outcome, or positive confirmation. */
    --semantic-color-border-positive: var(--primitive-color-turquoise-green-400);
    /* Use for default boundaries and dividers that require clear visual separation. */
    --semantic-color-border-primary: var(--primitive-color-graphite-400);
    /* Use for subtle decorative boundaries and dividers. Do not use when the boundary is the only visual cue identifying a control. */
    --semantic-color-border-secondary: var(--primitive-color-graphite-700);
    /* Use for boundaries around elements that warn about a potential issue requiring attention. */
    --semantic-color-border-warning: var(--primitive-color-cream-yellow-400);
    /* Use for the default visible keyboard-focus indicator around an interactive element. */
    --semantic-color-focus-ring: var(--primitive-color-cerulian-blue-400);
    /* Use for the visible keyboard-focus indicator around an element in a negative or error state. */
    --semantic-color-focus-ring-negative: var(--primitive-color-coral-red-400);
    /* Use for the visible keyboard-focus indicator around an element in a positive or success state. */
    --semantic-color-focus-ring-positive: var(--primitive-color-turquoise-green-400);
    /* Use for the visible keyboard-focus indicator around an element in a warning state. */
    --semantic-color-focus-ring-warning: var(--primitive-color-cream-yellow-400);
    /* Use for the visible indicator inside a selected checkbox. */
    --semantic-color-icon-checkbox-indicator: var(--semantic-color-icon-on-selected-fill);
    /* Use for icons that communicate neutral information or guidance. */
    --semantic-color-icon-information: var(--semantic-color-text-information);
    /* Use for icons that accompany interactive text links. */
    --semantic-color-icon-link: var(--semantic-color-text-link);
    /* Use for icons that communicate an error, unfavorable outcome, or negative consequence. */
    --semantic-color-icon-negative: var(--semantic-color-text-negative);
    /* Use for icons placed on primary fills such as prominent filled buttons, chips, or badges. */
    --semantic-color-icon-on-primary-fill: var(--semantic-color-text-on-primary-fill);
    /* Use for icons placed on secondary fills that have lower visual prominence than primary fills. */
    --semantic-color-icon-on-secondary-fill: var(--semantic-color-text-on-secondary-fill);
    /* Use for icons placed on secondary fills that communicate neutral information or guidance. */
    --semantic-color-icon-on-secondary-fill-information: var(--semantic-color-text-on-secondary-fill-information);
    /* Use for icons placed on secondary fills that communicate an error, unfavorable outcome, or negative consequence. */
    --semantic-color-icon-on-secondary-fill-negative: var(--semantic-color-text-on-secondary-fill-negative);
    /* Use for icons placed on secondary fills that communicate success, a favorable outcome, or positive confirmation. */
    --semantic-color-icon-on-secondary-fill-positive: var(--semantic-color-text-on-secondary-fill-positive);
    /* Use for icons placed on secondary fills that warn about a potential issue requiring attention. */
    --semantic-color-icon-on-secondary-fill-warning: var(--semantic-color-text-on-secondary-fill-warning);
    /* Use for icons and indicators placed on selected accent fills. */
    --semantic-color-icon-on-selected-fill: var(--primitive-color-black);
    /* Use for icons that communicate success, a favorable outcome, or positive confirmation. */
    --semantic-color-icon-positive: var(--semantic-color-text-positive);
    /* Use for default interface icons requiring the strongest standard icon emphasis. */
    --semantic-color-icon-primary: var(--semantic-color-text-primary);
    /* Use for icons and indicators placed on selected accent fills. */
    --semantic-color-icon-radio-indicator: var(--semantic-color-icon-on-selected-fill);
    /* Use for supporting icons that should be less prominent than primary icons. */
    --semantic-color-icon-secondary: var(--semantic-color-text-secondary);
    /* Use for icons that warn about a potential issue requiring attention. */
    --semantic-color-icon-warning: var(--semantic-color-text-warning);
    /* Use for the Earendil symbol. */
    --semantic-color-logo-earendil: var(--primitive-color-white);
    /* Use for every shape of a monochrome logo. */
    --semantic-color-logo-monochrome: var(--primitive-color-white);
    /* First product symbol color (blue). */
    --semantic-color-logo-symbol-1: var(--primitive-color-cerulian-blue);
    /* Second product symbol color (coral). */
    --semantic-color-logo-symbol-2: var(--primitive-color-coral-red);
    /* Third product symbol color (yellow). */
    --semantic-color-logo-symbol-3: var(--primitive-color-cream-yellow);
    /* Fourth product symbol color (light blue). */
    --semantic-color-logo-symbol-4: var(--primitive-color-calamine-blue);
    /* Use for logo wordmarks. */
    --semantic-color-logo-wordmark: var(--primitive-color-white);
    /* Use for plain source code text that no syntax role colors. */
    --semantic-color-text-code: var(--primitive-color-graphite-200);
    /* Use for code comments. Muted relative to plain code text. */
    --semantic-color-text-code-comment: var(--primitive-color-graphite-300);
    /* Use for function and method names in code. */
    --semantic-color-text-code-function: var(--primitive-color-cream-yellow-300);
    /* Use for language keywords and tag names in code. */
    --semantic-color-text-code-keyword: var(--primitive-color-cerulian-blue-300);
    /* Use for numbers and language literals such as true, false, and null in code. */
    --semantic-color-text-code-number: var(--primitive-color-turquoise-green-300);
    /* Use for code punctuation and operators. Muted relative to plain code text. */
    --semantic-color-text-code-punctuation: var(--primitive-color-graphite-300);
    /* Use for strings and regular expressions in code. */
    --semantic-color-text-code-string: var(--primitive-color-coral-red-300);
    /* Use for types, classes, and built-ins in code. */
    --semantic-color-text-code-type: var(--primitive-color-amethyst-violet-300);
    /* Use for variables, parameters, properties, and attribute names in code. */
    --semantic-color-text-code-variable: var(--primitive-color-calamine-blue-300);
    /* Use for text that communicates neutral information or guidance. */
    --semantic-color-text-information: var(--primitive-color-cerulian-blue-300);
    /* Use for interactive text links. */
    --semantic-color-text-link: var(--primitive-color-cerulian-blue-300);
    /* Use for text that communicates an error, unfavorable outcome, or negative consequence. */
    --semantic-color-text-negative: var(--primitive-color-coral-red-300);
    /* Use for text placed on primary fills such as prominent filled buttons, chips, or badges. */
    --semantic-color-text-on-primary-fill: var(--primitive-color-black);
    /* Use for text placed on secondary fills that have lower visual prominence than primary fills. */
    --semantic-color-text-on-secondary-fill: var(--primitive-color-graphite-200);
    /* Use for text placed on secondary fills that communicate neutral information or guidance. */
    --semantic-color-text-on-secondary-fill-information: var(--primitive-color-cerulian-blue-200);
    /* Use for text placed on secondary fills that communicate an error, unfavorable outcome, or negative consequence. */
    --semantic-color-text-on-secondary-fill-negative: var(--primitive-color-coral-red-200);
    /* Use for text placed on secondary fills that communicate success, a favorable outcome, or positive confirmation. */
    --semantic-color-text-on-secondary-fill-positive: var(--primitive-color-turquoise-green-200);
    /* Use for text placed on secondary fills that warn about a potential issue requiring attention. */
    --semantic-color-text-on-secondary-fill-warning: var(--primitive-color-cream-yellow-200);
    /* Use for text that communicates success, a favorable outcome, or positive confirmation. */
    --semantic-color-text-positive: var(--primitive-color-turquoise-green-300);
    /* Use for default body copy and interface labels requiring the strongest standard text emphasis. */
    --semantic-color-text-primary: var(--primitive-color-white);
    /* Use for supporting text and metadata that should be less prominent than primary text. */
    --semantic-color-text-secondary: var(--primitive-color-graphite-300);
    /* Use for text that warns about a potential issue requiring attention. */
    --semantic-color-text-warning: var(--primitive-color-cream-yellow-300);
  }
}

:root[data-color-scheme="dark"] {
  color-scheme: dark;
  /* Use behind modal dialogs, drawers, and other blocking overlays to dim underlying content. */
  --semantic-color-background-backdrop: oklch(17.76% 0 0 / 0.15);
  /* Use as the foundational background of a page or application. */
  --semantic-color-background-canvas: var(--primitive-color-graphite-900);
  /* Use for the checkbox container when it is not selected. */
  --semantic-color-background-checkbox: var(--semantic-color-background-fill-ghost-neutral);
  /* Use for an unselected checkbox container while it is actively pressed. */
  --semantic-color-background-checkbox-active: var(--semantic-color-background-fill-ghost-neutral-active);
  /* Use for an unselected checkbox container when it is hovered. */
  --semantic-color-background-checkbox-hover: var(--semantic-color-background-fill-ghost-neutral-hover);
  /* Use for the checkbox container when it is selected. */
  --semantic-color-background-checkbox-selected: var(--semantic-color-background-fill-selected);
  /* Use for the first data series in charts and for meter indicators. Do not use to signal status. */
  --semantic-color-background-fill-data-viz-100: var(--primitive-color-data-viz-100);
  /* Use for the second data series in charts. Do not use to signal status. */
  --semantic-color-background-fill-data-viz-200: var(--primitive-color-data-viz-200);
  /* Use for the third data series in charts. Do not use to signal status. */
  --semantic-color-background-fill-data-viz-300: var(--primitive-color-data-viz-300);
  /* Use for the fourth data series in charts. Do not use to signal status. */
  --semantic-color-background-fill-data-viz-400: var(--primitive-color-data-viz-400);
  /* Use for the fifth data series in charts. Do not use to signal status. */
  --semantic-color-background-fill-data-viz-500: var(--primitive-color-data-viz-500);
  /* Use for the sixth data series in charts. Do not use to signal status. */
  --semantic-color-background-fill-data-viz-600: var(--primitive-color-data-viz-600);
  /* Use for the seventh data series in charts. Do not use to signal status. */
  --semantic-color-background-fill-data-viz-700: var(--primitive-color-data-viz-700);
  /* Use for the eighth data series in charts. Do not use to signal status. */
  --semantic-color-background-fill-data-viz-800: var(--primitive-color-data-viz-800);
  /* Use for the ninth data series in charts. Do not use to signal status. */
  --semantic-color-background-fill-data-viz-900: var(--primitive-color-data-viz-900);
  /* Use for the tenth data series in charts. Do not use to signal status. */
  --semantic-color-background-fill-data-viz-1000: var(--primitive-color-data-viz-1000);
  /* Use when a default bounded element intentionally has no visible fill and should reveal its parent background. */
  --semantic-color-background-fill-ghost: var(--primitive-color-transparent);
  /* Use while a default ghost filled interactive element is actively pressed. */
  --semantic-color-background-fill-ghost-active: var(--primitive-color-cerulian-blue-820);
  /* Use when a default ghost filled interactive element is hovered. */
  --semantic-color-background-fill-ghost-hover: var(--primitive-color-cerulian-blue-860);
  /* Use when an informational bounded element intentionally has no visible fill and should reveal its parent background. */
  --semantic-color-background-fill-ghost-information: var(--primitive-color-transparent);
  /* Use while an informational ghost filled interactive element is actively pressed. */
  --semantic-color-background-fill-ghost-information-active: var(--primitive-color-cerulian-blue-820);
  /* Use when an informational ghost filled interactive element is hovered. */
  --semantic-color-background-fill-ghost-information-hover: var(--primitive-color-cerulian-blue-860);
  /* Use when a negative bounded element intentionally has no visible fill and should reveal its parent background. */
  --semantic-color-background-fill-ghost-negative: var(--primitive-color-transparent);
  /* Use while a negative ghost filled interactive element is actively pressed. */
  --semantic-color-background-fill-ghost-negative-active: var(--primitive-color-coral-red-820);
  /* Use when a negative ghost filled interactive element is hovered. */
  --semantic-color-background-fill-ghost-negative-hover: var(--primitive-color-coral-red-860);
  /* Use when a neutral bounded element intentionally has no visible fill and should reveal its parent background. */
  --semantic-color-background-fill-ghost-neutral: var(--primitive-color-transparent);
  /* Use while a neutral ghost filled interactive element is actively pressed. */
  --semantic-color-background-fill-ghost-neutral-active: var(--primitive-color-graphite-820);
  /* Use when a neutral ghost filled interactive element is hovered. */
  --semantic-color-background-fill-ghost-neutral-hover: var(--primitive-color-graphite-860);
  /* Use when a positive bounded element intentionally has no visible fill and should reveal its parent background. */
  --semantic-color-background-fill-ghost-positive: var(--primitive-color-transparent);
  /* Use while a positive ghost filled interactive element is actively pressed. */
  --semantic-color-background-fill-ghost-positive-active: var(--primitive-color-turquoise-green-820);
  /* Use when a positive ghost filled interactive element is hovered. */
  --semantic-color-background-fill-ghost-positive-hover: var(--primitive-color-turquoise-green-860);
  /* Use for default high-prominence filled elements such as primary buttons, strong badges, or prominent actions. */
  --semantic-color-background-fill-primary: var(--primitive-color-cerulian-blue-400);
  /* Use while a default high-prominence filled interactive element is actively pressed. */
  --semantic-color-background-fill-primary-active: var(--primitive-color-cerulian-blue-320);
  /* Use when a default high-prominence filled interactive element is hovered. */
  --semantic-color-background-fill-primary-hover: var(--primitive-color-cerulian-blue-360);
  /* Use for high-prominence filled elements that communicate neutral information or guidance. */
  --semantic-color-background-fill-primary-information: var(--primitive-color-cerulian-blue-400);
  /* Use while an informational high-prominence filled interactive element is actively pressed. */
  --semantic-color-background-fill-primary-information-active: var(--primitive-color-cerulian-blue-320);
  /* Use when an informational high-prominence filled interactive element is hovered. */
  --semantic-color-background-fill-primary-information-hover: var(--primitive-color-cerulian-blue-360);
  /* Use for high-prominence filled elements that trigger or communicate a negative action or outcome. */
  --semantic-color-background-fill-primary-negative: var(--primitive-color-coral-red-400);
  /* Use while a negative high-prominence filled interactive element is actively pressed. */
  --semantic-color-background-fill-primary-negative-active: var(--primitive-color-coral-red-320);
  /* Use when a negative high-prominence filled interactive element is hovered. */
  --semantic-color-background-fill-primary-negative-hover: var(--primitive-color-coral-red-360);
  /* Use for high-prominence filled elements that require a neutral treatment. */
  --semantic-color-background-fill-primary-neutral: var(--primitive-color-graphite-400);
  /* Use while a neutral high-prominence filled interactive element is actively pressed. */
  --semantic-color-background-fill-primary-neutral-active: var(--primitive-color-graphite-320);
  /* Use when a neutral high-prominence filled interactive element is hovered. */
  --semantic-color-background-fill-primary-neutral-hover: var(--primitive-color-graphite-360);
  /* Use for high-prominence filled elements that trigger or communicate a positive action or outcome. */
  --semantic-color-background-fill-primary-positive: var(--primitive-color-turquoise-green-400);
  /* Use while a positive high-prominence filled interactive element is actively pressed. */
  --semantic-color-background-fill-primary-positive-active: var(--primitive-color-turquoise-green-320);
  /* Use when a positive high-prominence filled interactive element is hovered. */
  --semantic-color-background-fill-primary-positive-hover: var(--primitive-color-turquoise-green-360);
  /* Use for lower-prominence filled elements such as secondary buttons, neutral chips, or subtle selected states. */
  --semantic-color-background-fill-secondary: var(--primitive-color-graphite-800);
  /* Use while a neutral lower-prominence filled interactive element is actively pressed. */
  --semantic-color-background-fill-secondary-active: var(--primitive-color-graphite-720);
  /* Use when a neutral lower-prominence filled interactive element is hovered. */
  --semantic-color-background-fill-secondary-hover: var(--primitive-color-graphite-760);
  /* Use for lower-prominence filled elements that communicate neutral information or guidance. */
  --semantic-color-background-fill-secondary-information: var(--primitive-color-cerulian-blue-800);
  /* Use while an informational lower-prominence filled interactive element is actively pressed. */
  --semantic-color-background-fill-secondary-information-active: var(--primitive-color-cerulian-blue-720);
  /* Use when an informational lower-prominence filled interactive element is hovered. */
  --semantic-color-background-fill-secondary-information-hover: var(--primitive-color-cerulian-blue-760);
  /* Use for lower-prominence filled elements that communicate an error, unfavorable outcome, or negative consequence. */
  --semantic-color-background-fill-secondary-negative: var(--primitive-color-coral-red-800);
  /* Use while a negative lower-prominence filled interactive element is actively pressed. */
  --semantic-color-background-fill-secondary-negative-active: var(--primitive-color-coral-red-720);
  /* Use when a negative lower-prominence filled interactive element is hovered. */
  --semantic-color-background-fill-secondary-negative-hover: var(--primitive-color-coral-red-760);
  /* Use for lower-prominence filled elements that communicate success, a favorable outcome, or positive confirmation. */
  --semantic-color-background-fill-secondary-positive: var(--primitive-color-turquoise-green-800);
  /* Use while a positive lower-prominence filled interactive element is actively pressed. */
  --semantic-color-background-fill-secondary-positive-active: var(--primitive-color-turquoise-green-720);
  /* Use when a positive lower-prominence filled interactive element is hovered. */
  --semantic-color-background-fill-secondary-positive-hover: var(--primitive-color-turquoise-green-760);
  /* Use for lower-prominence filled elements that warn about a potential issue requiring attention. */
  --semantic-color-background-fill-secondary-warning: var(--primitive-color-cream-yellow-800);
  /* Use while a warning lower-prominence filled interactive element is actively pressed. */
  --semantic-color-background-fill-secondary-warning-active: var(--primitive-color-cream-yellow-720);
  /* Use when a warning lower-prominence filled interactive element is hovered. */
  --semantic-color-background-fill-secondary-warning-hover: var(--primitive-color-cream-yellow-760);
  /* Use for selected controls and progress indicators that require a distinct accent fill. */
  --semantic-color-background-fill-selected: var(--primitive-color-cerulian-blue-500);
  /* Use while a selected accent-filled interactive element is actively pressed. */
  --semantic-color-background-fill-selected-active: var(--primitive-color-cerulian-blue-420);
  /* Use when a selected accent-filled interactive element is hovered. */
  --semantic-color-background-fill-selected-hover: var(--primitive-color-cerulian-blue-460);
  /* Use when a neutral bounded element intentionally has no visible fill and should reveal its parent background. */
  --semantic-color-background-radio: var(--semantic-color-background-fill-ghost-neutral);
  /* Use while a neutral ghost filled interactive element is actively pressed. */
  --semantic-color-background-radio-active: var(--semantic-color-background-fill-ghost-neutral-active);
  /* Use when a neutral ghost filled interactive element is hovered. */
  --semantic-color-background-radio-hover: var(--semantic-color-background-fill-ghost-neutral-hover);
  /* Use for selected controls and progress indicators that require a distinct accent fill. */
  --semantic-color-background-radio-selected: var(--semantic-color-background-fill-selected);
  /* Use while a selected accent-filled interactive element is actively pressed. */
  --semantic-color-background-radio-selected-active: var(--semantic-color-background-fill-selected-active);
  /* Use when a selected accent-filled interactive element is hovered. */
  --semantic-color-background-radio-selected-hover: var(--semantic-color-background-fill-selected-hover);
  /* Use for placeholders that stand in for content while it loads, on canvas and surfaces. Do not use for empty or disabled states. */
  --semantic-color-background-skeleton: var(--primitive-color-graphite-700);
  /* Use for selected controls and progress indicators that require a distinct accent fill. */
  --semantic-color-background-slider-progress: var(--semantic-color-background-fill-selected);
  /* Use while a selected accent-filled interactive element is actively pressed. */
  --semantic-color-background-slider-progress-active: var(--semantic-color-background-fill-selected-active);
  /* Use when a selected accent-filled interactive element is hovered. */
  --semantic-color-background-slider-progress-hover: var(--semantic-color-background-fill-selected-hover);
  /* Use for lower-prominence filled elements such as secondary buttons, neutral chips, or subtle selected states. */
  --semantic-color-background-slider-track: var(--semantic-color-background-fill-secondary);
  /* Use while a neutral lower-prominence filled interactive element is actively pressed. */
  --semantic-color-background-slider-track-active: var(--semantic-color-background-fill-secondary-active);
  /* Use for markers at the ends of a slider track. */
  --semantic-color-background-slider-track-endstop: var(--semantic-color-border-primary);
  /* Use when a neutral lower-prominence filled interactive element is hovered. */
  --semantic-color-background-slider-track-hover: var(--semantic-color-background-fill-secondary-hover);
  /* Use for standard structural containers such as cards, panels, and content sections. */
  --semantic-color-background-surface: var(--primitive-color-graphite-800);
  /* Use for the switch track when it is off. */
  --semantic-color-background-switch: var(--primitive-color-graphite-400);
  /* Use for the movable knob inside a switch track. */
  --semantic-color-background-switch-knob: var(--primitive-color-black);
  /* Use for selected controls and progress indicators that require a distinct accent fill. */
  --semantic-color-background-switch-selected: var(--semantic-color-background-fill-selected);
  /* Use for boundaries around elements that communicate neutral information or guidance. */
  --semantic-color-border-information: var(--primitive-color-cerulian-blue-400);
  /* Use for boundaries around elements that communicate an error, unfavorable outcome, or negative consequence. */
  --semantic-color-border-negative: var(--primitive-color-coral-red-400);
  /* Use for boundaries around elements that communicate success, a favorable outcome, or positive confirmation. */
  --semantic-color-border-positive: var(--primitive-color-turquoise-green-400);
  /* Use for default boundaries and dividers that require clear visual separation. */
  --semantic-color-border-primary: var(--primitive-color-graphite-400);
  /* Use for subtle decorative boundaries and dividers. Do not use when the boundary is the only visual cue identifying a control. */
  --semantic-color-border-secondary: var(--primitive-color-graphite-700);
  /* Use for boundaries around elements that warn about a potential issue requiring attention. */
  --semantic-color-border-warning: var(--primitive-color-cream-yellow-400);
  /* Use for the default visible keyboard-focus indicator around an interactive element. */
  --semantic-color-focus-ring: var(--primitive-color-cerulian-blue-400);
  /* Use for the visible keyboard-focus indicator around an element in a negative or error state. */
  --semantic-color-focus-ring-negative: var(--primitive-color-coral-red-400);
  /* Use for the visible keyboard-focus indicator around an element in a positive or success state. */
  --semantic-color-focus-ring-positive: var(--primitive-color-turquoise-green-400);
  /* Use for the visible keyboard-focus indicator around an element in a warning state. */
  --semantic-color-focus-ring-warning: var(--primitive-color-cream-yellow-400);
  /* Use for the visible indicator inside a selected checkbox. */
  --semantic-color-icon-checkbox-indicator: var(--semantic-color-icon-on-selected-fill);
  /* Use for icons that communicate neutral information or guidance. */
  --semantic-color-icon-information: var(--semantic-color-text-information);
  /* Use for icons that accompany interactive text links. */
  --semantic-color-icon-link: var(--semantic-color-text-link);
  /* Use for icons that communicate an error, unfavorable outcome, or negative consequence. */
  --semantic-color-icon-negative: var(--semantic-color-text-negative);
  /* Use for icons placed on primary fills such as prominent filled buttons, chips, or badges. */
  --semantic-color-icon-on-primary-fill: var(--semantic-color-text-on-primary-fill);
  /* Use for icons placed on secondary fills that have lower visual prominence than primary fills. */
  --semantic-color-icon-on-secondary-fill: var(--semantic-color-text-on-secondary-fill);
  /* Use for icons placed on secondary fills that communicate neutral information or guidance. */
  --semantic-color-icon-on-secondary-fill-information: var(--semantic-color-text-on-secondary-fill-information);
  /* Use for icons placed on secondary fills that communicate an error, unfavorable outcome, or negative consequence. */
  --semantic-color-icon-on-secondary-fill-negative: var(--semantic-color-text-on-secondary-fill-negative);
  /* Use for icons placed on secondary fills that communicate success, a favorable outcome, or positive confirmation. */
  --semantic-color-icon-on-secondary-fill-positive: var(--semantic-color-text-on-secondary-fill-positive);
  /* Use for icons placed on secondary fills that warn about a potential issue requiring attention. */
  --semantic-color-icon-on-secondary-fill-warning: var(--semantic-color-text-on-secondary-fill-warning);
  /* Use for icons and indicators placed on selected accent fills. */
  --semantic-color-icon-on-selected-fill: var(--primitive-color-black);
  /* Use for icons that communicate success, a favorable outcome, or positive confirmation. */
  --semantic-color-icon-positive: var(--semantic-color-text-positive);
  /* Use for default interface icons requiring the strongest standard icon emphasis. */
  --semantic-color-icon-primary: var(--semantic-color-text-primary);
  /* Use for icons and indicators placed on selected accent fills. */
  --semantic-color-icon-radio-indicator: var(--semantic-color-icon-on-selected-fill);
  /* Use for supporting icons that should be less prominent than primary icons. */
  --semantic-color-icon-secondary: var(--semantic-color-text-secondary);
  /* Use for icons that warn about a potential issue requiring attention. */
  --semantic-color-icon-warning: var(--semantic-color-text-warning);
  /* Use for the Earendil symbol. */
  --semantic-color-logo-earendil: var(--primitive-color-white);
  /* Use for every shape of a monochrome logo. */
  --semantic-color-logo-monochrome: var(--primitive-color-white);
  /* First product symbol color (blue). */
  --semantic-color-logo-symbol-1: var(--primitive-color-cerulian-blue);
  /* Second product symbol color (coral). */
  --semantic-color-logo-symbol-2: var(--primitive-color-coral-red);
  /* Third product symbol color (yellow). */
  --semantic-color-logo-symbol-3: var(--primitive-color-cream-yellow);
  /* Fourth product symbol color (light blue). */
  --semantic-color-logo-symbol-4: var(--primitive-color-calamine-blue);
  /* Use for logo wordmarks. */
  --semantic-color-logo-wordmark: var(--primitive-color-white);
  /* Use for plain source code text that no syntax role colors. */
  --semantic-color-text-code: var(--primitive-color-graphite-200);
  /* Use for code comments. Muted relative to plain code text. */
  --semantic-color-text-code-comment: var(--primitive-color-graphite-300);
  /* Use for function and method names in code. */
  --semantic-color-text-code-function: var(--primitive-color-cream-yellow-300);
  /* Use for language keywords and tag names in code. */
  --semantic-color-text-code-keyword: var(--primitive-color-cerulian-blue-300);
  /* Use for numbers and language literals such as true, false, and null in code. */
  --semantic-color-text-code-number: var(--primitive-color-turquoise-green-300);
  /* Use for code punctuation and operators. Muted relative to plain code text. */
  --semantic-color-text-code-punctuation: var(--primitive-color-graphite-300);
  /* Use for strings and regular expressions in code. */
  --semantic-color-text-code-string: var(--primitive-color-coral-red-300);
  /* Use for types, classes, and built-ins in code. */
  --semantic-color-text-code-type: var(--primitive-color-amethyst-violet-300);
  /* Use for variables, parameters, properties, and attribute names in code. */
  --semantic-color-text-code-variable: var(--primitive-color-calamine-blue-300);
  /* Use for text that communicates neutral information or guidance. */
  --semantic-color-text-information: var(--primitive-color-cerulian-blue-300);
  /* Use for interactive text links. */
  --semantic-color-text-link: var(--primitive-color-cerulian-blue-300);
  /* Use for text that communicates an error, unfavorable outcome, or negative consequence. */
  --semantic-color-text-negative: var(--primitive-color-coral-red-300);
  /* Use for text placed on primary fills such as prominent filled buttons, chips, or badges. */
  --semantic-color-text-on-primary-fill: var(--primitive-color-black);
  /* Use for text placed on secondary fills that have lower visual prominence than primary fills. */
  --semantic-color-text-on-secondary-fill: var(--primitive-color-graphite-200);
  /* Use for text placed on secondary fills that communicate neutral information or guidance. */
  --semantic-color-text-on-secondary-fill-information: var(--primitive-color-cerulian-blue-200);
  /* Use for text placed on secondary fills that communicate an error, unfavorable outcome, or negative consequence. */
  --semantic-color-text-on-secondary-fill-negative: var(--primitive-color-coral-red-200);
  /* Use for text placed on secondary fills that communicate success, a favorable outcome, or positive confirmation. */
  --semantic-color-text-on-secondary-fill-positive: var(--primitive-color-turquoise-green-200);
  /* Use for text placed on secondary fills that warn about a potential issue requiring attention. */
  --semantic-color-text-on-secondary-fill-warning: var(--primitive-color-cream-yellow-200);
  /* Use for text that communicates success, a favorable outcome, or positive confirmation. */
  --semantic-color-text-positive: var(--primitive-color-turquoise-green-300);
  /* Use for default body copy and interface labels requiring the strongest standard text emphasis. */
  --semantic-color-text-primary: var(--primitive-color-white);
  /* Use for supporting text and metadata that should be less prominent than primary text. */
  --semantic-color-text-secondary: var(--primitive-color-graphite-300);
  /* Use for text that warns about a potential issue requiring attention. */
  --semantic-color-text-warning: var(--primitive-color-cream-yellow-300);
}

[data-text-context="prose"] {
  /* Use for default running text in components that adapt to their context, such as paragraphs, lists, and links. Resolves to the UI style in interfaces and to the prose style inside long-form content. */
  --semantic-typography-primary: var(--semantic-typography-primary-font-weight) var(--semantic-typography-primary-font-size)/var(--semantic-typography-primary-line-height) var(--semantic-typography-primary-font-family);
  /* Use for default running text in components that adapt to their context, such as paragraphs, lists, and links. Resolves to the UI style in interfaces and to the prose style inside long-form content. */
  --semantic-typography-primary-font-family: var(--semantic-typography-prose-primary-font-family);
  /* Use for default running text in components that adapt to their context, such as paragraphs, lists, and links. Resolves to the UI style in interfaces and to the prose style inside long-form content. */
  --semantic-typography-primary-font-size: var(--semantic-typography-prose-primary-font-size);
  /* Use for default running text in components that adapt to their context, such as paragraphs, lists, and links. Resolves to the UI style in interfaces and to the prose style inside long-form content. */
  --semantic-typography-primary-font-weight: var(--semantic-typography-prose-primary-font-weight);
  /* Use for default running text in components that adapt to their context, such as paragraphs, lists, and links. Resolves to the UI style in interfaces and to the prose style inside long-form content. */
  --semantic-typography-primary-letter-spacing: var(--semantic-typography-prose-primary-letter-spacing);
  /* Use for default running text in components that adapt to their context, such as paragraphs, lists, and links. Resolves to the UI style in interfaces and to the prose style inside long-form content. */
  --semantic-typography-primary-line-height: var(--semantic-typography-prose-primary-line-height);
  /* Use for supporting running text in components that adapt to their context. Resolves to the secondary UI style in interfaces and to the secondary prose style inside long-form content. */
  --semantic-typography-secondary: var(--semantic-typography-secondary-font-weight) var(--semantic-typography-secondary-font-size)/var(--semantic-typography-secondary-line-height) var(--semantic-typography-secondary-font-family);
  /* Use for supporting running text in components that adapt to their context. Resolves to the secondary UI style in interfaces and to the secondary prose style inside long-form content. */
  --semantic-typography-secondary-font-family: var(--semantic-typography-prose-secondary-font-family);
  /* Use for supporting running text in components that adapt to their context. Resolves to the secondary UI style in interfaces and to the secondary prose style inside long-form content. */
  --semantic-typography-secondary-font-size: var(--semantic-typography-prose-secondary-font-size);
  /* Use for supporting running text in components that adapt to their context. Resolves to the secondary UI style in interfaces and to the secondary prose style inside long-form content. */
  --semantic-typography-secondary-font-weight: var(--semantic-typography-prose-secondary-font-weight);
  /* Use for supporting running text in components that adapt to their context. Resolves to the secondary UI style in interfaces and to the secondary prose style inside long-form content. */
  --semantic-typography-secondary-letter-spacing: var(--semantic-typography-prose-secondary-letter-spacing);
  /* Use for supporting running text in components that adapt to their context. Resolves to the secondary UI style in interfaces and to the secondary prose style inside long-form content. */
  --semantic-typography-secondary-line-height: var(--semantic-typography-prose-secondary-line-height);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    /* Instant when the reader prefers reduced motion. Use when content expands or collapses, for chevrons that turn with it, and for menu panels that slide in and out. */
    --semantic-transition-movement-disclosure: var(--semantic-transition-movement-disclosure-duration) var(--semantic-transition-movement-disclosure-delay) var(--semantic-transition-movement-disclosure-timing-function);
    /* Instant when the reader prefers reduced motion. Use when content expands or collapses, for chevrons that turn with it, and for menu panels that slide in and out. */
    --semantic-transition-movement-disclosure-delay: var(--primitive-duration-0);
    /* Instant when the reader prefers reduced motion. Use when content expands or collapses, for chevrons that turn with it, and for menu panels that slide in and out. */
    --semantic-transition-movement-disclosure-duration: var(--primitive-duration-0);
    /* Instant when the reader prefers reduced motion. Use when content expands or collapses, for chevrons that turn with it, and for menu panels that slide in and out. */
    --semantic-transition-movement-disclosure-timing-function: var(--primitive-cubic-bezier-ease-in-out-cubic);
    /* Instant when the reader prefers reduced motion. Component token for a drawer opening and closing, and snapping back after a swipe. Fade its backdrop with `transition.fade`. */
    --semantic-transition-movement-drawer: var(--semantic-transition-movement-drawer-duration) var(--semantic-transition-movement-drawer-delay) var(--semantic-transition-movement-drawer-timing-function);
    /* Instant when the reader prefers reduced motion. Component token for a drawer opening and closing, and snapping back after a swipe. Fade its backdrop with `transition.fade`. */
    --semantic-transition-movement-drawer-delay: var(--primitive-duration-0);
    /* Instant when the reader prefers reduced motion. Component token for a drawer opening and closing, and snapping back after a swipe. Fade its backdrop with `transition.fade`. */
    --semantic-transition-movement-drawer-duration: var(--primitive-duration-0);
    /* Instant when the reader prefers reduced motion. Component token for a drawer opening and closing, and snapping back after a swipe. Fade its backdrop with `transition.fade`. */
    --semantic-transition-movement-drawer-timing-function: var(--primitive-cubic-bezier-ease-out-quart);
    /* Instant when the reader prefers reduced motion. Use when a selection indicator answering a click moves to a new position or size, such as a tab indicator or a switch thumb. */
    --semantic-transition-movement-indicator: var(--semantic-transition-movement-indicator-duration) var(--semantic-transition-movement-indicator-delay) var(--semantic-transition-movement-indicator-timing-function);
    /* Instant when the reader prefers reduced motion. Use when a selection indicator answering a click moves to a new position or size, such as a tab indicator or a switch thumb. */
    --semantic-transition-movement-indicator-delay: var(--primitive-duration-0);
    /* Instant when the reader prefers reduced motion. Use when a selection indicator answering a click moves to a new position or size, such as a tab indicator or a switch thumb. */
    --semantic-transition-movement-indicator-duration: var(--primitive-duration-0);
    /* Instant when the reader prefers reduced motion. Use when a selection indicator answering a click moves to a new position or size, such as a tab indicator or a switch thumb. */
    --semantic-transition-movement-indicator-timing-function: var(--primitive-cubic-bezier-ease-out-cubic);
    /* Instant when the reader prefers reduced motion. Component token for the navigation menu popup moving and resizing between triggers, and for its entry scale. */
    --semantic-transition-movement-navigation-menu: var(--semantic-transition-movement-navigation-menu-duration) var(--semantic-transition-movement-navigation-menu-delay) var(--semantic-transition-movement-navigation-menu-timing-function);
    /* Instant when the reader prefers reduced motion. Component token for the navigation menu popup moving and resizing between triggers, and for its entry scale. */
    --semantic-transition-movement-navigation-menu-delay: var(--primitive-duration-0);
    /* Instant when the reader prefers reduced motion. Component token for the navigation menu popup moving and resizing between triggers, and for its entry scale. */
    --semantic-transition-movement-navigation-menu-duration: var(--primitive-duration-0);
    /* Instant when the reader prefers reduced motion. Component token for the navigation menu popup moving and resizing between triggers, and for its entry scale. */
    --semantic-transition-movement-navigation-menu-timing-function: var(--primitive-cubic-bezier-ease-out-quint);
    /* Instant when the reader prefers reduced motion. Use for the scale or slide of popups as they open and close, such as dropdowns, menus, popovers, tooltips, and modals. Fade their opacity with `transition.fade`. */
    --semantic-transition-movement-popup: var(--semantic-transition-movement-popup-duration) var(--semantic-transition-movement-popup-delay) var(--semantic-transition-movement-popup-timing-function);
    /* Instant when the reader prefers reduced motion. Use for the scale or slide of popups as they open and close, such as dropdowns, menus, popovers, tooltips, and modals. Fade their opacity with `transition.fade`. */
    --semantic-transition-movement-popup-delay: var(--primitive-duration-0);
    /* Instant when the reader prefers reduced motion. Use for the scale or slide of popups as they open and close, such as dropdowns, menus, popovers, tooltips, and modals. Fade their opacity with `transition.fade`. */
    --semantic-transition-movement-popup-duration: var(--primitive-duration-0);
    /* Instant when the reader prefers reduced motion. Use for the scale or slide of popups as they open and close, such as dropdowns, menus, popovers, tooltips, and modals. Fade their opacity with `transition.fade`. */
    --semantic-transition-movement-popup-timing-function: var(--primitive-cubic-bezier-ease-out-cubic);
    /* Instant when the reader prefers reduced motion. Component token for the table of contents indicator following the reading position. Overshoots slightly before it settles. */
    --semantic-transition-movement-table-of-contents-indicator: var(--semantic-transition-movement-table-of-contents-indicator-duration) var(--semantic-transition-movement-table-of-contents-indicator-delay) var(--semantic-transition-movement-table-of-contents-indicator-timing-function);
    /* Instant when the reader prefers reduced motion. Component token for the table of contents indicator following the reading position. Overshoots slightly before it settles. */
    --semantic-transition-movement-table-of-contents-indicator-delay: var(--primitive-duration-0);
    /* Instant when the reader prefers reduced motion. Component token for the table of contents indicator following the reading position. Overshoots slightly before it settles. */
    --semantic-transition-movement-table-of-contents-indicator-duration: var(--primitive-duration-0);
    /* Instant when the reader prefers reduced motion. Component token for the table of contents indicator following the reading position. Overshoots slightly before it settles. */
    --semantic-transition-movement-table-of-contents-indicator-timing-function: var(--primitive-cubic-bezier-ease-out-back);
  }
}

/*
 * Inkling's domain tokens, derived from Elanor's semantic tokens so they follow
 * the color scheme. Deployment themes (/theme.css) override the same names.
 */
:root {
  --heading-font: var(--semantic-font-family-prose);
  --page-padding: var(--semantic-dimension-space-padding-xxxx-large);
  --masthead-height: var(--semantic-dimension-size-top-navigation);

  --editor-background: var(--semantic-color-background-surface);
  --editor-active-line-background: color-mix(
    in oklch,
    var(--semantic-color-background-surface) 95%,
    var(--semantic-color-text-primary)
  );

  --participant-text: var(--primitive-color-black);
  --presence-lightness: 68;
  --presence-chroma: 0.16;
  --presence-hue-offset: 0;

  --state-draft-bg: var(--semantic-color-background-fill-secondary);
  --state-draft-border: var(--semantic-color-background-fill-secondary);
  --state-draft-text: var(--semantic-color-text-on-secondary-fill);
  --state-discussion-bg: var(--semantic-color-background-fill-secondary-warning);
  --state-discussion-border: var(--semantic-color-background-fill-secondary-warning);
  --state-discussion-text: var(--semantic-color-text-on-secondary-fill-warning);
  --state-published-bg: var(--semantic-color-background-fill-secondary-information);
  --state-published-border: var(--semantic-color-background-fill-secondary-information);
  --state-published-text: var(--semantic-color-text-on-secondary-fill-information);
  --state-accepted-bg: var(--semantic-color-background-fill-secondary-positive);
  --state-accepted-border: var(--semantic-color-background-fill-secondary-positive);
  --state-accepted-text: var(--semantic-color-text-on-secondary-fill-positive);
  --state-implemented-bg: var(--semantic-color-background-fill-primary-positive);
  --state-implemented-border: var(--semantic-color-background-fill-primary-positive);
  --state-implemented-text: var(--semantic-color-text-on-primary-fill);
  --state-abandoned-bg: var(--semantic-color-background-fill-secondary-negative);
  --state-abandoned-border: var(--semantic-color-background-fill-secondary-negative);
  --state-abandoned-text: var(--semantic-color-text-on-secondary-fill-negative);

  --visibility-public-bg: color-mix(
    in oklch,
    var(--semantic-color-background-fill-secondary-positive) 35%,
    var(--semantic-color-background-canvas)
  );
  --visibility-public-hover: color-mix(
    in oklch,
    var(--semantic-color-background-fill-secondary-positive) 70%,
    var(--semantic-color-background-canvas)
  );
  --visibility-public-border: var(--semantic-color-border-positive);
  --visibility-public-text: var(--semantic-color-text-on-secondary-fill-positive);
  --visibility-private-bg: var(--semantic-color-background-canvas);
  --visibility-private-hover: var(--semantic-color-background-fill-ghost-neutral-hover);
  --visibility-private-border: var(--semantic-color-border-secondary);
  --visibility-private-text: var(--semantic-color-text-on-secondary-fill);
  --visibility-confidential-bg: color-mix(
    in oklch,
    var(--semantic-color-background-fill-secondary-negative) 35%,
    var(--semantic-color-background-canvas)
  );
  --visibility-confidential-hover: color-mix(
    in oklch,
    var(--semantic-color-background-fill-secondary-negative) 70%,
    var(--semantic-color-background-canvas)
  );
  --visibility-confidential-border: var(--semantic-color-border-negative);
  --visibility-confidential-text: var(--semantic-color-text-on-secondary-fill-negative);

  --code-background: var(--semantic-color-background-fill-secondary);
  --code-text: var(--semantic-color-text-code);
  --code-comment: var(--semantic-color-text-code-comment);
  --code-keyword: var(--semantic-color-text-code-keyword);
  --code-title: var(--semantic-color-text-code-function);
  --code-attribute: var(--semantic-color-text-code-variable);
  --code-string: var(--semantic-color-text-code-string);
  --code-symbol: var(--semantic-color-text-code-number);
  --code-addition: var(--semantic-color-background-fill-secondary-positive);
  --code-deletion: var(--semantic-color-background-fill-secondary-negative);
  --code-invalid: var(--semantic-color-text-negative);

  --mermaid-background: var(--semantic-color-background-canvas);
  --mermaid-primary: var(--semantic-color-background-fill-secondary);
  --mermaid-primary-text: var(--semantic-color-text-primary);
  --mermaid-primary-border: var(--semantic-color-border-primary);
  --mermaid-line: var(--semantic-color-text-secondary);
  --mermaid-secondary: var(--semantic-color-background-fill-secondary-information);
  --mermaid-tertiary: var(--semantic-color-background-fill-secondary-positive);
  --mermaid-note: var(--semantic-color-background-fill-secondary-warning);
  --mermaid-note-text: var(--semantic-color-text-primary);
}

:root[data-color-scheme="dark"] {
  --presence-lightness: 76;
  --presence-chroma: 0.14;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-color-scheme]) {
    --presence-lightness: 76;
    --presence-chroma: 0.14;
  }
}

@media (width <= 52rem) {
  :root {
    --page-padding: var(--semantic-dimension-space-padding-xx-large);
  }
}

@media (width <= 34rem) {
  :root {
    --page-padding: var(--semantic-dimension-space-padding-x-large);
  }
}