@camunda/design-system 0.4.1 → 0.6.0

package/dist/styles.css

@@ -5,11 +5,58 @@
   --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Code", monospace;
   --color-red-500: oklch(63.7% 0.237 25.331);
   --color-orange-100: oklch(95.4% 0.038 75.164);
+  --color-amber-50: oklch(98.7% 0.022 95.277);
+  --color-amber-100: oklch(96.2% 0.059 95.617);
+  --color-amber-200: oklch(92.4% 0.12 95.746);
+  --color-amber-300: oklch(87.9% 0.169 91.605);
   --color-amber-400: oklch(82.8% 0.189 84.429);
+  --color-amber-500: oklch(76.9% 0.188 70.08);
+  --color-amber-600: oklch(66.6% 0.179 58.318);
+  --color-amber-700: oklch(55.5% 0.163 48.998);
+  --color-amber-800: oklch(47.3% 0.137 46.201);
+  --color-amber-900: oklch(41.4% 0.112 45.904);
+  --color-emerald-50: oklch(97.9% 0.021 166.113);
+  --color-emerald-100: oklch(95% 0.052 163.051);
+  --color-emerald-200: oklch(90.5% 0.093 164.15);
+  --color-emerald-300: oklch(84.5% 0.143 164.978);
+  --color-emerald-400: oklch(76.5% 0.177 163.223);
+  --color-emerald-500: oklch(69.6% 0.17 162.48);
   --color-emerald-600: oklch(59.6% 0.145 163.225);
+  --color-emerald-700: oklch(50.8% 0.118 165.612);
+  --color-emerald-800: oklch(43.2% 0.095 166.913);
+  --color-emerald-900: oklch(37.8% 0.077 168.94);
+  --color-blue-50: oklch(97% 0.014 254.604);
+  --color-blue-100: oklch(93.2% 0.032 255.585);
+  --color-blue-200: oklch(88.2% 0.059 254.128);
+  --color-blue-300: oklch(80.9% 0.105 251.813);
+  --color-blue-400: oklch(70.7% 0.165 254.624);
   --color-blue-500: oklch(62.3% 0.214 259.815);
+  --color-blue-600: oklch(54.6% 0.245 262.881);
+  --color-blue-700: oklch(48.8% 0.243 264.376);
+  --color-blue-800: oklch(42.4% 0.199 265.638);
+  --color-blue-900: oklch(37.9% 0.146 265.522);
+  --color-rose-50: oklch(96.9% 0.015 12.422);
+  --color-rose-100: oklch(94.1% 0.03 12.58);
+  --color-rose-200: oklch(89.2% 0.058 10.001);
+  --color-rose-300: oklch(81% 0.117 11.638);
+  --color-rose-400: oklch(71.2% 0.194 13.428);
+  --color-rose-500: oklch(64.5% 0.246 16.439);
+  --color-rose-600: oklch(58.6% 0.253 17.585);
+  --color-rose-700: oklch(51.4% 0.222 16.935);
+  --color-rose-800: oklch(45.5% 0.188 13.697);
+  --color-rose-900: oklch(41% 0.159 10.272);
   --color-gray-200: oklch(92.8% 0.006 264.531);
+  --color-zinc-50: oklch(98.5% 0 0);
+  --color-zinc-100: oklch(96.7% 0.001 286.375);
+  --color-zinc-200: oklch(92% 0.004 286.32);
+  --color-zinc-300: oklch(87.1% 0.006 286.286);
+  --color-zinc-400: oklch(70.5% 0.015 286.067);
+  --color-zinc-500: oklch(55.2% 0.016 285.938);
+  --color-zinc-600: oklch(44.2% 0.017 285.786);
+  --color-zinc-700: oklch(37% 0.013 285.805);
+  --color-zinc-800: oklch(27.4% 0.006 286.033);
   --color-zinc-900: oklch(21% 0.006 285.885);
+  --color-zinc-950: oklch(14.1% 0.005 285.823);
   --color-black: #000;
   --color-white: #fff;
   --spacing: 0.25rem;
@@ -20,6 +67,7 @@
   --container-xs: 20rem;
   --container-sm: 24rem;
   --container-md: 28rem;
+  --container-5xl: 64rem;
   --text-xs: 0.75rem;
   --text-xs--line-height: calc(1 / 0.75);
   --text-sm: 0.875rem;
@@ -41,6 +89,7 @@
   --tracking-tight: -0.025em;
   --tracking-wide: 0.025em;
   --tracking-widest: 0.1em;
+  --leading-tight: 1.25;
   --leading-snug: 1.375;
   --leading-relaxed: 1.625;
   --radius-sm: calc(var(--radius) - 4px);
@@ -65,7 +114,6 @@
   --default-font-family: "Geist Sans", sans-serif;
   --default-mono-font-family: "IBM Plex Mono", ui-monospace, "Cascadia Code", monospace;
   --font-heading: var(--font-sans);
-  --color-primary: var(--primary);
   --color-overlay: var(--overlay);
 }
 .\@container\/card-header {
@@ -287,6 +335,9 @@
 .mb-2 {
   margin-bottom: calc(var(--spacing) * 2);
 }
+.mb-4 {
+  margin-bottom: calc(var(--spacing) * 4);
+}
 .mb-6 {
   margin-bottom: calc(var(--spacing) * 6);
 }
@@ -398,10 +449,6 @@
   width: calc(var(--spacing) * 11);
   height: calc(var(--spacing) * 11);
 }
