@accelint/design-toolkit 4.0.0 → 5.0.0

package/dist/styles.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.1.13 | MIT License | https://tailwindcss.com */
 @layer properties;
 @font-face {
   font-family: 'Roboto Flex';
@@ -100,62 +100,15 @@
 @layer theme {
   :root, :host {
     --container-sm: 24rem;
+    --container-md: 28rem;
     --font-weight-light: 300;
     --font-weight-normal: 400;
     --font-weight-medium: 500;
+    --font-weight-bold: 700;
     --animate-spin: spin 1s linear infinite;
     --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
     --default-transition-duration: 150ms;
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    --color-surface-default: var(--colors-neutral-10, #0b0b0b);
-    --color-surface-raised: var(--colors-neutral-09, #222222);
-    --color-surface-overlay: var(--colors-neutral-08, #2f2f31);
-    --color-transparent-dark: var(--colors-alpha-black-02, rgba(0, 0, 0, 0.4));
-    --color-transparent-light: var(--colors-alpha-white-01, rgba(255, 255, 255, 0.08));
-    --color-interactive: var(--colors-neutral-05, #565656);
-    --color-interactive-default: var(--colors-neutral-02, #e6e6e6);
-    --color-interactive-hover: var(--colors-neutral-01, #ffffff);
-    --color-interactive-hover-light: var(--colors-neutral-03, #898989);
-    --color-interactive-hover-dark: var(--colors-neutral-08, #2f2f31);
-    --color-interactive-disabled: var(--colors-neutral-07, #383838);
-    --color-static-light: var(--colors-neutral-07, #383838);
-    --color-static-dark: var(--colors-neutral-09, #222222);
-    --color-highlight: var(--colors-highlight-primary-03, #28f5be);
-    --color-highlight-bold: var(--colors-highlight-primary-03, #28f5be);
-    --color-highlight-hover: var(--colors-highlight-primary-04, #189372);
-    --color-highlight-subtle: var(--colors-highlight-primary-05, #0a3d30);
-    --color-info: var(--colors-neutral-04, #686868);
-    --color-info-bold: var(--colors-utility-info-03, #686868);
-    --color-info-hover: var(--colors-utility-info-04, #424244);
-    --color-info-subtle: var(--colors-utility-info-05, #222222);
-    --color-advisory: var(--colors-utility-advisory-03, #62a6ff);
-    --color-advisory-bold: var(--colors-utility-advisory-03, #62a6ff);
-    --color-advisory-hover: var(--colors-utility-advisory-04, #3a6499);
-    --color-advisory-subtle: var(--colors-utility-advisory-05, #142133);
-    --color-normal: var(--colors-utility-normal-03, #30d27e);
-    --color-normal-bold: var(--colors-utility-normal-03, #30d27e);
-    --color-normal-hover: var(--colors-utility-normal-04, #1c7e4c);
-    --color-normal-subtle: var(--colors-utility-normal-05, #0a2a19);
-    --color-serious: var(--colors-utility-serious-03, #fca400);
-    --color-serious-bold: var(--colors-utility-serious-03, #fca400);
-    --color-serious-hover: var(--colors-utility-serious-04, #976201);
-    --color-serious-subtle: var(--colors-utility-serious-05, #322100);
-    --color-critical: var(--colors-utility-critical-03, #d4231d);
-    --color-critical-bold: var(--colors-utility-critical-03, #d4231d);
-    --color-critical-hover: var(--colors-utility-critical-04, #7f1511);
-    --color-critical-subtle: var(--colors-utility-critical-05, #2a0706);
-    --color-default-light: var(--colors-neutral-01, #ffffff);
-    --color-default-dark: var(--colors-neutral-03, #898989);
-    --color-inverse-dark: var(--colors-neutral-07, #383838);
-    --color-inverse-light: var(--colors-neutral-09, #222222);
-    --color-disabled: var(--colors-neutral-05, #565656);
-    --color-classification-missing: var(--colors-neutral-10, #0b0b0b);
-    --color-classification-unclass: var(--colors-classification-unclass, #007A33);
-    --color-classification-cui: var(--colors-classification-cui, #502b85);
-    --color-classification-confidential: var(--colors-classification-confidential, #0033a0);
-    --color-classification-secret: var(--colors-classification-secret, #c8102e);
-    --color-classification-top-secret: var(--colors-classification-top-secret, #ff8c00);
-    --color-classification-ts-sci: var(--colors-classification-ts-sci, #fce83a);
     --typography-header-xxl-size: var(--typography-header-xxl-size, 32px);
     --typography-header-xxl-height: var(--typography-header-xxl-height, 40px);
     --typography-header-xxl-spacing: var(--typography-header-xxl-spacing, 0px);
@@ -217,8 +170,10 @@
     --radius-large: var(--radius-large, 8px);
     --radius-round: var(--radius-round, 80px);
     --shadow-elevation-default: var(--shadow-elevation-default);
-    --shadow-elevation-overlay: var(--shadow-elevation-overlay);
-    --shadow-elevation-raised: var(--shadow-elevation-raised);
+    --shadow-elevation-overlay-bold: var(--shadow-elevation-overlay-bold, 0 8px 24px 0 rgba(0 0 0 / 0.80));
+    --shadow-elevation-overlay-muted: var(--shadow-elevation-overlay-muted, 0 8px 24px 0 rgba(0 0 0 / 0.16));
+    --shadow-elevation-raised-bold: var(--shadow-elevation-raised-bold, 0 1px 4px 0 rgba(0 0 0 / 0.80));
+    --shadow-elevation-raised-muted: var(--shadow-elevation-raised-muted, 0 1px 4px 0 rgba(0 0 0 / 0.16));
     --font-primary: var(--font-primary);
     --font-display: var(--font-display);
     --icon-size-l: var(--icon-size-l);
@@ -359,6 +314,9 @@
   ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
     padding-block: 0;
   }
+  ::-webkit-calendar-picker-indicator {
+    line-height: 1;
+  }
   :-moz-ui-invalid {
     box-shadow: none;
   }
@@ -376,6 +334,9 @@
   .pointer-events-none {
     pointer-events: none;
   }
+  .collapse {
+    visibility: collapse;
+  }
   .invisible {
     visibility: hidden;
   }
@@ -400,11 +361,14 @@
   .top-\[var\(--classification-banner-height\)\] {
     top: var(--classification-banner-height);
   }
-  .z-1 {
-    z-index: 1;
+  .top-s {
+    top: var(--spacing-s);
   }
-  .z-5 {
-    z-index: 5;
+  .left-0 {
+    left: var(--spacing-0);
+  }
+  .left-s {
+    left: var(--spacing-s);
   }
   .-order-1 {
     order: calc(1 * -1);
@@ -451,6 +415,9 @@
   .row-\[var\(--drawer-main-rows\)\] {
     grid-row: var(--drawer-main-rows);
   }
+  .row-span-full {
+    grid-row: 1 / -1;
+  }
   .container {
     width: 100%;
     @media (width >= 40rem) {
@@ -496,6 +463,9 @@
   .mt-xl {
     margin-top: var(--spacing-xl);
   }
+  .mb-m {
+    margin-bottom: var(--spacing-m);
+  }
   .mb-s {
     margin-bottom: var(--spacing-s);
   }
@@ -572,12 +542,18 @@
     width: var(--spacing-xxs);
     height: var(--spacing-xxs);
   }
+  .h-\[1px\] {
+    height: 1px;
+  }
   .h-\[40px\] {
     height: 40px;
   }
   .h-\[90px\] {
     height: 90px;
   }
+  .h-\[400px\] {
+    height: 400px;
+  }
   .h-\[600px\] {
     height: 600px;
   }
@@ -617,6 +593,30 @@
   .min-h-\[1lh\] {
     min-height: 1lh;
   }
+  .min-h-\[36px\] {
+    min-height: 36px;
+  }
+  .min-h-\[38px\] {
+    min-height: 38px;
+  }
+  .min-h-\[46px\] {
+    min-height: 46px;
+  }
+  .min-h-\[48px\] {
+    min-height: 48px;
+  }
+  .min-h-l {
+    min-height: var(--spacing-l);
+  }
+  .min-h-s {
+    min-height: var(--spacing-s);
+  }
+  .min-h-screen {
+    min-height: 100vh;
+  }
+  .min-h-xl {
+    min-height: var(--spacing-xl);
+  }
   .w-1\/2 {
     width: calc(1/2 * 100%);
   }
@@ -626,6 +626,18 @@
   .w-\[1lh\] {
     width: 1lh;
   }
+  .w-\[20px\] {
+    width: 20px;
+  }
+  .w-\[20px\] {
+    width: 20px;
+  }
+  .w-\[28px\] {
+    width: 28px;
+  }
+  .w-\[28px\] {
+    width: 28px;
+  }
   .w-\[50\%\] {
     width: 50%;
   }
@@ -740,6 +752,9 @@
   .max-w-\[280px\] {
     max-width: 280px;
   }
+  .max-w-md {
+    max-width: var(--container-md);
+  }
   .min-w-\(--trigger-width\) {
     min-width: var(--trigger-width);
   }
@@ -764,9 +779,18 @@
   .flex-none {
     flex: none;
   }
+  .shrink-0 {
+    flex-shrink: 0;
+  }
   .grow {
     flex-grow: 1;
   }
+  .grow-0 {
+    flex-grow: 0;
+  }
+  .grow-1 {
+    flex-grow: 1;
+  }
   .transform {
     transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
   }
@@ -776,9 +800,6 @@
   .cursor-default {
     cursor: default;
   }
-  .cursor-not-allowed {
-    cursor: not-allowed;
-  }
   .cursor-pointer {
     cursor: pointer;
   }
@@ -812,6 +833,9 @@
   .grid-cols-\[var\(--route-layout-grid-cols\)\] {
     grid-template-columns: var(--route-layout-grid-cols);
   }
+  .grid-rows-2 {
+    grid-template-rows: repeat(2, minmax(0, 1fr));
+  }
   .grid-rows-\[var\(--route-layout-grid-rows\)\] {
     grid-template-rows: var(--route-layout-grid-rows);
   }
@@ -848,9 +872,15 @@
   .justify-start {
     justify-content: flex-start;
   }
+  .justify-items-start {
+    justify-items: start;
+  }
   .gap-\(--spacing-xxl\) {
     gap: var(--spacing-xxl);
   }
+  .gap-\[0\.5ch\] {
+    gap: 0.5ch;
+  }
   .gap-\[11px\] {
     gap: 11px;
   }
@@ -894,9 +924,15 @@
   .gap-x-s {
     column-gap: var(--spacing-s);
   }
+  .gap-x-xs {
+    column-gap: var(--spacing-xs);
+  }
   .gap-x-xxl {
     column-gap: var(--spacing-xxl);
   }
+  .gap-x-xxs {
+    column-gap: var(--spacing-xxs);
+  }
   .gap-y-oversized {
     row-gap: var(--spacing-oversized);
   }
@@ -911,6 +947,9 @@
     text-overflow: ellipsis;
     white-space: nowrap;
   }
+  .overflow-auto {
+    overflow: auto;
+  }
   .overflow-hidden {
     overflow: hidden;
   }
@@ -929,244 +968,193 @@
   .rounded-medium {
     border-radius: var(--radius-medium);
   }
-  .rounded-none {
-    border-radius: 0;
-  }
-  .rounded-none {
-    border-radius: var(--radius-none);
-  }
   .rounded-round {
     border-radius: var(--radius-round);
   }
   .rounded-small {
     border-radius: var(--radius-small);
   }
-  .rounded-t-large {
-    border-top-left-radius: var(--radius-large);
-    border-top-right-radius: var(--radius-large);
-  }
-  .rounded-l-large {
-    border-top-left-radius: var(--radius-large);
-    border-bottom-left-radius: var(--radius-large);
-  }
-  .rounded-r-large {
-    border-top-right-radius: var(--radius-large);
-    border-bottom-right-radius: var(--radius-large);
-  }
-  .rounded-b-large {
-    border-bottom-right-radius: var(--radius-large);
-    border-bottom-left-radius: var(--radius-large);
-  }
   .border {
     border-style: var(--tw-border-style);
     border-width: 1px;
   }
-  .border-2 {
+  .border-0 {
     border-style: var(--tw-border-style);
-    border-width: 2px;
-  }
-  .border-b-\[3px\] {
-    border-bottom-style: var(--tw-border-style);
-    border-bottom-width: 3px;
-  }
-  .border-dotted {
-    --tw-border-style: dotted;
-    border-style: dotted;
-  }
-  .border-\[\#E8178A\] {
-    border-color: #E8178A;
-  }
-  .border-advisory {
-    border-color: var(--color-advisory);
-  }
-  .border-critical {
-    border-color: var(--color-critical);
-  }
-  .border-default-dark {
-    border-color: var(--color-default-dark);
-  }
-  .border-default-light {
-    border-color: var(--color-default-light);
-  }
-  .border-highlight {
-    border-color: var(--color-highlight);
+    border-width: 0px;
   }
-  .border-info {
-    border-color: var(--color-info);
+  .\!bg-surface-default {
+    background-color: var(--bg-surface-default) !important;
   }
-  .border-interactive {
-    border-color: var(--color-interactive);
-  }
-  .border-interactive-disabled {
-    border-color: var(--color-interactive-disabled);
-  }
-  .border-interactive-hover {
-    border-color: var(--color-interactive-hover);
-  }
-  .border-normal {
-    border-color: var(--color-normal);
-  }
-  .border-serious {
-    border-color: var(--color-serious);
+  .bg-\[\#E8178A\]\/40 {
+    background-color: color-mix(in oklab, #E8178A 40%, transparent);
   }
-  .border-static-dark {
-    border-color: var(--color-static-dark);
+  .bg-\[var\(--outline-static\)\] {
+    background-color: var(--outline-static);
   }
-  .border-static-light {
-    border-color: var(--color-static-light);
+  .bg-accent-primary-bold {
+    background-color: var(--bg-accent-primary-bold);
   }
-  .border-transparent {
-    border-color: transparent;
+  .bg-accent-primary-hover {
+    background-color: var(--bg-accent-primary-hover);
   }
-  .border-b-default-dark {
-    border-bottom-color: var(--color-default-dark);
+  .bg-accent-primary-muted {
+    background-color: var(--bg-accent-primary-muted);
   }
-  .bg-\[\#E8178A\]\/40 {
-    background-color: color-mix(in oklab, #E8178A 40%, transparent);
-  }
-  .bg-advisory {
-    background-color: var(--color-advisory);
+  .bg-accent-primary-pressed {
+    background-color: var(--bg-accent-primary-pressed);
   }
   .bg-advisory-bold {
-    background-color: var(--color-advisory-bold);
+    background-color: var(--bg-advisory-bold);
   }
   .bg-advisory-hover {
-    background-color: var(--color-advisory-hover);
+    background-color: var(--bg-advisory-hover);
+  }
+  .bg-advisory-muted {
+    background-color: var(--bg-advisory-muted);
   }
-  .bg-advisory-subtle {
-    background-color: var(--color-advisory-subtle);
+  .bg-advisory-pressed {
+    background-color: var(--bg-advisory-pressed);
   }
   .bg-classification-confidential {
-    background-color: var(--color-classification-confidential);
+    background-color: var(--classification-confidential);
   }
   .bg-classification-cui {
-    background-color: var(--color-classification-cui);
+    background-color: var(--classification-cui);
   }
   .bg-classification-missing {
-    background-color: var(--color-classification-missing);
+    background-color: var(--classification-missing);
   }
   .bg-classification-secret {
-    background-color: var(--color-classification-secret);
+    background-color: var(--classification-secret);
   }
   .bg-classification-top-secret {
-    background-color: var(--color-classification-top-secret);
+    background-color: var(--classification-top-secret);
   }
   .bg-classification-ts-sci {
-    background-color: var(--color-classification-ts-sci);
+    background-color: var(--classification-ts-sci);
   }
   .bg-classification-unclass {
-    background-color: var(--color-classification-unclass);
-  }
-  .bg-critical {
-    background-color: var(--color-critical);
+    background-color: var(--classification-unclass);
   }
   .bg-critical-bold {
-    background-color: var(--color-critical-bold);
+    background-color: var(--bg-critical-bold);
   }
   .bg-critical-hover {
-    background-color: var(--color-critical-hover);
-  }
-  .bg-critical-subtle {
-    background-color: var(--color-critical-subtle);
-  }
-  .bg-default-dark {
-    background-color: var(--color-default-dark);
-  }
-  .bg-default-light {
-    background-color: var(--color-default-light);
-  }
-  .bg-default-light\/40 {
-    background-color: var(--color-default-light);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-default-light) 40%, transparent);
-    }
-  }
-  .bg-disabled {
-    background-color: var(--color-disabled);
-  }
-  .bg-highlight {
-    background-color: var(--color-highlight);
+    background-color: var(--bg-critical-hover);
   }
-  .bg-highlight-bold {
-    background-color: var(--color-highlight-bold);
+  .bg-critical-muted {
+    background-color: var(--bg-critical-muted);
   }
-  .bg-highlight-hover {
-    background-color: var(--color-highlight-hover);
-  }
-  .bg-highlight-subtle {
-    background-color: var(--color-highlight-subtle);
-  }
-  .bg-info {
-    background-color: var(--color-info);
+  .bg-critical-pressed {
+    background-color: var(--bg-critical-pressed);
   }
   .bg-info-bold {
-    background-color: var(--color-info-bold);
+    background-color: var(--bg-info-bold);
   }
   .bg-info-hover {
-    background-color: var(--color-info-hover);
+    background-color: var(--bg-info-hover);
   }
-  .bg-info-subtle {
-    background-color: var(--color-info-subtle);
+  .bg-info-muted {
+    background-color: var(--bg-info-muted);
   }
-  .bg-interactive-default {
-    background-color: var(--color-interactive-default);
+  .bg-info-pressed {
+    background-color: var(--bg-info-pressed);
   }
-  .bg-interactive-disabled {
-    background-color: var(--color-interactive-disabled);
+  .bg-interactive-bold {
+    background-color: var(--bg-interactive-bold);
+  }
+  .bg-interactive-bold-hover {
+    background-color: var(--bg-interactive-bold-hover);
   }
-  .bg-interactive-hover-dark {
-    background-color: var(--color-interactive-hover-dark);
+  .bg-interactive-bold-pressed {
+    background-color: var(--bg-interactive-bold-pressed);
   }
-  .bg-interactive-hover-light {
-    background-color: var(--color-interactive-hover-light);
+  .bg-interactive-disabled {
+    background-color: var(--bg-interactive-disabled);
   }
-  .bg-inverse-dark {
-    background-color: var(--color-inverse-dark);
+  .bg-interactive-muted {
+    background-color: var(--bg-interactive-muted);
   }
-  .bg-inverse-light {
-    background-color: var(--color-inverse-light);
+  .bg-interactive-muted-hover {
+    background-color: var(--bg-interactive-muted-hover);
   }
-  .bg-normal {
-    background-color: var(--color-normal);
+  .bg-interactive-muted-pressed {
+    background-color: var(--bg-interactive-muted-pressed);
   }
   .bg-normal-bold {
-    background-color: var(--color-normal-bold);
+    background-color: var(--bg-normal-bold);
   }
   .bg-normal-hover {
-    background-color: var(--color-normal-hover);
+    background-color: var(--bg-normal-hover);
   }
-  .bg-normal-subtle {
-    background-color: var(--color-normal-subtle);
+  .bg-normal-muted {
+    background-color: var(--bg-normal-muted);
   }
-  .bg-serious {
-    background-color: var(--color-serious);
+  .bg-normal-pressed {
+    background-color: var(--bg-normal-pressed);
   }
   .bg-serious-bold {
-    background-color: var(--color-serious-bold);
+    background-color: var(--bg-serious-bold);
   }
   .bg-serious-hover {
-    background-color: var(--color-serious-hover);
+    background-color: var(--bg-serious-hover);
+  }
+  .bg-serious-muted {
+    background-color: var(--bg-serious-muted);
   }
-  .bg-serious-subtle {
-    background-color: var(--color-serious-subtle);
+  .bg-serious-pressed {
+    background-color: var(--bg-serious-pressed);
   }
   .bg-surface-default {
-    background-color: var(--color-surface-default);
+    background-color: var(--bg-surface-default);
+  }
+  .bg-surface-muted {
+    background-color: var(--bg-surface-muted);
   }
   .bg-surface-overlay {
-    background-color: var(--color-surface-overlay);
+    background-color: var(--bg-surface-overlay);
   }
   .bg-surface-raised {
-    background-color: var(--color-surface-raised);
+    background-color: var(--bg-surface-raised);
   }
   .bg-transparent {
     background-color: transparent;
   }
-  .bg-transparent-dark {
-    background-color: var(--color-transparent-dark);
+  .bg-\[repeating-linear-gradient\(to_bottom\,var\(--outline-static\)_0\%\,var\(--outline-static\)_1px\,transparent_1px\,transparent_4px\)\,repeating-linear-gradient\(to_right\,var\(--outline-static\)_0\%\,var\(--outline-static\)_1px\,transparent_1px\,transparent_4px\)\] {
+    background-image: repeating-linear-gradient(to bottom,var(--outline-static) 0%,var(--outline-static) 1px,transparent 1px,transparent 4px),repeating-linear-gradient(to right,var(--outline-static) 0%,var(--outline-static) 1px,transparent 1px,transparent 4px);
+  }
+  .bg-\[repeating-linear-gradient\(to_bottom\,var\(--outline-static\)_0\%\,var\(--outline-static\)_1px\,transparent_1px\,transparent_4px\)\] {
+    background-image: repeating-linear-gradient(to bottom,var(--outline-static) 0%,var(--outline-static) 1px,transparent 1px,transparent 4px);
+  }
+  .bg-none {
+    background-image: none;
+  }
+  .\[background-size\:1px_4px\,50\%_1px\] {
+    background-size: 1px 4px,50% 1px;
+  }
+  .\[background-size\:1px_50\%\,50\%_1px\] {
+    background-size: 1px 50%,50% 1px;
+  }
+  .bg-size-\[1px_4px\] {
+    background-size: 1px 4px;
   }
-  .bg-transparent-light {
-    background-color: var(--color-transparent-light);
+  .bg-center {
+    background-position: center;
+  }
+  .bg-position-\[center\,center_right\] {
+    background-position: center,center right;
+  }
+  .bg-position-\[center_top\,center_right\] {
+    background-position: center top,center right;
+  }
+  .\[background-repeat\:no-repeat\] {
+    background-repeat: no-repeat;
+  }
+  .\[background-repeat\:repeat-y\,no-repeat\] {
+    background-repeat: repeat-y,no-repeat;
+  }
+  .bg-repeat-y {
+    background-repeat: repeat-y;
   }
   .object-cover {
     object-fit: cover;
@@ -1198,15 +1186,27 @@
   .px-0 {
     padding-inline: var(--spacing-0);
   }
+  .px-\[0\.5ch\] {
+    padding-inline: 0.5ch;
+  }
   .px-l {
     padding-inline: var(--spacing-l);
   }
+  .px-m {
+    padding-inline: var(--spacing-m);
+  }
   .px-s {
     padding-inline: var(--spacing-s);
   }
   .px-xs {
     padding-inline: var(--spacing-xs);
   }
+  .px-xxs {
+    padding-inline: var(--spacing-xxs);
+  }
+  .py-l {
+    padding-block: var(--spacing-l);
+  }
   .py-s {
     padding-block: var(--spacing-s);
   }
@@ -1246,6 +1246,9 @@
   .text-right {
     text-align: right;
   }
+  .align-bottom {
+    vertical-align: bottom;
+  }
   .font-display {
     font-family: var(--font-display);
   }
@@ -1356,6 +1359,10 @@
     --tw-leading: 64px;
     line-height: 64px;
   }
+  .font-bold {
+    --tw-font-weight: var(--font-weight-bold);
+    font-weight: var(--font-weight-bold);
+  }
   .font-light {
     --tw-font-weight: var(--font-weight-light);
     font-weight: var(--font-weight-light);
@@ -1371,79 +1378,111 @@
   .break-words {
     overflow-wrap: break-word;
   }
-  .fg-advisory {
-    color: var(--color-advisory);
-    --icon-color: var(--color-advisory);
+  .whitespace-nowrap {
+    white-space: nowrap;
   }
-  .fg-critical {
-    color: var(--color-critical);
-    --icon-color: var(--color-critical);
+  .fg-a11y-on-accent {
+    color: var(--fg-a11y-on-accent);
+    --icon-color: var(--fg-a11y-on-accent);
   }
-  .fg-default-dark {
-    color: var(--color-default-dark);
-    --icon-color: var(--color-default-dark);
+  .fg-a11y-on-utility {
+    color: var(--fg-a11y-on-utility);
+    --icon-color: var(--fg-a11y-on-utility);
   }
-  .fg-default-light {
-    color: var(--color-default-light);
-    --icon-color: var(--color-default-light);
+  .fg-accent-primary-bold {
+    color: var(--fg-accent-primary-bold);
+    --icon-color: var(--fg-accent-primary-bold);
   }
-  .fg-disabled {
-    color: var(--color-disabled);
-    --icon-color: var(--color-disabled);
+  .fg-accent-primary-hover {
+    color: var(--fg-accent-primary-hover);
+    --icon-color: var(--fg-accent-primary-hover);
   }
-  .fg-highlight {
-    color: var(--color-highlight);
-    --icon-color: var(--color-highlight);
+  .fg-accent-primary-pressed {
+    color: var(--fg-accent-primary-pressed);
+    --icon-color: var(--fg-accent-primary-pressed);
   }
-  .fg-info {
-    color: var(--color-info);
-    --icon-color: var(--color-info);
+  .fg-advisory-bold {
+    color: var(--fg-advisory-bold);
+    --icon-color: var(--fg-advisory-bold);
   }
-  .fg-interactive {
-    color: var(--color-interactive);
-    --icon-color: var(--color-interactive);
+  .fg-advisory-hover {
+    color: var(--fg-advisory-hover);
+    --icon-color: var(--fg-advisory-hover);
   }
-  .fg-interactive-default {
-    color: var(--color-interactive-default);
-    --icon-color: var(--color-interactive-default);
+  .fg-advisory-pressed {
+    color: var(--fg-advisory-pressed);
+    --icon-color: var(--fg-advisory-pressed);
   }
-  .fg-interactive-hover-light {
-    color: var(--color-interactive-hover-light);
-    --icon-color: var(--color-interactive-hover-light);
+  .fg-critical-bold {
+    color: var(--fg-critical-bold);
+    --icon-color: var(--fg-critical-bold);
   }
-  .fg-inverse-dark {
-    color: var(--color-inverse-dark);
-    --icon-color: var(--color-inverse-dark);
+  .fg-critical-hover {
+    color: var(--fg-critical-hover);
+    --icon-color: var(--fg-critical-hover);
   }
-  .fg-inverse-light {
-    color: var(--color-inverse-light);
-    --icon-color: var(--color-inverse-light);
+  .fg-critical-pressed {
+    color: var(--fg-critical-pressed);
+    --icon-color: var(--fg-critical-pressed);
   }
-  .fg-normal {
-    color: var(--color-normal);
-    --icon-color: var(--color-normal);
+  .fg-disabled {
+    color: var(--fg-disabled);
+    --icon-color: var(--fg-disabled);
   }
-  .fg-serious {
-    color: var(--color-serious);
-    --icon-color: var(--color-serious);
+  .fg-info-bold {
+    color: var(--fg-info-bold);
+    --icon-color: var(--fg-info-bold);
   }
-  .\[color\:var\(--icon-color\,currentColor\)\] {
-    color: var(--icon-color,currentColor);
+  .fg-info-hover {
+    color: var(--fg-info-hover);
+    --icon-color: var(--fg-info-hover);
+  }
+  .fg-info-pressed {
+    color: var(--fg-info-pressed);
+    --icon-color: var(--fg-info-pressed);
+  }
+  .fg-inverse-bold {
+    color: var(--fg-inverse-bold);
+    --icon-color: var(--fg-inverse-bold);
+  }
+  .fg-inverse-muted {
+    color: var(--fg-inverse-muted);
+    --icon-color: var(--fg-inverse-muted);
+  }
+  .fg-normal-bold {
+    color: var(--fg-normal-bold);
+    --icon-color: var(--fg-normal-bold);
+  }
+  .fg-normal-hover {
+    color: var(--fg-normal-hover);
+    --icon-color: var(--fg-normal-hover);
+  }
+  .fg-normal-pressed {
+    color: var(--fg-normal-pressed);
+    --icon-color: var(--fg-normal-pressed);
+  }
+  .fg-primary-bold {
+    color: var(--fg-primary-bold);
+    --icon-color: var(--fg-primary-bold);
   }
-  .text-default-dark {
-    color: var(--color-default-dark);
+  .fg-primary-muted {
+    color: var(--fg-primary-muted);
+    --icon-color: var(--fg-primary-muted);
   }
-  .text-default-light {
-    color: var(--color-default-light);
+  .fg-serious-bold {
+    color: var(--fg-serious-bold);
+    --icon-color: var(--fg-serious-bold);
   }
-  .text-highlight {
-    color: var(--color-highlight);
+  .fg-serious-hover {
+    color: var(--fg-serious-hover);
+    --icon-color: var(--fg-serious-hover);
   }
-  .text-interactive-default {
-    color: var(--color-interactive-default);
+  .fg-serious-pressed {
+    color: var(--fg-serious-pressed);
+    --icon-color: var(--fg-serious-pressed);
   }
-  .text-interactive-hover-light {
-    color: var(--color-interactive-hover-light);
+  .\[color\:var\(--icon-color\,currentColor\)\] {
+    color: var(--icon-color,currentColor);
   }
   .capitalize {
     text-transform: capitalize;
@@ -1451,72 +1490,116 @@
   .uppercase {
     text-transform: uppercase;
   }
+  .shadow-\[0_3px\] {
+    --tw-shadow: 0 3px var(--tw-shadow-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-elevation-default {
     --tw-shadow: var(--shadow-elevation-default);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
   .shadow-elevation-overlay {
-    --tw-shadow: var(--shadow-elevation-overlay);
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    box-shadow: var(--shadow-elevation-overlay);
   }
   .shadow-elevation-raised {
-    --tw-shadow: var(--shadow-elevation-raised);
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    box-shadow: var(--shadow-elevation-raised);
   }
-  .shadow-surface-default {
-    --tw-shadow-color: var(--color-surface-default);
+  .shadow-\[color\:var\(--outline-info-bold\)\] {
+    --tw-shadow-color: var(--outline-info-bold);
     @supports (color: color-mix(in lab, red, red)) {
-      --tw-shadow-color: color-mix(in oklab, var(--color-surface-default) var(--tw-shadow-alpha), transparent);
+      --tw-shadow-color: color-mix(in oklab, var(--outline-info-bold) var(--tw-shadow-alpha), transparent);
     }
   }
-  .shadow-surface-overlay {
-    --tw-shadow-color: var(--color-surface-overlay);
-    @supports (color: color-mix(in lab, red, red)) {
-      --tw-shadow-color: color-mix(in oklab, var(--color-surface-overlay) var(--tw-shadow-alpha), transparent);
-    }
-  }
-  .shadow-surface-raised {
-    --tw-shadow-color: var(--color-surface-raised);
-    @supports (color: color-mix(in lab, red, red)) {
-      --tw-shadow-color: color-mix(in oklab, var(--color-surface-raised) var(--tw-shadow-alpha), transparent);
+  .outline-hidden {
+    --tw-outline-style: none;
+    outline-style: none;
+    @media (forced-colors: active) {
+      outline: 2px solid transparent;
+      outline-offset: 2px;
     }
   }
   .outline {
     outline-style: var(--tw-outline-style);
     outline-width: 1px;
   }
+  .outline-2 {
+    outline-style: var(--tw-outline-style);
+    outline-width: 2px;
+  }
   .outline {
     outline-offset: -1px;
   }
+  .outline-\[\#E8178A\] {
+    outline-color: #E8178A;
+  }
+  .outline-accent-primary-bold {
+    outline-color: var(--outline-accent-primary-bold);
+  }
+  .outline-accent-primary-hover {
+    outline-color: var(--outline-accent-primary-hover);
+  }
+  .outline-accent-primary-pressed {
+    outline-color: var(--outline-accent-primary-pressed);
+  }
   .outline-advisory-bold {
-    outline-color: var(--color-advisory-bold);
+    outline-color: var(--outline-advisory-bold);
   }
-  .outline-critical {
-    outline-color: var(--color-critical);
+  .outline-advisory-hover {
+    outline-color: var(--outline-advisory-hover);
   }
-  .outline-highlight-bold\/40 {
-    outline-color: var(--color-highlight-bold);
-    @supports (color: color-mix(in lab, red, red)) {
-      outline-color: color-mix(in oklab, var(--color-highlight-bold) 40%, transparent);
-    }
+  .outline-advisory-pressed {
+    outline-color: var(--outline-advisory-pressed);
+  }
+  .outline-critical-bold {
+    outline-color: var(--outline-critical-bold);
+  }
+  .outline-critical-hover {
+    outline-color: var(--outline-critical-hover);
+  }
+  .outline-critical-pressed {
+    outline-color: var(--outline-critical-pressed);
   }
   .outline-info-bold {
-    outline-color: var(--color-info-bold);
+    outline-color: var(--outline-info-bold);
+  }
+  .outline-info-hover {
+    outline-color: var(--outline-info-hover);
+  }
+  .outline-info-pressed {
+    outline-color: var(--outline-info-pressed);
   }
   .outline-interactive {
-    outline-color: var(--color-interactive);
+    outline-color: var(--outline-interactive);
+  }
+  .outline-interactive-disabled {
+    outline-color: var(--outline-interactive-disabled);
+  }
+  .outline-interactive-hover {
+    outline-color: var(--outline-interactive-hover);
+  }
+  .outline-interactive-pressed {
+    outline-color: var(--outline-interactive-pressed);
+  }
+  .outline-normal-bold {
+    outline-color: var(--outline-normal-bold);
+  }
+  .outline-normal-hover {
+    outline-color: var(--outline-normal-hover);
+  }
+  .outline-normal-pressed {
+    outline-color: var(--outline-normal-pressed);
   }
-  .outline-normal {
-    outline-color: var(--color-normal);
+  .outline-serious-bold {
+    outline-color: var(--outline-serious-bold);
   }
-  .outline-serious {
-    outline-color: var(--color-serious);
+  .outline-serious-hover {
+    outline-color: var(--outline-serious-hover);
   }
-  .outline-static-dark {
-    outline-color: var(--color-static-dark);
+  .outline-serious-pressed {
+    outline-color: var(--outline-serious-pressed);
   }
-  .outline-static-light {
-    outline-color: var(--color-static-light);
+  .outline-static {
+    outline-color: var(--outline-static);
   }
   .outline-transparent {
     outline-color: transparent;
@@ -1588,8 +1671,8 @@
   .\[--route-layout-grid-rows\:auto_1fr_auto\] {
     --route-layout-grid-rows: auto 1fr auto;
   }
-  .\[background\:--color-default-light\] {
-    background: --color-default-light;
+  .\[background\:--bg-interactive-disabled\] {
+    background: --bg-interactive-disabled;
   }
   .\[grid-area\:action\] {
     grid-area: action;
@@ -1600,12 +1683,21 @@
   .\[grid-area\:description\] {
     grid-area: description;
   }
+  .\[grid-area\:heading\] {
+    grid-area: heading;
+  }
   .\[grid-area\:icon\] {
     grid-area: icon;
   }
   .\[grid-area\:label\] {
     grid-area: label;
   }
+  .\[grid-area\:text\] {
+    grid-area: text;
+  }
+  .\[grid-template-areas\:\"icon_heading\"_\"icon_text\"\] {
+    grid-template-areas: "icon heading" "icon text";
+  }
   .\[grid-template-areas\:\"icon_label_space_action\"_\"icon_description_space_action\"\] {
     grid-template-areas: "icon label space action" "icon description space action";
   }
@@ -1615,6 +1707,23 @@
   .text-shadow-2xs {
     text-shadow: 0px 1px 0px var(--tw-text-shadow-color, rgb(0 0 0 / 0.15));
   }
+  .not-has-\[\+\[data-slot\=description\]\]\:row-span-full {
+    &:not(*:has(+[data-slot=description])) {
+      grid-row: 1 / -1;
+    }
+  }
+  .not-visible\:fg-primary-muted {
+    &:not(*:where([data-visible])) {
+      color: var(--fg-primary-muted);
+      --icon-color: var(--fg-primary-muted);
+    }
+  }
+  .not-viewable\:fg-primary-muted {
+    &:not(*:where([data-viewable])) {
+      color: var(--fg-primary-muted);
+      --icon-color: var(--fg-primary-muted);
+    }
+  }
   .group-not-empty\/input\:group-not-focus-within\/input\:invisible {
     &:is(:where(.group\/input):not(*:where([data-empty], :empty)) *) {
       &:is(:where(.group\/input):not(*:where([data-focus-within], :focus-within)) *) {
@@ -1652,9 +1761,19 @@
       rotate: 180deg;
     }
   }
-  .group-invalid\/date-field\:outline-serious {
+  .group-open\/sidenav\:w-full {
+    &:is(:where(.group\/sidenav):where([open], [data-open], :open) *) {
+      width: 100%;
+    }
+  }
+  .group-open\/sidenav\:px-s {
+    &:is(:where(.group\/sidenav):where([open], [data-open], :open) *) {
+      padding-inline: var(--spacing-s);
+    }
+  }
+  .group-invalid\/date-field\:outline-serious-bold {
     &:is(:where(.group\/date-field):where([invalid], [data-invalid], :invalid) *) {
-      outline-color: var(--color-serious);
+      outline-color: var(--outline-serious-bold);
     }
   }
   .group-empty\/input\:invisible {
@@ -1667,42 +1786,50 @@
       visibility: hidden;
     }
   }
-  .group-hover\/menu-item\:fg-inverse-light {
+  .group-hover\/menu-item\:fg-a11y-on-accent {
     &:is(:where(.group\/menu-item):where([data-hovered], :hover) *) {
-      color: var(--color-inverse-light);
-      --icon-color: var(--color-inverse-light);
+      color: var(--fg-a11y-on-accent);
+      --icon-color: var(--fg-a11y-on-accent);
     }
   }
-  .group-focus-visible\/menu-item\:fg-inverse-light {
+  .group-focus-visible\/menu-item\:fg-a11y-on-accent {
     &:is(:where(.group\/menu-item):where([data-focus-visible], :focus-visible) *) {
-      color: var(--color-inverse-light);
-      --icon-color: var(--color-inverse-light);
+      color: var(--fg-a11y-on-accent);
+      --icon-color: var(--fg-a11y-on-accent);
     }
   }
-  .group-enabled\/checkbox\:fg-info-subtle {
+  .group-enabled\/checkbox\:fg-info-bold {
     &:is(:where(.group\/checkbox):where(:not([disabled], [data-disabled]), :enabled) *) {
-      color: var(--color-info-subtle);
-      --icon-color: var(--color-info-subtle);
+      color: var(--fg-info-bold);
+      --icon-color: var(--fg-info-bold);
     }
   }
-  .group-enabled\/checkbox\:group-indeterminate\/checkbox\:bg-highlight {
+  .group-enabled\/checkbox\:group-indeterminate\/checkbox\:bg-accent-primary-bold {
     &:is(:where(.group\/checkbox):where(:not([disabled], [data-disabled]), :enabled) *) {
       &:is(:where(.group\/checkbox):where([data-indeterminate], :indeterminate) *) {
-        background-color: var(--color-highlight);
+        background-color: var(--bg-accent-primary-bold);
       }
     }
   }
-  .group-enabled\/checkbox\:group-indeterminate\/checkbox\:outline-highlight {
+  .group-enabled\/checkbox\:group-indeterminate\/checkbox\:fg-a11y-on-accent {
     &:is(:where(.group\/checkbox):where(:not([disabled], [data-disabled]), :enabled) *) {
       &:is(:where(.group\/checkbox):where([data-indeterminate], :indeterminate) *) {
-        outline-color: var(--color-highlight);
+        color: var(--fg-a11y-on-accent);
+        --icon-color: var(--fg-a11y-on-accent);
+      }
+    }
+  }
+  .group-enabled\/checkbox\:group-indeterminate\/checkbox\:outline-accent-primary-bold {
+    &:is(:where(.group\/checkbox):where(:not([disabled], [data-disabled]), :enabled) *) {
+      &:is(:where(.group\/checkbox):where([data-indeterminate], :indeterminate) *) {
+        outline-color: var(--outline-accent-primary-bold);
       }
     }
   }
   .group-enabled\/checkbox\:group-hover\/checkbox\:outline-interactive-hover {
     &:is(:where(.group\/checkbox):where(:not([disabled], [data-disabled]), :enabled) *) {
       &:is(:where(.group\/checkbox):where([data-hovered], :hover) *) {
-        outline-color: var(--color-interactive-hover);
+        outline-color: var(--outline-interactive-hover);
       }
     }
   }
@@ -1710,7 +1837,7 @@
     &:is(:where(.group\/checkbox):where(:not([disabled], [data-disabled]), :enabled) *) {
       &:is(:where(.group\/checkbox):where([data-indeterminate], :indeterminate) *) {
         &:is(:where(.group\/checkbox):where([data-hovered], :hover) *) {
-          outline-color: var(--color-interactive-hover);
+          outline-color: var(--outline-interactive-hover);
         }
       }
     }
@@ -1718,7 +1845,7 @@
   .group-enabled\/checkbox\:group-focus-visible\/checkbox\:outline-interactive-hover {
     &:is(:where(.group\/checkbox):where(:not([disabled], [data-disabled]), :enabled) *) {
       &:is(:where(.group\/checkbox):where([data-focus-visible], :focus-visible) *) {
-        outline-color: var(--color-interactive-hover);
+        outline-color: var(--outline-interactive-hover);
       }
     }
   }
@@ -1726,97 +1853,97 @@
     &:is(:where(.group\/checkbox):where(:not([disabled], [data-disabled]), :enabled) *) {
       &:is(:where(.group\/checkbox):where([data-indeterminate], :indeterminate) *) {
         &:is(:where(.group\/checkbox):where([data-focus-visible], :focus-visible) *) {
-          outline-color: var(--color-interactive-hover);
+          outline-color: var(--outline-interactive-hover);
         }
       }
     }
   }
-  .group-enabled\/combobox-field\:fg-default-light {
+  .group-enabled\/combobox-field\:fg-primary-bold {
     &:is(:where(.group\/combobox-field):where(:not([disabled], [data-disabled]), :enabled) *) {
-      color: var(--color-default-light);
-      --icon-color: var(--color-default-light);
+      color: var(--fg-primary-bold);
+      --icon-color: var(--fg-primary-bold);
     }
   }
   .group-enabled\/combobox-field\:outline-interactive {
     &:is(:where(.group\/combobox-field):where(:not([disabled], [data-disabled]), :enabled) *) {
-      outline-color: var(--color-interactive);
+      outline-color: var(--outline-interactive);
     }
   }
-  .group-enabled\/combobox-field\:group-invalid\/combobox-field\:outline-serious {
+  .group-enabled\/combobox-field\:group-invalid\/combobox-field\:outline-serious-bold {
     &:is(:where(.group\/combobox-field):where(:not([disabled], [data-disabled]), :enabled) *) {
       &:is(:where(.group\/combobox-field):where([invalid], [data-invalid], :invalid) *) {
-        outline-color: var(--color-serious);
+        outline-color: var(--outline-serious-bold);
       }
     }
   }
-  .group-enabled\/options-item\:fg-default-dark {
+  .group-enabled\/options-item\:fg-primary-muted {
     &:is(:where(.group\/options-item):where(:not([disabled], [data-disabled]), :enabled) *) {
-      color: var(--color-default-dark);
-      --icon-color: var(--color-default-dark);
+      color: var(--fg-primary-muted);
+      --icon-color: var(--fg-primary-muted);
     }
   }
-  .group-enabled\/options-item\:group-hover\/options-item\:fg-inverse-light {
+  .group-enabled\/options-item\:group-hover\/options-item\:fg-a11y-on-accent {
     &:is(:where(.group\/options-item):where(:not([disabled], [data-disabled]), :enabled) *) {
       &:is(:where(.group\/options-item):where([data-hovered], :hover) *) {
-        color: var(--color-inverse-light);
-        --icon-color: var(--color-inverse-light);
+        color: var(--fg-a11y-on-accent);
+        --icon-color: var(--fg-a11y-on-accent);
       }
     }
   }
-  .group-enabled\/options-item\:group-focus-visible\/options-item\:fg-inverse-light {
+  .group-enabled\/options-item\:group-focus-visible\/options-item\:fg-a11y-on-accent {
     &:is(:where(.group\/options-item):where(:not([disabled], [data-disabled]), :enabled) *) {
       &:is(:where(.group\/options-item):where([data-focus-visible], :focus-visible) *) {
-        color: var(--color-inverse-light);
-        --icon-color: var(--color-inverse-light);
+        color: var(--fg-a11y-on-accent);
+        --icon-color: var(--fg-a11y-on-accent);
       }
     }
   }
   .group-enabled\/radio\:group-hover\/radio\:outline-interactive-hover {
     &:is(:where(.group\/radio):where(:not([disabled], [data-disabled]), :enabled) *) {
       &:is(:where(.group\/radio):where([data-hovered], :hover) *) {
-        outline-color: var(--color-interactive-hover);
+        outline-color: var(--outline-interactive-hover);
       }
     }
   }
   .group-enabled\/radio\:group-focus-visible\/radio\:outline-interactive-hover {
     &:is(:where(.group\/radio):where(:not([disabled], [data-disabled]), :enabled) *) {
       &:is(:where(.group\/radio):where([data-focus-visible], :focus-visible) *) {
-        outline-color: var(--color-interactive-hover);
+        outline-color: var(--outline-interactive-hover);
       }
     }
   }
-  .group-enabled\/switch\:group-hover\/switch\:bg-interactive-hover-dark {
+  .group-enabled\/switch\:group-hover\/switch\:bg-interactive-muted-hover {
     &:is(:where(.group\/switch):where(:not([disabled], [data-disabled]), :enabled) *) {
       &:is(:where(.group\/switch):where([data-hovered], :hover) *) {
-        background-color: var(--color-interactive-hover-dark);
+        background-color: var(--bg-interactive-muted-hover);
       }
     }
   }
   .group-enabled\/switch\:group-hover\/switch\:outline-interactive-hover {
     &:is(:where(.group\/switch):where(:not([disabled], [data-disabled]), :enabled) *) {
       &:is(:where(.group\/switch):where([data-hovered], :hover) *) {
-        outline-color: var(--color-interactive-hover);
+        outline-color: var(--outline-interactive-hover);
       }
     }
   }
-  .group-enabled\/switch\:group-focus-visible\/switch\:bg-interactive-hover-dark {
+  .group-enabled\/switch\:group-focus-visible\/switch\:bg-interactive-muted-hover {
     &:is(:where(.group\/switch):where(:not([disabled], [data-disabled]), :enabled) *) {
       &:is(:where(.group\/switch):where([data-focus-visible], :focus-visible) *) {
-        background-color: var(--color-interactive-hover-dark);
+        background-color: var(--bg-interactive-muted-hover);
       }
     }
   }
   .group-enabled\/switch\:group-focus-visible\/switch\:outline-interactive-hover {
     &:is(:where(.group\/switch):where(:not([disabled], [data-disabled]), :enabled) *) {
       &:is(:where(.group\/switch):where([data-focus-visible], :focus-visible) *) {
-        outline-color: var(--color-interactive-hover);
+        outline-color: var(--outline-interactive-hover);
       }
     }
   }
-  .group-enabled\/text-area-field\:group-invalid\/text-area-field\:outline-serious {
+  .group-enabled\/text-area-field\:group-invalid\/text-area-field\:outline-serious-bold {
     &:is(:where(.group\/text-area-field):where(:not([disabled], [data-disabled]), :enabled) *) {
       &:is(:where(.group\/text-area-field):where([invalid], [data-invalid], :invalid) *) {
-        outline-color: var(--color-serious);
+        outline-color: var(--outline-serious-bold);
       }
     }
   }
@@ -1827,82 +1954,91 @@
   }
   .group-disabled\/accordion\:fg-disabled {
     &:is(:where(.group\/accordion):where([disabled], [data-disabled], :disabled) *) {
-      color: var(--color-disabled);
-      --icon-color: var(--color-disabled);
+      color: var(--fg-disabled);
+      --icon-color: var(--fg-disabled);
     }
   }
-  .group-disabled\/checkbox\:text-interactive-disabled {
+  .group-disabled\/checkbox\:fg-disabled {
     &:is(:where(.group\/checkbox):where([disabled], [data-disabled], :disabled) *) {
-      color: var(--color-interactive-disabled);
+      color: var(--fg-disabled);
+      --icon-color: var(--fg-disabled);
     }
   }
   .group-disabled\/checkbox\:outline-interactive-disabled {
     &:is(:where(.group\/checkbox):where([disabled], [data-disabled], :disabled) *) {
-      outline-color: var(--color-interactive-disabled);
+      outline-color: var(--outline-interactive-disabled);
     }
   }
   .group-disabled\/checkbox\:group-indeterminate\/checkbox\:bg-interactive-disabled {
     &:is(:where(.group\/checkbox):where([disabled], [data-disabled], :disabled) *) {
       &:is(:where(.group\/checkbox):where([data-indeterminate], :indeterminate) *) {
-        background-color: var(--color-interactive-disabled);
+        background-color: var(--bg-interactive-disabled);
       }
     }
   }
-  .group-disabled\/checkbox\:group-indeterminate\/checkbox\:fg-inverse-light {
+  .group-disabled\/checkbox\:group-indeterminate\/checkbox\:fg-inverse-bold {
     &:is(:where(.group\/checkbox):where([disabled], [data-disabled], :disabled) *) {
       &:is(:where(.group\/checkbox):where([data-indeterminate], :indeterminate) *) {
-        color: var(--color-inverse-light);
-        --icon-color: var(--color-inverse-light);
+        color: var(--fg-inverse-bold);
+        --icon-color: var(--fg-inverse-bold);
       }
     }
   }
   .group-disabled\/combobox-field\:fg-disabled {
     &:is(:where(.group\/combobox-field):where([disabled], [data-disabled], :disabled) *) {
-      color: var(--color-disabled);
-      --icon-color: var(--color-disabled);
+      color: var(--fg-disabled);
+      --icon-color: var(--fg-disabled);
     }
   }
   .group-disabled\/combobox-field\:outline-interactive-disabled {
     &:is(:where(.group\/combobox-field):where([disabled], [data-disabled], :disabled) *) {
-      outline-color: var(--color-interactive-disabled);
+      outline-color: var(--outline-interactive-disabled);
     }
   }
   .group-disabled\/date-field\:fg-disabled {
     &:is(:where(.group\/date-field):where([disabled], [data-disabled], :disabled) *) {
-      color: var(--color-disabled);
-      --icon-color: var(--color-disabled);
+      color: var(--fg-disabled);
+      --icon-color: var(--fg-disabled);
     }
   }
-  .group-disabled\/date-field\:text-disabled {
+  .group-disabled\/date-field\:outline-interactive-disabled {
     &:is(:where(.group\/date-field):where([disabled], [data-disabled], :disabled) *) {
-      color: var(--color-disabled);
+      outline-color: var(--outline-interactive-disabled);
     }
   }
-  .group-disabled\/date-field\:outline-interactive-disabled {
-    &:is(:where(.group\/date-field):where([disabled], [data-disabled], :disabled) *) {
-      outline-color: var(--color-interactive-disabled);
+  .group-disabled\/item\:fg-disabled {
+    &:is(:where(.group\/item):where([disabled], [data-disabled], :disabled) *) {
+      color: var(--fg-disabled);
+      --icon-color: var(--fg-disabled);
+    }
+  }
+  .group-disabled\/link\:fg-disabled {
+    &:is(:where(.group\/link):where([disabled], [data-disabled], :disabled) *) {
+      color: var(--fg-disabled);
+      --icon-color: var(--fg-disabled);
     }
   }
   .group-disabled\/menu-item\:fg-disabled {
     &:is(:where(.group\/menu-item):where([disabled], [data-disabled], :disabled) *) {
-      color: var(--color-disabled);
-      --icon-color: var(--color-disabled);
+      color: var(--fg-disabled);
+      --icon-color: var(--fg-disabled);
     }
   }
   .group-disabled\/options-item\:fg-disabled {
     &:is(:where(.group\/options-item):where([disabled], [data-disabled], :disabled) *) {
-      color: var(--color-disabled);
-      --icon-color: var(--color-disabled);
+      color: var(--fg-disabled);
+      --icon-color: var(--fg-disabled);
     }
   }
-  .group-disabled\/radio\:text-interactive-disabled {
+  .group-disabled\/radio\:fg-disabled {
     &:is(:where(.group\/radio):where([disabled], [data-disabled], :disabled) *) {
-      color: var(--color-interactive-disabled);
+      color: var(--fg-disabled);
+      --icon-color: var(--fg-disabled);
     }
   }
   .group-disabled\/radio\:outline-interactive-disabled {
     &:is(:where(.group\/radio):where([disabled], [data-disabled], :disabled) *) {
-      outline-color: var(--color-interactive-disabled);
+      outline-color: var(--outline-interactive-disabled);
     }
   }
   .group-disabled\/search-field\:invisible {
@@ -1912,99 +2048,100 @@
   }
   .group-disabled\/select-field\:fg-disabled {
     &:is(:where(.group\/select-field):where([disabled], [data-disabled], :disabled) *) {
-      color: var(--color-disabled);
-      --icon-color: var(--color-disabled);
+      color: var(--fg-disabled);
+      --icon-color: var(--fg-disabled);
     }
   }
   .group-disabled\/switch\:bg-interactive-disabled {
     &:is(:where(.group\/switch):where([disabled], [data-disabled], :disabled) *) {
-      background-color: var(--color-interactive-disabled);
+      background-color: var(--bg-interactive-disabled);
     }
   }
-  .group-disabled\/switch\:text-interactive-disabled {
+  .group-disabled\/switch\:fg-disabled {
     &:is(:where(.group\/switch):where([disabled], [data-disabled], :disabled) *) {
-      color: var(--color-interactive-disabled);
+      color: var(--fg-disabled);
+      --icon-color: var(--fg-disabled);
     }
   }
   .group-disabled\/switch\:outline-interactive-disabled {
     &:is(:where(.group\/switch):where([disabled], [data-disabled], :disabled) *) {
-      outline-color: var(--color-interactive-disabled);
+      outline-color: var(--outline-interactive-disabled);
     }
   }
   .group-disabled\/text-area-field\:fg-disabled {
     &:is(:where(.group\/text-area-field):where([disabled], [data-disabled], :disabled) *) {
-      color: var(--color-disabled);
-      --icon-color: var(--color-disabled);
-    }
-  }
-  .group-disabled\/text-area-field\:text-disabled {
-    &:is(:where(.group\/text-area-field):where([disabled], [data-disabled], :disabled) *) {
-      color: var(--color-disabled);
+      color: var(--fg-disabled);
+      --icon-color: var(--fg-disabled);
     }
   }
   .group-disabled\/text-area-field\:outline-interactive-disabled {
     &:is(:where(.group\/text-area-field):where([disabled], [data-disabled], :disabled) *) {
-      outline-color: var(--color-interactive-disabled);
+      outline-color: var(--outline-interactive-disabled);
     }
   }
   .group-disabled\/text-field\:fg-disabled {
     &:is(:where(.group\/text-field):where([disabled], [data-disabled], :disabled) *) {
-      color: var(--color-disabled);
-      --icon-color: var(--color-disabled);
+      color: var(--fg-disabled);
+      --icon-color: var(--fg-disabled);
+    }
+  }
+  .group-data-\[push\~\=left\]\/layout\:relative {
+    &:is(:where(.group\/layout)[data-push~="left"] *) {
+      position: relative;
     }
   }
-  .group-enabled\/options-item\:group-color-info\/options-item\:fg-default-light {
+  .group-enabled\/options-item\:group-color-info\/options-item\:fg-primary-bold {
     &:is(:where(.group\/options-item):where(:not([disabled], [data-disabled]), :enabled) *) {
       &:is(:where(.group\/options-item):where([data-color="info"]) *) {
-        color: var(--color-default-light);
-        --icon-color: var(--color-default-light);
+        color: var(--fg-primary-bold);
+        --icon-color: var(--fg-primary-bold);
       }
     }
   }
-  .group-enabled\/options-item\:group-hover\/options-item\:group-color-info\/options-item\:fg-inverse-light {
+  .group-enabled\/options-item\:group-hover\/options-item\:group-color-info\/options-item\:fg-a11y-on-accent {
     &:is(:where(.group\/options-item):where(:not([disabled], [data-disabled]), :enabled) *) {
       &:is(:where(.group\/options-item):where([data-hovered], :hover) *) {
         &:is(:where(.group\/options-item):where([data-color="info"]) *) {
-          color: var(--color-inverse-light);
-          --icon-color: var(--color-inverse-light);
+          color: var(--fg-a11y-on-accent);
+          --icon-color: var(--fg-a11y-on-accent);
         }
       }
     }
   }
-  .group-enabled\/options-item\:group-focus-visible\/options-item\:group-color-info\/options-item\:fg-inverse-light {
+  .group-enabled\/options-item\:group-focus-visible\/options-item\:group-color-info\/options-item\:fg-a11y-on-accent {
     &:is(:where(.group\/options-item):where(:not([disabled], [data-disabled]), :enabled) *) {
       &:is(:where(.group\/options-item):where([data-focus-visible], :focus-visible) *) {
         &:is(:where(.group\/options-item):where([data-color="info"]) *) {
-          color: var(--color-inverse-light);
-          --icon-color: var(--color-inverse-light);
+          color: var(--fg-a11y-on-accent);
+          --icon-color: var(--fg-a11y-on-accent);
         }
       }
     }
   }
-  .group-enabled\/options-item\:group-color-serious\/options-item\:fg-serious {
+  .group-enabled\/options-item\:group-color-serious\/options-item\:fg-serious-bold {
     &:is(:where(.group\/options-item):where(:not([disabled], [data-disabled]), :enabled) *) {
       &:is(:where(.group\/options-item):where([data-color="serious"]) *) {
-        color: var(--color-serious);
-        --icon-color: var(--color-serious);
+        color: var(--fg-serious-bold);
+        --icon-color: var(--fg-serious-bold);
       }
     }
   }
-  .group-enabled\/options-item\:group-hover\/options-item\:group-color-serious\/options-item\:fg-inverse-light {
+  .group-enabled\/options-item\:group-hover\/options-item\:group-color-serious\/options-item\:fg-a11y-on-accent {
     &:is(:where(.group\/options-item):where(:not([disabled], [data-disabled]), :enabled) *) {
       &:is(:where(.group\/options-item):where([data-hovered], :hover) *) {
         &:is(:where(.group\/options-item):where([data-color="serious"]) *) {
-          color: var(--color-inverse-light);
-          --icon-color: var(--color-inverse-light);
+          color: var(--fg-a11y-on-accent);
+          --icon-color: var(--fg-a11y-on-accent);
         }
       }
     }
   }
-  .group-enabled\/options-item\:group-focus-visible\/options-item\:group-color-serious\/options-item\:fg-inverse-light {
+  .group-enabled\/options-item\:group-focus-visible\/options-item\:group-color-serious\/options-item\:fg-a11y-on-accent {
     &:is(:where(.group\/options-item):where(:not([disabled], [data-disabled]), :enabled) *) {
       &:is(:where(.group\/options-item):where([data-focus-visible], :focus-visible) *) {
         &:is(:where(.group\/options-item):where([data-color="serious"]) *) {
-          color: var(--color-inverse-light);
-          --icon-color: var(--color-inverse-light);
+          color: var(--fg-a11y-on-accent);
+          --icon-color: var(--fg-a11y-on-accent);
         }
       }
     }
@@ -2732,54 +2869,6 @@
       height: 48px;
     }
   }
-  .group-orientation-horizontal\:rounded-small {
-    &:is(:where(.group):where([data-orientation="horizontal"]) *) {
-      border-radius: var(--radius-small);
-    }
-  }
-  .group-orientation-horizontal\:rounded-b-none {
-    &:is(:where(.group):where([data-orientation="horizontal"]) *) {
-      border-bottom-right-radius: 0;
-      border-bottom-left-radius: 0;
-    }
-  }
-  .group-orientation-horizontal\:rounded-b-none {
-    &:is(:where(.group):where([data-orientation="horizontal"]) *) {
-      border-bottom-right-radius: var(--radius-none);
-      border-bottom-left-radius: var(--radius-none);
-    }
-  }
-  .group-orientation-horizontal\:border-b {
-    &:is(:where(.group):where([data-orientation="horizontal"]) *) {
-      border-bottom-style: var(--tw-border-style);
-      border-bottom-width: 1px;
-    }
-  }
-  .group-orientation-horizontal\:border-highlight {
-    &:is(:where(.group):where([data-orientation="horizontal"]) *) {
-      border-color: var(--color-highlight);
-    }
-  }
-  .group-orientation-horizontal\:border-interactive-disabled {
-    &:is(:where(.group):where([data-orientation="horizontal"]) *) {
-      border-color: var(--color-interactive-disabled);
-    }
-  }
-  .group-orientation-horizontal\:border-interactive-hover {
-    &:is(:where(.group):where([data-orientation="horizontal"]) *) {
-      border-color: var(--color-interactive-hover);
-    }
-  }
-  .group-orientation-horizontal\:border-static-light {
-    &:is(:where(.group):where([data-orientation="horizontal"]) *) {
-      border-color: var(--color-static-light);
-    }
-  }
-  .group-orientation-horizontal\:pl-0 {
-    &:is(:where(.group):where([data-orientation="horizontal"]) *) {
-      padding-left: var(--spacing-0);
-    }
-  }
   .group-orientation-horizontal\/checkbox-group\:grow {
     &:is(:where(.group\/checkbox-group):where([data-orientation="horizontal"]) *) {
       flex-grow: 1;
@@ -2888,25 +2977,16 @@
       }
     }
   }
-  .group-orientation-vertical\:border {
-    &:is(:where(.group):where([data-orientation="vertical"]) *) {
-      border-style: var(--tw-border-style);
-      border-width: 1px;
-    }
-  }
-  .group-orientation-vertical\:border-interactive-hover {
-    &:is(:where(.group):where([data-orientation="vertical"]) *) {
-      border-color: var(--color-interactive-hover);
-    }
-  }
-  .group-orientation-vertical\:border-transparent {
-    &:is(:where(.group):where([data-orientation="vertical"]) *) {
-      border-color: transparent;
+  .group-orientation-horizontal\/tabs\:rounded-b-none {
+    &:is(:where(.group\/tabs):where([data-orientation="horizontal"]) *) {
+      border-bottom-right-radius: 0;
+      border-bottom-left-radius: 0;
     }
   }
-  .group-orientation-vertical\:pt-0 {
-    &:is(:where(.group):where([data-orientation="vertical"]) *) {
-      padding-top: var(--spacing-0);
+  .group-orientation-horizontal\/tabs\:rounded-b-none {
+    &:is(:where(.group\/tabs):where([data-orientation="horizontal"]) *) {
+      border-bottom-right-radius: var(--radius-none);
+      border-bottom-left-radius: var(--radius-none);
     }
   }
   .group-orientation-vertical\/slider\:top-\[calc\(100\%-attr\(data-end_\%\)\*100\)\] {
@@ -3031,6 +3111,16 @@
       }
     }
   }
+  .group-closed\/sidenav\:flex {
+    &:is(:where(.group\/sidenav):where(:not([open], [data-open], :open)) *) {
+      display: flex;
+    }
+  }
+  .group-closed\/sidenav\:hidden {
+    &:is(:where(.group\/sidenav):where(:not([open], [data-open], :open)) *) {
+      display: none;
+    }
+  }
   .group-expanded\/accordion\:rotate-180 {
     &:is(:where(.group\/accordion):where([expanded], [data-expanded]) *) {
       rotate: 180deg;
@@ -3041,17 +3131,25 @@
       rotate: 180deg;
     }
   }
-  .group-enabled\/checkbox\:group-selected\/checkbox\:bg-highlight {
+  .group-enabled\/checkbox\:group-selected\/checkbox\:bg-accent-primary-bold {
     &:is(:where(.group\/checkbox):where(:not([disabled], [data-disabled]), :enabled) *) {
       &:is(:where(.group\/checkbox):where([data-selected], :checked) *) {
-        background-color: var(--color-highlight);
+        background-color: var(--bg-accent-primary-bold);
       }
     }
   }
-  .group-enabled\/checkbox\:group-selected\/checkbox\:outline-highlight {
+  .group-enabled\/checkbox\:group-selected\/checkbox\:fg-a11y-on-accent {
     &:is(:where(.group\/checkbox):where(:not([disabled], [data-disabled]), :enabled) *) {
       &:is(:where(.group\/checkbox):where([data-selected], :checked) *) {
-        outline-color: var(--color-highlight);
+        color: var(--fg-a11y-on-accent);
+        --icon-color: var(--fg-a11y-on-accent);
+      }
+    }
+  }
+  .group-enabled\/checkbox\:group-selected\/checkbox\:outline-accent-primary-bold {
+    &:is(:where(.group\/checkbox):where(:not([disabled], [data-disabled]), :enabled) *) {
+      &:is(:where(.group\/checkbox):where([data-selected], :checked) *) {
+        outline-color: var(--outline-accent-primary-bold);
       }
     }
   }
@@ -3059,7 +3157,7 @@
     &:is(:where(.group\/checkbox):where(:not([disabled], [data-disabled]), :enabled) *) {
       &:is(:where(.group\/checkbox):where([data-selected], :checked) *) {
         &:is(:where(.group\/checkbox):where([data-hovered], :hover) *) {
-          outline-color: var(--color-interactive-hover);
+          outline-color: var(--outline-interactive-hover);
         }
       }
     }
@@ -3068,7 +3166,7 @@
     &:is(:where(.group\/checkbox):where(:not([disabled], [data-disabled]), :enabled) *) {
       &:is(:where(.group\/checkbox):where([data-selected], :checked) *) {
         &:is(:where(.group\/checkbox):where([data-focus-visible], :focus-visible) *) {
-          outline-color: var(--color-interactive-hover);
+          outline-color: var(--outline-interactive-hover);
         }
       }
     }
@@ -3076,22 +3174,22 @@
   .group-disabled\/checkbox\:group-selected\/checkbox\:bg-interactive-disabled {
     &:is(:where(.group\/checkbox):where([disabled], [data-disabled], :disabled) *) {
       &:is(:where(.group\/checkbox):where([data-selected], :checked) *) {
-        background-color: var(--color-interactive-disabled);
+        background-color: var(--bg-interactive-disabled);
       }
     }
   }
-  .group-disabled\/checkbox\:group-selected\/checkbox\:fg-inverse-light {
+  .group-disabled\/checkbox\:group-selected\/checkbox\:fg-inverse-bold {
     &:is(:where(.group\/checkbox):where([disabled], [data-disabled], :disabled) *) {
       &:is(:where(.group\/checkbox):where([data-selected], :checked) *) {
-        color: var(--color-inverse-light);
-        --icon-color: var(--color-inverse-light);
+        color: var(--fg-inverse-bold);
+        --icon-color: var(--fg-inverse-bold);
       }
     }
   }
-  .group-enabled\/radio\:group-selected\/radio\:outline-highlight {
+  .group-enabled\/radio\:group-selected\/radio\:outline-accent-primary-bold {
     &:is(:where(.group\/radio):where(:not([disabled], [data-disabled]), :enabled) *) {
       &:is(:where(.group\/radio):where([data-selected], :checked) *) {
-        outline-color: var(--color-highlight);
+        outline-color: var(--outline-accent-primary-bold);
       }
     }
   }
@@ -3099,7 +3197,7 @@
     &:is(:where(.group\/radio):where(:not([disabled], [data-disabled]), :enabled) *) {
       &:is(:where(.group\/radio):where([data-selected], :checked) *) {
         &:is(:where(.group\/radio):where([data-hovered], :hover) *) {
-          outline-color: var(--color-interactive-hover);
+          outline-color: var(--outline-interactive-hover);
         }
       }
     }
@@ -3108,41 +3206,41 @@
     &:is(:where(.group\/radio):where(:not([disabled], [data-disabled]), :enabled) *) {
       &:is(:where(.group\/radio):where([data-selected], :checked) *) {
         &:is(:where(.group\/radio):where([data-focus-visible], :focus-visible) *) {
-          outline-color: var(--color-interactive-hover);
+          outline-color: var(--outline-interactive-hover);
         }
       }
     }
   }
-  .group-enabled\/switch\:group-selected\/switch\:outline-highlight {
+  .group-enabled\/switch\:group-selected\/switch\:outline-accent-primary-bold {
     &:is(:where(.group\/switch):where(:not([disabled], [data-disabled]), :enabled) *) {
       &:is(:where(.group\/switch):where([data-selected], :checked) *) {
-        outline-color: var(--color-highlight);
+        outline-color: var(--outline-accent-primary-bold);
       }
     }
   }
-  .group-enabled\/switch\:group-selected\/switch\:group-hover\/switch\:bg-highlight-subtle {
+  .group-enabled\/switch\:group-selected\/switch\:group-hover\/switch\:bg-accent-primary-muted {
     &:is(:where(.group\/switch):where(:not([disabled], [data-disabled]), :enabled) *) {
       &:is(:where(.group\/switch):where([data-selected], :checked) *) {
         &:is(:where(.group\/switch):where([data-hovered], :hover) *) {
-          background-color: var(--color-highlight-subtle);
+          background-color: var(--bg-accent-primary-muted);
         }
       }
     }
   }
-  .group-enabled\/switch\:group-selected\/switch\:group-hover\/switch\:outline-highlight {
+  .group-enabled\/switch\:group-selected\/switch\:group-hover\/switch\:outline-accent-primary-bold {
     &:is(:where(.group\/switch):where(:not([disabled], [data-disabled]), :enabled) *) {
       &:is(:where(.group\/switch):where([data-selected], :checked) *) {
         &:is(:where(.group\/switch):where([data-hovered], :hover) *) {
-          outline-color: var(--color-highlight);
+          outline-color: var(--outline-accent-primary-bold);
         }
       }
     }
   }
-  .group-enabled\/switch\:group-selected\/switch\:group-focus-visible\/switch\:bg-highlight-subtle {
+  .group-enabled\/switch\:group-selected\/switch\:group-focus-visible\/switch\:bg-accent-primary-muted {
     &:is(:where(.group\/switch):where(:not([disabled], [data-disabled]), :enabled) *) {
       &:is(:where(.group\/switch):where([data-selected], :checked) *) {
         &:is(:where(.group\/switch):where([data-focus-visible], :focus-visible) *) {
-          background-color: var(--color-highlight-subtle);
+          background-color: var(--bg-accent-primary-muted);
         }
       }
     }
@@ -3151,35 +3249,30 @@
     &:is(:where(.group\/switch):where(:not([disabled], [data-disabled]), :enabled) *) {
       &:is(:where(.group\/switch):where([data-selected], :checked) *) {
         &:is(:where(.group\/switch):where([data-focus-visible], :focus-visible) *) {
-          outline-color: var(--color-interactive-hover);
+          outline-color: var(--outline-interactive-hover);
         }
       }
     }
   }
-  .placeholder\:text-default-dark {
+  .placeholder\:fg-primary-muted {
     &::placeholder {
-      color: var(--color-default-dark);
+      color: var(--fg-primary-muted);
+      --icon-color: var(--fg-primary-muted);
     }
   }
-  .group-enabled\/combobox-field\:placeholder\:fg-default-dark {
+  .group-enabled\/combobox-field\:placeholder\:fg-primary-muted {
     &:is(:where(.group\/combobox-field):where(:not([disabled], [data-disabled]), :enabled) *) {
       &::placeholder {
-        color: var(--color-default-dark);
-        --icon-color: var(--color-default-dark);
+        color: var(--fg-primary-muted);
+        --icon-color: var(--fg-primary-muted);
       }
     }
   }
-  .group-disabled\/date-field\:placeholder\:text-disabled {
+  .group-disabled\/date-field\:placeholder\:fg-disabled {
     &:is(:where(.group\/date-field):where([disabled], [data-disabled], :disabled) *) {
       &::placeholder {
-        color: var(--color-disabled);
-      }
-    }
-  }
-  .group-disabled\/text-area-field\:placeholder\:text-disabled {
-    &:is(:where(.group\/text-area-field):where([disabled], [data-disabled], :disabled) *) {
-      &::placeholder {
-        color: var(--color-disabled);
+        color: var(--fg-disabled);
+        --icon-color: var(--fg-disabled);
       }
     }
   }
@@ -3215,46 +3308,46 @@
       border-radius: calc(infinity * 1px);
     }
   }
-  .before\:bg-default-dark {
+  .before\:bg-info-bold {
     &::before {
       content: var(--tw-content);
-      background-color: var(--color-default-dark);
+      background-color: var(--bg-info-bold);
     }
   }
-  .group-enabled\/switch\:group-hover\/switch\:before\:bg-interactive-hover {
+  .group-enabled\/switch\:group-hover\/switch\:before\:bg-interactive-bold-hover {
     &:is(:where(.group\/switch):where(:not([disabled], [data-disabled]), :enabled) *) {
       &:is(:where(.group\/switch):where([data-hovered], :hover) *) {
         &::before {
           content: var(--tw-content);
-          background-color: var(--color-interactive-hover);
+          background-color: var(--bg-interactive-bold-hover);
         }
       }
     }
   }
-  .group-enabled\/switch\:group-focus-visible\/switch\:before\:bg-interactive-hover {
+  .group-enabled\/switch\:group-focus-visible\/switch\:before\:bg-interactive-bold-hover {
     &:is(:where(.group\/switch):where(:not([disabled], [data-disabled]), :enabled) *) {
       &:is(:where(.group\/switch):where([data-focus-visible], :focus-visible) *) {
         &::before {
           content: var(--tw-content);
-          background-color: var(--color-interactive-hover);
+          background-color: var(--bg-interactive-bold-hover);
         }
       }
     }
   }
-  .group-disabled\/switch\:before\:bg-disabled {
+  .group-disabled\/switch\:before\:bg-interactive-disabled {
     &:is(:where(.group\/switch):where([disabled], [data-disabled], :disabled) *) {
       &::before {
         content: var(--tw-content);
-        background-color: var(--color-disabled);
+        background-color: var(--bg-interactive-disabled);
       }
     }
   }
-  .group-enabled\/radio\:group-selected\/radio\:before\:bg-highlight {
+  .group-enabled\/radio\:group-selected\/radio\:before\:bg-accent-primary-bold {
     &:is(:where(.group\/radio):where(:not([disabled], [data-disabled]), :enabled) *) {
       &:is(:where(.group\/radio):where([data-selected], :checked) *) {
         &::before {
           content: var(--tw-content);
-          background-color: var(--color-highlight);
+          background-color: var(--bg-accent-primary-bold);
         }
       }
     }
@@ -3264,7 +3357,7 @@
       &:is(:where(.group\/radio):where([data-selected], :checked) *) {
         &::before {
           content: var(--tw-content);
-          background-color: var(--color-interactive-disabled);
+          background-color: var(--bg-interactive-disabled);
         }
       }
     }
@@ -3285,43 +3378,111 @@
       }
     }
   }
-  .group-enabled\/switch\:group-selected\/switch\:before\:bg-highlight {
+  .group-enabled\/switch\:group-selected\/switch\:before\:bg-accent-primary-bold {
     &:is(:where(.group\/switch):where(:not([disabled], [data-disabled]), :enabled) *) {
       &:is(:where(.group\/switch):where([data-selected], :checked) *) {
         &::before {
           content: var(--tw-content);
-          background-color: var(--color-highlight);
+          background-color: var(--bg-accent-primary-bold);
         }
       }
     }
   }
-  .group-enabled\/switch\:group-selected\/switch\:group-hover\/switch\:before\:bg-highlight {
+  .group-enabled\/switch\:group-selected\/switch\:group-hover\/switch\:before\:bg-accent-primary-bold {
     &:is(:where(.group\/switch):where(:not([disabled], [data-disabled]), :enabled) *) {
       &:is(:where(.group\/switch):where([data-selected], :checked) *) {
         &:is(:where(.group\/switch):where([data-hovered], :hover) *) {
           &::before {
             content: var(--tw-content);
-            background-color: var(--color-highlight);
+            background-color: var(--bg-accent-primary-bold);
           }
         }
       }
     }
   }
-  .group-enabled\/switch\:group-selected\/switch\:group-focus-visible\/switch\:before\:bg-highlight {
+  .group-enabled\/switch\:group-selected\/switch\:group-focus-visible\/switch\:before\:bg-accent-primary-bold {
     &:is(:where(.group\/switch):where(:not([disabled], [data-disabled]), :enabled) *) {
       &:is(:where(.group\/switch):where([data-selected], :checked) *) {
         &:is(:where(.group\/switch):where([data-focus-visible], :focus-visible) *) {
           &::before {
             content: var(--tw-content);
-            background-color: var(--color-highlight);
+            background-color: var(--bg-accent-primary-bold);
           }
         }
       }
     }
   }
-  .placeholder-shown\:text-default-dark {
+  .group-orientation-horizontal\/tabs\:after\:absolute {
+    &:is(:where(.group\/tabs):where([data-orientation="horizontal"]) *) {
+      &::after {
+        content: var(--tw-content);
+        position: absolute;
+      }
+    }
+  }
+  .group-orientation-horizontal\/tabs\:after\:bottom-0 {
+    &:is(:where(.group\/tabs):where([data-orientation="horizontal"]) *) {
+      &::after {
+        content: var(--tw-content);
+        bottom: var(--spacing-0);
+      }
+    }
+  }
+  .group-orientation-horizontal\/tabs\:after\:left-0 {
+    &:is(:where(.group\/tabs):where([data-orientation="horizontal"]) *) {
+      &::after {
+        content: var(--tw-content);
+        left: var(--spacing-0);
+      }
+    }
+  }
+  .group-orientation-horizontal\/tabs\:after\:block {
+    &:is(:where(.group\/tabs):where([data-orientation="horizontal"]) *) {
+      &::after {
+        content: var(--tw-content);
+        display: block;
+      }
+    }
+  }
+  .group-orientation-horizontal\/tabs\:after\:h-\[1px\] {
+    &:is(:where(.group\/tabs):where([data-orientation="horizontal"]) *) {
+      &::after {
+        content: var(--tw-content);
+        height: 1px;
+      }
+    }
+  }
+  .group-orientation-horizontal\/tabs\:after\:w-full {
+    &:is(:where(.group\/tabs):where([data-orientation="horizontal"]) *) {
+      &::after {
+        content: var(--tw-content);
+        width: 100%;
+      }
+    }
+  }
+  .group-orientation-horizontal\/tabs\:after\:bg-\[color\:var\(--outline-static\)\] {
+    &:is(:where(.group\/tabs):where([data-orientation="horizontal"]) *) {
+      &::after {
+        content: var(--tw-content);
+        background-color: var(--outline-static);
+      }
+    }
+  }
+  .visited\:fg-accent-primary-pressed {
+    &:where([data-visited], :visited) {
+      color: var(--fg-accent-primary-pressed);
+      --icon-color: var(--fg-accent-primary-pressed);
+    }
+  }
+  .visited\:underline {
+    &:where([data-visited], :visited) {
+      text-decoration-line: underline;
+    }
+  }
+  .placeholder-shown\:fg-primary-muted {
     &:where([data-placeholder], :placeholder-shown) {
-      color: var(--color-default-dark);
+      color: var(--fg-primary-muted);
+      --icon-color: var(--fg-primary-muted);
     }
   }
   .empty\:hidden {
@@ -3345,16 +3506,25 @@
       background-color: transparent !important;
     }
   }
-  .hover\:fg-default-light {
+  .hover\:bg-info-bold {
+    &:where([data-hovered], :hover) {
+      background-color: var(--bg-info-bold);
+    }
+  }
+  .hover\:bg-interactive-muted-hover {
     &:where([data-hovered], :hover) {
-      color: var(--color-default-light);
-      --icon-color: var(--color-default-light);
+      background-color: var(--bg-interactive-muted-hover);
     }
   }
-  .hover\:fg-interactive-hover {
+  .hover\:fg-info-hover {
     &:where([data-hovered], :hover) {
-      color: var(--color-interactive-hover);
-      --icon-color: var(--color-interactive-hover);
+      color: var(--fg-info-hover);
+      --icon-color: var(--fg-info-hover);
+    }
+  }
+  .hover\:underline {
+    &:where([data-hovered], :hover) {
+      text-decoration-line: underline;
     }
   }
   .hover\:outline-4 {
@@ -3365,50 +3535,51 @@
   }
   .hover\:outline-interactive-hover {
     &:where([data-hovered], :hover) {
-      outline-color: var(--color-interactive-hover);
+      outline-color: var(--outline-interactive-hover);
     }
   }
-  .group-enabled\/accordion\:hover\:bg-interactive-hover-dark {
+  .group-enabled\/accordion\:hover\:bg-interactive-muted-hover {
     &:is(:where(.group\/accordion):where(:not([disabled], [data-disabled]), :enabled) *) {
       &:where([data-hovered], :hover) {
-        background-color: var(--color-interactive-hover-dark);
+        background-color: var(--bg-interactive-muted-hover);
       }
     }
   }
   .group-enabled\/combobox-field\:hover\:outline-interactive-hover {
     &:is(:where(.group\/combobox-field):where(:not([disabled], [data-disabled]), :enabled) *) {
       &:where([data-hovered], :hover) {
-        outline-color: var(--color-interactive-hover);
+        outline-color: var(--outline-interactive-hover);
       }
     }
   }
   .group-enabled\/text-area-field\:hover\:outline-interactive-hover {
     &:is(:where(.group\/text-area-field):where(:not([disabled], [data-disabled]), :enabled) *) {
       &:where([data-hovered], :hover) {
-        outline-color: var(--color-interactive-hover);
+        outline-color: var(--outline-interactive-hover);
       }
     }
   }
-  .focus\:fg-default-light {
+  .focus\:fg-primary-bold {
     &:where([data-focused], :focus) {
-      color: var(--color-default-light);
-      --icon-color: var(--color-default-light);
+      color: var(--fg-primary-bold);
+      --icon-color: var(--fg-primary-bold);
     }
   }
-  .focus-visible\:bg-highlight {
+  .focus-visible\:bg-accent-primary-bold {
     &:where([data-focus-visible], :focus-visible) {
-      background-color: var(--color-highlight);
+      background-color: var(--bg-accent-primary-bold);
     }
   }
-  .focus-visible\:fg-interactive-hover {
+  .focus-visible\:fg-a11y-on-accent {
     &:where([data-focus-visible], :focus-visible) {
-      color: var(--color-interactive-hover);
-      --icon-color: var(--color-interactive-hover);
+      color: var(--fg-a11y-on-accent);
+      --icon-color: var(--fg-a11y-on-accent);
     }
   }
-  .focus-visible\:text-inverse-light {
+  .focus-visible\:fg-info-hover {
     &:where([data-focus-visible], :focus-visible) {
-      color: var(--color-inverse-light);
+      color: var(--fg-info-hover);
+      --icon-color: var(--fg-info-hover);
     }
   }
   .focus-visible\:outline-4 {
@@ -3419,7 +3590,7 @@
   }
   .focus-visible\:outline-interactive-hover {
     &:where([data-focus-visible], :focus-visible) {
-      outline-color: var(--color-interactive-hover);
+      outline-color: var(--outline-interactive-hover);
     }
   }
   .focus-visible\:outline-none {
@@ -3428,10 +3599,10 @@
       outline-style: none;
     }
   }
-  .group-enabled\/text-area-field\:focus-visible\:outline-highlight {
+  .group-enabled\/text-area-field\:focus-visible\:outline-accent-primary-bold {
     &:is(:where(.group\/text-area-field):where(:not([disabled], [data-disabled]), :enabled) *) {
       &:where([data-focus-visible], :focus-visible) {
-        outline-color: var(--color-highlight);
+        outline-color: var(--outline-accent-primary-bold);
       }
     }
   }
@@ -3445,50 +3616,85 @@
       background-color: transparent;
     }
   }
-  .enabled\:fg-default-light {
+  .enabled\:fg-accent-primary-bold {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      color: var(--fg-accent-primary-bold);
+      --icon-color: var(--fg-accent-primary-bold);
+    }
+  }
+  .enabled\:fg-info-bold {
     &:where(:not([disabled], [data-disabled]), :enabled) {
-      color: var(--color-default-light);
-      --icon-color: var(--color-default-light);
+      color: var(--fg-info-bold);
+      --icon-color: var(--fg-info-bold);
     }
   }
-  .enabled\:fg-interactive {
+  .enabled\:fg-primary-bold {
     &:where(:not([disabled], [data-disabled]), :enabled) {
-      color: var(--color-interactive);
-      --icon-color: var(--color-interactive);
+      color: var(--fg-primary-bold);
+      --icon-color: var(--fg-primary-bold);
     }
   }
-  .enabled\:group-invalid\/input\:outline-serious {
+  .enabled\:group-invalid\/input\:outline-serious-bold {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:is(:where(.group\/input):where([invalid], [data-invalid], :invalid) *) {
-        outline-color: var(--color-serious);
+        outline-color: var(--outline-serious-bold);
       }
     }
   }
-  .group-invalid\/select-field\:enabled\:outline-serious {
+  .group-invalid\/select-field\:enabled\:outline-serious-bold {
     &:is(:where(.group\/select-field):where([invalid], [data-invalid], :invalid) *) {
       &:where(:not([disabled], [data-disabled]), :enabled) {
-        outline-color: var(--color-serious);
+        outline-color: var(--outline-serious-bold);
       }
     }
   }
   .enabled\:group-hover\/input\:outline-interactive-hover {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:is(:where(.group\/input):where([data-hovered], :hover) *) {
-        outline-color: var(--color-interactive-hover);
+        outline-color: var(--outline-interactive-hover);
       }
     }
   }
-  .group-focus-visible\/select-field\:enabled\:outline-highlight-bold {
+  .group-focus-visible\/select-field\:enabled\:outline-accent-primary-bold {
     &:is(:where(.group\/select-field):where([data-focus-visible], :focus-visible) *) {
       &:where(:not([disabled], [data-disabled]), :enabled) {
-        outline-color: var(--color-highlight-bold);
+        outline-color: var(--outline-accent-primary-bold);
       }
     }
   }
-  .enabled\:group-focus-visible-within\/input\:outline-highlight {
+  .enabled\:group-focus-visible-within\/input\:outline-accent-primary-bold {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:is(:where(.group\/input):where(:has([data-focus-visible], :focus-visible)) *) {
-        outline-color: var(--color-highlight);
+        outline-color: var(--outline-accent-primary-bold);
+      }
+    }
+  }
+  .enabled\:visited\:fg-accent-primary-pressed {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-visited], :visited) {
+        color: var(--fg-accent-primary-pressed);
+        --icon-color: var(--fg-accent-primary-pressed);
+      }
+    }
+  }
+  .enabled\:visited\:underline {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-visited], :visited) {
+        text-decoration-line: underline;
+      }
+    }
+  }
+  .enabled\:hover\:bg-interactive-bold-hover {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-hovered], :hover) {
+        background-color: var(--bg-interactive-bold-hover);
+      }
+    }
+  }
+  .enabled\:hover\:bg-interactive-muted-hover {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-hovered], :hover) {
+        background-color: var(--bg-interactive-muted-hover);
       }
     }
   }
@@ -3499,26 +3705,88 @@
       }
     }
   }
-  .enabled\:hover\:fg-interactive-hover {
+  .enabled\:hover\:fg-a11y-on-accent {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-hovered], :hover) {
+        color: var(--fg-a11y-on-accent);
+        --icon-color: var(--fg-a11y-on-accent);
+      }
+    }
+  }
+  .enabled\:hover\:fg-accent-primary-hover {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-hovered], :hover) {
+        color: var(--fg-accent-primary-hover);
+        --icon-color: var(--fg-accent-primary-hover);
+      }
+    }
+  }
+  .enabled\:hover\:fg-info-hover {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-hovered], :hover) {
-        color: var(--color-interactive-hover);
-        --icon-color: var(--color-interactive-hover);
+        color: var(--fg-info-hover);
+        --icon-color: var(--fg-info-hover);
       }
     }
   }
-  .enabled\:hover\:fg-inverse-light {
+  .enabled\:hover\:fg-primary-bold {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-hovered], :hover) {
-        color: var(--color-inverse-light);
-        --icon-color: var(--color-inverse-light);
+        color: var(--fg-primary-bold);
+        --icon-color: var(--fg-primary-bold);
       }
     }
   }
   .enabled\:hover\:outline-interactive-hover {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-hovered], :hover) {
-        outline-color: var(--color-interactive-hover);
+        outline-color: var(--outline-interactive-hover);
+      }
+    }
+  }
+  .enabled\:hover\:group-orientation-horizontal\/tabs\:after\:bg-\[color\:var\(--outline-accent-primary-bold\)\] {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-hovered], :hover) {
+        &:is(:where(.group\/tabs):where([data-orientation="horizontal"]) *) {
+          &::after {
+            content: var(--tw-content);
+            background-color: var(--outline-accent-primary-bold);
+          }
+        }
+      }
+    }
+  }
+  .enabled\:focus\:fg-primary-bold {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-focused], :focus) {
+        color: var(--fg-primary-bold);
+        --icon-color: var(--fg-primary-bold);
+      }
+    }
+  }
+  .enabled\:focus\:group-orientation-horizontal\/tabs\:after\:bg-\[color\:var\(--outline-accent-primary-bold\)\] {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-focused], :focus) {
+        &:is(:where(.group\/tabs):where([data-orientation="horizontal"]) *) {
+          &::after {
+            content: var(--tw-content);
+            background-color: var(--outline-accent-primary-bold);
+          }
+        }
+      }
+    }
+  }
+  .enabled\:focus-visible\:bg-interactive-bold-hover {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-focus-visible], :focus-visible) {
+        background-color: var(--bg-interactive-bold-hover);
+      }
+    }
+  }
+  .enabled\:focus-visible\:bg-interactive-muted-hover {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-focus-visible], :focus-visible) {
+        background-color: var(--bg-interactive-muted-hover);
       }
     }
   }
@@ -3529,26 +3797,42 @@
       }
     }
   }
-  .enabled\:focus-visible\:fg-interactive-hover {
+  .enabled\:focus-visible\:fg-a11y-on-accent {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-focus-visible], :focus-visible) {
+        color: var(--fg-a11y-on-accent);
+        --icon-color: var(--fg-a11y-on-accent);
+      }
+    }
+  }
+  .enabled\:focus-visible\:fg-accent-primary-hover {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-focus-visible], :focus-visible) {
-        color: var(--color-interactive-hover);
-        --icon-color: var(--color-interactive-hover);
+        color: var(--fg-accent-primary-hover);
+        --icon-color: var(--fg-accent-primary-hover);
       }
     }
   }
-  .enabled\:focus-visible\:fg-inverse-light {
+  .enabled\:focus-visible\:fg-info-hover {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-focus-visible], :focus-visible) {
-        color: var(--color-inverse-light);
-        --icon-color: var(--color-inverse-light);
+        color: var(--fg-info-hover);
+        --icon-color: var(--fg-info-hover);
       }
     }
   }
   .enabled\:focus-visible\:outline-interactive-hover {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-focus-visible], :focus-visible) {
-        outline-color: var(--color-interactive-hover);
+        outline-color: var(--outline-interactive-hover);
+      }
+    }
+  }
+  .enabled\:focus-visible\:outline-none {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-focus-visible], :focus-visible) {
+        --tw-outline-style: none;
+        outline-style: none;
       }
     }
   }
@@ -3557,9 +3841,15 @@
       cursor: not-allowed;
     }
   }
+  .disabled\:border-none {
+    &:where([disabled], [data-disabled], :disabled) {
+      --tw-border-style: none;
+      border-style: none;
+    }
+  }
   .disabled\:bg-interactive-disabled {
     &:where([disabled], [data-disabled], :disabled) {
-      background-color: var(--color-interactive-disabled);
+      background-color: var(--bg-interactive-disabled);
     }
   }
   .disabled\:bg-transparent {
@@ -3569,32 +3859,49 @@
   }
   .disabled\:fg-disabled {
     &:where([disabled], [data-disabled], :disabled) {
-      color: var(--color-disabled);
-      --icon-color: var(--color-disabled);
-    }
-  }
-  .disabled\:text-disabled {
-    &:where([disabled], [data-disabled], :disabled) {
-      color: var(--color-disabled);
+      color: var(--fg-disabled);
+      --icon-color: var(--fg-disabled);
     }
   }
   .disabled\:outline-interactive-disabled {
     &:where([disabled], [data-disabled], :disabled) {
-      outline-color: var(--color-interactive-disabled);
+      outline-color: var(--outline-interactive-disabled);
     }
   }
   .disabled\:placeholder\:fg-disabled {
     &:where([disabled], [data-disabled], :disabled) {
       &::placeholder {
-        color: var(--color-disabled);
-        --icon-color: var(--color-disabled);
+        color: var(--fg-disabled);
+        --icon-color: var(--fg-disabled);
       }
     }
   }
-  .disabled\:placeholder\:text-disabled {
+  .disabled\:group-orientation-horizontal\/tabs\:after\:bg-\[color\:var\(--outline-interactive-disabled\)\] {
     &:where([disabled], [data-disabled], :disabled) {
-      &::placeholder {
-        color: var(--color-disabled);
+      &:is(:where(.group\/tabs):where([data-orientation="horizontal"]) *) {
+        &::after {
+          content: var(--tw-content);
+          background-color: var(--outline-interactive-disabled);
+        }
+      }
+    }
+  }
+  .disabled\:hover\:bg-transparent {
+    &:where([disabled], [data-disabled], :disabled) {
+      &:where([data-hovered], :hover) {
+        background-color: transparent;
+      }
+    }
+  }
+  .has-\[\.group\\\\\/sidenav\]\:\[--drawer-main-col-start\:2\] {
+    &:has(*:is(.group\\/sidenav)) {
+      --drawer-main-col-start: 2;
+    }
+  }
+  .disabled\:data-\[drop-target\=true\]\:bg-transparent {
+    &:where([disabled], [data-disabled], :disabled) {
+      &[data-drop-target="true"] {
+        background-color: transparent;
       }
     }
   }
@@ -3638,130 +3945,150 @@
       grid-template-columns: repeat(4, minmax(0, 1fr));
     }
   }
-  .enabled\:color-info\:bg-interactive-default {
+  .enabled\:color-info\:bg-interactive-bold {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-color="info"]) {
-        background-color: var(--color-interactive-default);
+        background-color: var(--bg-interactive-bold);
       }
     }
   }
   .enabled\:color-info\:bg-surface-default {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-color="info"]) {
-        background-color: var(--color-surface-default);
+        background-color: var(--bg-surface-default);
       }
     }
   }
-  .color-info\:enabled\:fg-default-light {
+  .color-info\:enabled\:fg-primary-bold {
     &:where([data-color="info"]) {
       &:where(:not([disabled], [data-disabled]), :enabled) {
-        color: var(--color-default-light);
-        --icon-color: var(--color-default-light);
+        color: var(--fg-primary-bold);
+        --icon-color: var(--fg-primary-bold);
       }
     }
   }
-  .enabled\:color-info\:fg-default-light {
+  .enabled\:color-info\:fg-info-bold {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-color="info"]) {
-        color: var(--color-default-light);
-        --icon-color: var(--color-default-light);
+        color: var(--fg-info-bold);
+        --icon-color: var(--fg-info-bold);
       }
     }
   }
-  .enabled\:color-info\:fg-interactive {
+  .enabled\:color-info\:fg-inverse-bold {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-color="info"]) {
-        color: var(--color-interactive);
-        --icon-color: var(--color-interactive);
+        color: var(--fg-inverse-bold);
+        --icon-color: var(--fg-inverse-bold);
       }
     }
   }
-  .enabled\:color-info\:fg-inverse-light {
+  .enabled\:color-info\:fg-primary-bold {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-color="info"]) {
-        color: var(--color-inverse-light);
-        --icon-color: var(--color-inverse-light);
+        color: var(--fg-primary-bold);
+        --icon-color: var(--fg-primary-bold);
       }
     }
   }
   .enabled\:color-info\:outline-interactive {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-color="info"]) {
-        outline-color: var(--color-interactive);
+        outline-color: var(--outline-interactive);
+      }
+    }
+  }
+  .group-not-visible\/tree-item\:enabled\:color-info\:fg-primary-muted {
+    &:is(:where(.group\/tree-item):not(*:where([data-visible])) *) {
+      &:where(:not([disabled], [data-disabled]), :enabled) {
+        &:where([data-color="info"]) {
+          color: var(--fg-primary-muted);
+          --icon-color: var(--fg-primary-muted);
+        }
+      }
+    }
+  }
+  .group-not-viewable\/tree-item\:enabled\:color-info\:fg-primary-muted {
+    &:is(:where(.group\/tree-item):not(*:where([data-viewable])) *) {
+      &:where(:not([disabled], [data-disabled]), :enabled) {
+        &:where([data-color="info"]) {
+          color: var(--fg-primary-muted);
+          --icon-color: var(--fg-primary-muted);
+        }
       }
     }
   }
-  .color-info\:enabled\:open\:bg-highlight-bold {
+  .color-info\:enabled\:open\:bg-accent-primary-bold {
     &:where([data-color="info"]) {
       &:where(:not([disabled], [data-disabled]), :enabled) {
         &:where([open], [data-open], :open) {
-          background-color: var(--color-highlight-bold);
+          background-color: var(--bg-accent-primary-bold);
         }
       }
     }
   }
-  .color-info\:enabled\:open\:fg-inverse-light {
+  .color-info\:enabled\:open\:fg-a11y-on-accent {
     &:where([data-color="info"]) {
       &:where(:not([disabled], [data-disabled]), :enabled) {
         &:where([open], [data-open], :open) {
-          color: var(--color-inverse-light);
-          --icon-color: var(--color-inverse-light);
+          color: var(--fg-a11y-on-accent);
+          --icon-color: var(--fg-a11y-on-accent);
         }
       }
     }
   }
-  .color-info\:enabled\:hover\:bg-highlight-bold {
+  .color-info\:enabled\:hover\:bg-accent-primary-bold {
     &:where([data-color="info"]) {
       &:where(:not([disabled], [data-disabled]), :enabled) {
         &:where([data-hovered], :hover) {
-          background-color: var(--color-highlight-bold);
+          background-color: var(--bg-accent-primary-bold);
         }
       }
     }
   }
-  .enabled\:hover\:color-info\:bg-highlight-bold {
+  .enabled\:hover\:color-info\:bg-accent-primary-bold {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-hovered], :hover) {
         &:where([data-color="info"]) {
-          background-color: var(--color-highlight-bold);
+          background-color: var(--bg-accent-primary-bold);
         }
       }
     }
   }
-  .enabled\:hover\:color-info\:bg-interactive-hover-dark {
+  .enabled\:hover\:color-info\:bg-interactive-bold-hover {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-hovered], :hover) {
         &:where([data-color="info"]) {
-          background-color: var(--color-interactive-hover-dark);
+          background-color: var(--bg-interactive-bold-hover);
         }
       }
     }
   }
-  .enabled\:hover\:color-info\:bg-interactive-hover-light {
+  .enabled\:hover\:color-info\:bg-interactive-muted-hover {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-hovered], :hover) {
         &:where([data-color="info"]) {
-          background-color: var(--color-interactive-hover-light);
+          background-color: var(--bg-interactive-muted-hover);
         }
       }
     }
   }
-  .color-info\:enabled\:hover\:fg-inverse-light {
+  .color-info\:enabled\:hover\:fg-a11y-on-accent {
     &:where([data-color="info"]) {
       &:where(:not([disabled], [data-disabled]), :enabled) {
         &:where([data-hovered], :hover) {
-          color: var(--color-inverse-light);
-          --icon-color: var(--color-inverse-light);
+          color: var(--fg-a11y-on-accent);
+          --icon-color: var(--fg-a11y-on-accent);
         }
       }
     }
   }
-  .enabled\:hover\:color-info\:fg-interactive-hover {
+  .enabled\:hover\:color-info\:fg-info-hover {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-hovered], :hover) {
         &:where([data-color="info"]) {
-          color: var(--color-interactive-hover);
-          --icon-color: var(--color-interactive-hover);
+          color: var(--fg-info-hover);
+          --icon-color: var(--fg-info-hover);
         }
       }
     }
@@ -3770,63 +4097,63 @@
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-hovered], :hover) {
         &:where([data-color="info"]) {
-          outline-color: var(--color-interactive-hover);
+          outline-color: var(--outline-interactive-hover);
         }
       }
     }
   }
-  .color-info\:enabled\:focus-visible\:bg-highlight-bold {
+  .color-info\:enabled\:focus-visible\:bg-accent-primary-bold {
     &:where([data-color="info"]) {
       &:where(:not([disabled], [data-disabled]), :enabled) {
         &:where([data-focus-visible], :focus-visible) {
-          background-color: var(--color-highlight-bold);
+          background-color: var(--bg-accent-primary-bold);
         }
       }
     }
   }
-  .enabled\:focus-visible\:color-info\:bg-highlight-bold {
+  .enabled\:focus-visible\:color-info\:bg-accent-primary-bold {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-focus-visible], :focus-visible) {
         &:where([data-color="info"]) {
-          background-color: var(--color-highlight-bold);
+          background-color: var(--bg-accent-primary-bold);
         }
       }
     }
   }
-  .enabled\:focus-visible\:color-info\:bg-interactive-hover-dark {
+  .enabled\:focus-visible\:color-info\:bg-interactive-bold-hover {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-focus-visible], :focus-visible) {
         &:where([data-color="info"]) {
-          background-color: var(--color-interactive-hover-dark);
+          background-color: var(--bg-interactive-bold-hover);
         }
       }
     }
   }
-  .enabled\:focus-visible\:color-info\:bg-interactive-hover-light {
+  .enabled\:focus-visible\:color-info\:bg-interactive-muted-hover {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-focus-visible], :focus-visible) {
         &:where([data-color="info"]) {
-          background-color: var(--color-interactive-hover-light);
+          background-color: var(--bg-interactive-muted-hover);
         }
       }
     }
   }
-  .color-info\:enabled\:focus-visible\:fg-inverse-light {
+  .color-info\:enabled\:focus-visible\:fg-a11y-on-accent {
     &:where([data-color="info"]) {
       &:where(:not([disabled], [data-disabled]), :enabled) {
         &:where([data-focus-visible], :focus-visible) {
-          color: var(--color-inverse-light);
-          --icon-color: var(--color-inverse-light);
+          color: var(--fg-a11y-on-accent);
+          --icon-color: var(--fg-a11y-on-accent);
         }
       }
     }
   }
-  .enabled\:focus-visible\:color-info\:fg-interactive-hover {
+  .enabled\:focus-visible\:color-info\:fg-info-hover {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-focus-visible], :focus-visible) {
         &:where([data-color="info"]) {
-          color: var(--color-interactive-hover);
-          --icon-color: var(--color-interactive-hover);
+          color: var(--fg-info-hover);
+          --icon-color: var(--fg-info-hover);
         }
       }
     }
@@ -3835,61 +4162,61 @@
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-focus-visible], :focus-visible) {
         &:where([data-color="info"]) {
-          outline-color: var(--color-interactive-hover);
+          outline-color: var(--outline-interactive-hover);
         }
       }
     }
   }
-  .enabled\:color-serious\:bg-serious {
+  .enabled\:color-serious\:bg-serious-bold {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-color="serious"]) {
-        background-color: var(--color-serious);
+        background-color: var(--bg-serious-bold);
       }
     }
   }
-  .enabled\:color-serious\:bg-serious-subtle {
+  .enabled\:color-serious\:bg-serious-muted {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-color="serious"]) {
-        background-color: var(--color-serious-subtle);
+        background-color: var(--bg-serious-muted);
       }
     }
   }
-  .color-serious\:enabled\:fg-serious {
+  .color-serious\:enabled\:fg-serious-bold {
     &:where([data-color="serious"]) {
       &:where(:not([disabled], [data-disabled]), :enabled) {
-        color: var(--color-serious);
-        --icon-color: var(--color-serious);
+        color: var(--fg-serious-bold);
+        --icon-color: var(--fg-serious-bold);
       }
     }
   }
-  .enabled\:color-serious\:fg-default-light {
+  .enabled\:color-serious\:fg-a11y-on-utility {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-color="serious"]) {
-        color: var(--color-default-light);
-        --icon-color: var(--color-default-light);
+        color: var(--fg-a11y-on-utility);
+        --icon-color: var(--fg-a11y-on-utility);
       }
     }
   }
-  .enabled\:color-serious\:fg-inverse-light {
+  .enabled\:color-serious\:fg-primary-bold {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-color="serious"]) {
-        color: var(--color-inverse-light);
-        --icon-color: var(--color-inverse-light);
+        color: var(--fg-primary-bold);
+        --icon-color: var(--fg-primary-bold);
       }
     }
   }
-  .enabled\:color-serious\:fg-serious {
+  .enabled\:color-serious\:fg-serious-bold {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-color="serious"]) {
-        color: var(--color-serious);
-        --icon-color: var(--color-serious);
+        color: var(--fg-serious-bold);
+        --icon-color: var(--fg-serious-bold);
       }
     }
   }
-  .enabled\:color-serious\:outline-serious {
+  .enabled\:color-serious\:outline-serious-bold {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-color="serious"]) {
-        outline-color: var(--color-serious);
+        outline-color: var(--outline-serious-bold);
       }
     }
   }
@@ -3897,17 +4224,17 @@
     &:where([data-color="serious"]) {
       &:where(:not([disabled], [data-disabled]), :enabled) {
         &:where([open], [data-open], :open) {
-          background-color: var(--color-serious-bold);
+          background-color: var(--bg-serious-bold);
         }
       }
     }
   }
-  .color-serious\:enabled\:open\:fg-inverse-light {
+  .color-serious\:enabled\:open\:fg-a11y-on-utility {
     &:where([data-color="serious"]) {
       &:where(:not([disabled], [data-disabled]), :enabled) {
         &:where([open], [data-open], :open) {
-          color: var(--color-inverse-light);
-          --icon-color: var(--color-inverse-light);
+          color: var(--fg-a11y-on-utility);
+          --icon-color: var(--fg-a11y-on-utility);
         }
       }
     }
@@ -3916,7 +4243,7 @@
     &:where([data-color="serious"]) {
       &:where(:not([disabled], [data-disabled]), :enabled) {
         &:where([data-hovered], :hover) {
-          background-color: var(--color-serious-bold);
+          background-color: var(--bg-serious-bold);
         }
       }
     }
@@ -3925,7 +4252,7 @@
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-hovered], :hover) {
         &:where([data-color="serious"]) {
-          background-color: var(--color-serious-bold);
+          background-color: var(--bg-serious-bold);
         }
       }
     }
@@ -3934,27 +4261,27 @@
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-hovered], :hover) {
         &:where([data-color="serious"]) {
-          background-color: var(--color-serious-hover);
+          background-color: var(--bg-serious-hover);
         }
       }
     }
   }
-  .color-serious\:enabled\:hover\:fg-inverse-light {
+  .color-serious\:enabled\:hover\:fg-a11y-on-utility {
     &:where([data-color="serious"]) {
       &:where(:not([disabled], [data-disabled]), :enabled) {
         &:where([data-hovered], :hover) {
-          color: var(--color-inverse-light);
-          --icon-color: var(--color-inverse-light);
+          color: var(--fg-a11y-on-utility);
+          --icon-color: var(--fg-a11y-on-utility);
         }
       }
     }
   }
-  .enabled\:hover\:color-serious\:fg-interactive-hover {
+  .enabled\:hover\:color-serious\:fg-info-hover {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-hovered], :hover) {
         &:where([data-color="serious"]) {
-          color: var(--color-interactive-hover);
-          --icon-color: var(--color-interactive-hover);
+          color: var(--fg-info-hover);
+          --icon-color: var(--fg-info-hover);
         }
       }
     }
@@ -3963,7 +4290,7 @@
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-hovered], :hover) {
         &:where([data-color="serious"]) {
-          outline-color: var(--color-interactive-hover);
+          outline-color: var(--outline-interactive-hover);
         }
       }
     }
@@ -3972,7 +4299,7 @@
     &:where([data-color="serious"]) {
       &:where(:not([disabled], [data-disabled]), :enabled) {
         &:where([data-focus-visible], :focus-visible) {
-          background-color: var(--color-serious-bold);
+          background-color: var(--bg-serious-bold);
         }
       }
     }
@@ -3981,7 +4308,7 @@
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-focus-visible], :focus-visible) {
         &:where([data-color="serious"]) {
-          background-color: var(--color-serious-bold);
+          background-color: var(--bg-serious-bold);
         }
       }
     }
@@ -3990,27 +4317,27 @@
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-focus-visible], :focus-visible) {
         &:where([data-color="serious"]) {
-          background-color: var(--color-serious-hover);
+          background-color: var(--bg-serious-hover);
         }
       }
     }
   }
-  .color-serious\:enabled\:focus-visible\:fg-inverse-light {
+  .color-serious\:enabled\:focus-visible\:fg-a11y-on-utility {
     &:where([data-color="serious"]) {
       &:where(:not([disabled], [data-disabled]), :enabled) {
         &:where([data-focus-visible], :focus-visible) {
-          color: var(--color-inverse-light);
-          --icon-color: var(--color-inverse-light);
+          color: var(--fg-a11y-on-utility);
+          --icon-color: var(--fg-a11y-on-utility);
         }
       }
     }
   }
-  .enabled\:focus-visible\:color-serious\:fg-interactive-hover {
+  .enabled\:focus-visible\:color-serious\:fg-info-hover {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-focus-visible], :focus-visible) {
         &:where([data-color="serious"]) {
-          color: var(--color-interactive-hover);
-          --icon-color: var(--color-interactive-hover);
+          color: var(--fg-info-hover);
+          --icon-color: var(--fg-info-hover);
         }
       }
     }
@@ -4019,45 +4346,53 @@
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-focus-visible], :focus-visible) {
         &:where([data-color="serious"]) {
-          outline-color: var(--color-interactive-hover);
+          outline-color: var(--outline-interactive-hover);
         }
       }
     }
   }
-  .enabled\:color-critical\:bg-critical {
+  .enabled\:color-critical\:bg-critical-bold {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-color="critical"]) {
-        background-color: var(--color-critical);
+        background-color: var(--bg-critical-bold);
       }
     }
   }
-  .enabled\:color-critical\:bg-critical-subtle {
+  .enabled\:color-critical\:bg-critical-muted {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-color="critical"]) {
-        background-color: var(--color-critical-subtle);
+        background-color: var(--bg-critical-muted);
       }
     }
   }
-  .enabled\:color-critical\:fg-critical {
+  .enabled\:color-critical\:fg-a11y-on-utility {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-color="critical"]) {
-        color: var(--color-critical);
-        --icon-color: var(--color-critical);
+        color: var(--fg-a11y-on-utility);
+        --icon-color: var(--fg-a11y-on-utility);
       }
     }
   }
-  .enabled\:color-critical\:fg-default-light {
+  .enabled\:color-critical\:fg-critical-bold {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-color="critical"]) {
-        color: var(--color-default-light);
-        --icon-color: var(--color-default-light);
+        color: var(--fg-critical-bold);
+        --icon-color: var(--fg-critical-bold);
       }
     }
   }
-  .enabled\:color-critical\:outline-critical {
+  .enabled\:color-critical\:fg-primary-bold {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-color="critical"]) {
-        outline-color: var(--color-critical);
+        color: var(--fg-primary-bold);
+        --icon-color: var(--fg-primary-bold);
+      }
+    }
+  }
+  .enabled\:color-critical\:outline-critical-bold {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-color="critical"]) {
+        outline-color: var(--outline-critical-bold);
       }
     }
   }
@@ -4065,17 +4400,17 @@
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-hovered], :hover) {
         &:where([data-color="critical"]) {
-          background-color: var(--color-critical-hover);
+          background-color: var(--bg-critical-hover);
         }
       }
     }
   }
-  .enabled\:hover\:color-critical\:fg-interactive-hover {
+  .enabled\:hover\:color-critical\:fg-info-hover {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-hovered], :hover) {
         &:where([data-color="critical"]) {
-          color: var(--color-interactive-hover);
-          --icon-color: var(--color-interactive-hover);
+          color: var(--fg-info-hover);
+          --icon-color: var(--fg-info-hover);
         }
       }
     }
@@ -4084,7 +4419,7 @@
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-hovered], :hover) {
         &:where([data-color="critical"]) {
-          outline-color: var(--color-interactive-hover);
+          outline-color: var(--outline-interactive-hover);
         }
       }
     }
@@ -4093,17 +4428,17 @@
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-focus-visible], :focus-visible) {
         &:where([data-color="critical"]) {
-          background-color: var(--color-critical-hover);
+          background-color: var(--bg-critical-hover);
         }
       }
     }
   }
-  .enabled\:focus-visible\:color-critical\:fg-interactive-hover {
+  .enabled\:focus-visible\:color-critical\:fg-info-hover {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-focus-visible], :focus-visible) {
         &:where([data-color="critical"]) {
-          color: var(--color-interactive-hover);
-          --icon-color: var(--color-interactive-hover);
+          color: var(--fg-info-hover);
+          --icon-color: var(--fg-info-hover);
         }
       }
     }
@@ -4112,7 +4447,7 @@
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-focus-visible], :focus-visible) {
         &:where([data-color="critical"]) {
-          outline-color: var(--color-interactive-hover);
+          outline-color: var(--outline-interactive-hover);
         }
       }
     }
@@ -4325,6 +4660,11 @@
       }
     }
   }
+  .size-large\:h-xxl {
+    &:where([data-size="large"]) {
+      height: var(--spacing-xxl);
+    }
+  }
   .size-large\:gap-xs {
     &:where([data-size="large"]) {
       gap: var(--spacing-xs);
@@ -4364,6 +4704,11 @@
       height: 32px;
     }
   }
+  .size-medium\:min-h-xl {
+    &:where([data-size="medium"]) {
+      min-height: var(--spacing-xl);
+    }
+  }
   .size-medium\:gap-xs {
     &:where([data-size="medium"]) {
       gap: var(--spacing-xs);
@@ -4442,6 +4787,11 @@
       height: var(--spacing-xl);
     }
   }
+  .size-small\:min-h-l {
+    &:where([data-size="small"]) {
+      min-height: var(--spacing-l);
+    }
+  }
   .size-small\:gap-xxs {
     &:where([data-size="small"]) {
       gap: var(--spacing-xxs);
@@ -4615,9 +4965,9 @@
       border-radius: var(--radius-large);
     }
   }
-  .layout-stack\:bg-transparent-light {
+  .layout-stack\:bg-interactive-disabled {
     &:where([data-layout="stack"]) {
-      background-color: var(--color-transparent-light);
+      background-color: var(--bg-interactive-disabled);
     }
   }
   .layout-stack\:px-l {
@@ -4693,9 +5043,9 @@
       flex-direction: column;
     }
   }
-  .orientation-vertical\:gap-xs {
+  .orientation-vertical\:flex-row {
     &:where([data-orientation="vertical"]) {
-      gap: var(--spacing-xs);
+      flex-direction: row;
     }
   }
   .orientation-vertical\:layout-grid\:grid-cols-\[auto_auto_auto\] {
@@ -4719,22 +5069,56 @@
       }
     }
   }
-  .focus-visible-within\:outline-highlight {
+  .closed\:items-center {
+    &:where(:not([open], [data-open], :open)) {
+      align-items: center;
+    }
+  }
+  .focus-visible-within\:outline-accent-primary-bold {
     &:where(:has([data-focus-visible], :focus-visible)) {
-      outline-color: var(--color-highlight);
+      outline-color: var(--outline-accent-primary-bold);
     }
   }
-  .group-enabled\/accordion\:focus-visible-within\:bg-interactive-hover-dark {
+  .group-enabled\/accordion\:focus-visible-within\:bg-interactive-muted-hover {
     &:is(:where(.group\/accordion):where(:not([disabled], [data-disabled]), :enabled) *) {
       &:where(:has([data-focus-visible], :focus-visible)) {
-        background-color: var(--color-interactive-hover-dark);
+        background-color: var(--bg-interactive-muted-hover);
       }
     }
   }
-  .group-enabled\/combobox-field\:focus-visible-within\:outline-highlight {
+  .group-enabled\/combobox-field\:focus-visible-within\:outline-accent-primary-bold {
     &:is(:where(.group\/combobox-field):where(:not([disabled], [data-disabled]), :enabled) *) {
       &:where(:has([data-focus-visible], :focus-visible)) {
-        outline-color: var(--color-highlight);
+        outline-color: var(--outline-accent-primary-bold);
+      }
+    }
+  }
+  .enabled\:pressed\:bg-accent-primary-pressed {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-pressed], :active) {
+        background-color: var(--bg-accent-primary-pressed);
+      }
+    }
+  }
+  .enabled\:pressed\:bg-interactive-bold-pressed {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-pressed], :active) {
+        background-color: var(--bg-interactive-bold-pressed);
+      }
+    }
+  }
+  .enabled\:pressed\:bg-interactive-muted-pressed {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-pressed], :active) {
+        background-color: var(--bg-interactive-muted-pressed);
+      }
+    }
+  }
+  .enabled\:pressed\:fg-accent-primary-pressed {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-pressed], :active) {
+        color: var(--fg-accent-primary-pressed);
+        --icon-color: var(--fg-accent-primary-pressed);
       }
     }
   }