-.size-12 {
-  width: calc(var(--spacing) * 12);
-  height: calc(var(--spacing) * 12);
-}
 .size-full {
   width: 100%;
   height: 100%;
@@ -511,6 +558,9 @@
 .max-h-\[60vh\] {
   max-height: 60vh;
 }
+.min-h-0 {
+  min-height: calc(var(--spacing) * 0);
+}
 .min-h-9 {
   min-height: calc(var(--spacing) * 9);
 }
@@ -661,6 +711,9 @@
 .w-full {
   width: 100%;
 }
+.max-w-5xl {
+  max-width: var(--container-5xl);
+}
 .max-w-\[200px\] {
   max-width: 200px;
 }
@@ -1116,50 +1169,32 @@
 .border-border {
   border-color: var(--border);
 }
-.border-destructive {
-  border-color: var(--destructive);
-}
-.border-destructive\/30 {
-  border-color: var(--destructive);
-  @supports (color: color-mix(in lab, red, red)) {
-    border-color: color-mix(in oklab, var(--destructive) 30%, transparent);
-  }
-}
 .border-foreground {
   border-color: var(--foreground);
 }
 .border-gray-200 {
   border-color: var(--color-gray-200);
 }
-.border-info {
-  border-color: var(--info);
-}
 .border-input {
   border-color: var(--input);
 }
-.border-primary {
-  border-color: var(--primary);
-}
-.border-sidebar-border {
-  border-color: var(--sidebar-border);
+.border-neutral-border-subtle {
+  border-color: var(--neutral-border-subtle);
 }
-.border-sidebar-primary {
-  border-color: var(--sidebar-primary);
+.border-primary-border-strong {
+  border-color: var(--primary-border-strong);
 }
-.border-success {
-  border-color: var(--success);
+.border-primary-border-subtle {
+  border-color: var(--primary-border-subtle);
 }
-.border-success\/30 {
-  border-color: var(--success);
-  @supports (color: color-mix(in lab, red, red)) {
-    border-color: color-mix(in oklab, var(--success) 30%, transparent);
-  }
+.border-success-border-subtle {
+  border-color: var(--success-border-subtle);
 }
 .border-transparent {
   border-color: transparent;
 }
-.border-warning {
-  border-color: var(--warning);
+.border-warning-border-subtle {
+  border-color: var(--warning-border-subtle);
 }
 .border-t-transparent {
   border-top-color: transparent;
@@ -1170,8 +1205,8 @@
 .bg-\[var\(--color-blue-500\)\] {
   background-color: var(--color-blue-500);
 }
-.bg-accent {
-  background-color: var(--accent);
+.bg-accent-background-subtle {
+  background-color: var(--accent-background-subtle);
 }
 .bg-amber-400 {
   background-color: var(--color-amber-400);
@@ -1224,38 +1259,26 @@
 .bg-border {
   background-color: var(--border);
 }
-.bg-card {
-  background-color: var(--card);
-}
-.bg-card\/45 {
-  background-color: var(--card);
-  @supports (color: color-mix(in lab, red, red)) {
-    background-color: color-mix(in oklab, var(--card) 45%, transparent);
-  }
-}
 .bg-chart-1 {
   background-color: var(--chart-1);
 }
-.bg-destructive {
-  background-color: var(--destructive);
+.bg-chart-2 {
+  background-color: var(--chart-2);
 }
-.bg-destructive\/10 {
-  background-color: var(--destructive);
-  @supports (color: color-mix(in lab, red, red)) {
-    background-color: color-mix(in oklab, var(--destructive) 10%, transparent);
-  }
+.bg-chart-3 {
+  background-color: var(--chart-3);
 }
-.bg-destructive\/15 {
-  background-color: var(--destructive);
-  @supports (color: color-mix(in lab, red, red)) {
-    background-color: color-mix(in oklab, var(--destructive) 15%, transparent);
-  }
+.bg-chart-4 {
+  background-color: var(--chart-4);
 }
-.bg-destructive\/20 {
-  background-color: var(--destructive);
-  @supports (color: color-mix(in lab, red, red)) {
-    background-color: color-mix(in oklab, var(--destructive) 20%, transparent);
-  }
+.bg-chart-5 {
+  background-color: var(--chart-5);
+}
+.bg-danger-action-default {
+  background-color: var(--danger-action-default);
+}
+.bg-danger-background-subtle {
+  background-color: var(--danger-background-subtle);
 }
 .bg-emerald-600 {
   background-color: var(--color-emerald-600);
@@ -1269,40 +1292,43 @@
     background-color: color-mix(in oklab, var(--foreground) 10%, transparent);
   }
 }
-.bg-info {
-  background-color: var(--info);
-}
-.bg-info\/10 {
-  background-color: var(--info);
-  @supports (color: color-mix(in lab, red, red)) {
-    background-color: color-mix(in oklab, var(--info) 10%, transparent);
-  }
-}
 .bg-input-background {
   background-color: var(--input-background);
 }
-.bg-muted {
-  background-color: var(--muted);
+.bg-neutral-action-active {
+  background-color: var(--neutral-action-active);
+}
+.bg-neutral-action-default {
+  background-color: var(--neutral-action-default);
+}
+.bg-neutral-action-disabled {
+  background-color: var(--neutral-action-disabled);
 }
-.bg-muted-foreground {
-  background-color: var(--muted-foreground);
+.bg-neutral-action-hover {
+  background-color: var(--neutral-action-hover);
 }
-.bg-muted\/30 {
-  background-color: var(--muted);
+.bg-neutral-background-strong {
+  background-color: var(--neutral-background-strong);
+}
+.bg-neutral-background-strong\/30 {
+  background-color: var(--neutral-background-strong);
   @supports (color: color-mix(in lab, red, red)) {
-    background-color: color-mix(in oklab, var(--muted) 30%, transparent);
+    background-color: color-mix(in oklab, var(--neutral-background-strong) 30%, transparent);
   }
 }
-.bg-muted\/40 {
-  background-color: var(--muted);
+.bg-neutral-background-strong\/50 {
+  background-color: var(--neutral-background-strong);
   @supports (color: color-mix(in lab, red, red)) {
-    background-color: color-mix(in oklab, var(--muted) 40%, transparent);
+    background-color: color-mix(in oklab, var(--neutral-background-strong) 50%, transparent);
   }
 }
-.bg-muted\/50 {
-  background-color: var(--muted);
+.bg-neutral-background-subtle {
+  background-color: var(--neutral-background-subtle);
+}
+.bg-neutral-background-subtle\/45 {
+  background-color: var(--neutral-background-subtle);
   @supports (color: color-mix(in lab, red, red)) {
-    background-color: color-mix(in oklab, var(--muted) 50%, transparent);
+    background-color: color-mix(in oklab, var(--neutral-background-subtle) 45%, transparent);
   }
 }
 .bg-orange-100 {
@@ -1314,53 +1340,29 @@
 .bg-popover {
   background-color: var(--popover);
 }
-.bg-primary {
-  background-color: var(--primary);
-}
-.bg-primary\/10 {
-  background-color: var(--primary);
-  @supports (color: color-mix(in lab, red, red)) {
-    background-color: color-mix(in oklab, var(--primary) 10%, transparent);
-  }
-}
-.bg-primary\/20 {
-  background-color: var(--primary);
-  @supports (color: color-mix(in lab, red, red)) {
-    background-color: color-mix(in oklab, var(--primary) 20%, transparent);
-  }
-}
-.bg-red-500 {
-  background-color: var(--color-red-500);
+.bg-primary-action-active {
+  background-color: var(--primary-action-active);
 }
-.bg-secondary {
-  background-color: var(--secondary);
+.bg-primary-action-default {
+  background-color: var(--primary-action-default);
 }
-.bg-sidebar {
-  background-color: var(--sidebar);
+.bg-primary-action-disabled {
+  background-color: var(--primary-action-disabled);
 }
-.bg-sidebar-accent {
-  background-color: var(--sidebar-accent);
+.bg-primary-action-hover {
+  background-color: var(--primary-action-hover);
 }
-.bg-sidebar-accent-foreground {
-  background-color: var(--sidebar-accent-foreground);
+.bg-primary-background-strong {
+  background-color: var(--primary-background-strong);
 }
-.bg-sidebar-primary {
-  background-color: var(--sidebar-primary);
+.bg-primary-background-subtle {
+  background-color: var(--primary-background-subtle);
 }
-.bg-success {
-  background-color: var(--success);
+.bg-red-500 {
+  background-color: var(--color-red-500);
 }
-.bg-success\/10 {
-  background-color: var(--success);
-  @supports (color: color-mix(in lab, red, red)) {
-    background-color: color-mix(in oklab, var(--success) 10%, transparent);
-  }
-}
-.bg-success\/15 {
-  background-color: var(--success);
-  @supports (color: color-mix(in lab, red, red)) {
-    background-color: color-mix(in oklab, var(--success) 15%, transparent);
-  }
+.bg-success-background-subtle {
+  background-color: var(--success-background-subtle);
 }
 .bg-switch-background {
   background-color: var(--switch-background);
@@ -1368,14 +1370,14 @@
 .bg-transparent {
   background-color: transparent;
 }
-.bg-warning {
-  background-color: var(--warning);
+.bg-warning-action-default {
+  background-color: var(--warning-action-default);
 }
-.bg-warning\/10 {
-  background-color: var(--warning);
-  @supports (color: color-mix(in lab, red, red)) {
-    background-color: color-mix(in oklab, var(--warning) 10%, transparent);
-  }
+.bg-warning-background-strong {
+  background-color: var(--warning-background-strong);
+}
+.bg-warning-background-subtle {
+  background-color: var(--warning-background-subtle);
 }
 .bg-zinc-900 {
   background-color: var(--color-zinc-900);
@@ -1386,48 +1388,18 @@
 .fill-background {
   fill: var(--background);
 }
-.fill-card {
-  fill: var(--card);
-}
 .fill-current {
   fill: currentcolor;
 }
-.fill-destructive\/10 {
-  fill: var(--destructive);
-  @supports (color: color-mix(in lab, red, red)) {
-    fill: color-mix(in oklab, var(--destructive) 10%, transparent);
-  }
-}
 .fill-foreground {
   fill: var(--foreground);
 }
-.fill-info\/10 {
-  fill: var(--info);
-  @supports (color: color-mix(in lab, red, red)) {
-    fill: color-mix(in oklab, var(--info) 10%, transparent);
-  }
-}
-.fill-muted {
-  fill: var(--muted);
-}
-.fill-muted-foreground {
-  fill: var(--muted-foreground);
-}
-.fill-primary {
-  fill: var(--primary);
+.fill-primary-action-default {
+  fill: var(--primary-action-default);
 }
 .stroke-border {
   stroke: var(--border);
 }
-.stroke-destructive {
-  stroke: var(--destructive);
-}
-.stroke-info {
-  stroke: var(--info);
-}
-.stroke-muted-foreground {
-  stroke: var(--muted-foreground);
-}
 .p-0 {
   padding: calc(var(--spacing) * 0);
 }
@@ -1527,6 +1499,9 @@
 .py-6 {
   padding-block: calc(var(--spacing) * 6);
 }
+.py-8 {
+  padding-block: calc(var(--spacing) * 8);
+}
 .py-10 {
   padding-block: calc(var(--spacing) * 10);
 }
@@ -1536,6 +1511,9 @@
 .pt-0 {
   padding-top: calc(var(--spacing) * 0);
 }
+.pt-0\.5 {
+  padding-top: calc(var(--spacing) * 0.5);
+}
 .pt-2 {
   padding-top: calc(var(--spacing) * 2);
 }
@@ -1705,6 +1683,10 @@
   --tw-leading: var(--leading-snug);
   line-height: var(--leading-snug);
 }
+.leading-tight {
+  --tw-leading: var(--leading-tight);
+  line-height: var(--leading-tight);
+}
 .font-light {
   --tw-font-weight: var(--font-weight-light);
   font-weight: var(--font-weight-light);
@@ -1742,8 +1724,11 @@
 .whitespace-pre {
   white-space: pre;
 }
-.text-accent-foreground {
-  color: var(--accent-foreground);
+.text-accent-foreground-strong {
+  color: var(--accent-foreground-strong);
+}
+.text-accent-foreground-subtle {
+  color: var(--accent-foreground-subtle);
 }
 .text-background {
   color: var(--background);
@@ -1751,20 +1736,17 @@
 .text-blue-500 {
   color: var(--color-blue-500);
 }
-.text-card-foreground {
-  color: var(--card-foreground);
-}
 .text-chart-1 {
   color: var(--chart-1);
 }
 .text-current {
   color: currentcolor;
 }
-.text-destructive {
-  color: var(--destructive);
+.text-danger-action-default {
+  color: var(--danger-action-default);
 }
-.text-destructive-foreground {
-  color: var(--destructive-foreground);
+.text-danger-action-foreground {
+  color: var(--danger-action-foreground);
 }
 .text-emerald-600 {
   color: var(--color-emerald-600);
@@ -1772,44 +1754,50 @@
 .text-foreground {
   color: var(--foreground);
 }
-.text-info {
-  color: var(--info);
+.text-info-action-default {
+  color: var(--info-action-default);
+}
+.text-neutral-action-foreground {
+  color: var(--neutral-action-foreground);
 }
-.text-muted-foreground {
-  color: var(--muted-foreground);
+.text-neutral-foreground-strong {
+  color: var(--neutral-foreground-strong);
 }
-.text-muted-foreground\/40 {
-  color: var(--muted-foreground);
+.text-neutral-foreground-subtle {
+  color: var(--neutral-foreground-subtle);
+}
+.text-neutral-foreground-subtle\/40 {
+  color: var(--neutral-foreground-subtle);
   @supports (color: color-mix(in lab, red, red)) {
-    color: color-mix(in oklab, var(--muted-foreground) 40%, transparent);
+    color: color-mix(in oklab, var(--neutral-foreground-subtle) 40%, transparent);
   }
 }
 .text-popover-foreground {
   color: var(--popover-foreground);
 }
-.text-primary {
-  color: var(--primary);
+.text-primary-action-default {
+  color: var(--primary-action-default);
 }
-.text-primary-foreground {
-  color: var(--primary-foreground);
+.text-primary-action-foreground {
+  color: var(--primary-action-foreground);
 }
-.text-secondary-foreground {
-  color: var(--secondary-foreground);
+.text-primary-foreground-strong {
+  color: var(--primary-foreground-strong);
 }
-.text-sidebar-accent-foreground {
-  color: var(--sidebar-accent-foreground);
+.text-primary-foreground-subtle {
+  color: var(--primary-foreground-subtle);
 }
-.text-sidebar-foreground {
-  color: var(--sidebar-foreground);
+.text-success-action-default {
+  color: var(--success-action-default);
 }
-.text-success {
-  color: var(--success);
+.text-warning-action-foreground {
+  color: var(--warning-action-foreground);
 }
-.text-warning {
-  color: var(--warning);
+.text-warning-foreground-strong {
+  color: var(--warning-foreground-strong);
 }
-.text-warning-foreground {
-  color: var(--warning-foreground);
+.text-warning-foreground-subtle {
+  color: var(--warning-foreground-subtle);
 }
 .text-white {
   color: var(--color-white);
@@ -1918,15 +1906,12 @@
     --tw-ring-color: color-mix(in oklab, var(--foreground) 10%, transparent);
   }
 }
-.ring-primary {
-  --tw-ring-color: var(--primary);
+.ring-primary-action-default {
+  --tw-ring-color: var(--primary-action-default);
 }
 .ring-ring {
   --tw-ring-color: var(--ring);
 }
-.ring-sidebar-ring {
-  --tw-ring-color: var(--sidebar-ring);
-}
 .ring-offset-2 {
   --tw-ring-offset-width: 2px;
   --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
@@ -2167,14 +2152,14 @@
     font-weight: var(--font-weight-medium);
   }
 }
-.file\:text-foreground {
+.file\:text-neutral-foreground-strong {
   &::file-selector-button {
-    color: var(--foreground);
+    color: var(--neutral-foreground-strong);
   }
 }
-.placeholder\:text-muted-foreground {
+.placeholder\:text-neutral-foreground-subtle {
   &::placeholder {
-    color: var(--muted-foreground);
+    color: var(--neutral-foreground-subtle);
   }
 }
 .after\:absolute {
@@ -2281,11 +2266,11 @@
     border-bottom-width: 0px;
   }
 }
-.even\:bg-muted\/50 {
+.even\:bg-neutral-background-strong\/50 {
   &:nth-child(even) {
-    background-color: var(--muted);
+    background-color: var(--neutral-background-strong);
     @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--muted) 50%, transparent);
+      background-color: color-mix(in oklab, var(--neutral-background-strong) 50%, transparent);
     }
   }
 }
@@ -2299,150 +2284,74 @@
     }
   }
 }
-.hover\:border-primary {
-  &:hover {
-    @media (hover: hover) {
-      border-color: var(--primary);
-    }
-  }
-}
-.hover\:bg-accent {
-  &:hover {
-    @media (hover: hover) {
-      background-color: var(--accent);
-    }
-  }
-}
-.hover\:bg-accent\/50 {
+.hover\:border-ring {
   &:hover {
     @media (hover: hover) {
-      background-color: var(--accent);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--accent) 50%, transparent);
-      }
+      border-color: var(--ring);
     }
   }
 }
-.hover\:bg-accent\/70 {
+.hover\:bg-accent-action-hover {
   &:hover {
     @media (hover: hover) {
-      background-color: var(--accent);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--accent) 70%, transparent);
-      }
+      background-color: var(--accent-action-hover);
     }
   }
 }
-.hover\:bg-destructive\/20 {
+.hover\:bg-accent-background-subtle\/50 {
   &:hover {
     @media (hover: hover) {
-      background-color: var(--destructive);
+      background-color: var(--accent-background-subtle);
       @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--destructive) 20%, transparent);
+        background-color: color-mix(in oklab, var(--accent-background-subtle) 50%, transparent);
       }
     }
   }
 }
-.hover\:bg-destructive\/90 {
+.hover\:bg-accent-background-subtle\/70 {
   &:hover {
     @media (hover: hover) {
-      background-color: var(--destructive);
+      background-color: var(--accent-background-subtle);
       @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--destructive) 90%, transparent);
+        background-color: color-mix(in oklab, var(--accent-background-subtle) 70%, transparent);
       }
     }
   }
 }
-.hover\:bg-muted {
+.hover\:bg-danger-action-hover {
   &:hover {
     @media (hover: hover) {
-      background-color: var(--muted);
+      background-color: var(--danger-action-hover);
     }
   }
 }
-.hover\:bg-muted\/50 {
+.hover\:bg-neutral-action-hover {
   &:hover {
     @media (hover: hover) {
-      background-color: var(--muted);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--muted) 50%, transparent);
-      }
+      background-color: var(--neutral-action-hover);
     }
   }
 }
-.hover\:bg-muted\/80 {
+.hover\:bg-neutral-background-subtle {
   &:hover {
     @media (hover: hover) {
-      background-color: var(--muted);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--muted) 80%, transparent);
-      }
+      background-color: var(--neutral-background-subtle);
     }
   }
 }
-.hover\:bg-primary\/20 {
+.hover\:bg-primary-action-hover {
   &:hover {
     @media (hover: hover) {
-      background-color: var(--primary);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--primary) 20%, transparent);
-      }
-    }
-  }
-}
-.hover\:bg-primary\/80 {
-  &:hover {
-    @media (hover: hover) {
-      background-color: var(--primary);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--primary) 80%, transparent);
-      }
-    }
-  }
-}
-.hover\:bg-primary\/90 {
-  &:hover {
-    @media (hover: hover) {
-      background-color: var(--primary);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--primary) 90%, transparent);
-      }
-    }
-  }
-}
-.hover\:bg-secondary\/80 {
-  &:hover {
-    @media (hover: hover) {
-      background-color: var(--secondary);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--secondary) 80%, transparent);
-      }
-    }
-  }
-}
-.hover\:bg-sidebar-accent {
-  &:hover {
-    @media (hover: hover) {
-      background-color: var(--sidebar-accent);
-    }
-  }
-}
-.hover\:bg-sidebar-accent\/60 {
-  &:hover {
-    @media (hover: hover) {
-      background-color: var(--sidebar-accent);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--sidebar-accent) 60%, transparent);
-      }
+      background-color: var(--primary-action-hover);
     }
   }
 }
-.hover\:bg-sidebar-ring\/60 {
+.hover\:bg-ring\/60 {
   &:hover {
     @media (hover: hover) {
-      background-color: var(--sidebar-ring);
+      background-color: var(--ring);
       @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--sidebar-ring) 60%, transparent);
+        background-color: color-mix(in oklab, var(--ring) 60%, transparent);
       }
     }
   }
@@ -2454,65 +2363,34 @@
     }
   }
 }
-.hover\:text-accent-foreground {
+.hover\:text-neutral-foreground-strong {
   &:hover {
     @media (hover: hover) {
-      color: var(--accent-foreground);
+      color: var(--neutral-foreground-strong);
     }
   }
 }
-.hover\:text-foreground {
+.hover\:text-neutral-foreground-strong\/70 {
   &:hover {
     @media (hover: hover) {
-      color: var(--foreground);
-    }
-  }
-}
-.hover\:text-foreground\/70 {
-  &:hover {
-    @media (hover: hover) {
-      color: var(--foreground);
-      @supports (color: color-mix(in lab, red, red)) {
-        color: color-mix(in oklab, var(--foreground) 70%, transparent);
-      }
-    }
-  }
-}
-.hover\:text-muted-foreground {
-  &:hover {
-    @media (hover: hover) {
-      color: var(--muted-foreground);
-    }
-  }
-}
-.hover\:text-primary-foreground {
-  &:hover {
-    @media (hover: hover) {
-      color: var(--primary-foreground);
-    }
-  }
-}
-.hover\:text-primary\/80 {
-  &:hover {
-    @media (hover: hover) {
-      color: var(--primary);
+      color: var(--neutral-foreground-strong);
       @supports (color: color-mix(in lab, red, red)) {
-        color: color-mix(in oklab, var(--primary) 80%, transparent);
+        color: color-mix(in oklab, var(--neutral-foreground-strong) 70%, transparent);
       }
     }
   }
 }
-.hover\:text-sidebar-accent-foreground {
+.hover\:text-neutral-foreground-subtle {
   &:hover {
     @media (hover: hover) {
-      color: var(--sidebar-accent-foreground);
+      color: var(--neutral-foreground-subtle);
     }
   }
 }
-.hover\:text-sidebar-foreground {
+.hover\:text-primary-action-foreground {
   &:hover {
     @media (hover: hover) {
-      color: var(--sidebar-foreground);
+      color: var(--primary-action-foreground);
     }
   }
 }
@@ -2545,13 +2423,13 @@
     }
   }
 }
-.not-data-active\:hover\:bg-card\/45 {
+.not-data-active\:hover\:bg-neutral-background-subtle\/45 {
   &:not(*:where([data-state="active"]),  *:where([data-active]:not([data-active="false"]))) {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--card);
+        background-color: var(--neutral-background-subtle);
         @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--card) 45%, transparent);
+          background-color: color-mix(in oklab, var(--neutral-background-subtle) 45%, transparent);
         }
       }
     }
@@ -2599,9 +2477,9 @@
     border-radius: calc(var(--radius) - 2px);
   }
 }
-.focus\:bg-accent {
+.focus\:bg-accent-background-subtle {
   &:focus {
-    background-color: var(--accent);
+    background-color: var(--accent-background-subtle);
   }
 }
 .focus\:bg-background {
@@ -2609,6 +2487,11 @@
     background-color: var(--background);
   }
 }
+.focus\:bg-primary-background-strong {
+  &:focus {
+    background-color: var(--primary-background-strong);
+  }
+}
 .focus\:px-3 {
   &:focus {
     padding-inline: calc(var(--spacing) * 3);
@@ -2619,9 +2502,14 @@
     padding-block: calc(var(--spacing) * 2);
   }
 }
-.focus\:text-accent-foreground {
+.focus\:text-accent-foreground-strong {
+  &:focus {
+    color: var(--accent-foreground-strong);
+  }
+}
+.focus\:text-primary-foreground-strong {
   &:focus {
-    color: var(--accent-foreground);
+    color: var(--primary-foreground-strong);
   }
 }
 .focus\:ring-2 {
@@ -2646,12 +2534,9 @@
     z-index: 10;
   }
 }
-.focus-visible\:border-destructive\/40 {
+.focus-visible\:border-danger-border-subtle {
   &:focus-visible {
-    border-color: var(--destructive);
-    @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--destructive) 40%, transparent);
-    }
+    border-color: var(--danger-border-subtle);
   }
 }
 .focus-visible\:border-ring {
@@ -2659,14 +2544,14 @@
     border-color: var(--ring);
   }
 }
-.focus-visible\:bg-muted {
+.focus-visible\:bg-neutral-background-subtle {
   &:focus-visible {
-    background-color: var(--muted);
+    background-color: var(--neutral-background-subtle);
   }
 }
-.focus-visible\:bg-sidebar-ring {
+.focus-visible\:bg-ring {
   &:focus-visible {
-    background-color: var(--sidebar-ring);
+    background-color: var(--ring);
   }
 }
 .focus-visible\:underline {
@@ -2698,11 +2583,11 @@
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 }
-.focus-visible\:ring-destructive\/20 {
+.focus-visible\:ring-danger-action-default\/20 {
   &:focus-visible {
-    --tw-ring-color: var(--destructive);
+    --tw-ring-color: var(--danger-action-default);
     @supports (color: color-mix(in lab, red, red)) {
-      --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
+      --tw-ring-color: color-mix(in oklab, var(--danger-action-default) 20%, transparent);
     }
   }
 }
@@ -2719,11 +2604,6 @@
     }
   }
 }
-.focus-visible\:ring-sidebar-ring {
-  &:focus-visible {
-    --tw-ring-color: var(--sidebar-ring);
-  }
-}
 .focus-visible\:ring-offset-2 {
   &:focus-visible {
     --tw-ring-offset-width: 2px;
@@ -2747,11 +2627,6 @@
     outline-width: 2px;
   }
 }
-.focus-visible\:outline-primary {
-  &:focus-visible {
-    outline-color: var(--primary);
-  }
-}
 .focus-visible\:outline-ring {
   &:focus-visible {
     outline-color: var(--ring);
@@ -2773,6 +2648,21 @@
     scale: 0.97;
   }
 }
+.active\:bg-danger-action-active {
+  &:active {
+    background-color: var(--danger-action-active);
+  }
+}
+.active\:bg-neutral-action-active {
+  &:active {
+    background-color: var(--neutral-action-active);
+  }
+}
+.active\:bg-primary-action-active {
+  &:active {
+    background-color: var(--primary-action-active);
+  }
+}
 .active\:not-aria-\[haspopup\]\:translate-y-px {
   &:active {
     &:not(*[aria-haspopup]) {
@@ -2791,6 +2681,11 @@
     cursor: not-allowed;
   }
 }
+.disabled\:bg-danger-action-disabled {
+  &:disabled {
+    background-color: var(--danger-action-disabled);
+  }
+}
 .disabled\:bg-input\/50 {
   &:disabled {
     background-color: var(--input);
@@ -2799,6 +2694,16 @@
     }
   }
 }
+.disabled\:bg-neutral-action-disabled {
+  &:disabled {
+    background-color: var(--neutral-action-disabled);
+  }
+}
+.disabled\:bg-primary-action-disabled {
+  &:disabled {
+    background-color: var(--primary-action-disabled);
+  }
+}
 .disabled\:opacity-50 {
   &:disabled {
     opacity: 50%;
@@ -2809,11 +2714,11 @@
     border-radius: var(--radius);
   }
 }
-.has-aria-expanded\:bg-muted\/50 {
+.has-aria-expanded\:bg-neutral-background-strong\/50 {
   &:has(*[aria-expanded="true"]) {
-    background-color: var(--muted);
+    background-color: var(--neutral-background-strong);
     @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--muted) 50%, transparent);
+      background-color: color-mix(in oklab, var(--neutral-background-strong) 50%, transparent);
     }
   }
 }
@@ -2867,29 +2772,24 @@
     cursor: default;
   }
 }
-.aria-expanded\:bg-muted {
+.aria-expanded\:bg-neutral-background-subtle {
   &[aria-expanded="true"] {
-    background-color: var(--muted);
+    background-color: var(--neutral-background-subtle);
   }
 }
-.aria-expanded\:bg-secondary {
+.aria-expanded\:text-neutral-foreground-strong {
   &[aria-expanded="true"] {
-    background-color: var(--secondary);
+    color: var(--neutral-foreground-strong);
   }
 }
-.aria-expanded\:text-foreground {
+.aria-expanded\:text-neutral-foreground-subtle {
   &[aria-expanded="true"] {
-    color: var(--foreground);
+    color: var(--neutral-foreground-subtle);
   }
 }
-.aria-expanded\:text-secondary-foreground {
-  &[aria-expanded="true"] {
-    color: var(--secondary-foreground);
-  }
-}
-.aria-invalid\:border-destructive {
+.aria-invalid\:border-danger-action-default {
   &[aria-invalid="true"] {
-    border-color: var(--destructive);
+    border-color: var(--danger-action-default);
   }
 }
 .aria-invalid\:ring-3 {
@@ -2898,24 +2798,24 @@
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 }
-.aria-invalid\:ring-destructive\/20 {
+.aria-invalid\:ring-danger-action-default\/20 {
   &[aria-invalid="true"] {
-    --tw-ring-color: var(--destructive);
+    --tw-ring-color: var(--danger-action-default);
     @supports (color: color-mix(in lab, red, red)) {
-      --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
+      --tw-ring-color: color-mix(in oklab, var(--danger-action-default) 20%, transparent);
     }
   }
 }
-.aria-invalid\:aria-checked\:border-primary {
+.aria-invalid\:aria-checked\:border-primary-action-default {
   &[aria-invalid="true"] {
     &[aria-checked="true"] {
-      border-color: var(--primary);
+      border-color: var(--primary-action-default);
     }
   }
 }
-.data-placeholder\:text-muted-foreground {
+.data-placeholder\:text-neutral-foreground-subtle {
   &[data-placeholder] {
-    color: var(--muted-foreground);
+    color: var(--neutral-foreground-subtle);
   }
 }
 .data-\[inset\]\:pl-8 {
@@ -2923,14 +2823,14 @@
     padding-left: calc(var(--spacing) * 8);
   }
 }
-.data-\[selected\=true\]\:bg-accent {
+.data-\[selected\=true\]\:bg-accent-background-subtle {
   &[data-selected="true"] {
-    background-color: var(--accent);
+    background-color: var(--accent-background-subtle);
   }
 }
-.data-\[selected\=true\]\:text-accent-foreground {
+.data-\[selected\=true\]\:text-accent-foreground-strong {
   &[data-selected="true"] {
-    color: var(--accent-foreground);
+    color: var(--accent-foreground-strong);
   }
 }
 .data-\[side\=bottom\]\:translate-y-1 {
@@ -3031,19 +2931,19 @@
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
 }
-.data-\[state\=checked\]\:bg-primary {
+.data-\[state\=checked\]\:bg-primary-action-default {
   &[data-state="checked"] {
-    background-color: var(--primary);
+    background-color: var(--primary-action-default);
   }
 }
-.data-\[state\=on\]\:bg-accent {
+.data-\[state\=on\]\:bg-accent-background-subtle {
   &[data-state="on"] {
-    background-color: var(--accent);
+    background-color: var(--accent-background-subtle);
   }
 }
-.data-\[state\=on\]\:text-accent-foreground {
+.data-\[state\=on\]\:text-accent-foreground-strong {
   &[data-state="on"] {
-    color: var(--accent-foreground);
+    color: var(--accent-foreground-strong);
   }
 }
 .data-\[state\=open\]\:rotate-180 {
@@ -3051,19 +2951,19 @@
     rotate: 180deg;
   }
 }
-.data-\[state\=open\]\:bg-accent {
+.data-\[state\=open\]\:bg-accent-background-subtle {
   &[data-state="open"] {
-    background-color: var(--accent);
+    background-color: var(--accent-background-subtle);
   }
 }
-.data-\[state\=open\]\:text-accent-foreground {
+.data-\[state\=open\]\:text-accent-foreground-strong {
   &[data-state="open"] {
-    color: var(--accent-foreground);
+    color: var(--accent-foreground-strong);
   }
 }
-.data-\[state\=selected\]\:bg-muted {
+.data-\[state\=selected\]\:bg-neutral-background-strong {
   &[data-state="selected"] {
-    background-color: var(--muted);
+    background-color: var(--neutral-background-strong);
   }
 }
 .data-\[state\=unchecked\]\:translate-x-0 {
@@ -3077,25 +2977,22 @@
     background-color: var(--switch-background);
   }
 }
-.data-\[variant\=destructive\]\:text-destructive {
+.data-\[variant\=destructive\]\:text-danger-action-default {
   &[data-variant="destructive"] {
-    color: var(--destructive);
+    color: var(--danger-action-default);
   }
 }
-.data-\[variant\=destructive\]\:focus\:bg-destructive\/10 {
+.data-\[variant\=destructive\]\:focus\:bg-danger-background-strong {
   &[data-variant="destructive"] {
     &:focus {
-      background-color: var(--destructive);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--destructive) 10%, transparent);
-      }
+      background-color: var(--danger-background-strong);
     }
   }
 }
-.data-\[variant\=destructive\]\:focus\:text-destructive {
+.data-\[variant\=destructive\]\:focus\:text-danger-foreground-strong {
   &[data-variant="destructive"] {
     &:focus {
-      color: var(--destructive);
+      color: var(--danger-foreground-strong);
     }
   }
 }
@@ -3161,6 +3058,11 @@
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 }
+.sm\:grid-cols-4 {
+  @media (width >= 40rem) {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+}
 .sm\:flex-row {
   @media (width >= 40rem) {
     flex-direction: row;
@@ -3186,6 +3088,11 @@
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
 }
+.md\:grid-cols-5 {
+  @media (width >= 48rem) {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+}
 .md\:grid-cols-8 {
   @media (width >= 48rem) {
     grid-template-columns: repeat(8, minmax(0, 1fr));
@@ -3237,6 +3144,11 @@
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
 }
+.lg\:grid-cols-6 {
+  @media (width >= 64rem) {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+  }
+}
 .lg\:grid-cols-16 {
   @media (width >= 64rem) {
     grid-template-columns: repeat(16, minmax(0, 1fr));
@@ -3252,12 +3164,9 @@
     border-color: var(--input);
   }
 }
-.dark\:bg-destructive\/20 {
+.dark\:bg-danger-background-subtle {
   &:is(.dark *) {
-    background-color: var(--destructive);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--destructive) 20%, transparent);
-    }
+    background-color: var(--danger-background-subtle);
   }
 }
 .dark\:bg-input\/30 {
@@ -3268,28 +3177,16 @@
     }
   }
 }
-.dark\:text-muted-foreground {
+.dark\:text-neutral-foreground-subtle {
   &:is(.dark *) {
-    color: var(--muted-foreground);
+    color: var(--neutral-foreground-subtle);
   }
 }
-.dark\:hover\:bg-accent {
+.dark\:hover\:bg-accent-action-hover {
   &:is(.dark *) {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--accent);
-      }
-    }
-  }
-}
-.dark\:hover\:bg-destructive\/30 {
-  &:is(.dark *) {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--destructive);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--destructive) 30%, transparent);
-        }
+        background-color: var(--accent-action-hover);
       }
     }
   }
@@ -3306,23 +3203,11 @@
     }
   }
 }
-.dark\:hover\:bg-muted\/50 {
-  &:is(.dark *) {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--muted);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--muted) 50%, transparent);
-        }
-      }
-    }
-  }
-}
-.dark\:hover\:text-accent-foreground {
+.dark\:hover\:text-accent-foreground-strong {
   &:is(.dark *) {
     &:hover {
       @media (hover: hover) {
-        color: var(--accent-foreground);
+        color: var(--accent-foreground-strong);
       }
     }
   }
@@ -3341,12 +3226,12 @@
     }
   }
 }
-.dark\:focus-visible\:ring-destructive\/40 {
+.dark\:focus-visible\:ring-danger-action-default\/40 {
   &:is(.dark *) {
     &:focus-visible {
-      --tw-ring-color: var(--destructive);
+      --tw-ring-color: var(--danger-action-default);
       @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
+        --tw-ring-color: color-mix(in oklab, var(--danger-action-default) 40%, transparent);
       }
     }
   }
@@ -3361,37 +3246,30 @@
     }
   }
 }
-.dark\:aria-invalid\:border-destructive\/50 {
+.dark\:aria-invalid\:border-danger-action-default\/50 {
   &:is(.dark *) {
     &[aria-invalid="true"] {
-      border-color: var(--destructive);
+      border-color: var(--danger-action-default);
       @supports (color: color-mix(in lab, red, red)) {
-        border-color: color-mix(in oklab, var(--destructive) 50%, transparent);
+        border-color: color-mix(in oklab, var(--danger-action-default) 50%, transparent);
       }
     }
   }
 }
-.dark\:aria-invalid\:ring-destructive\/40 {
+.dark\:aria-invalid\:ring-danger-action-default\/40 {
   &:is(.dark *) {
     &[aria-invalid="true"] {
-      --tw-ring-color: var(--destructive);
+      --tw-ring-color: var(--danger-action-default);
       @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
+        --tw-ring-color: color-mix(in oklab, var(--danger-action-default) 40%, transparent);
       }
     }
   }
 }
-.dark\:data-\[state\=checked\]\:bg-primary-foreground {
+.dark\:data-\[state\=checked\]\:bg-primary-foreground-strong {
   &:is(.dark *) {
     &[data-state="checked"] {
-      background-color: var(--primary-foreground);
-    }
-  }
-}
-.dark\:data-\[state\=unchecked\]\:bg-card-foreground {
-  &:is(.dark *) {
-    &[data-state="unchecked"] {
-      background-color: var(--card-foreground);
+      background-color: var(--primary-foreground-strong);
     }
   }
 }
@@ -3423,25 +3301,25 @@
     transition-duration: 200ms;
   }
 }