@@ -4743,50 +5127,78 @@
       cursor: default;
     }
   }
-  .selected\:bg-highlight-subtle {
+  .selected\:bg-accent-primary-muted {
     &:where([data-selected], :checked) {
-      background-color: var(--color-highlight-subtle);
+      background-color: var(--bg-accent-primary-muted);
     }
   }
-  .selected\:fg-highlight {
+  .selected\:fg-accent-primary-bold {
     &:where([data-selected], :checked) {
-      color: var(--color-highlight);
-      --icon-color: var(--color-highlight);
+      color: var(--fg-accent-primary-bold);
+      --icon-color: var(--fg-accent-primary-bold);
     }
   }
-  .selected\:outline-highlight {
+  .selected\:outline-accent-primary-bold {
     &:where([data-selected], :checked) {
-      outline-color: var(--color-highlight);
+      outline-color: var(--outline-accent-primary-bold);
+    }
+  }
+  .enabled\:selected\:bg-accent-primary-bold {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-selected], :checked) {
+        background-color: var(--bg-accent-primary-bold);
+      }
+    }
+  }
+  .enabled\:selected\:bg-accent-primary-muted {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-selected], :checked) {
+        background-color: var(--bg-accent-primary-muted);
+      }
+    }
+  }
+  .enabled\:selected\:fg-accent-primary-bold {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-selected], :checked) {
+        color: var(--fg-accent-primary-bold);
+        --icon-color: var(--fg-accent-primary-bold);
+      }
     }
   }