-.data-checked\:border-primary {
+.data-checked\:border-primary-action-default {
   &:where([data-state="checked"]), &:where([data-checked]:not([data-checked="false"])) {
-    border-color: var(--primary);
+    border-color: var(--primary-action-default);
   }
 }
-.data-checked\:bg-primary {
+.data-checked\:bg-primary-action-default {
   &:where([data-state="checked"]), &:where([data-checked]:not([data-checked="false"])) {
-    background-color: var(--primary);
+    background-color: var(--primary-action-default);
   }
 }
-.data-checked\:text-primary-foreground {
+.data-checked\:text-primary-action-foreground {
   &:where([data-state="checked"]), &:where([data-checked]:not([data-checked="false"])) {
-    color: var(--primary-foreground);
+    color: var(--primary-action-foreground);
   }
 }
-.dark\:data-checked\:bg-primary {
+.dark\:data-checked\:bg-primary-action-default {
   &:is(.dark *) {
     &:where([data-state="checked"]), &:where([data-checked]:not([data-checked="false"])) {
-      background-color: var(--primary);
+      background-color: var(--primary-action-default);
     }
   }
 }
@@ -3455,14 +3333,14 @@
     opacity: 50%;
   }
 }
-.data-active\:bg-card {
+.data-active\:bg-neutral-background-subtle {
   &:where([data-state="active"]), &:where([data-active]:not([data-active="false"])) {
-    background-color: var(--card);
+    background-color: var(--neutral-background-subtle);
   }
 }
-.data-active\:text-card-foreground {
+.data-active\:text-neutral-foreground-strong {
   &:where([data-state="active"]), &:where([data-active]:not([data-active="false"])) {
-    color: var(--card-foreground);
+    color: var(--neutral-foreground-strong);
   }
 }
 .group-data-\[variant\=default\]\/tabs-list\:data-active\:shadow-xs {
@@ -3515,10 +3393,10 @@
     }
   }
 }
-.dark\:data-active\:text-foreground {
+.dark\:data-active\:text-neutral-foreground-strong {
   &:is(.dark *) {
     &:where([data-state="active"]), &:where([data-active]:not([data-active="false"])) {
-      color: var(--foreground);
+      color: var(--neutral-foreground-strong);
     }
   }
 }
@@ -3587,9 +3465,9 @@
     font-weight: var(--font-weight-medium);
   }
 }
-.\[\&_\[cmdk-group-heading\]\]\:text-muted-foreground {
+.\[\&_\[cmdk-group-heading\]\]\:text-neutral-foreground-subtle {
   & [cmdk-group-heading] {
-    color: var(--muted-foreground);
+    color: var(--neutral-foreground-subtle);
   }
 }
 .\[\&_\[data-slot\=table-container\]\]\:rounded-none {
@@ -3637,9 +3515,9 @@
     height: calc(var(--spacing) * 4);
   }
 }
-.\[\&_svg\:not\(\[class\*\=\'text-\'\]\)\]\:text-muted-foreground {
+.\[\&_svg\:not\(\[class\*\=\'text-\'\]\)\]\:text-neutral-foreground-subtle {
   & svg:not([class*='text-']) {
-    color: var(--muted-foreground);
+    color: var(--neutral-foreground-subtle);
   }
 }
 .\[\&_tr\]\:border-b {
@@ -3685,66 +3563,60 @@
     }
   }
 }
-.\[a\]\:hover\:bg-destructive\/20 {
+.\[a\]\:hover\:bg-accent-background-subtle\/80 {
   &:is(a) {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--destructive);
+        background-color: var(--accent-background-subtle);
         @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--destructive) 20%, transparent);
+          background-color: color-mix(in oklab, var(--accent-background-subtle) 80%, transparent);
         }
       }
     }
   }
 }