-  .enabled\:selected\:bg-highlight-subtle {
+  .enabled\:selected\:outline-accent-primary-bold {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-selected], :checked) {
-        background-color: var(--color-highlight-subtle);
+        outline-color: var(--outline-accent-primary-bold);
       }
     }
   }
-  .enabled\:selected\:fg-highlight {
+  .enabled\:selected\:group-orientation-horizontal\/tabs\:after\:bg-\[color\:var\(--outline-accent-primary-bold\)\] {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-selected], :checked) {
-        color: var(--color-highlight);
-        --icon-color: var(--color-highlight);
+        &:is(:where(.group\/tabs):where([data-orientation="horizontal"]) *) {
+          &::after {
+            content: var(--tw-content);
+            background-color: var(--outline-accent-primary-bold);
+          }
+        }
       }
     }
   }
-  .enabled\:selected\:outline-highlight {
+  .enabled\:selected\:hover\:bg-accent-primary-hover {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-selected], :checked) {
-        outline-color: var(--color-highlight);
+        &:where([data-hovered], :hover) {
+          background-color: var(--bg-accent-primary-hover);
+        }
       }
     }
   }
-  .enabled\:selected\:hover\:fg-highlight {
+  .enabled\:selected\:hover\:fg-accent-primary-bold {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-selected], :checked) {
         &:where([data-hovered], :hover) {
-          color: var(--color-highlight);
-          --icon-color: var(--color-highlight);
+          color: var(--fg-accent-primary-bold);
+          --icon-color: var(--fg-accent-primary-bold);
         }
       }
     }
@@ -4795,17 +5207,64 @@
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-selected], :checked) {
         &:where([data-hovered], :hover) {
-          outline-color: var(--color-interactive-hover);
+          outline-color: var(--outline-interactive-hover);
+        }
+      }
+    }
+  }
+  .enabled\:selected\:hover\:group-orientation-horizontal\/tabs\:after\:bg-\[color\:var\(--outline-accent-primary-bold\)\] {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-selected], :checked) {
+        &:where([data-hovered], :hover) {
+          &:is(:where(.group\/tabs):where([data-orientation="horizontal"]) *) {
+            &::after {
+              content: var(--tw-content);
+              background-color: var(--outline-accent-primary-bold);
+            }
+          }
+        }
+      }
+    }
+  }
+  .enabled\:selected\:focus\:fg-accent-primary-bold {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-selected], :checked) {
+        &:where([data-focused], :focus) {
+          color: var(--fg-accent-primary-bold);
+          --icon-color: var(--fg-accent-primary-bold);
+        }
+      }
+    }
+  }
+  .enabled\:selected\:focus\:group-orientation-horizontal\/tabs\:after\:bg-\[color\:var\(--outline-accent-primary-bold\)\] {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-selected], :checked) {
+        &:where([data-focused], :focus) {
+          &:is(:where(.group\/tabs):where([data-orientation="horizontal"]) *) {
+            &::after {
+              content: var(--tw-content);
+              background-color: var(--outline-accent-primary-bold);
+            }
+          }
+        }
+      }
+    }
+  }
+  .enabled\:selected\:focus-visible\:bg-accent-primary-hover {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-selected], :checked) {
+        &:where([data-focus-visible], :focus-visible) {
+          background-color: var(--bg-accent-primary-hover);
         }
       }
     }
   }