-.\[a\]\:hover\:bg-muted {
+.\[a\]\:hover\:bg-danger-action-hover {
   &:is(a) {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--muted);
+        background-color: var(--danger-action-hover);
       }
     }
   }
 }
-.\[a\]\:hover\:bg-primary\/80 {
+.\[a\]\:hover\:bg-neutral-background-subtle {
   &:is(a) {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--primary);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--primary) 80%, transparent);
-        }
+        background-color: var(--neutral-background-subtle);
       }
     }
   }
 }
-.\[a\]\:hover\:bg-secondary\/80 {
+.\[a\]\:hover\:bg-primary-action-hover {
   &:is(a) {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--secondary);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--secondary) 80%, transparent);
-        }
+        background-color: var(--primary-action-hover);
       }
     }
   }
 }
-.\[a\]\:hover\:text-muted-foreground {
+.\[a\]\:hover\:text-neutral-foreground-subtle {
   &:is(a) {
     &:hover {
       @media (hover: hover) {
-        color: var(--muted-foreground);
+        color: var(--neutral-foreground-subtle);
       }
     }
   }
 }
-.\*\:\[a\]\:hover\:text-foreground {
+.\*\:\[a\]\:hover\:text-neutral-foreground-strong {
   :is(& > *) {
     &:is(a) {
       &:hover {
         @media (hover: hover) {
-          color: var(--foreground);
+          color: var(--neutral-foreground-strong);
         }
       }
     }
@@ -3793,11 +3665,11 @@
     }
   }
 }
-.data-\[variant\=destructive\]\:\*\:\[svg\]\:\!text-destructive {
+.data-\[variant\=destructive\]\:\*\:\[svg\]\:\!text-danger-action-default {
   &[data-variant="destructive"] {
     :is(& > *) {
       &:is(svg) {
-        color: var(--destructive) !important;
+        color: var(--danger-action-default) !important;
       }
     }
   }
@@ -3819,6 +3691,26 @@
     height: calc(var(--spacing) * 3.5);
   }
 }
+.\[\&\>svg\]\:h-5 {
+  &>svg {
+    height: calc(var(--spacing) * 5);
+  }
+}
+.\[\&\>svg\]\:h-8 {
+  &>svg {
+    height: calc(var(--spacing) * 8);
+  }
+}
+.\[\&\>svg\]\:w-5 {
+  &>svg {
+    width: calc(var(--spacing) * 5);
+  }
+}
+.\[\&\>svg\]\:w-8 {
+  &>svg {
+    width: calc(var(--spacing) * 8);
+  }
+}
 .\[\&\>tr\]\:last\:border-b-0 {
   &>tr {
     &:last-child {
@@ -3858,77 +3750,190 @@
 .c4-ui {
   font-family: var(--font-sans);
   color: var(--foreground);
-  --ref-white: #ffffff;
-  --ref-black: #000000;
-  --ref-neutral-25: #f9f9fb;
-  --ref-neutral-50: #fafafa;
-  --ref-neutral-100: #ececef;
-  --ref-neutral-200: #e4e4e7;
-  --ref-neutral-300: #d4d4d8;
-  --ref-neutral-400: #a1a1aa;
-  --ref-neutral-500: #71717a;
-  --ref-neutral-550: #5d5d6a;
-  --ref-neutral-600: #52525b;
-  --ref-neutral-650: #737380;
-  --ref-neutral-700: #3f3f46;
-  --ref-neutral-800: #27272a;
-  --ref-neutral-900: #18181b;
-  --ref-brand-50: #fef3ee;
-  --ref-brand-100: #ffece3;
-  --ref-brand-500: #fc5d0d;
-  --ref-brand-600: #c44500;
-  --ref-red-400: #e11d48;
-  --ref-red-600: #be123c;
-  --ref-emerald-400: #34d399;
-  --ref-emerald-600: #047857;
-  --ref-amber-400: #fbbf24;
-  --ref-amber-600: #d97706;
-  --ref-blue-400: #60a5fa;
-  --ref-blue-600: #2563eb;
-  --background: var(--ref-neutral-25);
-  --foreground: var(--ref-neutral-900);
-  --card: var(--ref-white);
-  --card-foreground: var(--ref-neutral-900);
-  --popover: var(--ref-white);
-  --popover-foreground: var(--ref-neutral-900);
-  --primary: var(--ref-brand-600);
-  --primary-foreground: var(--ref-white);
-  --secondary: var(--ref-neutral-200);
-  --secondary-foreground: var(--ref-neutral-900);
-  --muted: var(--ref-neutral-200);
-  --muted-foreground: var(--ref-neutral-550);
-  --accent: var(--ref-brand-100);
-  --accent-foreground: var(--ref-neutral-900);
-  --destructive: var(--ref-red-600);
-  --destructive-foreground: var(--ref-white);
-  --border: var(--ref-neutral-900);
+  --color-transparent: transparent;
+  --color-white: #ffffff;
+  --color-black: #000000;
+  --color-brand-50: #fef3ee;
+  --color-brand-100: #ffece3;
+  --color-brand-200: #ffd7c3;
+  --color-brand-300: #ffbba6;
+  --color-brand-400: #ffa088;
+  --color-brand-500: #fc5d0d;
+  --color-brand-600: #c44500;
+  --color-brand-700: #9c3700;
+  --color-brand-800: #742900;
+  --color-brand-900: #4c1b00;
+  --color-brand-950: #240e00;
+  --background: var(--color-white);
+  --foreground: var(--color-zinc-900);
+  --border: color-mix(in srgb, oklch(21% 0.006 285.885) 20%, transparent);
   @supports (color: color-mix(in lab, red, red)) {
-    --border: color-mix(in srgb, var(--ref-neutral-900) 20%, transparent);
+    --border: color-mix(in srgb, var(--color-zinc-900) 20%, transparent);
   }
-  --input: var(--ref-neutral-500);
-  --input-background: var(--ref-white);
-  --switch-background: var(--ref-neutral-300);
-  --ring: var(--ref-brand-600);
   --radius: 0.5rem;
-  --overlay: var(--ref-black);
+  --popover: var(--color-white);
+  --popover-foreground: var(--color-zinc-900);
+  --input: var(--color-zinc-500);
+  --input-background: var(--color-white);
+  --switch-background: var(--color-zinc-200);
+  --ring: var(--primary-border-subtle);
+  --neutral-action-default: var(--color-zinc-700);
+  --neutral-action-hover: var(--color-zinc-800);
+  --neutral-action-active: var(--color-zinc-900);
+  --neutral-action-disabled: color-mix(
+    in srgb,
+    oklch(37% 0.013 285.805) 38%,
+    transparent
+  );
   @supports (color: color-mix(in lab, red, red)) {
-    --overlay: color-mix(in srgb, var(--ref-black) 10%, transparent);
-  }
-  --sidebar: var(--ref-neutral-25);
-  --sidebar-foreground: var(--ref-neutral-900);
-  --sidebar-primary: var(--ref-brand-600);
-  --sidebar-primary-foreground: var(--ref-white);
-  --sidebar-accent: var(--ref-brand-500);
+    --neutral-action-disabled: color-mix(
+    in srgb,
+    var(--color-zinc-700) 38%,
+    transparent
+  );
+  }
+  --neutral-action-foreground: var(--color-zinc-50);
+  --neutral-background-subtle: var(--color-zinc-50);
+  --neutral-background-strong: var(--color-zinc-100);
+  --neutral-foreground-subtle: var(--color-zinc-700);
+  --neutral-foreground-strong: var(--color-zinc-900);
+  --neutral-border-subtle: var(--color-zinc-200);
+  --neutral-border-strong: var(--color-zinc-400);
+  --primary-action-default: var(--color-zinc-950);
+  --primary-action-hover: var(--color-zinc-800);
+  --primary-action-active: color-mix(in srgb, oklch(27.4% 0.006 286.033) 88%, black);
   @supports (color: color-mix(in lab, red, red)) {
-    --sidebar-accent: color-mix(in srgb, var(--ref-brand-500) 16%, transparent);
+    --primary-action-active: color-mix(in srgb, var(--color-zinc-800) 88%, black);
   }
-  --sidebar-accent-foreground: var(--ref-neutral-900);
-  --sidebar-border: var(--ref-neutral-900);
+  --primary-action-disabled: color-mix(
+    in srgb,
+    oklch(14.1% 0.005 285.823) 38%,
+    transparent
+  );
+  @supports (color: color-mix(in lab, red, red)) {
+    --primary-action-disabled: color-mix(
+    in srgb,
+    var(--color-zinc-950) 38%,
+    transparent
+  );
+  }
+  --primary-action-foreground: var(--color-white);
+  --primary-background-subtle: var(--color-zinc-50);
+  --primary-background-strong: var(--color-zinc-100);
+  --primary-foreground-subtle: var(--color-zinc-700);
+  --primary-foreground-strong: var(--color-zinc-900);
+  --primary-border-subtle: var(--color-zinc-200);
+  --primary-border-strong: var(--color-zinc-400);
+  --accent-action-default: var(--color-brand-700);
+  --accent-action-hover: var(--color-brand-800);
+  --accent-action-active: var(--color-brand-900);
+  --accent-action-disabled: var(--color-brand-700);
+  @supports (color: color-mix(in lab, red, red)) {
+    --accent-action-disabled: color-mix(
+    in srgb,
+    var(--color-brand-700) 38%,
+    transparent
+  );
+  }
+  --accent-action-foreground: var(--color-brand-50);
+  --accent-background-subtle: var(--color-brand-50);
+  --accent-background-strong: var(--color-brand-100);
+  --accent-foreground-subtle: var(--color-brand-700);
+  --accent-foreground-strong: var(--color-brand-900);
+  --accent-border-subtle: var(--color-brand-200);
+  --accent-border-strong: var(--color-brand-400);
+  --warning-action-default: var(--color-amber-700);
+  --warning-action-hover: var(--color-amber-800);
+  --warning-action-active: var(--color-amber-900);
+  --warning-action-disabled: color-mix(
+    in srgb,
+    oklch(55.5% 0.163 48.998) 38%,
+    transparent
+  );
+  @supports (color: color-mix(in lab, red, red)) {
+    --warning-action-disabled: color-mix(
+    in srgb,
+    var(--color-amber-700) 38%,
+    transparent
+  );
+  }
+  --warning-action-foreground: var(--color-amber-50);
+  --warning-background-subtle: var(--color-amber-50);
+  --warning-background-strong: var(--color-amber-100);
+  --warning-foreground-subtle: var(--color-amber-700);
+  --warning-foreground-strong: var(--color-amber-900);
+  --warning-border-subtle: var(--color-amber-200);
+  --warning-border-strong: var(--color-amber-400);
+  --danger-action-default: var(--color-rose-700);
+  --danger-action-hover: var(--color-rose-800);
+  --danger-action-active: var(--color-rose-900);
+  --danger-action-disabled: color-mix(
+    in srgb,
+    oklch(51.4% 0.222 16.935) 38%,
+    transparent
+  );
   @supports (color: color-mix(in lab, red, red)) {
-    --sidebar-border: color-mix(in srgb, var(--ref-neutral-900) 12%, transparent);
+    --danger-action-disabled: color-mix(
+    in srgb,
+    var(--color-rose-700) 38%,
+    transparent
+  );
+  }
+  --danger-action-foreground: var(--color-rose-50);
+  --danger-background-subtle: var(--color-rose-50);
+  --danger-background-strong: var(--color-rose-100);
+  --danger-foreground-subtle: var(--color-rose-700);
+  --danger-foreground-strong: var(--color-rose-900);
+  --danger-border-subtle: var(--color-rose-200);
+  --danger-border-strong: var(--color-rose-400);
+  --success-action-default: var(--color-emerald-700);
+  --success-action-hover: var(--color-emerald-800);
+  --success-action-active: var(--color-emerald-900);
+  --success-action-disabled: color-mix(
+    in srgb,
+    oklch(50.8% 0.118 165.612) 38%,
+    transparent
+  );
+  @supports (color: color-mix(in lab, red, red)) {
+    --success-action-disabled: color-mix(
+    in srgb,
+    var(--color-emerald-700) 38%,
+    transparent
+  );
+  }
+  --success-action-foreground: var(--color-emerald-50);
+  --success-background-subtle: var(--color-emerald-50);
+  --success-background-strong: var(--color-emerald-100);
+  --success-foreground-subtle: var(--color-emerald-700);
+  --success-foreground-strong: var(--color-emerald-900);
+  --success-border-subtle: var(--color-emerald-200);
+  --success-border-strong: var(--color-emerald-400);
+  --info-action-default: var(--color-blue-700);
+  --info-action-hover: var(--color-blue-800);
+  --info-action-active: var(--color-blue-900);
+  --info-action-disabled: color-mix(
+    in srgb,
+    oklch(48.8% 0.243 264.376) 38%,
+    transparent
+  );
+  @supports (color: color-mix(in lab, red, red)) {
+    --info-action-disabled: color-mix(
+    in srgb,
+    var(--color-blue-700) 38%,
+    transparent
+  );
+  }
+  --info-action-foreground: var(--color-blue-50);
+  --info-background-subtle: var(--color-blue-50);
+  --info-background-strong: var(--color-blue-100);
+  --info-foreground-subtle: var(--color-blue-700);
+  --info-foreground-strong: var(--color-blue-900);
+  --info-border-subtle: var(--color-blue-200);
+  --info-border-strong: var(--color-blue-400);
+  --overlay: color-mix(in srgb, #000 10%, transparent);
+  @supports (color: color-mix(in lab, red, red)) {
+    --overlay: color-mix(in srgb, var(--color-black) 10%, transparent);
   }
-  --sidebar-ring: var(--ref-brand-600);
-  --table-header-bg: var(--ref-neutral-100);
   --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
   --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
   --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
@@ -3938,12 +3943,6 @@
   --glass-bg: rgba(249, 249, 251, 0.88);
   --glass-border: rgba(24, 24, 27, 0.08);
   --glass-blur: 16px;
-  --success: var(--ref-emerald-600);
-  --success-foreground: var(--ref-white);
-  --warning: var(--ref-amber-600);
-  --warning-foreground: var(--ref-neutral-900);
-  --info: var(--ref-blue-600);
-  --info-foreground: var(--ref-white);
   --chart-1: oklch(0.646 0.222 41.116);
   --chart-2: oklch(0.6 0.118 184.704);
   --chart-3: oklch(0.398 0.07 227.392);
@@ -3951,57 +3950,171 @@
   --chart-5: oklch(0.769 0.188 70.08);
 }
 .dark .c4-ui, .c4-ui.dark {
-  --background: var(--ref-neutral-900);
-  --foreground: var(--ref-neutral-50);
-  --card: var(--ref-neutral-800);
-  --card-foreground: var(--ref-neutral-50);
-  --popover: var(--ref-neutral-800);
-  --popover-foreground: var(--ref-neutral-50);
-  --primary: var(--ref-brand-600);
-  --primary-foreground: var(--ref-white);
-  --secondary: var(--ref-neutral-700);
-  --secondary-foreground: var(--ref-neutral-50);
-  --muted: var(--ref-neutral-800);
-  --muted-foreground: var(--ref-neutral-400);
-  --accent: var(--ref-brand-500);
+  --background: var(--color-zinc-950);
+  --foreground: var(--color-zinc-50);
+  --border: color-mix(in srgb, #fff 10%, transparent);
   @supports (color: color-mix(in lab, red, red)) {
-    --accent: color-mix(in srgb, var(--ref-brand-500) 18%, transparent);
-  }
-  --accent-foreground: var(--ref-brand-50);
-  --destructive: var(--ref-red-400);
-  --destructive-foreground: var(--ref-neutral-50);
-  --border: var(--ref-white);
+    --border: color-mix(in srgb, var(--color-white) 10%, transparent);
+  }
+  --popover: var(--color-zinc-800);
+  --popover-foreground: var(--color-zinc-50);
+  --input: var(--color-zinc-500);
+  --input-background: var(--color-zinc-900);
+  --switch-background: var(--color-zinc-700);
+  --ring: var(--primary-border-subtle);
+  --neutral-action-default: var(--color-zinc-700);
+  --neutral-action-hover: var(--color-zinc-800);
+  --neutral-action-active: var(--color-zinc-900);
+  --neutral-action-disabled: color-mix(
+    in srgb,
+    oklch(37% 0.013 285.805) 38%,
+    transparent
+  );
   @supports (color: color-mix(in lab, red, red)) {
-    --border: color-mix(in srgb, var(--ref-white) 10%, transparent);
-  }
-  --input: var(--ref-neutral-650);
-  --input-background: var(--ref-white);
+    --neutral-action-disabled: color-mix(
+    in srgb,
+    var(--color-zinc-700) 38%,
+    transparent
+  );
+  }
+  --neutral-action-foreground: var(--color-zinc-50);
+  --neutral-background-subtle: var(--color-zinc-900);
+  --neutral-background-strong: var(--color-zinc-700);
+  --neutral-foreground-subtle: var(--color-zinc-400);
+  --neutral-foreground-strong: var(--color-zinc-50);
+  --neutral-border-subtle: var(--color-zinc-300);
+  --neutral-border-strong: var(--color-zinc-500);
+  --primary-action-default: var(--color-white);
+  --primary-action-hover: var(--color-zinc-100);
+  --primary-action-active: var(--color-zinc-200);
+  --primary-action-disabled: color-mix(
+    in srgb,
+    #fff 38%,
+    transparent
+  );
   @supports (color: color-mix(in lab, red, red)) {
-    --input-background: color-mix(in srgb, var(--ref-white) 5%, transparent);
-  }
-  --switch-background: var(--ref-neutral-600);
-  --ring: var(--ref-brand-600);
-  --overlay: var(--ref-black);
+    --primary-action-disabled: color-mix(
+    in srgb,
+    var(--color-white) 38%,
+    transparent
+  );
+  }
+  --primary-action-foreground: var(--color-zinc-950);
+  --primary-background-subtle: var(--color-zinc-600);
+  --primary-background-strong: var(--color-zinc-700);
+  --primary-foreground-subtle: var(--color-zinc-200);
+  --primary-foreground-strong: var(--color-white);
+  --primary-border-subtle: var(--color-zinc-300);
+  --primary-border-strong: var(--color-zinc-500);
+  --accent-action-default: var(--color-brand-700);
+  --accent-action-hover: var(--color-brand-800);
+  --accent-action-active: var(--color-brand-900);
+  --accent-action-disabled: var(--color-brand-700);
   @supports (color: color-mix(in lab, red, red)) {
-    --overlay: color-mix(in srgb, var(--ref-black) 40%, transparent);
-  }
-  --sidebar: var(--ref-neutral-900);
-  --sidebar-foreground: var(--ref-neutral-50);
-  --sidebar-primary: var(--ref-brand-600);
-  --sidebar-primary-foreground: var(--ref-white);
-  --sidebar-accent: var(--ref-brand-500);
+    --accent-action-disabled: color-mix(
+    in srgb,
+    var(--color-brand-700) 38%,
+    transparent
+  );
+  }
+  --accent-action-foreground: var(--color-white);
+  --accent-background-subtle: var(--color-brand-600);
+  --accent-background-strong: var(--color-brand-700);
+  --accent-foreground-subtle: var(--color-brand-200);
+  --accent-foreground-strong: var(--color-white);
+  --accent-border-subtle: var(--color-brand-300);
+  --accent-border-strong: var(--color-brand-500);
+  --warning-action-default: var(--color-amber-700);
+  --warning-action-hover: var(--color-amber-800);
+  --warning-action-active: var(--color-amber-900);
+  --warning-action-disabled: color-mix(
+    in srgb,
+    oklch(55.5% 0.163 48.998) 38%,
+    transparent
+  );
   @supports (color: color-mix(in lab, red, red)) {
-    --sidebar-accent: color-mix(in srgb, var(--ref-brand-500) 15%, transparent);
-  }
-  --sidebar-accent-foreground: var(--ref-brand-50);
-  --sidebar-border: var(--ref-white);
+    --warning-action-disabled: color-mix(
+    in srgb,
+    var(--color-amber-700) 38%,
+    transparent
+  );
+  }
+  --warning-action-foreground: var(--color-white);
+  --warning-background-subtle: var(--color-amber-600);
+  --warning-background-strong: var(--color-amber-700);
+  --warning-foreground-subtle: var(--color-amber-200);
+  --warning-foreground-strong: var(--color-white);
+  --warning-border-subtle: var(--color-amber-300);
+  --warning-border-strong: var(--color-amber-500);
+  --danger-action-default: var(--color-rose-700);
+  --danger-action-hover: var(--color-rose-800);
+  --danger-action-active: var(--color-rose-900);
+  --danger-action-disabled: color-mix(
+    in srgb,
+    oklch(51.4% 0.222 16.935) 38%,
+    transparent
+  );
   @supports (color: color-mix(in lab, red, red)) {
-    --sidebar-border: color-mix(in srgb, var(--ref-white) 10%, transparent);
-  }
-  --sidebar-ring: var(--ref-brand-600);
-  --table-header-bg: var(--ref-white);
+    --danger-action-disabled: color-mix(
+    in srgb,
+    var(--color-rose-700) 38%,
+    transparent
+  );
+  }
+  --danger-action-foreground: var(--color-white);
+  --danger-background-subtle: var(--color-rose-600);
+  --danger-background-strong: var(--color-rose-700);
+  --danger-foreground-subtle: var(--color-rose-200);
+  --danger-foreground-strong: var(--color-white);
+  --danger-border-subtle: var(--color-rose-300);
+  --danger-border-strong: var(--color-rose-500);
+  --success-action-default: var(--color-emerald-400);
+  --success-action-hover: var(--color-emerald-600);
+  --success-action-active: var(--color-emerald-700);
+  --success-action-disabled: color-mix(
+    in srgb,
+    oklch(76.5% 0.177 163.223) 38%,
+    transparent
+  );
+  @supports (color: color-mix(in lab, red, red)) {
+    --success-action-disabled: color-mix(
+    in srgb,
+    var(--color-emerald-400) 38%,
+    transparent
+  );
+  }
+  --success-action-foreground: var(--color-white);
+  --success-background-subtle: var(--color-emerald-600);
+  --success-background-strong: var(--color-emerald-700);
+  --success-foreground-subtle: var(--color-emerald-200);
+  --success-foreground-strong: var(--color-white);
+  --success-border-subtle: var(--color-emerald-300);
+  --success-border-strong: var(--color-emerald-500);
+  --info-action-default: var(--color-blue-400);
+  --info-action-hover: var(--color-blue-600);
+  --info-action-active: var(--color-blue-700);
+  --info-action-disabled: color-mix(
+    in srgb,
+    oklch(54.6% 0.245 262.881) 38%,
+    transparent
+  );
+  @supports (color: color-mix(in lab, red, red)) {
+    --info-action-disabled: color-mix(
+    in srgb,
+    var(--color-blue-600) 38%,
+    transparent
+  );
+  }
+  --info-action-foreground: var(--color-white);
+  --info-background-subtle: var(--color-blue-600);
+  --info-background-strong: var(--color-blue-700);
+  --info-foreground-subtle: var(--color-blue-200);
+  --info-foreground-strong: var(--color-white);
+  --info-border-subtle: var(--color-blue-300);
+  --info-border-strong: var(--color-blue-500);
+  --overlay: color-mix(in srgb, #000 40%, transparent);
   @supports (color: color-mix(in lab, red, red)) {
-    --table-header-bg: color-mix(in srgb, var(--ref-white) 4%, transparent);
+    --overlay: color-mix(in srgb, var(--color-black) 40%, transparent);
   }
   --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.25);
   --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.2);
@@ -4011,17 +4124,11 @@
   --shadow-glow: 0 0 0 1px rgba(252, 93, 13, 0.25), 0 2px 8px rgba(0, 0, 0, 0.3);
   --glass-bg: rgba(24, 24, 27, 0.82);
   --glass-border: rgba(255, 255, 255, 0.08);
-  --success: var(--ref-emerald-400);
-  --success-foreground: var(--ref-neutral-900);
-  --warning: var(--ref-amber-400);
-  --warning-foreground: var(--ref-neutral-900);
-  --info: var(--ref-blue-400);
-  --info-foreground: var(--ref-neutral-900);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
+  --chart-1: oklch(0.75 0.22 41.116);
+  --chart-2: oklch(0.72 0.14 184.704);
+  --chart-3: oklch(0.65 0.12 227.392);
+  --chart-4: oklch(0.86 0.2 84.429);
+  --chart-5: oklch(0.82 0.19 70.08);
 }
 @layer base {
   .c4-ui *, .c4-ui *::before, .c4-ui *::after {