-  .enabled\:selected\:focus-visible\:fg-highlight {
+  .enabled\:selected\:focus-visible\:fg-accent-primary-bold {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-selected], :checked) {
         &:where([data-focus-visible], :focus-visible) {
-          color: var(--color-highlight);
-          --icon-color: var(--color-highlight);
+          color: var(--fg-accent-primary-bold);
+          --icon-color: var(--fg-accent-primary-bold);
         }
       }
     }
@@ -4814,7 +5273,7 @@
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-selected], :checked) {
         &:where([data-focus-visible], :focus-visible) {
-          outline-color: var(--color-interactive-hover);
+          outline-color: var(--outline-interactive-hover);
         }
       }
     }
@@ -4822,53 +5281,53 @@
   .disabled\:selected\:bg-interactive-disabled {
     &:where([disabled], [data-disabled], :disabled) {
       &:where([data-selected], :checked) {
-        background-color: var(--color-interactive-disabled);
+        background-color: var(--bg-interactive-disabled);
       }
     }
   }
-  .color-info\:enabled\:selected\:bg-highlight-bold {
+  .color-info\:enabled\:selected\:bg-accent-primary-bold {
     &:where([data-color="info"]) {
       &:where(:not([disabled], [data-disabled]), :enabled) {
         &:where([data-selected], :checked) {
-          background-color: var(--color-highlight-bold);
+          background-color: var(--bg-accent-primary-bold);
         }
       }
     }
   }
-  .enabled\:selected\:color-info\:bg-info-subtle {
+  .enabled\:selected\:color-info\:bg-info-muted {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-selected], :checked) {
         &:where([data-color="info"]) {
-          background-color: var(--color-info-subtle);
+          background-color: var(--bg-info-muted);
         }
       }
     }
   }
-  .color-info\:enabled\:selected\:fg-inverse-light {
+  .color-info\:enabled\:selected\:fg-a11y-on-accent {
     &:where([data-color="info"]) {
       &:where(:not([disabled], [data-disabled]), :enabled) {
         &:where([data-selected], :checked) {
-          color: var(--color-inverse-light);
-          --icon-color: var(--color-inverse-light);
+          color: var(--fg-a11y-on-accent);
+          --icon-color: var(--fg-a11y-on-accent);
         }
       }
     }
   }
-  .enabled\:selected\:color-info\:outline-highlight {
+  .enabled\:selected\:color-info\:outline-accent-primary-bold {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-selected], :checked) {
         &:where([data-color="info"]) {
-          outline-color: var(--color-highlight);
+          outline-color: var(--outline-accent-primary-bold);
         }
       }
     }
   }
-  .enabled\:selected\:hover\:color-info\:bg-interactive-hover-light {
+  .enabled\:selected\:hover\:color-info\:bg-interactive-bold-hover {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-selected], :checked) {
         &:where([data-hovered], :hover) {
           &:where([data-color="info"]) {
-            background-color: var(--color-interactive-hover-light);
+            background-color: var(--bg-interactive-bold-hover);
           }
         }
       }
@@ -4879,18 +5338,18 @@
       &:where([data-selected], :checked) {
         &:where([data-hovered], :hover) {
           &:where([data-color="info"]) {
-            outline-color: var(--color-interactive-hover);
+            outline-color: var(--outline-interactive-hover);
           }
         }
       }
     }
   }
-  .enabled\:selected\:focus-visible\:color-info\:bg-interactive-hover-light {
+  .enabled\:selected\:focus-visible\:color-info\:bg-interactive-bold-hover {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-selected], :checked) {
         &:where([data-focus-visible], :focus-visible) {
           &:where([data-color="info"]) {
-            background-color: var(--color-interactive-hover-light);
+            background-color: var(--bg-interactive-bold-hover);
           }
         }
       }
@@ -4901,7 +5360,7 @@
       &:where([data-selected], :checked) {
         &:where([data-focus-visible], :focus-visible) {
           &:where([data-color="info"]) {
-            outline-color: var(--color-interactive-hover);
+            outline-color: var(--outline-interactive-hover);
           }
         }
       }
@@ -4911,35 +5370,35 @@
     &:where([data-color="serious"]) {
       &:where(:not([disabled], [data-disabled]), :enabled) {
         &:where([data-selected], :checked) {
-          background-color: var(--color-serious-bold);
+          background-color: var(--bg-serious-bold);
         }
       }
     }
   }
-  .enabled\:selected\:color-serious\:bg-serious-subtle {
+  .enabled\:selected\:color-serious\:bg-serious-muted {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-selected], :checked) {
         &:where([data-color="serious"]) {
-          background-color: var(--color-serious-subtle);
+          background-color: var(--bg-serious-muted);
         }
       }
     }
   }
-  .color-serious\:enabled\:selected\:fg-inverse-light {
+  .color-serious\:enabled\:selected\:fg-a11y-on-utility {
     &:where([data-color="serious"]) {
       &:where(:not([disabled], [data-disabled]), :enabled) {
         &:where([data-selected], :checked) {
-          color: var(--color-inverse-light);
-          --icon-color: var(--color-inverse-light);
+          color: var(--fg-a11y-on-utility);
+          --icon-color: var(--fg-a11y-on-utility);
         }
       }
     }
   }
-  .enabled\:selected\:color-serious\:outline-highlight {
+  .enabled\:selected\:color-serious\:outline-accent-primary-bold {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-selected], :checked) {
         &:where([data-color="serious"]) {
-          outline-color: var(--color-highlight);
+          outline-color: var(--outline-accent-primary-bold);
         }
       }
     }
@@ -4949,7 +5408,7 @@
       &:where([data-selected], :checked) {
         &:where([data-hovered], :hover) {
           &:where([data-color="serious"]) {
-            background-color: var(--color-serious-hover);
+            background-color: var(--bg-serious-hover);
           }
         }
       }
@@ -4960,7 +5419,7 @@
       &:where([data-selected], :checked) {
         &:where([data-hovered], :hover) {
           &:where([data-color="serious"]) {
-            outline-color: var(--color-interactive-hover);
+            outline-color: var(--outline-interactive-hover);
           }
         }
       }
@@ -4971,7 +5430,7 @@
       &:where([data-selected], :checked) {
         &:where([data-focus-visible], :focus-visible) {
           &:where([data-color="serious"]) {
-            background-color: var(--color-serious-hover);
+            background-color: var(--bg-serious-hover);
           }
         }
       }
@@ -4982,26 +5441,26 @@
       &:where([data-selected], :checked) {
         &:where([data-focus-visible], :focus-visible) {
           &:where([data-color="serious"]) {
-            outline-color: var(--color-interactive-hover);
+            outline-color: var(--outline-interactive-hover);
           }
         }
       }
     }
   }
-  .enabled\:selected\:color-critical\:bg-critical-subtle {
+  .enabled\:selected\:color-critical\:bg-critical-muted {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-selected], :checked) {
         &:where([data-color="critical"]) {
-          background-color: var(--color-critical-subtle);
+          background-color: var(--bg-critical-muted);
         }
       }
     }
   }
-  .enabled\:selected\:color-critical\:outline-highlight {
+  .enabled\:selected\:color-critical\:outline-accent-primary-bold {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-selected], :checked) {
         &:where([data-color="critical"]) {
-          outline-color: var(--color-highlight);
+          outline-color: var(--outline-accent-primary-bold);
         }
       }
     }
@@ -5011,7 +5470,7 @@
       &:where([data-selected], :checked) {
         &:where([data-hovered], :hover) {
           &:where([data-color="critical"]) {
-            background-color: var(--color-critical-hover);
+            background-color: var(--bg-critical-hover);
           }
         }
       }
@@ -5022,7 +5481,7 @@
       &:where([data-selected], :checked) {
         &:where([data-hovered], :hover) {
           &:where([data-color="critical"]) {
-            outline-color: var(--color-interactive-hover);
+            outline-color: var(--outline-interactive-hover);
           }
         }
       }
@@ -5033,7 +5492,7 @@
       &:where([data-selected], :checked) {
         &:where([data-focus-visible], :focus-visible) {
           &:where([data-color="critical"]) {
-            background-color: var(--color-critical-hover);
+            background-color: var(--bg-critical-hover);
           }
         }
       }
@@ -5044,12 +5503,52 @@
       &:where([data-selected], :checked) {
         &:where([data-focus-visible], :focus-visible) {
           &:where([data-color="critical"]) {
-            outline-color: var(--color-interactive-hover);
+            outline-color: var(--outline-interactive-hover);
           }
         }
       }
     }
   }
+  .enabled\:selected\:pressed\:bg-accent-primary-pressed {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-selected], :checked) {
+        &:where([data-pressed], :active) {
+          background-color: var(--bg-accent-primary-pressed);
+        }
+      }
+    }
+  }
+  .drop-target\:border {
+    &:where([data-drop-target]) {
+      border-style: var(--tw-border-style);
+      border-width: 1px;
+    }
+  }
+  .drop-target\:outline-accent-primary-bold {
+    &:where([data-drop-target]) {
+      outline-color: var(--outline-accent-primary-bold);
+    }
+  }
+  .light\:fg-primary-bold {
+    &:where(.light, .light *, [data-theme="light"], [data-theme="light"] *) {
+      color: var(--fg-primary-bold);
+      --icon-color: var(--fg-primary-bold);
+    }
+  }
+  .sudo\:fg-primary-muted {
+    && {
+      color: var(--fg-primary-muted);
+      --icon-color: var(--fg-primary-muted);
+    }
+  }
+  .sudo\:hover\:fg-primary-bold {
+    && {
+      &:where([data-hovered], :hover) {
+        color: var(--fg-primary-bold);
+        --icon-color: var(--fg-primary-bold);
+      }
+    }
+  }
   .\[\&_span\]\:pl-s {
     & span {
       padding-left: var(--spacing-s);
@@ -5068,7 +5567,6 @@
   .\[\&\:empty\]\:before\:content-\[\'CUI\'\] {
     &:empty {
       &::before {
-        content: var(--tw-content);
         --tw-content: 'CUI';
         content: var(--tw-content);
       }
@@ -5077,7 +5575,6 @@
   .\[\&\:empty\]\:before\:content-\[\'Confidential\'\] {
     &:empty {
       &::before {
-        content: var(--tw-content);
         --tw-content: 'Confidential';
         content: var(--tw-content);
       }
@@ -5086,7 +5583,6 @@
   .\[\&\:empty\]\:before\:content-\[\'Missing\'\] {
     &:empty {
       &::before {
-        content: var(--tw-content);
         --tw-content: 'Missing';
         content: var(--tw-content);
       }
@@ -5095,7 +5591,6 @@
   .\[\&\:empty\]\:before\:content-\[\'Secret\'\] {
     &:empty {
       &::before {
-        content: var(--tw-content);
         --tw-content: 'Secret';
         content: var(--tw-content);
       }
@@ -5104,7 +5599,6 @@
   .\[\&\:empty\]\:before\:content-\[\'TS\/SCI\'\] {
     &:empty {
       &::before {
-        content: var(--tw-content);
         --tw-content: 'TS/SCI';
         content: var(--tw-content);
       }
@@ -5113,7 +5607,6 @@
   .\[\&\:empty\]\:before\:content-\[\'Top_Secret\'\] {
     &:empty {
       &::before {
-        content: var(--tw-content);
         --tw-content: 'Top Secret';
         content: var(--tw-content);
       }
@@ -5122,7 +5615,6 @@
   .\[\&\:empty\]\:before\:content-\[\'Top_Secret\/SCI\'\] {
     &:empty {
       &::before {
-        content: var(--tw-content);
         --tw-content: 'Top Secret/SCI';
         content: var(--tw-content);
       }
@@ -5131,15 +5623,14 @@
   .\[\&\:empty\]\:before\:content-\[\'Unclassified\'\] {
     &:empty {
       &::before {
-        content: var(--tw-content);
         --tw-content: 'Unclassified';
         content: var(--tw-content);
       }
     }
   }
-  .\[\&\:nth-child\(3n\)\]\:bg-default-dark {
+  .\[\&\:nth-child\(3n\)\]\:bg-info-bold {
     &:nth-child(3n) {
-      background-color: var(--color-default-dark);
+      background-color: var(--bg-info-bold);
     }
   }
   .\[\&\>\*\]\:pointer-events-auto {
@@ -5152,44 +5643,6 @@
       margin-block: var(--spacing-s);
     }
   }
-  .\[\&\>\*\]\:p-s {
-    &>* {
-      padding: var(--spacing-s);
-    }
-  }
-  .\[\&\>\*\]\:p-xs {
-    &>* {
-      padding: var(--spacing-xs);
-    }
-  }
-  .\[\&\>\*\]\:text-header-m {
-    &>* {
-      font-size: var(--typography-header-m-size);
-      font-weight: 500;
-      letter-spacing: var(--typography-header-m-spacing);
-      line-height: var(--typography-header-m-height);
-    }
-  }
-  .\[\&\>\*\]\:leading-\[0\] {
-    &>* {
-      --tw-leading: 0;
-      line-height: 0;
-    }
-  }
-  .orientation-horizontal\:\[\&\>\*\]\:pr-s {
-    &:where([data-orientation="horizontal"]) {
-      &>* {
-        padding-right: var(--spacing-s);
-      }
-    }
-  }
-  .orientation-horizontal\:\[\&\>\*\]\:pl-s {
-    &:where([data-orientation="horizontal"]) {
-      &>* {
-        padding-left: var(--spacing-s);
-      }
-    }
-  }
   .\[\&\[data-placement\]\]\:absolute {
     &[data-placement] {
       position: absolute;
@@ -5197,69 +5650,123 @@
   }
 }
 :root {
-  --colors-neutral-10: #0b0b0b;
-  --colors-neutral-11: #FF0000;
-  --colors-neutral-01: #ffffff;
-  --colors-neutral-02: #e6e6e6;
-  --colors-neutral-03: #898989;
-  --colors-neutral-04: #686868;
-  --colors-neutral-05: #565656;
-  --colors-neutral-06: #424242;
-  --colors-neutral-07: #383838;
-  --colors-neutral-08: #2f2f31;
-  --colors-neutral-09: #222222;
-  --colors-alpha-black-01: rgba(0, 0, 0, 0.08);
-  --colors-alpha-black-02: rgba(0, 0, 0, 0.4);
-  --colors-alpha-black-03: rgba(0, 0, 0, 0.8);
-  --colors-alpha-white-01: rgba(255, 255, 255, 0.08);
-  --colors-alpha-white-02: rgba(255, 255, 255, 0.4);
-  --colors-alpha-white-03: rgba(255, 255, 255, 0.8);
-  --colors-highlight-primary-01: #c9fdef;
-  --colors-highlight-primary-02: #7df9d8;
-  --colors-highlight-primary-03: #28f5be;
-  --colors-highlight-primary-04: #189372;
-  --colors-highlight-primary-05: #0a3d30;
-  --colors-highlight-secondary-01: #c9f6fd;
-  --colors-highlight-secondary-02: #7ee9f9;
-  --colors-highlight-secondary-03: #28dcf5;
-  --colors-highlight-secondary-04: #188493;
-  --colors-highlight-secondary-05: #0a373d;
-  --colors-highlight-tertiary-01: #f9c5e2;
-  --colors-highlight-tertiary-02: #f174b9;
-  --colors-highlight-tertiary-03: #e8178a;
-  --colors-highlight-tertiary-04: #8a0e53;
-  --colors-highlight-tertiary-05: #3a0623;
-  --colors-utility-info-01: #e6e6e6;
-  --colors-utility-info-02: #898989;
-  --colors-utility-info-03: #686868;
-  --colors-utility-info-04: #424244;
-  --colors-utility-info-05: #222222;
-  --colors-utility-advisory-01: #e0edff;
-  --colors-utility-advisory-02: #a1caff;
-  --colors-utility-advisory-03: #62a6ff;
-  --colors-utility-advisory-04: #3a6499;
-  --colors-utility-advisory-05: #142133;
-  --colors-utility-normal-01: #d6f6e5;
-  --colors-utility-normal-02: #82e4b2;
-  --colors-utility-normal-03: #30d27e;
-  --colors-utility-normal-04: #1c7e4c;
-  --colors-utility-normal-05: #0a2a19;
-  --colors-utility-serious-01: #feedcc;
-  --colors-utility-serious-02: #fdc865;
-  --colors-utility-serious-03: #fca400;
-  --colors-utility-serious-04: #976201;
-  --colors-utility-serious-05: #322100;
-  --colors-utility-critical-01: #f6d3d2;
-  --colors-utility-critical-02: #e57b77;
-  --colors-utility-critical-03: #d4231d;
-  --colors-utility-critical-04: #7f1511;
-  --colors-utility-critical-05: #2a0706;
-  --colors-classification-unclass: #007A33;
-  --colors-classification-cui: #502b85;
-  --colors-classification-confidential: #0033a0;
-  --colors-classification-secret: #c8102e;
-  --colors-classification-top-secret: #ff8c00;
-  --colors-classification-ts-sci: #fce83a;
+  --primitive-neutral-50: #ffffff;
+  --primitive-neutral-100: #eff1f2;
+  --primitive-neutral-200: #d5d7d9;
+  --primitive-neutral-300: #c3c5c7;
+  --primitive-neutral-400: #888a8f;
+  --primitive-neutral-500: #565759;
+  --primitive-neutral-600: #414245;
+  --primitive-neutral-700: #2f2f31;
+  --primitive-neutral-800: #212223;
+  --primitive-neutral-900: #151517;
+  --primitive-neutral-950: #000000;
+  --primitive-alpha-black-100: rgba(0, 0, 0, 0.08);
+  --primitive-alpha-black-200: rgba(0, 0, 0, 0.16);
+  --primitive-alpha-black-300: rgba(0, 0, 0, 0.24);
+  --primitive-alpha-black-400: rgba(0, 0, 0, 0.40);
+  --primitive-alpha-black-500: rgba(0, 0, 0, 0.80);
+  --primitive-alpha-white-100: rgba(255, 255, 255, 0.08);
+  --primitive-alpha-white-200: rgba(255, 255, 255, 0.16);
+  --primitive-alpha-white-300: rgba(255, 255, 255, 0.24);
+  --primitive-alpha-white-400: rgba(255, 255, 255, 0.40);
+  --primitive-alpha-white-500: rgba(255, 255, 255, 0.80);
+  --primitive-accent-primary-50: #d5f2fe;
+  --primitive-accent-primary-100: #b1e9ff;
+  --primitive-accent-primary-200: #6ed1ff;
+  --primitive-accent-primary-300: #39b7fa;
+  --primitive-accent-primary-400: #009cde;
+  --primitive-accent-primary-500: #008fd0;
+  --primitive-accent-primary-600: #0068a1;
+  --primitive-accent-primary-700: #004f7e;
+  --primitive-accent-primary-800: #00213e;
+  --primitive-accent-primary-900: #000e22;
+  --primitive-accent-secondary-50: #c9f6fd;
+  --primitive-accent-secondary-100: #97f1ff;
+  --primitive-accent-secondary-200: #54e5f9;
+  --primitive-accent-secondary-300: #22d5ed;
+  --primitive-accent-secondary-400: #22b4c9;
+  --primitive-accent-secondary-500: #188493;
+  --primitive-accent-secondary-600: #146974;
+  --primitive-accent-secondary-700: #0e474e;
+  --primitive-accent-secondary-800: #083035;
+  --primitive-accent-secondary-900: #051e21;
+  --primitive-accent-tertiary-50: #f9c5e2;
+  --primitive-accent-tertiary-100: #f49acc;
+  --primitive-accent-tertiary-200: #f06ab3;
+  --primitive-accent-tertiary-300: #e8178a;
+  --primitive-accent-tertiary-400: #b90d6c;
+  --primitive-accent-tertiary-500: #8a0e53;
+  --primitive-accent-tertiary-600: #6f0b43;
+  --primitive-accent-tertiary-700: #4c082e;
+  --primitive-accent-tertiary-800: #3a0623;
+  --primitive-accent-tertiary-900: #270417;
+  --primitive-utility-info-50: #ffffff;
+  --primitive-utility-info-100: #eff1f2;
+  --primitive-utility-info-200: #d5d7d9;
+  --primitive-utility-info-300: #c3c5c7;
+  --primitive-utility-info-400: #888a8f;
+  --primitive-utility-info-500: #565759;
+  --primitive-utility-info-600: #414245;
+  --primitive-utility-info-700: #2f2f31;
+  --primitive-utility-info-800: #212223;
+  --primitive-utility-info-900: #151517;
+  --primitive-utility-advisory-50: #ebf4ff;
+  --primitive-utility-advisory-100: #c4deff;
+  --primitive-utility-advisory-200: #a9ceff;
+  --primitive-utility-advisory-300: #8bbdff;
+  --primitive-utility-advisory-400: #62a6ff;
+  --primitive-utility-advisory-500: #4e88da;
+  --primitive-utility-advisory-600: #3c67a0;
+  --primitive-utility-advisory-700: #264062;
+  --primitive-utility-advisory-800: #1a2c43;
+  --primitive-utility-advisory-900: #0e1825;
+  --primitive-utility-normal-50: #eefbef;
+  --primitive-utility-normal-100: #c2f5c5;
+  --primitive-utility-normal-200: #86e98c;
+  --primitive-utility-normal-300: #47d750;
+  --primitive-utility-normal-400: #2bbf35;
+  --primitive-utility-normal-500: #26a12e;
+  --primitive-utility-normal-600: #1c7e23;
+  --primitive-utility-normal-700: #145718;
+  --primitive-utility-normal-800: #0e3b11;
+  --primitive-utility-normal-900: #08210a;
+  --primitive-utility-serious-50: #fff8eb;
+  --primitive-utility-serious-100: #ffeac2;
+  --primitive-utility-serious-200: #ffd382;
+  --primitive-utility-serious-300: #ffc14c;
+  --primitive-utility-serious-400: #fbab16;
+  --primitive-utility-serious-500: #e89906;
+  --primitive-utility-serious-600: #bb7a00;
+  --primitive-utility-serious-700: #8e5d00;
+  --primitive-utility-serious-800: #634101;
+  --primitive-utility-serious-900: #291b00;
+  --primitive-utility-critical-50: #ffebea;
+  --primitive-utility-critical-100: #ffc4c2;
+  --primitive-utility-critical-200: #ff9390;
+  --primitive-utility-critical-300: #ff6d68;
+  --primitive-utility-critical-400: #ff2e27;
+  --primitive-utility-critical-500: #d40b04;
+  --primitive-utility-critical-600: #a10701;
+  --primitive-utility-critical-700: #790501;
+  --primitive-utility-critical-800: #540300;
+  --primitive-utility-critical-900: #290200;
+  --primitive-roe-id-pending: #404040;
+  --primitive-roe-id-friend: #1484f4;
+  --primitive-roe-id-assumed-friend: #0e8f37;
+  --primitive-roe-id-neutral: #5b137a;
+  --primitive-roe-id-unknown: #edda0a;
+  --primitive-roe-id-suspect: #ffad38;
+  --primitive-roe-id-hostile: #ff0033;
+  --primitive-roe-id-no-statement: #404040;
+  --primitive-classification-missing: #0b0b0b;
+  --primitive-classification-unclass: #007A33;
+  --primitive-classification-cui: #502b85;
+  --primitive-classification-confidential: #0033a0;
+  --primitive-classification-secret: #c8102e;
+  --primitive-classification-top-secret: #ff8c00;
+  --primitive-classification-ts-sci: #fce83a;
+  --primitive-on-accent: #FFFFFF;
   --typography-header-xxl-size: 32px;
   --typography-header-xxl-height: 40px;
   --typography-header-xxl-spacing: 0px;
@@ -5321,8 +5828,10 @@
   --radius-large: 8px;
   --radius-round: 80px;
   --shadow-elevation-default: initial;
-  --shadow-elevation-overlay: 0 8px 10px 0 rgba(0 0 0 / 0.2), 0 6px 30px 0 rgba(0 0 0 / 0.12), 0 16px 24px 0 rgba(0 0 0 / 0.14);
-  --shadow-elevation-raised: 0 5px 5px 0 rgba(0 0 0 / 0.2), 0 3px 14px 0 rgba(0 0 0 / 0.12), 0 8px 10px 0 rgba(0 0 0 / 0.14);
+  --shadow-elevation-overlay-bold: 0 8px 24px 0 rgba(0 0 0 / 0.80);
+  --shadow-elevation-overlay-muted: 0 8px 24px 0 rgba(0 0 0 / 0.16);
+  --shadow-elevation-raised-bold: 0 1px 4px 0 rgba(0 0 0 / 0.80);
+  --shadow-elevation-raised-muted: 0 1px 4px 0 rgba(0 0 0 / 0.16);
   --font-primary: "Roboto Flex", sans-serif;
   --font-display: "Roboto Mono", monospace;
   --icon-size-l: var(--spacing-xl);
@@ -5330,6 +5839,199 @@
   --icon-size-s: var(--spacing-l);
   --icon-size-xs: var(--spacing-m);
 }
+@layer theme {
+  :root {
+    --classification-missing: var(--primitive-classification-missing, #0b0b0b);
+    --classification-unclass: var(--primitive-classification-unclass, #007A33);
+    --classification-cui: var(--primitive-classification-cui, #502b85);
+    --classification-confidential: var(--primitive-classification-confidential, #0033a0);
+    --classification-secret: var(--primitive-classification-secret, #c8102e);
+    --classification-top-secret: var(--primitive-classification-top-secret, #ff8c00);
+    --classification-ts-sci: var(--primitive-classification-ts-sci, #fce83a);
+    --roe-pending: var(--primitive-roe-id-pending, #404040);
+    --roe-friend: var(--primitive-roe-id-friend, #1484f4);
+    --roe-assumed-friend: var(--primitive-roe-id-assumed-friend, #0e8f37);
+    --roe-neutral: var(--primitive-roe-id-neutral, #5b137a);
+    --roe-unknown: var(--primitive-roe-id-unknown, #edda0a);
+    --roe-suspect: var(--primitive-roe-id-suspect, #ffad38);
+    --roe-hostile: var(--primitive-roe-id-hostile, #ff0033);
+    --roe-no-statement: var(--primitive-roe-id-pending, #404040);
+    &:where(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *) {
+      --bg-surface-default: var(--primitive-neutral-900, #151517);
+      --bg-surface-raised: var(--primitive-neutral-800, #212223);
+      --bg-surface-overlay: var(--primitive-neutral-800, #212223);
+      --bg-surface-muted: var(--primitive-alpha-white-100, rgba(255, 255, 255, 0.08));
+      --bg-interactive-bold: var(--primitive-neutral-100, #eff1f2);
+      --bg-interactive-bold-hover: var(--primitive-neutral-200, #d5d7d9);
+      --bg-interactive-bold-pressed: var(--primitive-neutral-400, #888a8f);
+      --bg-interactive-muted: var(--primitive-neutral-700, #2f2f31);
+      --bg-interactive-muted-hover: var(--primitive-neutral-600, #414245);
+      --bg-interactive-muted-pressed: var(--primitive-neutral-950, #000000);
+      --bg-interactive-disabled: var(--primitive-neutral-700, #2f2f31);
+      --bg-accent-primary-bold: var(--primitive-accent-primary-700, #004f7e);
+      --bg-accent-primary-hover: var(--primitive-accent-primary-600, #0068a1);
+      --bg-accent-primary-pressed: var(--primitive-accent-primary-800, #00213e);
+      --bg-accent-primary-muted: var(--primitive-accent-primary-800, #00213e);
+      --bg-info-bold: var(--primitive-utility-info-500, #565759);
+      --bg-info-hover: var(--primitive-utility-info-400, #888a8f);
+      --bg-info-pressed: var(--primitive-utility-info-600, #414245);
+      --bg-info-muted: var(--primitive-utility-info-800, #212223);
+      --bg-advisory-bold: var(--primitive-utility-advisory-600, #3c67a0);
+      --bg-advisory-hover: var(--primitive-utility-advisory-500, #4e88da);
+      --bg-advisory-pressed: var(--primitive-utility-advisory-700, #264062);
+      --bg-advisory-muted: var(--primitive-utility-advisory-900, #0e1825);
+      --bg-normal-bold: var(--primitive-utility-normal-600, #1c7e23);
+      --bg-normal-hover: var(--primitive-utility-normal-500, #26a12e);
+      --bg-normal-pressed: var(--primitive-utility-normal-700, #145718);
+      --bg-normal-muted: var(--primitive-utility-normal-900, #08210a);
+      --bg-serious-bold: var(--primitive-utility-serious-600, #bb7a00);
+      --bg-serious-hover: var(--primitive-utility-serious-500, #e89906);
+      --bg-serious-pressed: var(--primitive-utility-serious-800, #634101);
+      --bg-serious-muted: var(--primitive-utility-serious-900, #291b00);
+      --bg-critical-bold: var(--primitive-utility-critical-700, #790501);
+      --bg-critical-hover: var(--primitive-utility-critical-600, #a10701);
+      --bg-critical-pressed: var(--primitive-utility-critical-800, #540300);
+      --bg-critical-muted: var(--primitive-utility-critical-900, #290200);
+      --fg-primary-bold: var(--primitive-neutral-50, #ffffff);
+      --fg-primary-muted: var(--primitive-neutral-300, #c3c5c7);
+      --fg-inverse-bold: var(--primitive-neutral-800, #212223);
+      --fg-inverse-muted: var(--primitive-neutral-400, #888a8f);
+      --fg-disabled: var(--primitive-neutral-500, #565759);
+      --fg-accent-primary-bold: var(--primitive-accent-primary-400, #009cde);
+      --fg-accent-primary-hover: var(--primitive-accent-primary-200, #6ed1ff);
+      --fg-accent-primary-pressed: var(--primitive-accent-primary-600, #0068a1);
+      --fg-info-bold: var(--primitive-utility-info-400, #888a8f);
+      --fg-info-hover: var(--primitive-utility-info-200, #d5d7d9);
+      --fg-info-pressed: var(--primitive-utility-info-600, #414245);
+      --fg-advisory-bold: var(--primitive-utility-advisory-400, #62a6ff);
+      --fg-advisory-hover: var(--primitive-utility-advisory-200, #a9ceff);
+      --fg-advisory-pressed: var(--primitive-utility-advisory-600, #3c67a0);
+      --fg-normal-bold: var(--primitive-utility-normal-400, #2bbf35);
+      --fg-normal-hover: var(--primitive-utility-normal-200, #86e98c);
+      --fg-normal-pressed: var(--primitive-utility-normal-600, #1c7e23);
+      --fg-serious-bold: var(--primitive-utility-serious-500, #e89906);
+      --fg-serious-hover: var(--primitive-utility-serious-300, #ffc14c);
+      --fg-serious-pressed: var(--primitive-utility-serious-600, #bb7a00);
+      --fg-critical-bold: var(--primitive-utility-critical-400, #ff2e27);
+      --fg-critical-hover: var(--primitive-utility-critical-300, #ff6d68);
+      --fg-critical-pressed: var(--primitive-utility-critical-600, #a10701);
+      --fg-a11y-on-accent: var(--primitive-neutral-50, #ffffff);
+      --fg-a11y-on-utility: var(--primitive-neutral-50, #ffffff);
+      --outline-static: var(--primitive-neutral-600, #414245);
+      --outline-interactive: var(--primitive-neutral-600, #414245);
+      --outline-interactive-hover: var(--primitive-neutral-400, #888a8f);
+      --outline-interactive-pressed: var(--primitive-neutral-700, #2f2f31);
+      --outline-interactive-disabled: var(--primitive-neutral-700, #2f2f31);
+      --outline-accent-primary-bold: var(--primitive-accent-primary-300, #39b7fa);
+      --outline-accent-primary-hover: var(--primitive-accent-primary-200, #6ed1ff);
+      --outline-accent-primary-pressed: var(--primitive-accent-primary-600, #0068a1);
+      --outline-info-bold: var(--primitive-utility-info-400, #888a8f);
+      --outline-info-hover: var(--primitive-utility-info-200, #d5d7d9);
+      --outline-info-pressed: var(--primitive-utility-info-600, #414245);
+      --outline-advisory-bold: var(--primitive-utility-advisory-400, #62a6ff);
+      --outline-advisory-hover: var(--primitive-utility-advisory-200, #a9ceff);
+      --outline-advisory-pressed: var(--primitive-utility-advisory-600, #3c67a0);
+      --outline-normal-bold: var(--primitive-utility-normal-400, #2bbf35);
+      --outline-normal-hover: var(--primitive-utility-normal-200, #86e98c);
+      --outline-normal-pressed: var(--primitive-utility-normal-600, #1c7e23);
+      --outline-serious-bold: var(--primitive-utility-serious-500, #e89906);
+      --outline-serious-hover: var(--primitive-utility-serious-200, #ffd382);
+      --outline-serious-pressed: var(--primitive-utility-serious-700, #8e5d00);
+      --outline-critical-bold: var(--primitive-utility-critical-400, #ff2e27);
+      --outline-critical-hover: var(--primitive-utility-critical-300, #ff6d68);
+      --outline-critical-pressed: var(--primitive-utility-critical-600, #a10701);
+      --shadow-elevation-raised: var(--shadow-elevation-raised-bold, 0 1px 4px 0 rgba(0 0 0 / 0.80));
+      --shadow-elevation-overlay: var(--shadow-elevation-overlay-bold, 0 8px 24px 0 rgba(0 0 0 / 0.80));
+    }
+    &:where(.light, .light *, [data-theme="light"], [data-theme="light"] *) {
+      --bg-surface-default: var(--primitive-neutral-100, #eff1f2);
+      --bg-surface-raised: var(--primitive-neutral-50, #ffffff);
+      --bg-surface-overlay: var(--primitive-neutral-50, #ffffff);
+      --bg-surface-muted: var(--primitive-alpha-black-100, rgba(0, 0, 0, 0.08));
+      --bg-interactive-bold: var(--primitive-neutral-900, #151517);
+      --bg-interactive-bold-hover: var(--primitive-neutral-800, #212223);
+      --bg-interactive-bold-pressed: var(--primitive-neutral-300, #c3c5c7);
+      --bg-interactive-muted: var(--primitive-neutral-300, #c3c5c7);
+      --bg-interactive-muted-hover: var(--primitive-neutral-200, #d5d7d9);
+      --bg-interactive-muted-pressed: var(--primitive-neutral-400, #888a8f);
+      --bg-interactive-disabled: var(--primitive-neutral-200, #d5d7d9);
+      --bg-accent-primary-bold: var(--primitive-accent-primary-700, #004f7e);
+      --bg-accent-primary-hover: var(--primitive-accent-primary-600, #0068a1);
+      --bg-accent-primary-pressed: var(--primitive-accent-primary-800, #00213e);
+      --bg-accent-primary-muted: var(--primitive-accent-primary-100, #b1e9ff);
+      --bg-info-bold: var(--primitive-utility-info-400, #888a8f);
+      --bg-info-hover: var(--primitive-utility-info-300, #c3c5c7);
+      --bg-info-pressed: var(--primitive-utility-info-600, #414245);
+      --bg-info-muted: var(--primitive-utility-info-100, #eff1f2);
+      --bg-advisory-bold: var(--primitive-utility-advisory-600, #3c67a0);
+      --bg-advisory-hover: var(--primitive-utility-advisory-500, #4e88da);
+      --bg-advisory-pressed: var(--primitive-utility-advisory-700, #264062);
+      --bg-advisory-muted: var(--primitive-utility-advisory-100, #c4deff);
+      --bg-normal-bold: var(--primitive-utility-normal-600, #1c7e23);
+      --bg-normal-hover: var(--primitive-utility-normal-500, #26a12e);
+      --bg-normal-pressed: var(--primitive-utility-normal-700, #145718);
+      --bg-normal-muted: var(--primitive-utility-normal-100, #c2f5c5);
+      --bg-serious-bold: var(--primitive-utility-serious-600, #bb7a00);
+      --bg-serious-hover: var(--primitive-utility-serious-500, #e89906);
+      --bg-serious-pressed: var(--primitive-utility-serious-800, #634101);
+      --bg-serious-muted: var(--primitive-utility-serious-100, #ffeac2);
+      --bg-critical-bold: var(--primitive-utility-critical-700, #790501);
+      --bg-critical-hover: var(--primitive-utility-critical-600, #a10701);
+      --bg-critical-pressed: var(--primitive-utility-critical-800, #540300);
+      --bg-critical-muted: var(--primitive-utility-critical-100, #ffc4c2);
+      --fg-primary-bold: var(--primitive-neutral-800, #212223);
+      --fg-primary-muted: var(--primitive-neutral-500, #565759);
+      --fg-inverse-bold: var(--primitive-neutral-50, #ffffff);
+      --fg-inverse-muted: var(--primitive-neutral-400, #888a8f);
+      --fg-disabled: var(--primitive-neutral-300, #c3c5c7);
+      --fg-accent-primary-bold: var(--primitive-accent-primary-300, #39b7fa);
+      --fg-accent-primary-hover: var(--primitive-accent-primary-200, #6ed1ff);
+      --fg-accent-primary-pressed: var(--primitive-accent-primary-600, #0068a1);
+      --fg-info-bold: var(--primitive-utility-info-600, #414245);
+      --fg-info-hover: var(--primitive-utility-info-700, #2f2f31);
+      --fg-info-pressed: var(--primitive-utility-info-500, #565759);
+      --fg-advisory-bold: var(--primitive-utility-advisory-400, #62a6ff);
+      --fg-advisory-hover: var(--primitive-utility-advisory-600, #3c67a0);
+      --fg-advisory-pressed: var(--primitive-utility-advisory-500, #4e88da);
+      --fg-normal-bold: var(--primitive-utility-normal-400, #2bbf35);
+      --fg-normal-hover: var(--primitive-utility-normal-600, #1c7e23);
+      --fg-normal-pressed: var(--primitive-utility-normal-500, #26a12e);
+      --fg-serious-bold: var(--primitive-utility-serious-600, #bb7a00);
+      --fg-serious-hover: var(--primitive-utility-serious-700, #8e5d00);
+      --fg-serious-pressed: var(--primitive-utility-serious-600, #bb7a00);
+      --fg-critical-bold: var(--primitive-utility-critical-400, #ff2e27);
+      --fg-critical-hover: var(--primitive-utility-critical-600, #a10701);
+      --fg-critical-pressed: var(--primitive-utility-critical-500, #d40b04);
+      --fg-a11y-on-accent: var(--primitive-neutral-50, #ffffff);
+      --fg-a11y-on-utility: var(--primitive-neutral-50, #ffffff);
+      --outline-static: var(--primitive-neutral-300, #c3c5c7);
+      --outline-interactive: var(--primitive-neutral-300, #c3c5c7);
+      --outline-interactive-hover: var(--primitive-neutral-400, #888a8f);
+      --outline-interactive-pressed: var(--primitive-neutral-200, #d5d7d9);
+      --outline-interactive-disabled: var(--primitive-neutral-200, #d5d7d9);
+      --outline-accent-primary-bold: var(--primitive-accent-primary-300, #39b7fa);
+      --outline-accent-primary-hover: var(--primitive-accent-primary-600, #0068a1);
+      --outline-accent-primary-pressed: var(--primitive-accent-primary-200, #6ed1ff);
+      --outline-info-bold: var(--primitive-utility-info-400, #888a8f);
+      --outline-info-hover: var(--primitive-utility-info-600, #414245);
+      --outline-info-pressed: var(--primitive-utility-info-500, #565759);
+      --outline-advisory-bold: var(--primitive-utility-advisory-400, #62a6ff);
+      --outline-advisory-hover: var(--primitive-utility-advisory-600, #3c67a0);
+      --outline-advisory-pressed: var(--primitive-utility-advisory-500, #4e88da);
+      --outline-normal-bold: var(--primitive-utility-normal-400, #2bbf35);
+      --outline-normal-hover: var(--primitive-utility-normal-600, #1c7e23);
+      --outline-normal-pressed: var(--primitive-utility-normal-500, #26a12e);
+      --outline-serious-bold: var(--primitive-utility-serious-600, #bb7a00);
+      --outline-serious-hover: var(--primitive-utility-serious-700, #8e5d00);
+      --outline-serious-pressed: var(--primitive-utility-serious-500, #e89906);
+      --outline-critical-bold: var(--primitive-utility-critical-400, #ff2e27);
+      --outline-critical-hover: var(--primitive-utility-critical-600, #a10701);
+      --outline-critical-pressed: var(--primitive-utility-critical-500, #d40b04);
+      --shadow-elevation-raised: var(--shadow-elevation-raised-muted, 0 1px 4px 0 rgba(0 0 0 / 0.16));
+      --shadow-elevation-overlay: var(--shadow-elevation-overlay-muted, 0 8px 24px 0 rgba(0 0 0 / 0.16));
+    }
+  }
+}
 body {
   font-family: var(--font-primary);
 }
@@ -5342,10 +6044,10 @@ body {
     height: var(--spacing-l);
   }
   ::-webkit-scrollbar-track {
-    background: var(--color-interactive);
+    background: var(--bg-interactive-muted-hover);
   }
   ::-webkit-scrollbar-thumb {
-    background-color: var(--color-interactive-hover-light);
+    background-color: var(--bg-interactive-muted);
     border-radius: var(--radius-large);
     border: 5px solid transparent;
     background-clip: padding-box;
@@ -5357,7 +6059,7 @@ body {
     top: 0;
     bottom: 0;
     left: 50%;
-    background-image: repeating-linear-gradient(to bottom, var(--colors-neutral-04), var(--colors-neutral-04)), repeating-linear-gradient(to right, var(--colors-neutral-04), var(--colors-neutral-04));
+    background-image: repeating-linear-gradient(to bottom, var(--primitive-neutral-400), var(--primitive-neutral-400)), repeating-linear-gradient(to right, var(--primitive-neutral-400), var(--primitive-neutral-400));
     background-position: left -1px, center;
     background-repeat: repeat-y, repeat-x;
     background-size: 1px 4px, 4px 1px;
@@ -5369,7 +6071,7 @@ body {
     top: 0;
     bottom: 50%;
     left: 50%;
-    background-image: repeating-linear-gradient(to bottom,var(--colors-neutral-04), var(--colors-neutral-04)), repeating-linear-gradient(to right, var(--colors-neutral-04), var(--colors-neutral-04));
+    background-image: repeating-linear-gradient(to bottom,var(--primitive-neutral-400), var(--primitive-neutral-400)), repeating-linear-gradient(to right, var(--primitive-neutral-400), var(--primitive-neutral-400));
     background-position: left -1px, bottom;
     background-repeat: repeat-y, repeat-x;
     background-size: 1px 4px, 4px 1px;
@@ -5381,7 +6083,7 @@ body {
     top: 0;
     bottom: 0;
     left: 50%;
-    background-image: repeating-linear-gradient(to bottom, var(--colors-neutral-04), var(--colors-neutral-04)), repeating-linear-gradient(to right, var(--colors-neutral-04), var(--colors-neutral-04));
+    background-image: repeating-linear-gradient(to bottom, var(--primitive-neutral-400), var(--primitive-neutral-400)), repeating-linear-gradient(to right, var(--primitive-neutral-400), var(--primitive-neutral-400));
     background-position: left -1px, center;
     background-repeat: repeat-y, repeat-x;
     background-size: 1px 4px, 4px 1px;