@kushagradhawan/kookie-ui 0.1.21 → 0.1.23

package/components.css

@@ -283,10 +283,10 @@
 }
 @media (prefers-reduced-motion: no-preference) {
     .rt-PopperContent {
-        animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+        animation-timing-function: var(--ease-3);
     }
     .rt-PopperContent:where([data-state='open']) {
-        animation-duration: 160ms;
+        animation-duration: var(--duration-2);
     }
     .rt-PopperContent:where([data-state='open']):where([data-side='top']) {
         animation-name: rt-slide-from-top, rt-fade-in;
@@ -304,7 +304,7 @@
         animation-name: rt-slide-from-bottom, rt-fade-in;
     }
     .rt-PopperContent:where([data-state='closed']) {
-        animation-duration: 100ms;
+        animation-duration: var(--duration-1);
     }
     .rt-PopperContent:where([data-state='closed']):where([data-side='top']) {
         animation-name: rt-slide-to-top, rt-fade-out;
@@ -322,7 +322,7 @@
         animation-name: rt-slide-to-bottom, rt-fade-out;
     }
     .rt-BaseTabListTrigger:where([data-state='active'], [data-active])::before {
-        animation: rt-tab-indicator-appear var(--duration-3) var(--ease-3);
+        animation: rt-tab-indicator-appear var(--duration-2) var(--ease-3);
     }
 }
 .rt-Box {
@@ -465,7 +465,7 @@
     --scrollarea-scrollbar-vertical-margin-bottom: var(--space-1);
     --scrollarea-scrollbar-vertical-margin-left: var(--space-1);
     --scrollarea-scrollbar-vertical-margin-right: var(--space-1);
-    --segmented-control-transition-duration: 100ms;
+    --segmented-control-transition-duration: var(--duration-1);
     --spinner-animation-duration: 800ms;
     --spinner-opacity: 0.65;
 }
@@ -1354,6 +1354,10 @@
         -webkit-backdrop-filter: inherit;
                 backdrop-filter: inherit;
     }
+    :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) .rt-AvatarRoot:where(button):where(.rt-variant-outline):where(:hover:not(:disabled, [data-disabled])), :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) .rt-AvatarRoot:where(a):where(.rt-variant-outline):where(:hover:not(:disabled, [data-disabled])), :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) .rt-AvatarRoot:where([role="button"]):where(.rt-variant-outline):where(:hover:not(:disabled, [data-disabled])) {
+        -webkit-backdrop-filter: none !important;
+                backdrop-filter: none !important;
+    }
 }
 .rt-AvatarRoot:where(button):where(.rt-variant-outline):where(:active:not(:disabled, [data-disabled])), .rt-AvatarRoot:where(a):where(.rt-variant-outline):where(:active:not(:disabled, [data-disabled])), .rt-AvatarRoot:where([role="button"]):where(.rt-variant-outline):where(:active:not(:disabled, [data-disabled])) {
     background-color: var(--accent-3);
@@ -1368,6 +1372,10 @@
     -webkit-backdrop-filter: inherit;
             backdrop-filter: inherit;
 }
+:where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) .rt-AvatarRoot:where(button):where(.rt-variant-outline):where(:active:not(:disabled, [data-disabled])), :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) .rt-AvatarRoot:where(a):where(.rt-variant-outline):where(:active:not(:disabled, [data-disabled])), :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) .rt-AvatarRoot:where([role="button"]):where(.rt-variant-outline):where(:active:not(:disabled, [data-disabled])) {
+    -webkit-backdrop-filter: none !important;
+            backdrop-filter: none !important;
+}
 .rt-AvatarImage {
     width: 100%;
     height: 100%;
@@ -1951,8 +1959,11 @@
     --base-card-surface-hover-box-shadow: 0 0 0 1px var(--gray-a7);
     --base-card-surface-active-box-shadow: 0 0 0 1px var(--gray-a6);
     --base-card-classic-box-shadow-outer: inset 0 calc(-1 * var(--classic-border-width)) var(--classic-shadow-blur-large) var(--gray-a2), inset 0 var(--classic-border-width) var(--white-a12), inset 0 var(--classic-shadow-blur-medium) var(--classic-shadow-blur-large) var(--gray-a2), inset 0 calc(-1 * var(--classic-border-width)) var(--gray-a6), 0 0 0 var(--classic-border-width) var(--gray-a5), 0 var(--classic-shadow-offset-y) var(--classic-shadow-blur-small) var(--gray-a7);
+    --base-card-classic-box-shadow-inner: none;
     --base-card-classic-hover-box-shadow-outer: inset 0 calc(-1 * var(--classic-border-width)) var(--classic-shadow-blur-large) var(--gray-a2), inset 0 var(--classic-border-width) var(--white-a12), inset 0 var(--classic-shadow-blur-medium) var(--classic-shadow-blur-large) var(--gray-a2), inset 0 calc(-1 * var(--classic-border-width)) var(--gray-a6), 0 0 0 var(--classic-border-width) var(--gray-a5), 0 var(--classic-shadow-offset-y) var(--classic-shadow-blur-small) var(--gray-a7), 0 0 0 var(--classic-border-width) var(--gray-a5);
+    --base-card-classic-hover-box-shadow-inner: none;
     --base-card-classic-active-box-shadow-outer: inset 0 var(--classic-border-width) var(--black-a3), 0 0 0 var(--classic-border-width) var(--gray-a7);
+    --base-card-classic-active-box-shadow-inner: none;
     --base-card-classic-border-color: var(--gray-a3);
     --base-card-classic-hover-border-color: var(--gray-a3);
     --base-card-classic-active-border-color: var(--gray-a4);
@@ -2000,7 +2011,7 @@
     letter-spacing: var(--letter-spacing-0);
     padding: calc(var(--space-1) * 0.5) calc(var(--space-1) * 1.5);
     gap: calc(var(--space-1) * 1.5);
-    border-radius: max(var(--radius-1), var(--radius-full));
+    border-radius: max(calc(var(--radius-1) * var(--spacing-multiplier-medium)), var(--radius-full));
 }
 .rt-Badge:where(.rt-r-size-1):where(.rt-variant-ghost) {
     padding: calc(var(--space-1) * 0.25) var(--space-1);
@@ -2037,7 +2048,7 @@
         letter-spacing: var(--letter-spacing-0);
         padding: calc(var(--space-1) * 0.5) calc(var(--space-1) * 1.5);
         gap: calc(var(--space-1) * 1.5);
-        border-radius: max(var(--radius-1), var(--radius-full));
+        border-radius: max(calc(var(--radius-1) * var(--spacing-multiplier-medium)), var(--radius-full));
     }
     .rt-Badge:where(.xs\:rt-r-size-1):where(.rt-variant-ghost) {
         padding: calc(var(--space-1) * 0.25) var(--space-1);
@@ -2075,7 +2086,7 @@
         letter-spacing: var(--letter-spacing-0);
         padding: calc(var(--space-1) * 0.5) calc(var(--space-1) * 1.5);
         gap: calc(var(--space-1) * 1.5);
-        border-radius: max(var(--radius-1), var(--radius-full));
+        border-radius: max(calc(var(--radius-1) * var(--spacing-multiplier-medium)), var(--radius-full));
     }
     .rt-Badge:where(.sm\:rt-r-size-1):where(.rt-variant-ghost) {
         padding: calc(var(--space-1) * 0.25) var(--space-1);
@@ -2113,7 +2124,7 @@
         letter-spacing: var(--letter-spacing-0);
         padding: calc(var(--space-1) * 0.5) calc(var(--space-1) * 1.5);
         gap: calc(var(--space-1) * 1.5);
-        border-radius: max(var(--radius-1), var(--radius-full));
+        border-radius: max(calc(var(--radius-1) * var(--spacing-multiplier-medium)), var(--radius-full));
     }
     .rt-Badge:where(.md\:rt-r-size-1):where(.rt-variant-ghost) {
         padding: calc(var(--space-1) * 0.25) var(--space-1);
@@ -2151,7 +2162,7 @@
         letter-spacing: var(--letter-spacing-0);
         padding: calc(var(--space-1) * 0.5) calc(var(--space-1) * 1.5);
         gap: calc(var(--space-1) * 1.5);
-        border-radius: max(var(--radius-1), var(--radius-full));
+        border-radius: max(calc(var(--radius-1) * var(--spacing-multiplier-medium)), var(--radius-full));
     }
     .rt-Badge:where(.lg\:rt-r-size-1):where(.rt-variant-ghost) {
         padding: calc(var(--space-1) * 0.25) var(--space-1);
@@ -2189,7 +2200,7 @@
         letter-spacing: var(--letter-spacing-0);
         padding: calc(var(--space-1) * 0.5) calc(var(--space-1) * 1.5);
         gap: calc(var(--space-1) * 1.5);
-        border-radius: max(var(--radius-1), var(--radius-full));
+        border-radius: max(calc(var(--radius-1) * var(--spacing-multiplier-medium)), var(--radius-full));
     }
     .rt-Badge:where(.xl\:rt-r-size-1):where(.rt-variant-ghost) {
         padding: calc(var(--space-1) * 0.25) var(--space-1);
@@ -2782,6 +2793,10 @@
                 backdrop-filter: var(--backdrop-filter-components);
         --backdrop-filter-components: blur(var(--backdrop-blur-components));
     }
+    :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) .rt-BaseButton:where(.rt-variant-ghost):where(:hover) {
+        -webkit-backdrop-filter: none !important;
+                backdrop-filter: none !important;
+    }
 }
 .rt-BaseButton:where(.rt-variant-ghost):where(:focus-visible) {
     outline: 2px solid var(--focus-8);
@@ -2807,6 +2822,10 @@
             backdrop-filter: var(--backdrop-filter-components);
     --backdrop-filter-components: blur(var(--backdrop-blur-components));
 }
+:where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) .rt-BaseButton:where(.rt-variant-ghost):where([data-state='open']) {
+    -webkit-backdrop-filter: none !important;
+            backdrop-filter: none !important;
+}
 .rt-BaseButton:where(.rt-variant-ghost):where(:active:not([data-state='open'])) {
     background-color: var(--accent-4);
 }
@@ -2827,6 +2846,10 @@
             backdrop-filter: var(--backdrop-filter-components);
     --backdrop-filter-components: blur(var(--backdrop-blur-components));
 }
+:where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) .rt-BaseButton:where(.rt-variant-ghost):where(:active:not([data-state='open'])) {
+    -webkit-backdrop-filter: none !important;
+            backdrop-filter: none !important;
+}
 .rt-BaseButton:where(.rt-variant-ghost):where([data-disabled]) {
     color: var(--gray-a8);
     background-color: transparent;
@@ -3020,14 +3043,6 @@
     cursor: not-allowed;
     pointer-events: none;
 }
-.rt-BaseButton:where([data-state='on']) {
-    transform: scale(0.98);
-}
-@media (prefers-reduced-motion: reduce) {
-    .rt-BaseButton:where([data-state='on']) {
-        transform: none;
-    }
-}
 .rt-BaseButton:where([data-state='on']):where(.rt-variant-classic) {
     padding-top: var(--base-button-classic-active-padding-top);
     padding-bottom: 0;
@@ -3894,6 +3909,24 @@
 .rt-BaseCard::before {
     z-index: -1;
 }
+:where([data-panel-background='translucent']) .rt-BaseCard::before {
+    -webkit-backdrop-filter: var(--backdrop-filter-panel);
+            backdrop-filter: var(--backdrop-filter-panel);
+}
+:where(.rt-BaseCard[data-panel-background='solid']) .rt-BaseCard::before {
+    -webkit-backdrop-filter: none;
+            backdrop-filter: none;
+    --backdrop-filter-panel: none;
+}
+:where(.rt-BaseCard[data-panel-background='translucent']) .rt-BaseCard::before {
+    -webkit-backdrop-filter: var(--backdrop-filter-panel);
+            backdrop-filter: var(--backdrop-filter-panel);
+    --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
+}
+:where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) .rt-BaseCard::before {
+    -webkit-backdrop-filter: none !important;
+            backdrop-filter: none !important;
+}
 @supports (color: color-mix(in oklab, white, black)) {
     :where(.radix-themes) {
         --base-card-surface-box-shadow: 0 0 0 1px color-mix(in oklab, var(--gray-a5), var(--gray-5) var(--color-mix-percentage-light));
@@ -3908,6 +3941,9 @@
     --base-card-classic-box-shadow-outer: inset 0 calc(-1 * var(--classic-border-width)) var(--classic-shadow-blur-large) var(--gray-a3), inset 0 var(--classic-border-width) var(--gray-a11), inset 0 var(--classic-shadow-blur-medium) var(--classic-shadow-blur-large) var(--gray-a2), inset 0 calc(-2 * var(--classic-border-width)) var(--black-a11), 0 0 0 var(--classic-border-width-thick) var(--gray-a7), 0 var(--classic-shadow-offset-y) var(--classic-shadow-blur-small) var(--black-a12);
     --base-card-classic-hover-box-shadow-outer: inset 0 calc(-1 * var(--classic-border-width)) var(--classic-shadow-blur-large) var(--gray-a3), inset 0 var(--classic-border-width) var(--gray-a11), inset 0 var(--classic-shadow-blur-medium) var(--classic-shadow-blur-large) var(--gray-a2), inset 0 var(--classic-shadow-offset-negative) var(--black-a11), 0 0 0 var(--classic-border-width-thick) var(--gray-a7), 0 var(--classic-shadow-offset-y) var(--classic-shadow-blur-small) var(--black-a12), 0 0 0 var(--classic-border-width) var(--gray-a5);
     --base-card-classic-active-box-shadow-outer: inset 0 var(--classic-border-width) var(--black-a3), 0 0 0 var(--classic-border-width) var(--gray-a7);
+    --base-card-classic-box-shadow-inner: none;
+    --base-card-classic-hover-box-shadow-inner: none;
+    --base-card-classic-active-box-shadow-inner: none;
 }
 .rt-Card {
     --base-card-padding-top: var(--card-padding);
@@ -4081,49 +4117,48 @@
     box-shadow: var(--base-card-surface-active-box-shadow);
 }
 .rt-Card:where(.rt-variant-classic) {
-    --card-border-width: 0px;
-    --card-background-color: var(--gray-1);
-    position: relative;
-    top: var(--classic-elevation-offset);
-    box-shadow: inset 0 calc(-1 * var(--classic-border-width)) var(--classic-shadow-blur-large) var(--gray-a2), inset 0 var(--classic-border-width) var(--white-a12), inset 0 var(--classic-shadow-blur-medium) var(--classic-shadow-blur-large) var(--gray-a2), inset 0 calc(-1 * var(--classic-border-width)) var(--gray-a6), 0 0 0 var(--classic-border-width) var(--gray-a5), 0 var(--classic-shadow-offset-y) var(--classic-shadow-blur-small) var(--gray-a7);
-}
-:where(.dark, .dark-theme) .rt-Card:where(.rt-variant-classic), :where(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) .rt-Card:where(.rt-variant-classic) {
-    box-shadow: inset 0 calc(-1 * var(--classic-border-width)) var(--classic-shadow-blur-large) var(--gray-a3), inset 0 var(--classic-border-width) var(--gray-a11), inset 0 var(--classic-shadow-blur-medium) var(--classic-shadow-blur-large) var(--gray-a2), inset 0 calc(-2 * var(--classic-border-width)) var(--black-a11), 0 0 0 var(--classic-border-width-thick) var(--gray-a7), 0 var(--classic-shadow-offset-y) var(--classic-shadow-blur-small) var(--black-a12);
+    --card-border-width: 1px;
+    --card-background-color: var(--color-surface);
+    transition: box-shadow 120ms;
+    box-shadow: var(--base-card-classic-box-shadow-outer);
 }
 .rt-Card:where(.rt-variant-classic)::before {
     background-color: var(--card-background-color);
     -webkit-backdrop-filter: var(--backdrop-filter-panel);
             backdrop-filter: var(--backdrop-filter-panel);
 }
+.rt-Card:where(.rt-variant-classic)::after {
+    box-shadow: var(--base-card-classic-box-shadow-inner);
+}
 @media (hover: hover) {
     .rt-Card:where(.rt-variant-classic):where(:any-link, button, label):where(:hover) {
-        box-shadow: inset 0 calc(-1 * var(--classic-border-width)) var(--classic-shadow-blur-large) var(--gray-a2), inset 0 var(--classic-border-width) var(--white-a12), 0 0 0 var(--classic-border-width) var(--gray-a5);
-    }
-    :where(.dark, .dark-theme) .rt-Card:where(.rt-variant-classic):where(:any-link, button, label):where(:hover), :where(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) .rt-Card:where(.rt-variant-classic):where(:any-link, button, label):where(:hover) {
-        box-shadow: inset 0 calc(-1 * var(--classic-border-width)) var(--classic-shadow-blur-large) var(--gray-a3), inset 0 var(--classic-border-width) var(--gray-a11), 0 0 0 var(--classic-border-width) var(--gray-a5);
+        transition-duration: 40ms;
+        box-shadow: var(--base-card-classic-hover-box-shadow-outer);
     }
-    .rt-Card:where(.rt-variant-classic):where(:any-link, button, label):where(:hover)::before {
-        background-color: var(--gray-2);
+    .rt-Card:where(.rt-variant-classic):where(:any-link, button, label):where(:hover)::after {
+        box-shadow: var(--base-card-classic-hover-box-shadow-inner);
     }
 }
 .rt-Card:where(.rt-variant-classic):where(:any-link, button, label):where([data-state='open']) {
-    box-shadow: inset 0 calc(-1 * var(--classic-border-width)) var(--classic-shadow-blur-large) var(--gray-a2), inset 0 var(--classic-border-width) var(--white-a12), 0 0 0 var(--classic-border-width) var(--gray-a5);
+    transition-duration: 40ms;
+    box-shadow: var(--base-card-classic-hover-box-shadow-outer);
 }
-:where(.dark, .dark-theme) .rt-Card:where(.rt-variant-classic):where(:any-link, button, label):where([data-state='open']), :where(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) .rt-Card:where(.rt-variant-classic):where(:any-link, button, label):where([data-state='open']) {
-    box-shadow: inset 0 calc(-1 * var(--classic-border-width)) var(--classic-shadow-blur-large) var(--gray-a3), inset 0 var(--classic-border-width) var(--gray-a11), 0 0 0 var(--classic-border-width) var(--gray-a5);
-}
-.rt-Card:where(.rt-variant-classic):where(:any-link, button, label):where([data-state='open'])::before {
-    background-color: var(--gray-2);
+.rt-Card:where(.rt-variant-classic):where(:any-link, button, label):where([data-state='open'])::after {
+    box-shadow: var(--base-card-classic-hover-box-shadow-inner);
 }
 .rt-Card:where(.rt-variant-classic):where(:any-link, button, label):where(:active:not([data-state='open'])) {
-    top: 0;
-    box-shadow: inset 0 var(--classic-border-width) var(--black-a3), 0 0 0 var(--classic-border-width) var(--gray-a7);
+    box-shadow: var(--base-card-classic-active-box-shadow-outer);
 }
-.rt-Card:where(.rt-variant-classic):where(:any-link, button, label):where(:active:not([data-state='open']))::before {
-    background-color: var(--gray-2);
+.rt-Card:where(.rt-variant-classic):where(:any-link, button, label):where(:active:not([data-state='open']))::after {
+    box-shadow: var(--base-card-classic-active-box-shadow-inner);
 }
 .rt-Card:where(.rt-variant-ghost) {
     --card-border-width: 0px;
+    transition: var(--transition-background-blur);
+}
+.rt-Card:where(.rt-variant-ghost)::before {
+    -webkit-backdrop-filter: none !important;
+            backdrop-filter: none !important;
 }
 .rt-Card:where(.rt-variant-ghost):where([data-flush='true']) {
     --margin-top: 0px;
@@ -4147,20 +4182,83 @@
 }
 @media (hover: hover) {
     .rt-Card:where(.rt-variant-ghost):where(:any-link, button, label):where(:hover) {
+        background-color: var(--gray-3);
+    }
+    :where([data-panel-background='translucent']) .rt-Card:where(.rt-variant-ghost):where(:any-link, button, label):where(:hover) {
+        background-color: var(--gray-a3);
+        -webkit-backdrop-filter: var(--backdrop-filter-components);
+                backdrop-filter: var(--backdrop-filter-components);
+    }
+    .rt-Card:where(.rt-variant-ghost):where(:any-link, button, label):where(:hover):where([data-panel-background='solid']) {
+        background-color: var(--gray-3);
+        -webkit-backdrop-filter: none;
+                backdrop-filter: none;
+        --backdrop-filter-components: none;
+    }
+    .rt-Card:where(.rt-variant-ghost):where(:any-link, button, label):where(:hover):where([data-panel-background='translucent']) {
         background-color: var(--gray-a3);
+        -webkit-backdrop-filter: var(--backdrop-filter-components);
+                backdrop-filter: var(--backdrop-filter-components);
+        --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    }
+    :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) .rt-Card:where(.rt-variant-ghost):where(:any-link, button, label):where(:hover) {
+        -webkit-backdrop-filter: none !important;
+                backdrop-filter: none !important;
     }
     .rt-Card:where(.rt-variant-ghost):where(:any-link, button, label):where(:hover):where(:focus-visible) {
         background-color: var(--focus-a2);
     }
 }
 .rt-Card:where(.rt-variant-ghost):where(:any-link, button, label):where([data-state='open']) {
+    background-color: var(--gray-3);
+}
+:where([data-panel-background='translucent']) .rt-Card:where(.rt-variant-ghost):where(:any-link, button, label):where([data-state='open']) {
+    background-color: var(--gray-a3);
+    -webkit-backdrop-filter: var(--backdrop-filter-components);
+            backdrop-filter: var(--backdrop-filter-components);
+}
+.rt-Card:where(.rt-variant-ghost):where(:any-link, button, label):where([data-state='open']):where([data-panel-background='solid']) {
+    background-color: var(--gray-3);
+    -webkit-backdrop-filter: none;
+            backdrop-filter: none;
+    --backdrop-filter-components: none;
+}
+.rt-Card:where(.rt-variant-ghost):where(:any-link, button, label):where([data-state='open']):where([data-panel-background='translucent']) {
     background-color: var(--gray-a3);
+    -webkit-backdrop-filter: var(--backdrop-filter-components);
+            backdrop-filter: var(--backdrop-filter-components);
+    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+}
+:where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) .rt-Card:where(.rt-variant-ghost):where(:any-link, button, label):where([data-state='open']) {
+    -webkit-backdrop-filter: none !important;
+            backdrop-filter: none !important;
 }
 .rt-Card:where(.rt-variant-ghost):where(:any-link, button, label):where([data-state='open']):where(:focus-visible) {
     background-color: var(--focus-a2);
 }
 .rt-Card:where(.rt-variant-ghost):where(:any-link, button, label):where(:active:not([data-state='open'])) {
+    background-color: var(--gray-4);
+}
+:where([data-panel-background='translucent']) .rt-Card:where(.rt-variant-ghost):where(:any-link, button, label):where(:active:not([data-state='open'])) {
+    background-color: var(--gray-a4);
+    -webkit-backdrop-filter: var(--backdrop-filter-components);
+            backdrop-filter: var(--backdrop-filter-components);
+}
+.rt-Card:where(.rt-variant-ghost):where(:any-link, button, label):where(:active:not([data-state='open'])):where([data-panel-background='solid']) {
+    background-color: var(--gray-4);
+    -webkit-backdrop-filter: none;
+            backdrop-filter: none;
+    --backdrop-filter-components: none;
+}
+.rt-Card:where(.rt-variant-ghost):where(:any-link, button, label):where(:active:not([data-state='open'])):where([data-panel-background='translucent']) {
     background-color: var(--gray-a4);
+    -webkit-backdrop-filter: var(--backdrop-filter-components);
+            backdrop-filter: var(--backdrop-filter-components);
+    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+}
+:where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) .rt-Card:where(.rt-variant-ghost):where(:any-link, button, label):where(:active:not([data-state='open'])) {
+    -webkit-backdrop-filter: none !important;
+            backdrop-filter: none !important;
 }
 .rt-Card:where(.rt-variant-ghost):where(:any-link, button, label):where(:active:not([data-state='open'])):where(:focus-visible) {
     background-color: var(--focus-a2);
@@ -4227,6 +4325,10 @@
                 backdrop-filter: var(--backdrop-filter-panel);
         --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
     }
+    :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) .rt-Card:where(.rt-variant-soft):where(:any-link, button, label):where(:hover)::before {
+        -webkit-backdrop-filter: none !important;
+                backdrop-filter: none !important;
+    }
 }
 .rt-Card:where(.rt-variant-soft):where(:any-link, button, label):where([data-state='open'])::before {
     background-color: var(--gray-3);
@@ -4248,6 +4350,10 @@
             backdrop-filter: var(--backdrop-filter-panel);
     --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
 }
+:where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) .rt-Card:where(.rt-variant-soft):where(:any-link, button, label):where([data-state='open'])::before {
+    -webkit-backdrop-filter: none !important;
+            backdrop-filter: none !important;
+}
 .rt-Card:where(.rt-variant-soft):where(:any-link, button, label):where(:active:not([data-state='open']))::before {
     background-color: var(--gray-4);
 }
@@ -4414,6 +4520,7 @@
     height: var(--checkbox-size);
     width: var(--checkbox-size);
     border-radius: var(--checkbox-border-radius);
+    transition: var(--transition-checkbox);
 }
 .rt-BaseCheckboxIndicator {
     position: absolute;
@@ -4422,151 +4529,173 @@
     transform: translate(-50%, -50%);
     top: 50%;
     left: 50%;
+    transition: color var(--duration-1) var(--ease-1);
+}
+@media (prefers-reduced-motion: reduce) {
+    .rt-BaseCheckboxIndicator {
+        transition: none;
+    }
 }
 .rt-BaseCheckboxRoot:where(.rt-r-size-1) {
-    --checkbox-size: calc(var(--space-4) * 0.875);
-    --checkbox-indicator-size: calc(9px * var(--scaling));
-    --checkbox-border-radius: calc(var(--radius-1) * 0.875);
+    --checkbox-size: calc(var(--space-4) * var(--spacing-multiplier-medium));
+    --checkbox-indicator-size: var(--indicator-icon-size-1);
+    --checkbox-border-radius: calc(var(--radius-1) * var(--spacing-multiplier-small));
 }
 .rt-BaseCheckboxRoot:where(.rt-r-size-2) {
     --checkbox-size: var(--space-4);
-    --checkbox-indicator-size: calc(10px * var(--scaling));
-    --checkbox-border-radius: var(--radius-1);
+    --checkbox-indicator-size: var(--indicator-icon-size-2);
+    --checkbox-border-radius: calc(var(--radius-1) * var(--spacing-multiplier-medium));
 }
 .rt-BaseCheckboxRoot:where(.rt-r-size-3) {
-    --checkbox-size: calc(var(--space-4) * 1.25);
-    --checkbox-indicator-size: calc(12px * var(--scaling));
-    --checkbox-border-radius: calc(var(--radius-1) * 1.25);
+    --checkbox-size: calc(var(--space-4) * var(--spacing-multiplier-large));
+    --checkbox-indicator-size: var(--indicator-icon-size-3);
+    --checkbox-border-radius: calc(var(--radius-1) * var(--spacing-multiplier-medium));
 }
 @media (min-width: 520px) {
     .rt-BaseCheckboxRoot:where(.xs\:rt-r-size-1) {
-        --checkbox-size: calc(var(--space-4) * 0.875);
-        --checkbox-indicator-size: calc(9px * var(--scaling));
-        --checkbox-border-radius: calc(var(--radius-1) * 0.875);
+        --checkbox-size: calc(var(--space-4) * var(--spacing-multiplier-medium));
+        --checkbox-indicator-size: var(--indicator-icon-size-1);
+        --checkbox-border-radius: calc(var(--radius-1) * var(--spacing-multiplier-small));
     }
     .rt-BaseCheckboxRoot:where(.xs\:rt-r-size-2) {
         --checkbox-size: var(--space-4);
-        --checkbox-indicator-size: calc(10px * var(--scaling));
-        --checkbox-border-radius: var(--radius-1);
+        --checkbox-indicator-size: var(--indicator-icon-size-2);
+        --checkbox-border-radius: calc(var(--radius-1) * var(--spacing-multiplier-medium));
     }
     .rt-BaseCheckboxRoot:where(.xs\:rt-r-size-3) {
-        --checkbox-size: calc(var(--space-4) * 1.25);
-        --checkbox-indicator-size: calc(12px * var(--scaling));
-        --checkbox-border-radius: calc(var(--radius-1) * 1.25);
+        --checkbox-size: calc(var(--space-4) * var(--spacing-multiplier-large));
+        --checkbox-indicator-size: var(--indicator-icon-size-3);
+        --checkbox-border-radius: calc(var(--radius-1) * var(--spacing-multiplier-medium));
     }
 }
 @media (min-width: 768px) {
     .rt-BaseCheckboxRoot:where(.sm\:rt-r-size-1) {
-        --checkbox-size: calc(var(--space-4) * 0.875);
-        --checkbox-indicator-size: calc(9px * var(--scaling));
-        --checkbox-border-radius: calc(var(--radius-1) * 0.875);
+        --checkbox-size: calc(var(--space-4) * var(--spacing-multiplier-medium));
+        --checkbox-indicator-size: var(--indicator-icon-size-1);
+        --checkbox-border-radius: calc(var(--radius-1) * var(--spacing-multiplier-small));
     }
     .rt-BaseCheckboxRoot:where(.sm\:rt-r-size-2) {
         --checkbox-size: var(--space-4);
-        --checkbox-indicator-size: calc(10px * var(--scaling));
-        --checkbox-border-radius: var(--radius-1);
+        --checkbox-indicator-size: var(--indicator-icon-size-2);
+        --checkbox-border-radius: calc(var(--radius-1) * var(--spacing-multiplier-medium));
     }
     .rt-BaseCheckboxRoot:where(.sm\:rt-r-size-3) {
-        --checkbox-size: calc(var(--space-4) * 1.25);
-        --checkbox-indicator-size: calc(12px * var(--scaling));
-        --checkbox-border-radius: calc(var(--radius-1) * 1.25);
+        --checkbox-size: calc(var(--space-4) * var(--spacing-multiplier-large));
+        --checkbox-indicator-size: var(--indicator-icon-size-3);
+        --checkbox-border-radius: calc(var(--radius-1) * var(--spacing-multiplier-medium));
     }
 }
 @media (min-width: 1024px) {
     .rt-BaseCheckboxRoot:where(.md\:rt-r-size-1) {
-        --checkbox-size: calc(var(--space-4) * 0.875);
-        --checkbox-indicator-size: calc(9px * var(--scaling));
-        --checkbox-border-radius: calc(var(--radius-1) * 0.875);
+        --checkbox-size: calc(var(--space-4) * var(--spacing-multiplier-medium));
+        --checkbox-indicator-size: var(--indicator-icon-size-1);
+        --checkbox-border-radius: calc(var(--radius-1) * var(--spacing-multiplier-small));
     }
     .rt-BaseCheckboxRoot:where(.md\:rt-r-size-2) {
         --checkbox-size: var(--space-4);
-        --checkbox-indicator-size: calc(10px * var(--scaling));
-        --checkbox-border-radius: var(--radius-1);
+        --checkbox-indicator-size: var(--indicator-icon-size-2);
+        --checkbox-border-radius: calc(var(--radius-1) * var(--spacing-multiplier-medium));
     }
     .rt-BaseCheckboxRoot:where(.md\:rt-r-size-3) {
-        --checkbox-size: calc(var(--space-4) * 1.25);
-        --checkbox-indicator-size: calc(12px * var(--scaling));
-        --checkbox-border-radius: calc(var(--radius-1) * 1.25);
+        --checkbox-size: calc(var(--space-4) * var(--spacing-multiplier-large));
+        --checkbox-indicator-size: var(--indicator-icon-size-3);
+        --checkbox-border-radius: calc(var(--radius-1) * var(--spacing-multiplier-medium));
     }
 }
 @media (min-width: 1280px) {
     .rt-BaseCheckboxRoot:where(.lg\:rt-r-size-1) {
-        --checkbox-size: calc(var(--space-4) * 0.875);
-        --checkbox-indicator-size: calc(9px * var(--scaling));
-        --checkbox-border-radius: calc(var(--radius-1) * 0.875);
+        --checkbox-size: calc(var(--space-4) * var(--spacing-multiplier-medium));
+        --checkbox-indicator-size: var(--indicator-icon-size-1);
+        --checkbox-border-radius: calc(var(--radius-1) * var(--spacing-multiplier-small));
     }
     .rt-BaseCheckboxRoot:where(.lg\:rt-r-size-2) {
         --checkbox-size: var(--space-4);
-        --checkbox-indicator-size: calc(10px * var(--scaling));
-        --checkbox-border-radius: var(--radius-1);
+        --checkbox-indicator-size: var(--indicator-icon-size-2);
+        --checkbox-border-radius: calc(var(--radius-1) * var(--spacing-multiplier-medium));
     }
     .rt-BaseCheckboxRoot:where(.lg\:rt-r-size-3) {
-        --checkbox-size: calc(var(--space-4) * 1.25);
-        --checkbox-indicator-size: calc(12px * var(--scaling));
-        --checkbox-border-radius: calc(var(--radius-1) * 1.25);
+        --checkbox-size: calc(var(--space-4) * var(--spacing-multiplier-large));
+        --checkbox-indicator-size: var(--indicator-icon-size-3);
+        --checkbox-border-radius: calc(var(--radius-1) * var(--spacing-multiplier-medium));
     }
 }
 @media (min-width: 1640px) {
     .rt-BaseCheckboxRoot:where(.xl\:rt-r-size-1) {
-        --checkbox-size: calc(var(--space-4) * 0.875);
-        --checkbox-indicator-size: calc(9px * var(--scaling));
-        --checkbox-border-radius: calc(var(--radius-1) * 0.875);
+        --checkbox-size: calc(var(--space-4) * var(--spacing-multiplier-medium));
+        --checkbox-indicator-size: var(--indicator-icon-size-1);
+        --checkbox-border-radius: calc(var(--radius-1) * var(--spacing-multiplier-small));
     }
     .rt-BaseCheckboxRoot:where(.xl\:rt-r-size-2) {
         --checkbox-size: var(--space-4);
-        --checkbox-indicator-size: calc(10px * var(--scaling));
-        --checkbox-border-radius: var(--radius-1);
+        --checkbox-indicator-size: var(--indicator-icon-size-2);
+        --checkbox-border-radius: calc(var(--radius-1) * var(--spacing-multiplier-medium));
     }
     .rt-BaseCheckboxRoot:where(.xl\:rt-r-size-3) {
-        --checkbox-size: calc(var(--space-4) * 1.25);
-        --checkbox-indicator-size: calc(12px * var(--scaling));
-        --checkbox-border-radius: calc(var(--radius-1) * 1.25);
+        --checkbox-size: calc(var(--space-4) * var(--spacing-multiplier-large));
+        --checkbox-indicator-size: var(--indicator-icon-size-3);
+        --checkbox-border-radius: calc(var(--radius-1) * var(--spacing-multiplier-medium));
     }
 }
-.rt-BaseCheckboxRoot:where(.rt-variant-surface):where([data-state='unchecked'])::before {
+.rt-BaseCheckboxRoot:where(.rt-variant-solid):where([data-state='unchecked'])::before {
     background-color: var(--color-surface);
-    box-shadow: inset 0 0 0 1px var(--gray-a7);
+    box-shadow: inset 0 0 0 var(--border-width-inset) var(--gray-a7);
 }
-.rt-BaseCheckboxRoot:where(.rt-variant-surface):where([data-state='checked'], [data-state='indeterminate'])::before {
+.rt-BaseCheckboxRoot:where(.rt-variant-solid):where([data-state='checked'], [data-state='indeterminate'])::before {
     background-color: var(--accent-indicator);
 }
-.rt-BaseCheckboxRoot:where(.rt-variant-surface):where([data-state='checked'], [data-state='indeterminate']) :where(.rt-BaseCheckboxIndicator) {
+.rt-BaseCheckboxRoot:where(.rt-variant-solid):where([data-state='checked'], [data-state='indeterminate']) :where(.rt-BaseCheckboxIndicator) {
     color: var(--accent-contrast);
 }
-.rt-BaseCheckboxRoot:where(.rt-variant-surface):where([data-state='checked'], [data-state='indeterminate']):where(.rt-high-contrast)::before {
+.rt-BaseCheckboxRoot:where(.rt-variant-solid):where([data-state='checked'], [data-state='indeterminate']):where(.rt-high-contrast)::before {
     background-color: var(--accent-12);
 }
-.rt-BaseCheckboxRoot:where(.rt-variant-surface):where([data-state='checked'], [data-state='indeterminate']):where(.rt-high-contrast) :where(.rt-BaseCheckboxIndicator) {
+.rt-BaseCheckboxRoot:where(.rt-variant-solid):where([data-state='checked'], [data-state='indeterminate']):where(.rt-high-contrast) :where(.rt-BaseCheckboxIndicator) {
     color: var(--accent-1);
 }
-.rt-BaseCheckboxRoot:where(.rt-variant-surface):where(:disabled)::before {
-    box-shadow: inset 0 0 0 1px var(--gray-a6);
+.rt-BaseCheckboxRoot:where(.rt-variant-solid):where(:disabled)::before {
+    box-shadow: inset 0 0 0 var(--border-width-inset) var(--gray-a6);
     background-color: transparent;
 }
-.rt-BaseCheckboxRoot:where(.rt-variant-surface):where(:disabled) :where(.rt-BaseCheckboxIndicator) {
+.rt-BaseCheckboxRoot:where(.rt-variant-solid):where(:disabled) :where(.rt-BaseCheckboxIndicator) {
     color: var(--gray-a8);
 }
+.rt-BaseCheckboxRoot:where(.rt-variant-classic) {
+    position: relative;
+    top: var(--classic-elevation-offset);
+}
 .rt-BaseCheckboxRoot:where(.rt-variant-classic):where([data-state='unchecked'])::before {
-    background-color: var(--color-surface);
-    box-shadow: inset 0 0 0 1px var(--gray-a3), var(--shadow-1);
+    background-color: var(--accent-2);
+    box-shadow: inset 0 calc(-1 * var(--classic-border-width)) var(--classic-shadow-blur-large) var(--accent-a2), inset 0 var(--classic-border-width) var(--white-a12), inset 0 var(--classic-shadow-blur-medium) var(--classic-shadow-blur-large) var(--accent-a2), inset 0 calc(-1 * var(--classic-border-width)) var(--accent-a6), 0 0 0 var(--classic-border-width) var(--accent-a5), 0 var(--classic-shadow-offset-y) var(--classic-shadow-blur-small) var(--accent-a7);
+}
+:where(.dark, .dark-theme) .rt-BaseCheckboxRoot:where(.rt-variant-classic):where([data-state='unchecked'])::before, :where(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) .rt-BaseCheckboxRoot:where(.rt-variant-classic):where([data-state='unchecked'])::before {
+    box-shadow: inset 0 calc(-1 * var(--classic-border-width)) var(--classic-shadow-blur-large) var(--accent-a3), inset 0 var(--classic-border-width) var(--accent-a11), inset 0 var(--classic-shadow-blur-medium) var(--classic-shadow-blur-large) var(--accent-a2), inset 0 calc(-2 * var(--classic-border-width)) var(--black-a11), 0 0 0 var(--classic-border-width-thick) var(--accent-a7), 0 var(--classic-shadow-offset-y) var(--classic-shadow-blur-small) var(--black-a12);
 }
 .rt-BaseCheckboxRoot:where(.rt-variant-classic):where([data-state='checked'], [data-state='indeterminate'])::before {
-    background-color: var(--accent-indicator);
-    background-image: linear-gradient(to bottom, var(--white-a3), transparent, var(--black-a1));
-    box-shadow: inset 0 0.5px 0.5px var(--white-a4), inset 0 -0.5px 0.5px var(--black-a4);
+    background-color: var(--accent-3);
+    box-shadow: inset 0 calc(-1 * var(--classic-border-width)) var(--classic-shadow-blur-large) var(--accent-a2), inset 0 var(--classic-border-width) var(--white-a12), inset 0 var(--classic-shadow-blur-medium) var(--classic-shadow-blur-large) var(--accent-a2), inset 0 calc(-1 * var(--classic-border-width)) var(--accent-a6), 0 0 0 var(--classic-border-width) var(--accent-a5), 0 var(--classic-shadow-offset-y) var(--classic-shadow-blur-small) var(--accent-a7);
 }
 .rt-BaseCheckboxRoot:where(.rt-variant-classic):where([data-state='checked'], [data-state='indeterminate']) :where(.rt-BaseCheckboxIndicator) {
-    color: var(--accent-contrast);
+    color: var(--accent-a11);
 }
-.rt-BaseCheckboxRoot:where(.rt-variant-classic):where([data-state='checked'], [data-state='indeterminate']):where(.rt-high-contrast)::before {
-    background-color: var(--accent-12);
+:where(.dark, .dark-theme) .rt-BaseCheckboxRoot:where(.rt-variant-classic):where([data-state='checked'], [data-state='indeterminate'])::before, :where(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) .rt-BaseCheckboxRoot:where(.rt-variant-classic):where([data-state='checked'], [data-state='indeterminate'])::before {
+    background-color: var(--accent-3);
+    box-shadow: inset 0 calc(-1 * var(--classic-border-width)) var(--classic-shadow-blur-large) var(--accent-a3), inset 0 var(--classic-border-width) var(--accent-a11), inset 0 var(--classic-shadow-blur-medium) var(--classic-shadow-blur-large) var(--accent-a2), inset 0 calc(-2 * var(--classic-border-width)) var(--black-a11), 0 0 0 var(--classic-border-width-thick) var(--accent-a7), 0 var(--classic-shadow-offset-y) var(--classic-shadow-blur-small) var(--black-a12);
 }
 .rt-BaseCheckboxRoot:where(.rt-variant-classic):where([data-state='checked'], [data-state='indeterminate']):where(.rt-high-contrast) :where(.rt-BaseCheckboxIndicator) {
-    color: var(--accent-1);
+    color: var(--accent-12);
+}
+.rt-BaseCheckboxRoot:where(.rt-variant-classic):where(:active:not(:disabled)) {
+    top: calc(var(--classic-elevation-offset) + var(--classic-active-padding-offset-1));
+}
+.rt-BaseCheckboxRoot:where(.rt-variant-classic):where(:active:not(:disabled))::before {
+    box-shadow: inset 0 var(--classic-border-width) var(--black-a3), 0 0 0 var(--classic-border-width) var(--accent-a7);
+}
+.rt-BaseCheckboxRoot:where(.rt-variant-classic):where(:disabled) {
+    top: 0;
 }
 .rt-BaseCheckboxRoot:where(.rt-variant-classic):where(:disabled)::before {
-    box-shadow: var(--shadow-1);
-    background-color: transparent;
+    background-color: var(--gray-a3);
+    box-shadow: none;
     background-image: none;
 }
 .rt-BaseCheckboxRoot:where(.rt-variant-classic):where(:disabled) :where(.rt-BaseCheckboxIndicator) {
@@ -4593,8 +4722,9 @@
     cursor: default;
 }
 .rt-CheckboxCardsItem:where(:has(:focus-visible)) {
-    outline: 2px solid var(--focus-8);
-    outline-offset: -1px;
+    transition: var(--transition-focus);
+    outline: var(--focus-outline-width) solid var(--focus-8);
+    outline-offset: var(--focus-outline-offset-inset);
 }
 .rt-CheckboxCardsItem:where(:has(:focus-visible))::after {
     outline: inherit;
@@ -4627,18 +4757,18 @@
     font-size: var(--font-size-2);
     --line-height: var(--line-height-2);
     --letter-spacing: var(--letter-spacing-2);
-    --checkbox-cards-item-padding-top: calc(var(--space-3) / 1.2);
-    --checkbox-cards-item-padding-bottom: calc(var(--space-3) / 1.2);
+    --checkbox-cards-item-padding-top: calc(var(--space-3) * var(--spacing-multiplier-medium));
+    --checkbox-cards-item-padding-bottom: calc(var(--space-3) * var(--spacing-multiplier-medium));
     --checkbox-cards-item-padding-left: var(--space-3);
     --checkbox-cards-item-border-radius: var(--radius-3);
-    --checkbox-cards-item-checkbox-size: calc(var(--space-4) * 0.875);
+    --checkbox-cards-item-checkbox-size: calc(var(--space-4) * var(--spacing-multiplier-medium));
 }
 .rt-CheckboxCardsRoot:where(.rt-r-size-2) {
     font-size: var(--font-size-2);
     --line-height: var(--line-height-2);
     --letter-spacing: var(--letter-spacing-2);
-    --checkbox-cards-item-padding-top: calc(var(--space-4) * 0.875);
-    --checkbox-cards-item-padding-bottom: calc(var(--space-4) * 0.875);
+    --checkbox-cards-item-padding-top: calc(var(--space-4) * var(--spacing-multiplier-medium));
+    --checkbox-cards-item-padding-bottom: calc(var(--space-4) * var(--spacing-multiplier-medium));
     --checkbox-cards-item-padding-left: var(--space-4);
     --checkbox-cards-item-border-radius: var(--radius-3);
     --checkbox-cards-item-checkbox-size: var(--space-4);
@@ -4647,29 +4777,29 @@
     font-size: var(--font-size-3);
     --line-height: var(--line-height-3);
     --letter-spacing: var(--letter-spacing-3);
-    --checkbox-cards-item-padding-top: calc(var(--space-5) / 1.2);
-    --checkbox-cards-item-padding-bottom: calc(var(--space-5) / 1.2);
+    --checkbox-cards-item-padding-top: calc(var(--space-5) * var(--spacing-multiplier-medium));
+    --checkbox-cards-item-padding-bottom: calc(var(--space-5) * var(--spacing-multiplier-medium));
     --checkbox-cards-item-padding-left: var(--space-5);
     --checkbox-cards-item-border-radius: var(--radius-4);
-    --checkbox-cards-item-checkbox-size: calc(var(--space-4) * 1.25);
+    --checkbox-cards-item-checkbox-size: calc(var(--space-4) * var(--spacing-multiplier-large));
 }
 @media (min-width: 520px) {
     .rt-CheckboxCardsRoot:where(.xs\:rt-r-size-1) {
         font-size: var(--font-size-2);
         --line-height: var(--line-height-2);
         --letter-spacing: var(--letter-spacing-2);
-        --checkbox-cards-item-padding-top: calc(var(--space-3) / 1.2);
-        --checkbox-cards-item-padding-bottom: calc(var(--space-3) / 1.2);
+        --checkbox-cards-item-padding-top: calc(var(--space-3) * var(--spacing-multiplier-medium));
+        --checkbox-cards-item-padding-bottom: calc(var(--space-3) * var(--spacing-multiplier-medium));
         --checkbox-cards-item-padding-left: var(--space-3);
         --checkbox-cards-item-border-radius: var(--radius-3);
-        --checkbox-cards-item-checkbox-size: calc(var(--space-4) * 0.875);
+        --checkbox-cards-item-checkbox-size: calc(var(--space-4) * var(--spacing-multiplier-medium));
     }
     .rt-CheckboxCardsRoot:where(.xs\:rt-r-size-2) {
         font-size: var(--font-size-2);
         --line-height: var(--line-height-2);
         --letter-spacing: var(--letter-spacing-2);
-        --checkbox-cards-item-padding-top: calc(var(--space-4) * 0.875);
-        --checkbox-cards-item-padding-bottom: calc(var(--space-4) * 0.875);
+        --checkbox-cards-item-padding-top: calc(var(--space-4) * var(--spacing-multiplier-medium));
+        --checkbox-cards-item-padding-bottom: calc(var(--space-4) * var(--spacing-multiplier-medium));
         --checkbox-cards-item-padding-left: var(--space-4);
         --checkbox-cards-item-border-radius: var(--radius-3);
         --checkbox-cards-item-checkbox-size: var(--space-4);
@@ -4678,11 +4808,11 @@
         font-size: var(--font-size-3);
         --line-height: var(--line-height-3);
         --letter-spacing: var(--letter-spacing-3);
-        --checkbox-cards-item-padding-top: calc(var(--space-5) / 1.2);
-        --checkbox-cards-item-padding-bottom: calc(var(--space-5) / 1.2);
+        --checkbox-cards-item-padding-top: calc(var(--space-5) * var(--spacing-multiplier-medium));
+        --checkbox-cards-item-padding-bottom: calc(var(--space-5) * var(--spacing-multiplier-medium));
         --checkbox-cards-item-padding-left: var(--space-5);
         --checkbox-cards-item-border-radius: var(--radius-4);
-        --checkbox-cards-item-checkbox-size: calc(var(--space-4) * 1.25);
+        --checkbox-cards-item-checkbox-size: calc(var(--space-4) * var(--spacing-multiplier-large));
     }
 }
 @media (min-width: 768px) {
@@ -4690,18 +4820,18 @@
         font-size: var(--font-size-2);
         --line-height: var(--line-height-2);
         --letter-spacing: var(--letter-spacing-2);
-        --checkbox-cards-item-padding-top: calc(var(--space-3) / 1.2);
-        --checkbox-cards-item-padding-bottom: calc(var(--space-3) / 1.2);
+        --checkbox-cards-item-padding-top: calc(var(--space-3) * var(--spacing-multiplier-medium));
+        --checkbox-cards-item-padding-bottom: calc(var(--space-3) * var(--spacing-multiplier-medium));
         --checkbox-cards-item-padding-left: var(--space-3);
         --checkbox-cards-item-border-radius: var(--radius-3);
-        --checkbox-cards-item-checkbox-size: calc(var(--space-4) * 0.875);
+        --checkbox-cards-item-checkbox-size: calc(var(--space-4) * var(--spacing-multiplier-medium));
     }
     .rt-CheckboxCardsRoot:where(.sm\:rt-r-size-2) {
         font-size: var(--font-size-2);
         --line-height: var(--line-height-2);
         --letter-spacing: var(--letter-spacing-2);
-        --checkbox-cards-item-padding-top: calc(var(--space-4) * 0.875);
-        --checkbox-cards-item-padding-bottom: calc(var(--space-4) * 0.875);
+        --checkbox-cards-item-padding-top: calc(var(--space-4) * var(--spacing-multiplier-medium));
+        --checkbox-cards-item-padding-bottom: calc(var(--space-4) * var(--spacing-multiplier-medium));
         --checkbox-cards-item-padding-left: var(--space-4);
         --checkbox-cards-item-border-radius: var(--radius-3);
         --checkbox-cards-item-checkbox-size: var(--space-4);
@@ -4710,11 +4840,11 @@
         font-size: var(--font-size-3);
         --line-height: var(--line-height-3);
         --letter-spacing: var(--letter-spacing-3);
-        --checkbox-cards-item-padding-top: calc(var(--space-5) / 1.2);
-        --checkbox-cards-item-padding-bottom: calc(var(--space-5) / 1.2);
+        --checkbox-cards-item-padding-top: calc(var(--space-5) * var(--spacing-multiplier-medium));
+        --checkbox-cards-item-padding-bottom: calc(var(--space-5) * var(--spacing-multiplier-medium));
         --checkbox-cards-item-padding-left: var(--space-5);
         --checkbox-cards-item-border-radius: var(--radius-4);
-        --checkbox-cards-item-checkbox-size: calc(var(--space-4) * 1.25);
+        --checkbox-cards-item-checkbox-size: calc(var(--space-4) * var(--spacing-multiplier-large));
     }
 }
 @media (min-width: 1024px) {
@@ -4722,18 +4852,18 @@
         font-size: var(--font-size-2);
         --line-height: var(--line-height-2);
         --letter-spacing: var(--letter-spacing-2);
-        --checkbox-cards-item-padding-top: calc(var(--space-3) / 1.2);
-        --checkbox-cards-item-padding-bottom: calc(var(--space-3) / 1.2);
+        --checkbox-cards-item-padding-top: calc(var(--space-3) * var(--spacing-multiplier-medium));
+        --checkbox-cards-item-padding-bottom: calc(var(--space-3) * var(--spacing-multiplier-medium));
         --checkbox-cards-item-padding-left: var(--space-3);
         --checkbox-cards-item-border-radius: var(--radius-3);
-        --checkbox-cards-item-checkbox-size: calc(var(--space-4) * 0.875);
+        --checkbox-cards-item-checkbox-size: calc(var(--space-4) * var(--spacing-multiplier-medium));
     }
     .rt-CheckboxCardsRoot:where(.md\:rt-r-size-2) {
         font-size: var(--font-size-2);
         --line-height: var(--line-height-2);
         --letter-spacing: var(--letter-spacing-2);
-        --checkbox-cards-item-padding-top: calc(var(--space-4) * 0.875);
-        --checkbox-cards-item-padding-bottom: calc(var(--space-4) * 0.875);
+        --checkbox-cards-item-padding-top: calc(var(--space-4) * var(--spacing-multiplier-medium));
+        --checkbox-cards-item-padding-bottom: calc(var(--space-4) * var(--spacing-multiplier-medium));
         --checkbox-cards-item-padding-left: var(--space-4);
         --checkbox-cards-item-border-radius: var(--radius-3);
         --checkbox-cards-item-checkbox-size: var(--space-4);
@@ -4742,11 +4872,11 @@
         font-size: var(--font-size-3);
         --line-height: var(--line-height-3);
         --letter-spacing: var(--letter-spacing-3);
-        --checkbox-cards-item-padding-top: calc(var(--space-5) / 1.2);
-        --checkbox-cards-item-padding-bottom: calc(var(--space-5) / 1.2);
+        --checkbox-cards-item-padding-top: calc(var(--space-5) * var(--spacing-multiplier-medium));
+        --checkbox-cards-item-padding-bottom: calc(var(--space-5) * var(--spacing-multiplier-medium));
         --checkbox-cards-item-padding-left: var(--space-5);
         --checkbox-cards-item-border-radius: var(--radius-4);
-        --checkbox-cards-item-checkbox-size: calc(var(--space-4) * 1.25);
+        --checkbox-cards-item-checkbox-size: calc(var(--space-4) * var(--spacing-multiplier-large));
     }
 }
 @media (min-width: 1280px) {
@@ -4754,18 +4884,18 @@
         font-size: var(--font-size-2);
         --line-height: var(--line-height-2);
         --letter-spacing: var(--letter-spacing-2);
-        --checkbox-cards-item-padding-top: calc(var(--space-3) / 1.2);
-        --checkbox-cards-item-padding-bottom: calc(var(--space-3) / 1.2);
+        --checkbox-cards-item-padding-top: calc(var(--space-3) * var(--spacing-multiplier-medium));
+        --checkbox-cards-item-padding-bottom: calc(var(--space-3) * var(--spacing-multiplier-medium));
         --checkbox-cards-item-padding-left: var(--space-3);
         --checkbox-cards-item-border-radius: var(--radius-3);
-        --checkbox-cards-item-checkbox-size: calc(var(--space-4) * 0.875);
+        --checkbox-cards-item-checkbox-size: calc(var(--space-4) * var(--spacing-multiplier-medium));
     }
     .rt-CheckboxCardsRoot:where(.lg\:rt-r-size-2) {
         font-size: var(--font-size-2);
         --line-height: var(--line-height-2);
         --letter-spacing: var(--letter-spacing-2);
-        --checkbox-cards-item-padding-top: calc(var(--space-4) * 0.875);
-        --checkbox-cards-item-padding-bottom: calc(var(--space-4) * 0.875);
+        --checkbox-cards-item-padding-top: calc(var(--space-4) * var(--spacing-multiplier-medium));
+        --checkbox-cards-item-padding-bottom: calc(var(--space-4) * var(--spacing-multiplier-medium));
         --checkbox-cards-item-padding-left: var(--space-4);
         --checkbox-cards-item-border-radius: var(--radius-3);
         --checkbox-cards-item-checkbox-size: var(--space-4);
@@ -4774,11 +4904,11 @@
         font-size: var(--font-size-3);
         --line-height: var(--line-height-3);
         --letter-spacing: var(--letter-spacing-3);
-        --checkbox-cards-item-padding-top: calc(var(--space-5) / 1.2);
-        --checkbox-cards-item-padding-bottom: calc(var(--space-5) / 1.2);
+        --checkbox-cards-item-padding-top: calc(var(--space-5) * var(--spacing-multiplier-medium));
+        --checkbox-cards-item-padding-bottom: calc(var(--space-5) * var(--spacing-multiplier-medium));
         --checkbox-cards-item-padding-left: var(--space-5);
         --checkbox-cards-item-border-radius: var(--radius-4);
-        --checkbox-cards-item-checkbox-size: calc(var(--space-4) * 1.25);
+        --checkbox-cards-item-checkbox-size: calc(var(--space-4) * var(--spacing-multiplier-large));
     }
 }
 @media (min-width: 1640px) {
@@ -4786,18 +4916,18 @@
         font-size: var(--font-size-2);
         --line-height: var(--line-height-2);
         --letter-spacing: var(--letter-spacing-2);
-        --checkbox-cards-item-padding-top: calc(var(--space-3) / 1.2);
-        --checkbox-cards-item-padding-bottom: calc(var(--space-3) / 1.2);
+        --checkbox-cards-item-padding-top: calc(var(--space-3) * var(--spacing-multiplier-medium));
+        --checkbox-cards-item-padding-bottom: calc(var(--space-3) * var(--spacing-multiplier-medium));
         --checkbox-cards-item-padding-left: var(--space-3);
         --checkbox-cards-item-border-radius: var(--radius-3);
-        --checkbox-cards-item-checkbox-size: calc(var(--space-4) * 0.875);
+        --checkbox-cards-item-checkbox-size: calc(var(--space-4) * var(--spacing-multiplier-medium));
     }
     .rt-CheckboxCardsRoot:where(.xl\:rt-r-size-2) {
         font-size: var(--font-size-2);
         --line-height: var(--line-height-2);
         --letter-spacing: var(--letter-spacing-2);
-        --checkbox-cards-item-padding-top: calc(var(--space-4) * 0.875);
-        --checkbox-cards-item-padding-bottom: calc(var(--space-4) * 0.875);
+        --checkbox-cards-item-padding-top: calc(var(--space-4) * var(--spacing-multiplier-medium));
+        --checkbox-cards-item-padding-bottom: calc(var(--space-4) * var(--spacing-multiplier-medium));
         --checkbox-cards-item-padding-left: var(--space-4);
         --checkbox-cards-item-border-radius: var(--radius-3);
         --checkbox-cards-item-checkbox-size: var(--space-4);
@@ -4806,16 +4936,17 @@
         font-size: var(--font-size-3);
         --line-height: var(--line-height-3);
         --letter-spacing: var(--letter-spacing-3);
-        --checkbox-cards-item-padding-top: calc(var(--space-5) / 1.2);
-        --checkbox-cards-item-padding-bottom: calc(var(--space-5) / 1.2);
+        --checkbox-cards-item-padding-top: calc(var(--space-5) * var(--spacing-multiplier-medium));
+        --checkbox-cards-item-padding-bottom: calc(var(--space-5) * var(--spacing-multiplier-medium));
         --checkbox-cards-item-padding-left: var(--space-5);
         --checkbox-cards-item-border-radius: var(--radius-4);
-        --checkbox-cards-item-checkbox-size: calc(var(--space-4) * 1.25);
+        --checkbox-cards-item-checkbox-size: calc(var(--space-4) * var(--spacing-multiplier-large));
     }
 }
 :where(.rt-CheckboxCardsRoot.rt-variant-surface) .rt-CheckboxCardsItem {
-    --checkbox-cards-item-border-width: 1px;
+    --checkbox-cards-item-border-width: var(--border-width-standard);
     --checkbox-cards-item-background-color: var(--color-surface);
+    transition: var(--transition-card);
 }
 :where(.rt-CheckboxCardsRoot.rt-variant-surface) .rt-CheckboxCardsItem::before {
     background-color: var(--checkbox-cards-item-background-color);
@@ -4824,14 +4955,23 @@
     box-shadow: var(--base-card-surface-box-shadow);
 }
 @media (hover: hover) {
+    :where(.rt-CheckboxCardsRoot.rt-variant-surface) .rt-CheckboxCardsItem:where(:not(:has(:disabled)):hover) {
+        transition-duration: var(--duration-1);
+    }
     :where(.rt-CheckboxCardsRoot.rt-variant-surface) .rt-CheckboxCardsItem:where(:not(:has(:disabled)):hover)::after {
         box-shadow: var(--base-card-surface-hover-box-shadow);
     }
 }
+:where(.rt-CheckboxCardsRoot.rt-variant-surface):where([data-panel-background='solid']) .rt-CheckboxCardsItem {
+    --color-surface: var(--color-surface-solid);
+}
+:where(.rt-CheckboxCardsRoot.rt-variant-surface):where([data-panel-background='translucent']) .rt-CheckboxCardsItem {
+    --color-surface: var(--color-surface-translucent);
+}
 :where(.rt-CheckboxCardsRoot.rt-variant-classic) .rt-CheckboxCardsItem {
-    --checkbox-cards-item-border-width: 1px;
+    --checkbox-cards-item-border-width: var(--border-width-standard);
     --checkbox-cards-item-background-color: var(--color-surface);
-    transition: box-shadow 120ms;
+    transition: var(--transition-card);
     box-shadow: var(--base-card-classic-box-shadow-outer);
 }
 :where(.rt-CheckboxCardsRoot.rt-variant-classic) .rt-CheckboxCardsItem::before {
@@ -4842,13 +4982,19 @@
 }
 @media (hover: hover) {
     :where(.rt-CheckboxCardsRoot.rt-variant-classic) .rt-CheckboxCardsItem:where(:not(:has(:disabled)):hover) {
-        transition-duration: 40ms;
+        transition-duration: var(--duration-1);
         box-shadow: var(--base-card-classic-hover-box-shadow-outer);
     }
     :where(.rt-CheckboxCardsRoot.rt-variant-classic) .rt-CheckboxCardsItem:where(:not(:has(:disabled)):hover)::after {
         box-shadow: var(--base-card-classic-hover-box-shadow-inner);
     }
 }
+:where(.rt-CheckboxCardsRoot.rt-variant-classic):where([data-panel-background='solid']) .rt-CheckboxCardsItem {
+    --color-surface: var(--color-surface-solid);
+}
+:where(.rt-CheckboxCardsRoot.rt-variant-classic):where([data-panel-background='translucent']) .rt-CheckboxCardsItem {
+    --color-surface: var(--color-surface-translucent);
+}
 @media (pointer: coarse) {
     .rt-CheckboxCardsItem:where(:active:not(:focus-visible))::before {
         background-image: linear-gradient(var(--gray-a4), var(--gray-a4));
@@ -7657,16 +7803,32 @@
 }
 @media (hover: hover) {
     .rt-Image:where(:any-link, button, label):where(:hover) {
-        transform: scale(1.02);
         box-shadow: var(--box-shadow, var(--shadow-2)), 0 0 0 1px var(--gray-a4);
+        filter: brightness(1.05) contrast(1.02);
     }
 }
+.rt-Image:where(:any-link, button, label):where(:active) {
+    filter: brightness(0.98) contrast(1.02);
+}
 .rt-Image:where(:any-link, button, label):where(:focus-visible) {
     outline: 2px solid var(--focus-8);
-    outline-offset: 2px;
+    outline-offset: -2px;
 }
-.rt-Image:where(:any-link, button, label):where(:active) {
-    transform: scale(0.98);
+:where(:any-link, button, label) .rt-Image {
+    cursor: pointer;
+}
+@media (hover: hover) {
+    :where(:any-link, button, label) .rt-Image:where(:hover) {
+        box-shadow: var(--box-shadow, var(--shadow-2)), 0 0 0 1px var(--gray-a4);
+        filter: brightness(1.05) contrast(1.02);
+    }
+}
+:where(:any-link, button, label) .rt-Image:where(:active) {
+    filter: brightness(0.98) contrast(1.02);
+}
+:where(:any-link, button, label):where(:focus-visible) .rt-Image {
+    outline: 2px solid var(--focus-8);
+    outline-offset: -2px;
 }
 .rt-variant-blur {
     position: relative;
@@ -7682,15 +7844,15 @@
 }
 @media (hover: hover) {
     .rt-variant-blur:where(:any-link, button, label):where(:hover) {
-        transform: scale(1.02);
+        filter: brightness(1.05) contrast(1.02);
     }
 }
+.rt-variant-blur:where(:any-link, button, label):where(:active) {
+    filter: brightness(0.98) contrast(1.02);
+}
 .rt-variant-blur:where(:any-link, button, label):where(:focus-visible) {
     outline: 2px solid var(--focus-8);
-    outline-offset: 2px;
-}
-.rt-variant-blur:where(:any-link, button, label):where(:active) {
-    transform: scale(0.98);
+    outline-offset: -2px;
 }
 .rt-variant-blur:where(:any-link, button, label) .rt-Image {
     cursor: inherit;
@@ -8873,13 +9035,13 @@
 .rt-ProgressRoot {
     --progress-value: 0;
     --progress-max: 100;
-    --progress-duration: 5s;
+    --progress-duration: var(--progress-default-duration);
     pointer-events: none;
     position: relative;
     overflow: hidden;
     flex-grow: 1;
     height: var(--progress-height);
-    border-radius: max(calc(var(--radius-factor) * var(--progress-height) / 3), calc(var(--radius-factor) * var(--radius-thumb)));
+    border-radius: max(calc(var(--radius-factor) * var(--progress-height) / var(--progress-border-radius-factor)), calc(var(--radius-factor) * var(--radius-thumb)));
 }
 .rt-ProgressRoot::after {
     position: absolute;
@@ -8889,16 +9051,16 @@
 }
 .rt-ProgressIndicator {
     display: block;
-    height: 100%;
-    width: 100%;
+    height: var(--position-full);
+    width: var(--position-full);
     transform: scaleX(calc(var(--progress-value) / var(--progress-max)));
     transform-origin: left center;
-    transition: transform 120ms;
+    transition: var(--transition-progress);
 }
 .rt-ProgressIndicator:where([data-state='indeterminate']) {
     animation-name: rt-progress-indicator-indeterminate-grow, var(--progress-indicator-indeterminate-animation-start), var(--progress-indicator-indeterminate-animation-repeat);
-    animation-delay: 0s, calc(var(--progress-duration) + 5s), calc(var(--progress-duration) + 7.5s);
-    animation-duration: var(--progress-duration), 2.5s, 5s;
+    animation-delay: 0s, calc(var(--progress-duration) + var(--progress-animation-delay-start)), calc(var(--progress-duration) + var(--progress-animation-delay-shine));
+    animation-duration: var(--progress-duration), var(--progress-animation-duration-fade), var(--progress-animation-duration-pulse);
     animation-iteration-count: 1, 1, infinite;
     animation-fill-mode: both, none, none;
     animation-direction: normal, normal, alternate;
@@ -8907,45 +9069,45 @@
     position: absolute;
     inset: 0;
     content: '';
-    width: 400%;
+    width: calc(var(--position-full) * var(--progress-shine-width-multiplier));
     animation-name: rt-progress-indicator-indeterminate-shine-from-left;
-    animation-delay: calc(var(--progress-duration) + 5s);
-    animation-duration: 5s;
+    animation-delay: calc(var(--progress-duration) + var(--progress-animation-delay-start));
+    animation-duration: var(--progress-animation-duration-pulse);
     animation-fill-mode: backwards;
     animation-iteration-count: infinite;
-    background-image: linear-gradient(to right, transparent 25%, var(--progress-indicator-after-linear-gradient), transparent 75%);
+    background-image: linear-gradient(to right, transparent var(--progress-gradient-stop-start), var(--progress-indicator-after-linear-gradient), transparent var(--progress-gradient-stop-end));
 }
 @keyframes rt-progress-indicator-indeterminate-grow {
     0% {
-        transform: scaleX(0.01);
+        transform: scaleX(var(--progress-scale-initial));
     }
     20% {
-        transform: scaleX(0.1);
+        transform: scaleX(var(--progress-scale-step-1));
     }
     30% {
-        transform: scaleX(0.6);
+        transform: scaleX(var(--progress-scale-step-2));
     }
     40%,
   50% {
-        transform: scaleX(0.9);
+        transform: scaleX(var(--progress-scale-step-3));
     }
     100% {
-        transform: scaleX(1);
+        transform: scaleX(var(--progress-scale-final));
     }
 }
 @keyframes rt-progress-indicator-indeterminate-shine-from-left {
     0% {
-        transform: translateX(-100%);
+        transform: translateX(var(--position-negative-full));
     }
     100% {
-        transform: translateX(0%);
+        transform: translateX(var(--position-zero));
     }
 }
 .rt-ProgressRoot:where(.rt-r-size-1) {
     --progress-height: var(--space-1);
 }
 .rt-ProgressRoot:where(.rt-r-size-2) {
-    --progress-height: calc(var(--space-2) * 0.75);
+    --progress-height: calc(var(--space-2) * var(--size-multiplier-small));
 }
 .rt-ProgressRoot:where(.rt-r-size-3) {
     --progress-height: var(--space-2);
@@ -8955,7 +9117,7 @@
         --progress-height: var(--space-1);
     }
     .rt-ProgressRoot:where(.xs\:rt-r-size-2) {
-        --progress-height: calc(var(--space-2) * 0.75);
+        --progress-height: calc(var(--space-2) * var(--size-multiplier-small));
     }
     .rt-ProgressRoot:where(.xs\:rt-r-size-3) {
         --progress-height: var(--space-2);
@@ -8966,7 +9128,7 @@
         --progress-height: var(--space-1);
     }
     .rt-ProgressRoot:where(.sm\:rt-r-size-2) {
-        --progress-height: calc(var(--space-2) * 0.75);
+        --progress-height: calc(var(--space-2) * var(--size-multiplier-small));
     }
     .rt-ProgressRoot:where(.sm\:rt-r-size-3) {
         --progress-height: var(--space-2);
@@ -8977,7 +9139,7 @@
         --progress-height: var(--space-1);
     }
     .rt-ProgressRoot:where(.md\:rt-r-size-2) {
-        --progress-height: calc(var(--space-2) * 0.75);
+        --progress-height: calc(var(--space-2) * var(--size-multiplier-small));
     }
     .rt-ProgressRoot:where(.md\:rt-r-size-3) {
         --progress-height: var(--space-2);
@@ -8988,7 +9150,7 @@
         --progress-height: var(--space-1);
     }
     .rt-ProgressRoot:where(.lg\:rt-r-size-2) {
-        --progress-height: calc(var(--space-2) * 0.75);
+        --progress-height: calc(var(--space-2) * var(--size-multiplier-small));
     }
     .rt-ProgressRoot:where(.lg\:rt-r-size-3) {
         --progress-height: var(--space-2);
@@ -8999,7 +9161,7 @@
         --progress-height: var(--space-1);
     }
     .rt-ProgressRoot:where(.xl\:rt-r-size-2) {
-        --progress-height: calc(var(--space-2) * 0.75);
+        --progress-height: calc(var(--space-2) * var(--size-multiplier-small));
     }
     .rt-ProgressRoot:where(.xl\:rt-r-size-3) {
         --progress-height: var(--space-2);
@@ -9011,7 +9173,7 @@
     background-color: var(--gray-a3);
 }
 .rt-ProgressRoot:where(.rt-variant-surface)::after {
-    box-shadow: inset 0 0 0 1px var(--gray-a4);
+    box-shadow: inset 0 0 0 var(--border-width-standard) var(--gray-a4);
 }
 .rt-ProgressRoot:where(.rt-variant-surface) :where(.rt-ProgressIndicator) {
     background-color: var(--accent-track);
@@ -9032,10 +9194,12 @@
 .rt-ProgressRoot:where(.rt-variant-classic) {
     --progress-indicator-indeterminate-animation-start: rt-progress-indicator-classic-indeterminate-fade;
     --progress-indicator-indeterminate-animation-repeat: rt-progress-indicator-classic-indeterminate-pulse;
+    position: relative;
+    top: calc(var(--classic-elevation-offset) / var(--classic-elevation-factor-subtle));
     background-color: var(--gray-a3);
 }
 .rt-ProgressRoot:where(.rt-variant-classic)::after {
-    box-shadow: var(--shadow-1);
+    box-shadow: var(--classic-inset-shadow-dark);
 }
 .rt-ProgressRoot:where(.rt-variant-classic) :where(.rt-ProgressIndicator) {
     background-color: var(--accent-track);
@@ -9064,7 +9228,7 @@
     background-color: var(--accent-8);
 }
 .rt-ProgressRoot:where(.rt-variant-soft) :where(.rt-ProgressIndicator)::after {
-    opacity: 0.75;
+    opacity: var(--opacity-soft-variant);
 }
 @keyframes rt-progress-indicator-soft-indeterminate-fade {
     100% {
@@ -9087,19 +9251,19 @@
     background-color: var(--accent-12);
 }
 .rt-ProgressRoot:where(.rt-high-contrast) :where(.rt-ProgressIndicator)::after {
-    opacity: 0.75;
+    opacity: var(--opacity-soft-variant);
 }
 @keyframes rt-progress-indicator-high-contrast-indeterminate-fade {
     100% {
-        opacity: 0.8;
+        opacity: var(--opacity-high-contrast);
     }
 }
 @keyframes rt-progress-indicator-high-contrast-indeterminate-pulse {
     0% {
-        opacity: 0.8;
+        opacity: var(--opacity-high-contrast);
     }
     100% {
-        opacity: 1;
+        opacity: var(--progress-scale-final);
     }
 }
 .rt-Quote {
@@ -9115,71 +9279,258 @@
 .rt-Quote :where(.rt-Quote) {
     font-size: inherit;
 }
-.rt-RadioCardsRoot {
-    line-height: var(--line-height);
-    letter-spacing: var(--letter-spacing);
-    cursor: default;
-}
-.rt-RadioCardsItem {
-    --base-card-padding-top: var(--radio-cards-item-padding-y);
-    --base-card-padding-right: var(--radio-cards-item-padding-x);
-    --base-card-padding-bottom: var(--radio-cards-item-padding-y);
-    --base-card-padding-left: var(--radio-cards-item-padding-x);
-    --base-card-border-radius: var(--radio-cards-item-border-radius);
-    --base-card-border-width: var(--radio-cards-item-border-width);
-    display: flex;
+.rt-BaseRadioRoot {
+    position: relative;
+    display: inline-flex;
     align-items: center;
     justify-content: center;
-    gap: var(--space-2);
+    vertical-align: top;
+    flex-shrink: 0;
+    cursor: var(--cursor-radio);
+    height: var(--skeleton-height, var(--line-height, var(--radio-size)));
+    --skeleton-height-override: var(--radio-size);
+    border-radius: var(--skeleton-radius);
+    --skeleton-radius-override: 100%;
 }
-.rt-RadioCardsItem > * {
+.rt-BaseRadioRoot:where(:disabled, [data-disabled]) {
+    cursor: var(--cursor-disabled);
+}
+.rt-BaseRadioRoot::before {
+    content: '';
+    display: block;
+    height: var(--radio-size);
+    width: var(--radio-size);
+    border-radius: 100%;
+    transition: var(--transition-radio);
+}
+.rt-BaseRadioRoot::after {
     pointer-events: none;
+    position: absolute;
+    height: var(--radio-size);
+    width: var(--radio-size);
+    border-radius: 100%;
+    transform: scale(0.4);
+    transition: var(--transition-radio);
 }
-.rt-RadioCardsItem > :where(svg) {
-    flex-shrink: 0;
+.rt-BaseRadioRoot:where(:checked, [data-state='checked'])::after {
+    content: '';
 }
-.rt-RadioCardsItem::after {
-    outline-offset: -1px;
+.rt-BaseRadioRoot:where(:focus-visible)::before {
+    outline: 2px solid var(--focus-8);
+    outline-offset: 2px;
 }
-.rt-RadioCardsRoot:where(.rt-r-size-1) {
-    font-size: var(--font-size-2);
-    --line-height: var(--line-height-2);
-    --letter-spacing: var(--letter-spacing-2);
-    --radio-cards-item-padding-x: var(--space-3);
-    --radio-cards-item-padding-y: calc(var(--space-3) / 1.2);
-    --radio-cards-item-border-radius: var(--radius-3);
+.rt-BaseRadioRoot:where(.rt-r-size-1) {
+    --radio-size: calc(var(--space-4) * 0.875);
 }
-.rt-RadioCardsRoot:where(.rt-r-size-2) {
-    font-size: var(--font-size-2);
-    --line-height: var(--line-height-2);
-    --letter-spacing: var(--letter-spacing-2);
-    --radio-cards-item-padding-x: var(--space-4);
-    --radio-cards-item-padding-y: calc(var(--space-4) * 0.875);
-    --radio-cards-item-border-radius: var(--radius-3);
+.rt-BaseRadioRoot:where(.rt-r-size-2) {
+    --radio-size: var(--space-4);
 }
-.rt-RadioCardsRoot:where(.rt-r-size-3) {
-    font-size: var(--font-size-3);
-    --line-height: var(--line-height-3);
-    --letter-spacing: var(--letter-spacing-3);
-    --radio-cards-item-padding-x: var(--space-5);
-    --radio-cards-item-padding-y: calc(var(--space-5) / 1.2);
-    --radio-cards-item-border-radius: var(--radius-4);
+.rt-BaseRadioRoot:where(.rt-r-size-3) {
+    --radio-size: calc(var(--space-4) * 1.25);
 }
 @media (min-width: 520px) {
-    .rt-RadioCardsRoot:where(.xs\:rt-r-size-1) {
-        font-size: var(--font-size-2);
-        --line-height: var(--line-height-2);
-        --letter-spacing: var(--letter-spacing-2);
-        --radio-cards-item-padding-x: var(--space-3);
-        --radio-cards-item-padding-y: calc(var(--space-3) / 1.2);
-        --radio-cards-item-border-radius: var(--radius-3);
-    }
+    .rt-BaseRadioRoot:where(.xs\:rt-r-size-1) {
+        --radio-size: calc(var(--space-4) * 0.875);
+    }
+    .rt-BaseRadioRoot:where(.xs\:rt-r-size-2) {
+        --radio-size: var(--space-4);
+    }
+    .rt-BaseRadioRoot:where(.xs\:rt-r-size-3) {
+        --radio-size: calc(var(--space-4) * 1.25);
+    }
+}
+@media (min-width: 768px) {
+    .rt-BaseRadioRoot:where(.sm\:rt-r-size-1) {
+        --radio-size: calc(var(--space-4) * 0.875);
+    }
+    .rt-BaseRadioRoot:where(.sm\:rt-r-size-2) {
+        --radio-size: var(--space-4);
+    }
+    .rt-BaseRadioRoot:where(.sm\:rt-r-size-3) {
+        --radio-size: calc(var(--space-4) * 1.25);
+    }
+}
+@media (min-width: 1024px) {
+    .rt-BaseRadioRoot:where(.md\:rt-r-size-1) {
+        --radio-size: calc(var(--space-4) * 0.875);
+    }
+    .rt-BaseRadioRoot:where(.md\:rt-r-size-2) {
+        --radio-size: var(--space-4);
+    }
+    .rt-BaseRadioRoot:where(.md\:rt-r-size-3) {
+        --radio-size: calc(var(--space-4) * 1.25);
+    }
+}
+@media (min-width: 1280px) {
+    .rt-BaseRadioRoot:where(.lg\:rt-r-size-1) {
+        --radio-size: calc(var(--space-4) * 0.875);
+    }
+    .rt-BaseRadioRoot:where(.lg\:rt-r-size-2) {
+        --radio-size: var(--space-4);
+    }
+    .rt-BaseRadioRoot:where(.lg\:rt-r-size-3) {
+        --radio-size: calc(var(--space-4) * 1.25);
+    }
+}
+@media (min-width: 1640px) {
+    .rt-BaseRadioRoot:where(.xl\:rt-r-size-1) {
+        --radio-size: calc(var(--space-4) * 0.875);
+    }
+    .rt-BaseRadioRoot:where(.xl\:rt-r-size-2) {
+        --radio-size: var(--space-4);
+    }
+    .rt-BaseRadioRoot:where(.xl\:rt-r-size-3) {
+        --radio-size: calc(var(--space-4) * 1.25);
+    }
+}
+.rt-BaseRadioRoot:where(.rt-variant-solid):where(:not(:checked), [data-state='unchecked'])::before {
+    background-color: var(--color-surface);
+    box-shadow: inset 0 0 0 1px var(--gray-a7);
+}
+.rt-BaseRadioRoot:where(.rt-variant-solid):where(:checked, [data-state='checked'])::before {
+    background-color: var(--accent-indicator);
+}
+.rt-BaseRadioRoot:where(.rt-variant-solid)::after {
+    background-color: var(--accent-contrast);
+}
+.rt-BaseRadioRoot:where(.rt-variant-solid):where(.rt-high-contrast):where(:checked, [data-state='checked'])::before {
+    background-color: var(--accent-12);
+}
+.rt-BaseRadioRoot:where(.rt-variant-solid):where(.rt-high-contrast)::after {
+    background-color: var(--accent-1);
+}
+.rt-BaseRadioRoot:where(.rt-variant-solid):where(:disabled, [data-disabled])::before {
+    box-shadow: inset 0 0 0 1px var(--gray-a6);
+    background-color: var(--gray-a3);
+}
+.rt-BaseRadioRoot:where(.rt-variant-solid):where(:disabled, [data-disabled])::after {
+    background-color: var(--gray-a8);
+}
+.rt-BaseRadioRoot:where(.rt-variant-classic) {
+    position: relative;
+    top: var(--classic-elevation-offset);
+}
+.rt-BaseRadioRoot:where(.rt-variant-classic):where(:not(:checked), [data-state='unchecked'])::before {
+    background-color: var(--accent-2);
+    box-shadow: inset 0 calc(-1 * var(--classic-border-width)) var(--classic-shadow-blur-large) var(--accent-a2), inset 0 var(--classic-border-width) var(--white-a12), inset 0 var(--classic-shadow-blur-medium) var(--classic-shadow-blur-large) var(--accent-a2), inset 0 calc(-1 * var(--classic-border-width)) var(--accent-a6), 0 0 0 var(--classic-border-width) var(--accent-a5), 0 var(--classic-shadow-offset-y) var(--classic-shadow-blur-small) var(--accent-a7);
+}
+:where(.dark, .dark-theme) .rt-BaseRadioRoot:where(.rt-variant-classic):where(:not(:checked), [data-state='unchecked'])::before, :where(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) .rt-BaseRadioRoot:where(.rt-variant-classic):where(:not(:checked), [data-state='unchecked'])::before {
+    box-shadow: inset 0 calc(-1 * var(--classic-border-width)) var(--classic-shadow-blur-large) var(--accent-a3), inset 0 var(--classic-border-width) var(--accent-a11), inset 0 var(--classic-shadow-blur-medium) var(--classic-shadow-blur-large) var(--accent-a2), inset 0 calc(-2 * var(--classic-border-width)) var(--black-a11), 0 0 0 var(--classic-border-width-thick) var(--accent-a7), 0 var(--classic-shadow-offset-y) var(--classic-shadow-blur-small) var(--black-a12);
+}
+.rt-BaseRadioRoot:where(.rt-variant-classic):where(:checked, [data-state='checked'])::before {
+    background-color: var(--accent-3);
+    box-shadow: inset 0 calc(-1 * var(--classic-border-width)) var(--classic-shadow-blur-large) var(--accent-a2), inset 0 var(--classic-border-width) var(--white-a12), inset 0 var(--classic-shadow-blur-medium) var(--classic-shadow-blur-large) var(--accent-a2), inset 0 calc(-1 * var(--classic-border-width)) var(--accent-a6), 0 0 0 var(--classic-border-width) var(--accent-a5), 0 var(--classic-shadow-offset-y) var(--classic-shadow-blur-small) var(--accent-a7);
+}
+.rt-BaseRadioRoot:where(.rt-variant-classic)::after {
+    background-color: var(--accent-a11);
+}
+:where(.dark, .dark-theme) .rt-BaseRadioRoot:where(.rt-variant-classic):where(:checked, [data-state='checked'])::before, :where(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) .rt-BaseRadioRoot:where(.rt-variant-classic):where(:checked, [data-state='checked'])::before {
+    background-color: var(--accent-3);
+    box-shadow: inset 0 calc(-1 * var(--classic-border-width)) var(--classic-shadow-blur-large) var(--accent-a3), inset 0 var(--classic-border-width) var(--accent-a11), inset 0 var(--classic-shadow-blur-medium) var(--classic-shadow-blur-large) var(--accent-a2), inset 0 calc(-2 * var(--classic-border-width)) var(--black-a11), 0 0 0 var(--classic-border-width-thick) var(--accent-a7), 0 var(--classic-shadow-offset-y) var(--classic-shadow-blur-small) var(--black-a12);
+}
+.rt-BaseRadioRoot:where(.rt-variant-classic):where(.rt-high-contrast)::after {
+    background-color: var(--accent-12);
+}
+.rt-BaseRadioRoot:where(.rt-variant-classic):where(:active:not(:disabled, [data-disabled])) {
+    top: calc(var(--classic-elevation-offset) + var(--classic-active-padding-offset-1));
+}
+.rt-BaseRadioRoot:where(.rt-variant-classic):where(:active:not(:disabled, [data-disabled]))::before {
+    box-shadow: inset 0 var(--classic-border-width) var(--black-a3), 0 0 0 var(--classic-border-width) var(--accent-a7);
+}
+.rt-BaseRadioRoot:where(.rt-variant-classic):where(:disabled, [data-disabled])::before {
+    background-color: var(--gray-a3);
+    box-shadow: none;
+    background-image: none;
+}
+.rt-BaseRadioRoot:where(.rt-variant-classic):where(:disabled, [data-disabled])::after {
+    background-color: var(--gray-a8);
+}
+.rt-BaseRadioRoot:where(.rt-variant-classic):where(:disabled, [data-disabled]) {
+    top: 0;
+}
+.rt-BaseRadioRoot:where(.rt-variant-soft)::before {
+    background-color: var(--accent-a4);
+}
+.rt-BaseRadioRoot:where(.rt-variant-soft)::after {
+    background-color: var(--accent-a11);
+}
+.rt-BaseRadioRoot:where(.rt-variant-soft):where(.rt-high-contrast)::after {
+    background-color: var(--accent-12);
+}
+.rt-BaseRadioRoot:where(.rt-variant-soft):where(:focus-visible)::before {
+    outline-color: var(--accent-a8);
+}
+.rt-BaseRadioRoot:where(.rt-variant-soft):where(:disabled, [data-disabled])::before {
+    background-color: var(--gray-a3);
+}
+.rt-BaseRadioRoot:where(.rt-variant-soft):where(:disabled, [data-disabled])::after {
+    background-color: var(--gray-a8);
+}
+.rt-RadioCardsRoot {
+    line-height: var(--line-height);
+    letter-spacing: var(--letter-spacing);
+    cursor: default;
+}
+.rt-RadioCardsItem {
+    --base-card-padding-top: var(--radio-cards-item-padding-y);
+    --base-card-padding-right: var(--radio-cards-item-padding-x);
+    --base-card-padding-bottom: var(--radio-cards-item-padding-y);
+    --base-card-padding-left: var(--radio-cards-item-padding-x);
+    --base-card-border-radius: var(--radio-cards-item-border-radius);
+    --base-card-border-width: var(--radio-cards-item-border-width);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-2);
+}
+.rt-RadioCardsItem > * {
+    pointer-events: none;
+}
+.rt-RadioCardsItem > :where(svg) {
+    flex-shrink: 0;
+}
+.rt-RadioCardsItem::after {
+    outline-offset: -1px;
+}
+.rt-RadioCardsRoot:where(.rt-r-size-1) {
+    font-size: var(--font-size-2);
+    --line-height: var(--line-height-2);
+    --letter-spacing: var(--letter-spacing-2);
+    --radio-cards-item-padding-x: var(--space-3);
+    --radio-cards-item-padding-y: calc(var(--space-3) * var(--spacing-multiplier-medium));
+    --radio-cards-item-border-radius: var(--radius-3);
+}
+.rt-RadioCardsRoot:where(.rt-r-size-2) {
+    font-size: var(--font-size-2);
+    --line-height: var(--line-height-2);
+    --letter-spacing: var(--letter-spacing-2);
+    --radio-cards-item-padding-x: var(--space-4);
+    --radio-cards-item-padding-y: calc(var(--space-4) * var(--spacing-multiplier-medium));
+    --radio-cards-item-border-radius: var(--radius-3);
+}
+.rt-RadioCardsRoot:where(.rt-r-size-3) {
+    font-size: var(--font-size-3);
+    --line-height: var(--line-height-3);
+    --letter-spacing: var(--letter-spacing-3);
+    --radio-cards-item-padding-x: var(--space-5);
+    --radio-cards-item-padding-y: calc(var(--space-5) * var(--spacing-multiplier-medium));
+    --radio-cards-item-border-radius: var(--radius-4);
+}
+@media (min-width: 520px) {
+    .rt-RadioCardsRoot:where(.xs\:rt-r-size-1) {
+        font-size: var(--font-size-2);
+        --line-height: var(--line-height-2);
+        --letter-spacing: var(--letter-spacing-2);
+        --radio-cards-item-padding-x: var(--space-3);
+        --radio-cards-item-padding-y: calc(var(--space-3) * var(--spacing-multiplier-medium));
+        --radio-cards-item-border-radius: var(--radius-3);
+    }
     .rt-RadioCardsRoot:where(.xs\:rt-r-size-2) {
         font-size: var(--font-size-2);
         --line-height: var(--line-height-2);
         --letter-spacing: var(--letter-spacing-2);
         --radio-cards-item-padding-x: var(--space-4);
-        --radio-cards-item-padding-y: calc(var(--space-4) * 0.875);
+        --radio-cards-item-padding-y: calc(var(--space-4) * var(--spacing-multiplier-medium));
         --radio-cards-item-border-radius: var(--radius-3);
     }
     .rt-RadioCardsRoot:where(.xs\:rt-r-size-3) {
@@ -9187,7 +9538,7 @@
         --line-height: var(--line-height-3);
         --letter-spacing: var(--letter-spacing-3);
         --radio-cards-item-padding-x: var(--space-5);
-        --radio-cards-item-padding-y: calc(var(--space-5) / 1.2);
+        --radio-cards-item-padding-y: calc(var(--space-5) * var(--spacing-multiplier-medium));
         --radio-cards-item-border-radius: var(--radius-4);
     }
 }
@@ -9197,7 +9548,7 @@
         --line-height: var(--line-height-2);
         --letter-spacing: var(--letter-spacing-2);
         --radio-cards-item-padding-x: var(--space-3);
-        --radio-cards-item-padding-y: calc(var(--space-3) / 1.2);
+        --radio-cards-item-padding-y: calc(var(--space-3) * var(--spacing-multiplier-medium));
         --radio-cards-item-border-radius: var(--radius-3);
     }
     .rt-RadioCardsRoot:where(.sm\:rt-r-size-2) {
@@ -9205,7 +9556,7 @@
         --line-height: var(--line-height-2);
         --letter-spacing: var(--letter-spacing-2);
         --radio-cards-item-padding-x: var(--space-4);
-        --radio-cards-item-padding-y: calc(var(--space-4) * 0.875);
+        --radio-cards-item-padding-y: calc(var(--space-4) * var(--spacing-multiplier-medium));
         --radio-cards-item-border-radius: var(--radius-3);
     }
     .rt-RadioCardsRoot:where(.sm\:rt-r-size-3) {
@@ -9213,7 +9564,7 @@
         --line-height: var(--line-height-3);
         --letter-spacing: var(--letter-spacing-3);
         --radio-cards-item-padding-x: var(--space-5);
-        --radio-cards-item-padding-y: calc(var(--space-5) / 1.2);
+        --radio-cards-item-padding-y: calc(var(--space-5) * var(--spacing-multiplier-medium));
         --radio-cards-item-border-radius: var(--radius-4);
     }
 }
@@ -9223,7 +9574,7 @@
         --line-height: var(--line-height-2);
         --letter-spacing: var(--letter-spacing-2);
         --radio-cards-item-padding-x: var(--space-3);
-        --radio-cards-item-padding-y: calc(var(--space-3) / 1.2);
+        --radio-cards-item-padding-y: calc(var(--space-3) * var(--spacing-multiplier-medium));
         --radio-cards-item-border-radius: var(--radius-3);
     }
     .rt-RadioCardsRoot:where(.md\:rt-r-size-2) {
@@ -9231,7 +9582,7 @@
         --line-height: var(--line-height-2);
         --letter-spacing: var(--letter-spacing-2);
         --radio-cards-item-padding-x: var(--space-4);
-        --radio-cards-item-padding-y: calc(var(--space-4) * 0.875);
+        --radio-cards-item-padding-y: calc(var(--space-4) * var(--spacing-multiplier-medium));
         --radio-cards-item-border-radius: var(--radius-3);
     }
     .rt-RadioCardsRoot:where(.md\:rt-r-size-3) {
@@ -9239,7 +9590,7 @@
         --line-height: var(--line-height-3);
         --letter-spacing: var(--letter-spacing-3);
         --radio-cards-item-padding-x: var(--space-5);
-        --radio-cards-item-padding-y: calc(var(--space-5) / 1.2);
+        --radio-cards-item-padding-y: calc(var(--space-5) * var(--spacing-multiplier-medium));
         --radio-cards-item-border-radius: var(--radius-4);
     }
 }
@@ -9249,7 +9600,7 @@
         --line-height: var(--line-height-2);
         --letter-spacing: var(--letter-spacing-2);
         --radio-cards-item-padding-x: var(--space-3);
-        --radio-cards-item-padding-y: calc(var(--space-3) / 1.2);
+        --radio-cards-item-padding-y: calc(var(--space-3) * var(--spacing-multiplier-medium));
         --radio-cards-item-border-radius: var(--radius-3);
     }
     .rt-RadioCardsRoot:where(.lg\:rt-r-size-2) {
@@ -9257,7 +9608,7 @@
         --line-height: var(--line-height-2);
         --letter-spacing: var(--letter-spacing-2);
         --radio-cards-item-padding-x: var(--space-4);
-        --radio-cards-item-padding-y: calc(var(--space-4) * 0.875);
+        --radio-cards-item-padding-y: calc(var(--space-4) * var(--spacing-multiplier-medium));
         --radio-cards-item-border-radius: var(--radius-3);
     }
     .rt-RadioCardsRoot:where(.lg\:rt-r-size-3) {
@@ -9265,7 +9616,7 @@
         --line-height: var(--line-height-3);
         --letter-spacing: var(--letter-spacing-3);
         --radio-cards-item-padding-x: var(--space-5);
-        --radio-cards-item-padding-y: calc(var(--space-5) / 1.2);
+        --radio-cards-item-padding-y: calc(var(--space-5) * var(--spacing-multiplier-medium));
         --radio-cards-item-border-radius: var(--radius-4);
     }
 }
@@ -9275,7 +9626,7 @@
         --line-height: var(--line-height-2);
         --letter-spacing: var(--letter-spacing-2);
         --radio-cards-item-padding-x: var(--space-3);
-        --radio-cards-item-padding-y: calc(var(--space-3) / 1.2);
+        --radio-cards-item-padding-y: calc(var(--space-3) * var(--spacing-multiplier-medium));
         --radio-cards-item-border-radius: var(--radius-3);
     }
     .rt-RadioCardsRoot:where(.xl\:rt-r-size-2) {
@@ -9283,7 +9634,7 @@
         --line-height: var(--line-height-2);
         --letter-spacing: var(--letter-spacing-2);
         --radio-cards-item-padding-x: var(--space-4);
-        --radio-cards-item-padding-y: calc(var(--space-4) * 0.875);
+        --radio-cards-item-padding-y: calc(var(--space-4) * var(--spacing-multiplier-medium));
         --radio-cards-item-border-radius: var(--radius-3);
     }
     .rt-RadioCardsRoot:where(.xl\:rt-r-size-3) {
@@ -9291,13 +9642,14 @@
         --line-height: var(--line-height-3);
         --letter-spacing: var(--letter-spacing-3);
         --radio-cards-item-padding-x: var(--space-5);
-        --radio-cards-item-padding-y: calc(var(--space-5) / 1.2);
+        --radio-cards-item-padding-y: calc(var(--space-5) * var(--spacing-multiplier-medium));
         --radio-cards-item-border-radius: var(--radius-4);
     }
 }
 :where(.rt-RadioCardsRoot.rt-variant-surface) .rt-RadioCardsItem {
-    --radio-cards-item-border-width: 1px;
+    --radio-cards-item-border-width: var(--border-width-standard);
     --radio-cards-item-background-color: var(--color-surface);
+    transition: var(--transition-card);
 }
 :where(.rt-RadioCardsRoot.rt-variant-surface) .rt-RadioCardsItem::before {
     background-color: var(--radio-cards-item-background-color);
@@ -9306,14 +9658,23 @@
     box-shadow: var(--base-card-surface-box-shadow);
 }
 @media (hover: hover) {
+    :where(.rt-RadioCardsRoot.rt-variant-surface) .rt-RadioCardsItem:where(:not(:disabled):not([data-state='checked']):hover) {
+        transition-duration: var(--duration-1);
+    }
     :where(.rt-RadioCardsRoot.rt-variant-surface) .rt-RadioCardsItem:where(:not(:disabled):not([data-state='checked']):hover)::after {
         box-shadow: var(--base-card-surface-hover-box-shadow);
     }
 }
+:where(.rt-RadioCardsRoot.rt-variant-surface):where([data-panel-background='solid']) .rt-RadioCardsItem {
+    --color-surface: var(--color-surface-solid);
+}
+:where(.rt-RadioCardsRoot.rt-variant-surface):where([data-panel-background='translucent']) .rt-RadioCardsItem {
+    --color-surface: var(--color-surface-translucent);
+}
 :where(.rt-RadioCardsRoot.rt-variant-classic) .rt-RadioCardsItem {
-    --radio-cards-item-border-width: 1px;
+    --radio-cards-item-border-width: var(--border-width-standard);
     --radio-cards-item-background-color: var(--color-surface);
-    transition: box-shadow 120ms;
+    transition: var(--transition-card);
     box-shadow: var(--base-card-classic-box-shadow-outer);
 }
 :where(.rt-RadioCardsRoot.rt-variant-classic) .rt-RadioCardsItem::before {
@@ -9324,21 +9685,33 @@
 }
 @media (hover: hover) {
     :where(.rt-RadioCardsRoot.rt-variant-classic) .rt-RadioCardsItem:where(:not(:disabled):not([data-state='checked']):hover) {
-        transition-duration: 40ms;
+        transition-duration: var(--duration-1);
         box-shadow: var(--base-card-classic-hover-box-shadow-outer);
     }
     :where(.rt-RadioCardsRoot.rt-variant-classic) .rt-RadioCardsItem:where(:not(:disabled):not([data-state='checked']):hover)::after {
         box-shadow: var(--base-card-classic-hover-box-shadow-inner);
     }
 }
+:where(.rt-RadioCardsRoot.rt-variant-classic):where([data-panel-background='solid']) .rt-RadioCardsItem {
+    --color-surface: var(--color-surface-solid);
+}
+:where(.rt-RadioCardsRoot.rt-variant-classic):where([data-panel-background='translucent']) .rt-RadioCardsItem {
+    --color-surface: var(--color-surface-translucent);
+}
+.rt-RadioCardsItem:where([data-state='checked']) {
+    transition: var(--transition-fast);
+}
 .rt-RadioCardsItem:where([data-state='checked'])::after {
-    outline: 2px solid var(--accent-indicator);
+    outline: var(--focus-outline-width) solid var(--accent-indicator);
 }
 :where(.rt-RadioCardsRoot.rt-high-contrast) .rt-RadioCardsItem:where([data-state='checked'])::after {
     outline-color: var(--accent-12);
 }
+.rt-RadioCardsItem:where(:focus-visible) {
+    transition: var(--transition-focus);
+}
 .rt-RadioCardsItem:where(:focus-visible)::after {
-    outline: 2px solid var(--focus-8);
+    outline: var(--focus-outline-width) solid var(--focus-8);
 }
 .rt-RadioCardsItem:where(:focus-visible):where([data-state='checked'])::before {
     background-image: linear-gradient(var(--focus-a3), var(--focus-a3));
@@ -9373,175 +9746,6 @@
 .rt-RadioGroupItemInner {
     min-width: 0;
 }
-.rt-BaseRadioRoot {
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    vertical-align: top;
-    flex-shrink: 0;
-    cursor: var(--cursor-radio);
-    height: var(--skeleton-height, var(--line-height, var(--radio-size)));
-    --skeleton-height-override: var(--radio-size);
-    border-radius: var(--skeleton-radius);
-    --skeleton-radius-override: 100%;
-}
-.rt-BaseRadioRoot:where(:disabled, [data-disabled]) {
-    cursor: var(--cursor-disabled);
-}
-.rt-BaseRadioRoot::before {
-    content: '';
-    display: block;
-    height: var(--radio-size);
-    width: var(--radio-size);
-    border-radius: 100%;
-}
-.rt-BaseRadioRoot::after {
-    pointer-events: none;
-    position: absolute;
-    height: var(--radio-size);
-    width: var(--radio-size);
-    border-radius: 100%;
-    transform: scale(0.4);
-}
-.rt-BaseRadioRoot:where(:checked, [data-state='checked'])::after {
-    content: '';
-}
-.rt-BaseRadioRoot:where(:focus-visible)::before {
-    outline: 2px solid var(--focus-8);
-    outline-offset: 2px;
-}
-.rt-BaseRadioRoot:where(.rt-r-size-1) {
-    --radio-size: calc(var(--space-4) * 0.875);
-}
-.rt-BaseRadioRoot:where(.rt-r-size-2) {
-    --radio-size: var(--space-4);
-}
-.rt-BaseRadioRoot:where(.rt-r-size-3) {
-    --radio-size: calc(var(--space-4) * 1.25);
-}
-@media (min-width: 520px) {
-    .rt-BaseRadioRoot:where(.xs\:rt-r-size-1) {
-        --radio-size: calc(var(--space-4) * 0.875);
-    }
-    .rt-BaseRadioRoot:where(.xs\:rt-r-size-2) {
-        --radio-size: var(--space-4);
-    }
-    .rt-BaseRadioRoot:where(.xs\:rt-r-size-3) {
-        --radio-size: calc(var(--space-4) * 1.25);
-    }
-}
-@media (min-width: 768px) {
-    .rt-BaseRadioRoot:where(.sm\:rt-r-size-1) {
-        --radio-size: calc(var(--space-4) * 0.875);
-    }
-    .rt-BaseRadioRoot:where(.sm\:rt-r-size-2) {
-        --radio-size: var(--space-4);
-    }
-    .rt-BaseRadioRoot:where(.sm\:rt-r-size-3) {
-        --radio-size: calc(var(--space-4) * 1.25);
-    }
-}
-@media (min-width: 1024px) {
-    .rt-BaseRadioRoot:where(.md\:rt-r-size-1) {
-        --radio-size: calc(var(--space-4) * 0.875);
-    }
-    .rt-BaseRadioRoot:where(.md\:rt-r-size-2) {
-        --radio-size: var(--space-4);
-    }
-    .rt-BaseRadioRoot:where(.md\:rt-r-size-3) {
-        --radio-size: calc(var(--space-4) * 1.25);
-    }
-}
-@media (min-width: 1280px) {
-    .rt-BaseRadioRoot:where(.lg\:rt-r-size-1) {
-        --radio-size: calc(var(--space-4) * 0.875);
-    }
-    .rt-BaseRadioRoot:where(.lg\:rt-r-size-2) {
-        --radio-size: var(--space-4);
-    }
-    .rt-BaseRadioRoot:where(.lg\:rt-r-size-3) {
-        --radio-size: calc(var(--space-4) * 1.25);
-    }
-}
-@media (min-width: 1640px) {
-    .rt-BaseRadioRoot:where(.xl\:rt-r-size-1) {
-        --radio-size: calc(var(--space-4) * 0.875);
-    }
-    .rt-BaseRadioRoot:where(.xl\:rt-r-size-2) {
-        --radio-size: var(--space-4);
-    }
-    .rt-BaseRadioRoot:where(.xl\:rt-r-size-3) {
-        --radio-size: calc(var(--space-4) * 1.25);
-    }
-}
-.rt-BaseRadioRoot:where(.rt-variant-surface):where(:not(:checked), [data-state='unchecked'])::before {
-    background-color: var(--color-surface);
-    box-shadow: inset 0 0 0 1px var(--gray-a7);
-}
-.rt-BaseRadioRoot:where(.rt-variant-surface):where(:checked, [data-state='checked'])::before {
-    background-color: var(--accent-indicator);
-}
-.rt-BaseRadioRoot:where(.rt-variant-surface)::after {
-    background-color: var(--accent-contrast);
-}
-.rt-BaseRadioRoot:where(.rt-variant-surface):where(.rt-high-contrast):where(:checked, [data-state='checked'])::before {
-    background-color: var(--accent-12);
-}
-.rt-BaseRadioRoot:where(.rt-variant-surface):where(.rt-high-contrast)::after {
-    background-color: var(--accent-1);
-}
-.rt-BaseRadioRoot:where(.rt-variant-surface):where(:disabled, [data-disabled])::before {
-    box-shadow: inset 0 0 0 1px var(--gray-a6);
-    background-color: var(--gray-a3);
-}
-.rt-BaseRadioRoot:where(.rt-variant-surface):where(:disabled, [data-disabled])::after {
-    background-color: var(--gray-a8);
-}
-.rt-BaseRadioRoot:where(.rt-variant-classic):where(:not(:checked), [data-state='unchecked'])::before {
-    background-color: var(--color-surface);
-    box-shadow: inset 0 0 0 1px var(--gray-7), var(--shadow-1);
-}
-.rt-BaseRadioRoot:where(.rt-variant-classic):where(:checked, [data-state='checked'])::before {
-    background-color: var(--accent-indicator);
-    background-image: linear-gradient(to bottom, var(--white-a3), transparent, var(--black-a3));
-    box-shadow: inset 0 0.5px 0.5px var(--white-a4), inset 0 -0.5px 0.5px var(--black-a4);
-}
-.rt-BaseRadioRoot:where(.rt-variant-classic)::after {
-    background-color: var(--accent-contrast);
-}
-.rt-BaseRadioRoot:where(.rt-variant-classic):where(.rt-high-contrast):where(:checked, [data-state='checked'])::before {
-    background-color: var(--accent-12);
-}
-.rt-BaseRadioRoot:where(.rt-variant-classic):where(.rt-high-contrast)::after {
-    background-color: var(--accent-1);
-}
-.rt-BaseRadioRoot:where(.rt-variant-classic):where(:disabled, [data-disabled])::before {
-    box-shadow: var(--shadow-1);
-    background-color: var(--gray-a3);
-    background-image: none;
-}
-.rt-BaseRadioRoot:where(.rt-variant-classic):where(:disabled, [data-disabled])::after {
-    background-color: var(--gray-a8);
-}
-.rt-BaseRadioRoot:where(.rt-variant-soft)::before {
-    background-color: var(--accent-a4);
-}
-.rt-BaseRadioRoot:where(.rt-variant-soft)::after {
-    background-color: var(--accent-a11);
-}
-.rt-BaseRadioRoot:where(.rt-variant-soft):where(.rt-high-contrast)::after {
-    background-color: var(--accent-12);
-}
-.rt-BaseRadioRoot:where(.rt-variant-soft):where(:focus-visible)::before {
-    outline-color: var(--accent-a8);
-}
-.rt-BaseRadioRoot:where(.rt-variant-soft):where(:disabled, [data-disabled])::before {
-    background-color: var(--gray-a3);
-}
-.rt-BaseRadioRoot:where(.rt-variant-soft):where(:disabled, [data-disabled])::after {
-    background-color: var(--gray-a8);
-}
 .rt-ScrollAreaRoot {
     display: flex;
     flex-direction: column;
@@ -9707,22 +9911,29 @@
         background-color: var(--gray-a9);
     }
 }
-.rt-SegmentedControlRoot {
-    display: inline-grid;
-    vertical-align: top;
-    grid-auto-flow: column;
-    grid-auto-columns: 1fr;
-    align-items: stretch;
-    color: var(--gray-12);
+:where([data-panel-background='translucent']) .rt-SegmentedControlRoot {
+    background-color: var(--color-surface-translucent);
+    background-image: linear-gradient(var(--gray-a3), var(--gray-a3));
+    -webkit-backdrop-filter: var(--backdrop-filter-panel);
+            backdrop-filter: var(--backdrop-filter-panel);
+}
+.rt-SegmentedControlRoot:where([data-panel-background='solid']) {
     background-color: var(--color-surface);
     background-image: linear-gradient(var(--gray-a3), var(--gray-a3));
-    position: relative;
-    min-width: max-content;
-    font-family: var(--default-font-family);
-    font-style: normal;
-    text-align: center;
-    isolation: isolate;
-    border-radius: var(--segmented-control-border-radius);
+    -webkit-backdrop-filter: none;
+            backdrop-filter: none;
+    --backdrop-filter-panel: none;
+}
+.rt-SegmentedControlRoot:where([data-panel-background='translucent']) {
+    background-color: var(--color-surface-translucent);
+    background-image: linear-gradient(var(--gray-a3), var(--gray-a3));
+    -webkit-backdrop-filter: var(--backdrop-filter-panel);
+            backdrop-filter: var(--backdrop-filter-panel);
+    --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
+}
+:where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) .rt-SegmentedControlRoot {
+    -webkit-backdrop-filter: none !important;
+            backdrop-filter: none !important;
 }
 .rt-SegmentedControlRoot:where([data-disabled]) {
     color: var(--gray-a8);
@@ -9744,8 +9955,8 @@
 }
 .rt-SegmentedControlItem:where(:focus-visible) {
     border-radius: inherit;
-    outline: 2px solid var(--focus-8);
-    outline-offset: -1px;
+    outline: var(--focus-outline-width) solid var(--focus-8);
+    outline-offset: var(--focus-outline-offset-inset);
 }
 .rt-SegmentedControlItemLabel :where(svg) {
     flex-shrink: 0;
@@ -9757,45 +9968,44 @@
 }
 .rt-SegmentedControlItemLabelInactive {
     position: absolute;
-    transition: opacity calc(0.8 * var(--segmented-control-transition-duration));
+    transition: var(--transition-tabs);
     font-weight: var(--font-weight-regular);
     letter-spacing: var(--tab-inactive-letter-spacing);
     word-spacing: var(--tab-inactive-word-spacing);
     opacity: 1;
-    transition-timing-function: ease-out;
+    transition-delay: var(--duration-1);
 }
 :where(.rt-SegmentedControlItem[data-state='on']) .rt-SegmentedControlItemLabelInactive {
     opacity: 0;
-    transition-timing-function: ease-in;
+    transition-delay: 0ms;
 }
 .rt-SegmentedControlItemLabelActive {
-    transition: opacity calc(0.8 * var(--segmented-control-transition-duration));
+    transition: var(--transition-tabs);
     font-weight: var(--font-weight-medium);
     letter-spacing: var(--tab-active-letter-spacing);
     word-spacing: var(--tab-active-word-spacing);
     opacity: 0;
-    transition-timing-function: ease-in;
+    transition-delay: 0ms;
 }
 :where(.rt-SegmentedControlItem[data-state='on']) .rt-SegmentedControlItemLabelActive {
     opacity: 1;
-    transition-timing-function: ease-out;
+    transition-delay: 0ms;
 }
 .rt-SegmentedControlItemSeparator {
     z-index: -1;
-    margin-top: 3px;
-    margin-bottom: 3px;
-    margin-left: -0.5px;
-    margin-right: -0.5px;
-    width: 1px;
+    margin-top: calc(var(--space-1) * 0.75);
+    margin-bottom: calc(var(--space-1) * 0.75);
+    margin-left: calc(-1 * var(--border-width-standard) * 0.5);
+    margin-right: calc(-1 * var(--border-width-standard) * 0.5);
+    width: var(--border-width-standard);
     background-color: var(--gray-a4);
-    transition: opacity calc(0.8 * var(--segmented-control-transition-duration));
-    transition-timing-function: ease-out;
+    transition: opacity calc(0.8 * var(--segmented-control-transition-duration)) var(--ease-1);
 }
 :where(.rt-SegmentedControlItem:first-child) .rt-SegmentedControlItemSeparator,
   :where(.rt-SegmentedControlItem:where([data-state='on'], :focus-visible)) .rt-SegmentedControlItemSeparator,
   :where(.rt-SegmentedControlItem:where([data-state='on'], :focus-visible)) + * .rt-SegmentedControlItemSeparator {
     opacity: 0;
-    transition-timing-function: ease-in;
+    transition-timing-function: var(--ease-1);
 }
 :where(.rt-SegmentedControlRoot:has(:focus-visible)) .rt-SegmentedControlItemSeparator {
     transition-duration: 0ms;
@@ -9808,14 +10018,12 @@
     left: 0;
     height: 100%;
     pointer-events: none;
-    transition-property: transform;
-    transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
-    transition-duration: var(--segmented-control-transition-duration);
+    transition: transform var(--segmented-control-transition-duration) var(--ease-3);
 }
 .rt-SegmentedControlIndicator::before {
-    inset: 1px;
+    inset: var(--border-width-standard);
     position: absolute;
-    border-radius: max(0.5px, calc(var(--segmented-control-border-radius) - 1px));
+    border-radius: max(calc(var(--border-width-standard) * 0.5), calc(var(--segmented-control-border-radius) - var(--border-width-standard)));
     background-color: var(--segmented-control-indicator-background-color);
     content: '';
 }
@@ -9826,7 +10034,7 @@
     --segmented-control-indicator-background-color: var(--gray-a3);
 }
 :where(.rt-SegmentedControlItem[disabled]) ~ .rt-SegmentedControlIndicator::before {
-    inset: 0px;
+    inset: 0;
     box-shadow: none;
 }
 .rt-SegmentedControlIndicator:where(:nth-child(2)) {
@@ -9897,8 +10105,25 @@
     justify-content: center;
     border-radius: inherit;
 }
+.rt-SegmentedControlRoot {
+    border-radius: var(--segmented-control-border-radius);
+    display: inline-grid;
+    vertical-align: top;
+    grid-auto-flow: column;
+    grid-auto-columns: 1fr;
+    align-items: stretch;
+    color: var(--gray-12);
+    background-color: var(--color-surface);
+    background-image: linear-gradient(var(--gray-a3), var(--gray-a3));
+    position: relative;
+    min-width: max-content;
+    font-family: var(--default-font-family);
+    font-style: normal;
+    text-align: center;
+    isolation: isolate;
+}
 .rt-SegmentedControlRoot:where(.rt-r-size-1) {
-    --segmented-control-border-radius: max(var(--radius-2), var(--radius-full));
+    --segmented-control-border-radius: max(calc(var(--radius-1) * var(--spacing-multiplier-large)), var(--radius-full));
     height: var(--space-5);
 }
 .rt-SegmentedControlRoot:where(.rt-r-size-1) :where(.rt-SegmentedControlItemLabel) {
@@ -9932,7 +10157,7 @@
 }
 @media (min-width: 520px) {
     .rt-SegmentedControlRoot:where(.xs\:rt-r-size-1) {
-        --segmented-control-border-radius: max(var(--radius-2), var(--radius-full));
+        --segmented-control-border-radius: max(calc(var(--radius-1) * var(--spacing-multiplier-large)), var(--radius-full));
         height: var(--space-5);
     }
     .rt-SegmentedControlRoot:where(.xs\:rt-r-size-1) :where(.rt-SegmentedControlItemLabel) {
@@ -9967,7 +10192,7 @@
 }
 @media (min-width: 768px) {
     .rt-SegmentedControlRoot:where(.sm\:rt-r-size-1) {
-        --segmented-control-border-radius: max(var(--radius-2), var(--radius-full));
+        --segmented-control-border-radius: max(calc(var(--radius-1) * var(--spacing-multiplier-large)), var(--radius-full));
         height: var(--space-5);
     }
     .rt-SegmentedControlRoot:where(.sm\:rt-r-size-1) :where(.rt-SegmentedControlItemLabel) {
@@ -10002,7 +10227,7 @@
 }
 @media (min-width: 1024px) {
     .rt-SegmentedControlRoot:where(.md\:rt-r-size-1) {
-        --segmented-control-border-radius: max(var(--radius-2), var(--radius-full));
+        --segmented-control-border-radius: max(calc(var(--radius-1) * var(--spacing-multiplier-large)), var(--radius-full));
         height: var(--space-5);
     }
     .rt-SegmentedControlRoot:where(.md\:rt-r-size-1) :where(.rt-SegmentedControlItemLabel) {
@@ -10037,7 +10262,7 @@
 }
 @media (min-width: 1280px) {
     .rt-SegmentedControlRoot:where(.lg\:rt-r-size-1) {
-        --segmented-control-border-radius: max(var(--radius-2), var(--radius-full));
+        --segmented-control-border-radius: max(calc(var(--radius-1) * var(--spacing-multiplier-large)), var(--radius-full));
         height: var(--space-5);
     }
     .rt-SegmentedControlRoot:where(.lg\:rt-r-size-1) :where(.rt-SegmentedControlItemLabel) {
@@ -10072,7 +10297,7 @@
 }
 @media (min-width: 1640px) {
     .rt-SegmentedControlRoot:where(.xl\:rt-r-size-1) {
-        --segmented-control-border-radius: max(var(--radius-2), var(--radius-full));
+        --segmented-control-border-radius: max(calc(var(--radius-1) * var(--spacing-multiplier-large)), var(--radius-full));
         height: var(--space-5);
     }
     .rt-SegmentedControlRoot:where(.xl\:rt-r-size-1) :where(.rt-SegmentedControlItemLabel) {
@@ -10106,10 +10331,13 @@
     }
 }
 .rt-SegmentedControlRoot:where(.rt-variant-surface) :where(.rt-SegmentedControlItem:not([disabled])) ~ :where(.rt-SegmentedControlIndicator)::before {
-    box-shadow: 0 0 0 1px var(--gray-a4);
+    box-shadow: 0 0 0 var(--border-width-standard) var(--gray-a4);
 }
 .rt-SegmentedControlRoot:where(.rt-variant-classic) :where(.rt-SegmentedControlItem:not([disabled])) ~ :where(.rt-SegmentedControlIndicator)::before {
-    box-shadow: var(--shadow-2);
+    box-shadow: inset 0 calc(-1 * var(--classic-border-width)) var(--classic-shadow-blur-large) var(--gray-a2), inset 0 var(--classic-border-width) var(--white-a12), inset 0 var(--classic-shadow-blur-medium) var(--classic-shadow-blur-large) var(--gray-a2), inset 0 calc(-1 * var(--classic-border-width)) var(--gray-a6), 0 0 0 var(--classic-border-width) var(--gray-a5), 0 var(--classic-shadow-offset-y) var(--classic-shadow-blur-small) var(--gray-a7);
+}
+:where(.dark, .dark-theme) :is(.rt-SegmentedControlRoot:where(.rt-variant-classic) :where(.rt-SegmentedControlItem:not([disabled])) ~ :where(.rt-SegmentedControlIndicator)::before), :where(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) :is(.rt-SegmentedControlRoot:where(.rt-variant-classic) :where(.rt-SegmentedControlItem:not([disabled])) ~ :where(.rt-SegmentedControlIndicator)::before) {
+    box-shadow: inset 0 calc(-1 * var(--classic-border-width)) var(--classic-shadow-blur-large) var(--gray-a3), inset 0 var(--classic-border-width) var(--gray-a11), inset 0 var(--classic-shadow-blur-medium) var(--classic-shadow-blur-large) var(--gray-a2), inset 0 calc(-2 * var(--classic-border-width)) var(--black-a11), 0 0 0 var(--classic-border-width-thick) var(--gray-a7), 0 var(--classic-shadow-offset-y) var(--classic-shadow-blur-small) var(--black-a12);
 }
 .rt-SelectTrigger {
     display: inline-flex;
@@ -10128,8 +10356,8 @@
     color: var(--gray-12);
 }
 .rt-SelectTrigger:where(:focus-visible) {
-    outline: 2px solid var(--focus-8);
-    outline-offset: -1px;
+    outline: var(--focus-outline-width) solid var(--focus-8);
+    outline-offset: var(--focus-outline-offset-inset);
 }
 @media (prefers-reduced-motion: reduce) {
     .rt-SelectTrigger {
@@ -10193,7 +10421,7 @@
     justify-content: center;
 }
 .rt-SelectSeparator {
-    height: 1px;
+    height: var(--separator-height-thin);
     margin-top: var(--space-2);
     margin-bottom: var(--space-2);
     margin-left: var(--select-item-indicator-width);
@@ -10222,7 +10450,7 @@
     box-sizing: border-box;
     height: var(--select-trigger-height);
     padding: 0 var(--select-trigger-ghost-padding-x);
-    --select-trigger-border-width: 0px;
+    --select-trigger-border-width: var(--border-width-none);
     background-color: transparent;
     color: var(--accent-12);
 }
@@ -10599,7 +10827,7 @@
 .rt-SelectContent:where(.rt-r-size-1) {
     --select-content-padding: var(--space-1);
     --select-item-height: var(--space-5);
-    --select-item-indicator-width: calc(var(--space-5) / 1.2);
+    --select-item-indicator-width: calc(var(--space-5) / var(--select-item-indicator-width-factor));
     --select-separator-margin-right: var(--space-2);
     border-radius: var(--radius-3);
 }
@@ -10615,8 +10843,8 @@
     border-radius: var(--radius-1);
 }
 .rt-SelectContent:where(.rt-r-size-1) :where(.rt-SelectItemIndicatorIcon) {
-    width: calc(8px * var(--scaling));
-    height: calc(8px * var(--scaling));
+    width: var(--select-indicator-icon-size-1);
+    height: var(--select-indicator-icon-size-1);
 }
 .rt-SelectContent:where(.rt-r-size-2, .rt-r-size-3) {
     --select-content-padding: var(--space-2);
@@ -10639,22 +10867,22 @@
     letter-spacing: var(--letter-spacing-2);
 }
 .rt-SelectContent:where(.rt-r-size-2) :where(.rt-SelectItemIndicatorIcon) {
-    width: calc(10px * var(--scaling));
-    height: calc(10px * var(--scaling));
+    width: var(--select-indicator-icon-size-2);
+    height: var(--select-indicator-icon-size-2);
 }
 .rt-SelectContent:where(.rt-r-size-3) :where(.rt-SelectItem) {
     font-size: var(--font-size-3);
     letter-spacing: var(--letter-spacing-3);
 }
 .rt-SelectContent:where(.rt-r-size-3) :where(.rt-SelectItemIndicatorIcon) {
-    width: calc(10px * var(--scaling));
-    height: calc(10px * var(--scaling));
+    width: var(--select-indicator-icon-size-3);
+    height: var(--select-indicator-icon-size-3);
 }
 @media (min-width: 520px) {
     .rt-SelectContent:where(.xs\:rt-r-size-1) {
         --select-content-padding: var(--space-1);
         --select-item-height: var(--space-5);
-        --select-item-indicator-width: calc(var(--space-5) / 1.2);
+        --select-item-indicator-width: calc(var(--space-5) / var(--select-item-indicator-width-factor));
         --select-separator-margin-right: var(--space-2);
         border-radius: var(--radius-3);
     }
@@ -10670,8 +10898,8 @@
         border-radius: var(--radius-1);
     }
     .rt-SelectContent:where(.xs\:rt-r-size-1) :where(.rt-SelectItemIndicatorIcon) {
-        width: calc(8px * var(--scaling));
-        height: calc(8px * var(--scaling));
+        width: var(--select-indicator-icon-size-1);
+        height: var(--select-indicator-icon-size-1);
     }
     .rt-SelectContent:where(.xs\:rt-r-size-2, .xs\:rt-r-size-3) {
         --select-content-padding: var(--space-2);
@@ -10694,23 +10922,23 @@
         letter-spacing: var(--letter-spacing-2);
     }
     .rt-SelectContent:where(.xs\:rt-r-size-2) :where(.rt-SelectItemIndicatorIcon) {
-        width: calc(10px * var(--scaling));
-        height: calc(10px * var(--scaling));
+        width: var(--select-indicator-icon-size-2);
+        height: var(--select-indicator-icon-size-2);
     }
     .rt-SelectContent:where(.xs\:rt-r-size-3) :where(.rt-SelectItem) {
         font-size: var(--font-size-3);
         letter-spacing: var(--letter-spacing-3);
     }
     .rt-SelectContent:where(.xs\:rt-r-size-3) :where(.rt-SelectItemIndicatorIcon) {
-        width: calc(10px * var(--scaling));
-        height: calc(10px * var(--scaling));
+        width: var(--select-indicator-icon-size-3);
+        height: var(--select-indicator-icon-size-3);
     }
 }
 @media (min-width: 768px) {
     .rt-SelectContent:where(.sm\:rt-r-size-1) {
         --select-content-padding: var(--space-1);
         --select-item-height: var(--space-5);
-        --select-item-indicator-width: calc(var(--space-5) / 1.2);
+        --select-item-indicator-width: calc(var(--space-5) / var(--select-item-indicator-width-factor));
         --select-separator-margin-right: var(--space-2);
         border-radius: var(--radius-3);
     }
@@ -10726,8 +10954,8 @@
         border-radius: var(--radius-1);
     }
     .rt-SelectContent:where(.sm\:rt-r-size-1) :where(.rt-SelectItemIndicatorIcon) {
-        width: calc(8px * var(--scaling));
-        height: calc(8px * var(--scaling));
+        width: var(--select-indicator-icon-size-1);
+        height: var(--select-indicator-icon-size-1);
     }
     .rt-SelectContent:where(.sm\:rt-r-size-2, .sm\:rt-r-size-3) {
         --select-content-padding: var(--space-2);
@@ -10750,23 +10978,23 @@
         letter-spacing: var(--letter-spacing-2);
     }
     .rt-SelectContent:where(.sm\:rt-r-size-2) :where(.rt-SelectItemIndicatorIcon) {
-        width: calc(10px * var(--scaling));
-        height: calc(10px * var(--scaling));
+        width: var(--select-indicator-icon-size-2);
+        height: var(--select-indicator-icon-size-2);
     }
     .rt-SelectContent:where(.sm\:rt-r-size-3) :where(.rt-SelectItem) {
         font-size: var(--font-size-3);
         letter-spacing: var(--letter-spacing-3);
     }
     .rt-SelectContent:where(.sm\:rt-r-size-3) :where(.rt-SelectItemIndicatorIcon) {
-        width: calc(10px * var(--scaling));
-        height: calc(10px * var(--scaling));
+        width: var(--select-indicator-icon-size-3);
+        height: var(--select-indicator-icon-size-3);
     }
 }
 @media (min-width: 1024px) {
     .rt-SelectContent:where(.md\:rt-r-size-1) {
         --select-content-padding: var(--space-1);
         --select-item-height: var(--space-5);
-        --select-item-indicator-width: calc(var(--space-5) / 1.2);
+        --select-item-indicator-width: calc(var(--space-5) / var(--select-item-indicator-width-factor));
         --select-separator-margin-right: var(--space-2);
         border-radius: var(--radius-3);
     }
@@ -10782,8 +11010,8 @@
         border-radius: var(--radius-1);
     }
     .rt-SelectContent:where(.md\:rt-r-size-1) :where(.rt-SelectItemIndicatorIcon) {
-        width: calc(8px * var(--scaling));
-        height: calc(8px * var(--scaling));
+        width: var(--select-indicator-icon-size-1);
+        height: var(--select-indicator-icon-size-1);
     }
     .rt-SelectContent:where(.md\:rt-r-size-2, .md\:rt-r-size-3) {
         --select-content-padding: var(--space-2);
@@ -10806,23 +11034,23 @@
         letter-spacing: var(--letter-spacing-2);
     }
     .rt-SelectContent:where(.md\:rt-r-size-2) :where(.rt-SelectItemIndicatorIcon) {
-        width: calc(10px * var(--scaling));
-        height: calc(10px * var(--scaling));
+        width: var(--select-indicator-icon-size-2);
+        height: var(--select-indicator-icon-size-2);
     }
     .rt-SelectContent:where(.md\:rt-r-size-3) :where(.rt-SelectItem) {
         font-size: var(--font-size-3);
         letter-spacing: var(--letter-spacing-3);
     }
     .rt-SelectContent:where(.md\:rt-r-size-3) :where(.rt-SelectItemIndicatorIcon) {
-        width: calc(10px * var(--scaling));
-        height: calc(10px * var(--scaling));
+        width: var(--select-indicator-icon-size-3);
+        height: var(--select-indicator-icon-size-3);
     }
 }
 @media (min-width: 1280px) {
     .rt-SelectContent:where(.lg\:rt-r-size-1) {
         --select-content-padding: var(--space-1);
         --select-item-height: var(--space-5);
-        --select-item-indicator-width: calc(var(--space-5) / 1.2);
+        --select-item-indicator-width: calc(var(--space-5) / var(--select-item-indicator-width-factor));
         --select-separator-margin-right: var(--space-2);
         border-radius: var(--radius-3);
     }
@@ -10838,8 +11066,8 @@
         border-radius: var(--radius-1);
     }
     .rt-SelectContent:where(.lg\:rt-r-size-1) :where(.rt-SelectItemIndicatorIcon) {
-        width: calc(8px * var(--scaling));
-        height: calc(8px * var(--scaling));
+        width: var(--select-indicator-icon-size-1);
+        height: var(--select-indicator-icon-size-1);
     }
     .rt-SelectContent:where(.lg\:rt-r-size-2, .lg\:rt-r-size-3) {
         --select-content-padding: var(--space-2);
@@ -10862,23 +11090,23 @@
         letter-spacing: var(--letter-spacing-2);
     }
     .rt-SelectContent:where(.lg\:rt-r-size-2) :where(.rt-SelectItemIndicatorIcon) {
-        width: calc(10px * var(--scaling));
-        height: calc(10px * var(--scaling));
+        width: var(--select-indicator-icon-size-2);
+        height: var(--select-indicator-icon-size-2);
     }
     .rt-SelectContent:where(.lg\:rt-r-size-3) :where(.rt-SelectItem) {
         font-size: var(--font-size-3);
         letter-spacing: var(--letter-spacing-3);
     }
     .rt-SelectContent:where(.lg\:rt-r-size-3) :where(.rt-SelectItemIndicatorIcon) {
-        width: calc(10px * var(--scaling));
-        height: calc(10px * var(--scaling));
+        width: var(--select-indicator-icon-size-3);
+        height: var(--select-indicator-icon-size-3);
     }
 }
 @media (min-width: 1640px) {
     .rt-SelectContent:where(.xl\:rt-r-size-1) {
         --select-content-padding: var(--space-1);
         --select-item-height: var(--space-5);
-        --select-item-indicator-width: calc(var(--space-5) / 1.2);
+        --select-item-indicator-width: calc(var(--space-5) / var(--select-item-indicator-width-factor));
         --select-separator-margin-right: var(--space-2);
         border-radius: var(--radius-3);
     }
@@ -10894,8 +11122,8 @@
         border-radius: var(--radius-1);
     }
     .rt-SelectContent:where(.xl\:rt-r-size-1) :where(.rt-SelectItemIndicatorIcon) {
-        width: calc(8px * var(--scaling));
-        height: calc(8px * var(--scaling));
+        width: var(--select-indicator-icon-size-1);
+        height: var(--select-indicator-icon-size-1);
     }
     .rt-SelectContent:where(.xl\:rt-r-size-2, .xl\:rt-r-size-3) {
         --select-content-padding: var(--space-2);
@@ -10918,20 +11146,20 @@
         letter-spacing: var(--letter-spacing-2);
     }
     .rt-SelectContent:where(.xl\:rt-r-size-2) :where(.rt-SelectItemIndicatorIcon) {
-        width: calc(10px * var(--scaling));
-        height: calc(10px * var(--scaling));
+        width: var(--select-indicator-icon-size-2);
+        height: var(--select-indicator-icon-size-2);
     }
     .rt-SelectContent:where(.xl\:rt-r-size-3) :where(.rt-SelectItem) {
         font-size: var(--font-size-3);
         letter-spacing: var(--letter-spacing-3);
     }
     .rt-SelectContent:where(.xl\:rt-r-size-3) :where(.rt-SelectItemIndicatorIcon) {
-        width: calc(10px * var(--scaling));
-        height: calc(10px * var(--scaling));
+        width: var(--select-indicator-icon-size-3);
+        height: var(--select-indicator-icon-size-3);
     }
 }
 .rt-SelectTrigger:where(.rt-variant-outline) {
-    --select-trigger-border-width: 1px;
+    --select-trigger-border-width: var(--border-width-standard);
     background-color: var(--color-surface);
     color: var(--gray-12);
     box-shadow: inset 0 0 0 var(--select-trigger-border-width) var(--gray-a6);
@@ -10967,12 +11195,12 @@
     color: var(--gray-a10);
 }
 .rt-SelectTrigger:where(.rt-variant-classic) {
-    --select-trigger-border-width: 0px;
+    --select-trigger-border-width: var(--border-width-none);
     position: relative;
-    top: calc(var(--classic-elevation-offset) / 3);
+    top: calc(var(--classic-elevation-offset) / var(--classic-elevation-factor-subtle));
     background-color: var(--color-surface);
     color: var(--gray-12);
-    box-shadow: inset 0 var(--classic-border-width) calc(var(--classic-shadow-blur-small) / 1.5) var(--gray-a3), inset 0 calc(-1 * var(--classic-border-width)) var(--gray-a1), inset 0 calc(var(--classic-border-width) * 2) calc(var(--classic-shadow-blur-medium) / 3) var(--gray-a2), 0 0 0 var(--classic-border-width) var(--gray-a5);
+    box-shadow: inset 0 var(--classic-border-width) calc(var(--classic-shadow-blur-small) / var(--classic-shadow-factor-light)) var(--gray-a4), inset 0 calc(-1 * var(--classic-border-width)) var(--gray-a2), inset 0 calc(var(--classic-border-width) * var(--classic-border-multiplier-double)) calc(var(--classic-shadow-blur-medium) / var(--classic-shadow-medium-factor-third)) var(--gray-a3), 0 0 0 var(--classic-border-width) var(--gray-a5);
 }
 :where([data-panel-background='translucent']) .rt-SelectTrigger:where(.rt-variant-classic) {
     -webkit-backdrop-filter: var(--backdrop-filter-components);
@@ -10990,25 +11218,25 @@
 }
 @media (hover: hover) {
     .rt-SelectTrigger:where(.rt-variant-classic):where(:hover:not(:focus-visible)) {
-        box-shadow: inset 0 calc(var(--classic-border-width) / 1.5) calc(var(--classic-shadow-blur-small) / 2) var(--gray-a2), inset 0 calc(-1 * var(--classic-border-width) / 1.5) var(--gray-a1), inset 0 var(--classic-border-width) calc(var(--classic-shadow-blur-medium) / 4) var(--gray-a2), 0 0 0 var(--classic-border-width) var(--gray-a6);
+        box-shadow: inset 0 calc(var(--classic-border-width) / var(--classic-border-factor-light)) calc(var(--classic-shadow-blur-small) / var(--classic-shadow-factor-medium)) var(--gray-a3), inset 0 calc(-1 * var(--classic-border-width) / var(--classic-border-factor-light)) var(--gray-a2), inset 0 var(--classic-border-width) calc(var(--classic-shadow-blur-medium) / var(--classic-shadow-factor-subtle)) var(--gray-a3), 0 0 0 var(--classic-border-width) var(--gray-a6);
     }
 }
 .rt-SelectTrigger:where(.rt-variant-classic):where([data-state='open']) {
-    box-shadow: inset 0 calc(var(--classic-border-width) / 1.5) calc(var(--classic-shadow-blur-small) / 2) var(--gray-a2), inset 0 calc(-1 * var(--classic-border-width) / 1.5) var(--gray-a1), inset 0 var(--classic-border-width) calc(var(--classic-shadow-blur-medium) / 4) var(--gray-a2), 0 0 0 var(--classic-border-width) var(--gray-a6);
+    box-shadow: inset 0 calc(var(--classic-border-width) / var(--classic-border-factor-light)) calc(var(--classic-shadow-blur-small) / var(--classic-shadow-factor-medium)) var(--gray-a3), inset 0 calc(-1 * var(--classic-border-width) / var(--classic-border-factor-light)) var(--gray-a2), inset 0 var(--classic-border-width) calc(var(--classic-shadow-blur-medium) / var(--classic-shadow-factor-subtle)) var(--gray-a3), 0 0 0 var(--classic-border-width) var(--gray-a6);
 }
 .rt-SelectTrigger:where(.rt-variant-classic):where(:focus-visible) {
-    box-shadow: inset 0 calc(var(--classic-border-width) / 2) calc(var(--classic-shadow-blur-small) / 3) var(--gray-a1), 0 0 0 2px var(--focus-8);
+    box-shadow: inset 0 calc(var(--classic-border-width) / var(--classic-border-factor-half)) calc(var(--classic-shadow-blur-small) / var(--classic-shadow-factor-heavy)) var(--gray-a2), 0 0 0 var(--focus-outline-width) var(--focus-8);
 }
 .rt-SelectTrigger:where(.rt-variant-classic):where(:disabled) {
     color: var(--gray-a11);
     background-color: var(--gray-a2);
-    box-shadow: inset 0 calc(var(--classic-border-width) / 2) calc(var(--classic-shadow-blur-small) / 2) var(--gray-a1), inset 0 0 0 var(--classic-border-width) var(--gray-a6);
+    box-shadow: inset 0 calc(var(--classic-border-width) / var(--classic-border-factor-half)) calc(var(--classic-shadow-blur-small) / var(--classic-shadow-factor-medium)) var(--gray-a2), inset 0 0 0 var(--classic-border-width) var(--gray-a6);
 }
 .rt-SelectTrigger:where(.rt-variant-classic):where([data-placeholder]) :where(.rt-SelectTriggerInner) {
     color: var(--gray-a10);
 }
 .rt-SelectTrigger:where(.rt-variant-soft) {
-    --select-trigger-border-width: 0px;
+    --select-trigger-border-width: var(--border-width-none);
     background-color: var(--accent-3);
     color: var(--accent-12);
 }
@@ -11068,7 +11296,7 @@
     opacity: 0.6;
 }
 .rt-SelectTrigger:where(.rt-variant-surface) {
-    --select-trigger-border-width: 1px;
+    --select-trigger-border-width: var(--border-width-standard);
     background-color: transparent;
     box-shadow: inset 0 0 0 var(--select-trigger-border-width) var(--accent-7);
     color: var(--gray-12);
@@ -11183,6 +11411,10 @@
         -webkit-backdrop-filter: var(--backdrop-filter-components);
                 backdrop-filter: var(--backdrop-filter-components);
     }
+    :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) .rt-SelectTrigger:where(.rt-variant-ghost):where(:hover:not(:focus-visible)) {
+        -webkit-backdrop-filter: none !important;
+                backdrop-filter: none !important;
+    }
 }
 .rt-SelectTrigger:where(.rt-variant-ghost):where([data-state='open']) {
     background-color: var(--accent-2);
@@ -11192,6 +11424,10 @@
     -webkit-backdrop-filter: var(--backdrop-filter-components);
             backdrop-filter: var(--backdrop-filter-components);
 }
+:where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) .rt-SelectTrigger:where(.rt-variant-ghost):where([data-state='open']) {
+    -webkit-backdrop-filter: none !important;
+            backdrop-filter: none !important;
+}
 .rt-SelectTrigger:where(.rt-variant-ghost):where(:focus-visible) {
     outline-color: var(--accent-8);
 }
@@ -12818,7 +13054,7 @@
     display: flex;
     align-items: center;
     flex-grow: 1;
-    border-radius: max(calc(var(--radius-factor) * var(--slider-track-size) / 3), calc(var(--radius-factor) * var(--radius-thumb)));
+    border-radius: max(calc(var(--radius-factor) * var(--slider-track-size) / var(--slider-track-radius-factor)), calc(var(--radius-factor) * var(--radius-thumb)));
     -webkit-user-select: none;
             user-select: none;
     touch-action: none;
@@ -12853,10 +13089,10 @@
     border-radius: inherit;
 }
 .rt-SliderRange:where([data-orientation='horizontal']) {
-    height: 100%;
+    height: var(--position-full);
 }
 .rt-SliderRange:where([data-orientation='vertical']) {
-    width: 100%;
+    width: var(--position-full);
 }
 .rt-SliderThumb {
     display: block;
@@ -12868,102 +13104,102 @@
     content: '';
     position: absolute;
     z-index: -1;
-    width: calc(var(--slider-thumb-size) * 3);
-    height: calc(var(--slider-thumb-size) * 3);
-    top: 50%;
-    left: 50%;
+    width: calc(var(--slider-thumb-size) * var(--slider-thumb-hit-area-multiplier));
+    height: calc(var(--slider-thumb-size) * var(--slider-thumb-hit-area-multiplier));
+    top: var(--position-center);
+    left: var(--position-center);
     transform: translate(-50%, -50%);
 }
 .rt-SliderThumb::after {
     content: '';
     position: absolute;
-    inset: calc(-0.25 * var(--slider-track-size));
+    inset: calc(var(--slider-thumb-inset-factor) * var(--slider-track-size) * -1);
     background-color: white;
     border-radius: max(var(--radius-1), var(--radius-thumb));
     box-shadow: var(--slider-thumb-box-shadow);
     cursor: var(--cursor-slider-thumb);
 }
 .rt-SliderThumb:where(:focus-visible)::after {
-    box-shadow: var(--slider-thumb-box-shadow), 0 0 0 3px var(--accent-3), 0 0 0 5px var(--focus-8);
+    box-shadow: var(--slider-thumb-box-shadow), 0 0 0 var(--slider-focus-ring-inner) var(--accent-3), 0 0 0 var(--slider-focus-ring-outer) var(--focus-8);
 }
 .rt-SliderThumb:where(:active) {
     cursor: var(--cursor-slider-thumb-active);
 }
 .rt-SliderRoot:where(.rt-r-size-1) {
-    --slider-track-size: calc(var(--space-2) * 0.75);
+    --slider-track-size: calc(var(--space-2) * var(--size-multiplier-small));
 }
 .rt-SliderRoot:where(.rt-r-size-2) {
     --slider-track-size: var(--space-2);
 }
 .rt-SliderRoot:where(.rt-r-size-3) {
-    --slider-track-size: calc(var(--space-2) * 1.25);
+    --slider-track-size: calc(var(--space-2) * var(--size-multiplier-large));
 }
 @media (min-width: 520px) {
     .rt-SliderRoot:where(.xs\:rt-r-size-1) {
-        --slider-track-size: calc(var(--space-2) * 0.75);
+        --slider-track-size: calc(var(--space-2) * var(--size-multiplier-small));
     }
     .rt-SliderRoot:where(.xs\:rt-r-size-2) {
         --slider-track-size: var(--space-2);
     }
     .rt-SliderRoot:where(.xs\:rt-r-size-3) {
-        --slider-track-size: calc(var(--space-2) * 1.25);
+        --slider-track-size: calc(var(--space-2) * var(--size-multiplier-large));
     }
 }
 @media (min-width: 768px) {
     .rt-SliderRoot:where(.sm\:rt-r-size-1) {
-        --slider-track-size: calc(var(--space-2) * 0.75);
+        --slider-track-size: calc(var(--space-2) * var(--size-multiplier-small));
     }
     .rt-SliderRoot:where(.sm\:rt-r-size-2) {
         --slider-track-size: var(--space-2);
     }
     .rt-SliderRoot:where(.sm\:rt-r-size-3) {
-        --slider-track-size: calc(var(--space-2) * 1.25);
+        --slider-track-size: calc(var(--space-2) * var(--size-multiplier-large));
     }
 }
 @media (min-width: 1024px) {
     .rt-SliderRoot:where(.md\:rt-r-size-1) {
-        --slider-track-size: calc(var(--space-2) * 0.75);
+        --slider-track-size: calc(var(--space-2) * var(--size-multiplier-small));
     }
     .rt-SliderRoot:where(.md\:rt-r-size-2) {
         --slider-track-size: var(--space-2);
     }
     .rt-SliderRoot:where(.md\:rt-r-size-3) {
-        --slider-track-size: calc(var(--space-2) * 1.25);
+        --slider-track-size: calc(var(--space-2) * var(--size-multiplier-large));
     }
 }
 @media (min-width: 1280px) {
     .rt-SliderRoot:where(.lg\:rt-r-size-1) {
-        --slider-track-size: calc(var(--space-2) * 0.75);
+        --slider-track-size: calc(var(--space-2) * var(--size-multiplier-small));
     }
     .rt-SliderRoot:where(.lg\:rt-r-size-2) {
         --slider-track-size: var(--space-2);
     }
     .rt-SliderRoot:where(.lg\:rt-r-size-3) {
-        --slider-track-size: calc(var(--space-2) * 1.25);
+        --slider-track-size: calc(var(--space-2) * var(--size-multiplier-large));
     }
 }
 @media (min-width: 1640px) {
     .rt-SliderRoot:where(.xl\:rt-r-size-1) {
-        --slider-track-size: calc(var(--space-2) * 0.75);
+        --slider-track-size: calc(var(--space-2) * var(--size-multiplier-small));
     }
     .rt-SliderRoot:where(.xl\:rt-r-size-2) {
         --slider-track-size: var(--space-2);
     }
     .rt-SliderRoot:where(.xl\:rt-r-size-3) {
-        --slider-track-size: calc(var(--space-2) * 1.25);
+        --slider-track-size: calc(var(--space-2) * var(--size-multiplier-large));
     }
 }
 .rt-SliderRoot:where(.rt-variant-surface) :where(.rt-SliderTrack) {
     background-color: var(--gray-a3);
-    box-shadow: inset 0 0 0 1px var(--gray-a5);
+    box-shadow: inset 0 0 0 var(--border-width-standard) var(--gray-a5);
 }
 .rt-SliderRoot:where(.rt-variant-surface) :where(.rt-SliderTrack):where([data-disabled]) {
-    box-shadow: inset 0 0 0 1px var(--gray-a4);
+    box-shadow: inset 0 0 0 var(--border-width-standard) var(--gray-a4);
 }
 .rt-SliderRoot:where(.rt-variant-surface) :where(.rt-SliderRange) {
     background-color: var(--accent-track);
     background-image: var(--slider-range-high-contrast-background-image);
-    box-shadow: inset 0 0 0 1px var(--gray-a5);
+    box-shadow: inset 0 0 0 var(--border-width-standard) var(--gray-a5);
 }
 .rt-SliderRoot:where(.rt-variant-surface) :where(.rt-SliderThumb) {
     --slider-thumb-box-shadow: 0 0 0 1px var(--black-a4);
@@ -12981,18 +13217,18 @@
     inset: 0;
     position: absolute;
     border-radius: inherit;
-    box-shadow: var(--shadow-1);
+    box-shadow: var(--classic-inset-shadow-dark);
 }
 .rt-SliderRoot:where(.rt-variant-classic) :where(.rt-SliderTrack):where([data-disabled])::before {
-    opacity: 0.5;
+    opacity: var(--opacity-disabled);
 }
 .rt-SliderRoot:where(.rt-variant-classic) :where(.rt-SliderRange) {
     background-color: var(--accent-track);
     background-image: var(--slider-range-high-contrast-background-image);
-    box-shadow: inset 0 0 0 1px var(--gray-a3), inset 0 0 0 1px var(--accent-a4), inset 0 0 0 1px var(--black-a1), inset 0 1.5px 2px 0 var(--black-a2);
+    box-shadow: inset 0 0 0 var(--border-width-standard) var(--gray-a3), inset 0 0 0 var(--border-width-standard) var(--accent-a4), inset 0 0 0 var(--border-width-standard) var(--black-a1), inset 0 var(--slider-classic-inset-offset) 2px 0 var(--black-a2);
 }
 .rt-SliderRoot:where(.rt-variant-classic) :where(.rt-SliderRange):where(.rt-high-contrast) {
-    box-shadow: inset 0 0 0 1px var(--gray-a3), inset 0 0 0 1px var(--black-a2), inset 0 1.5px 2px 0 var(--black-a2);
+    box-shadow: inset 0 0 0 var(--border-width-standard) var(--gray-a3), inset 0 0 0 var(--border-width-standard) var(--black-a2), inset 0 var(--slider-classic-inset-offset) 2px 0 var(--black-a2);
 }
 .rt-SliderRoot:where(.rt-variant-classic) :where(.rt-SliderThumb) {
     --slider-thumb-box-shadow: 0 0 0 1px var(--black-a3), 0 1px 3px var(--black-a1), 0 2px 4px -1px var(--black-a1);
@@ -13371,19 +13607,19 @@
 .rt-SwitchRoot:where(.rt-variant-classic)::before {
     background-image: linear-gradient(to right, var(--accent-track) 40%, transparent 60%);
     background-color: var(--gray-a4);
-    box-shadow: var(--shadow-1);
+    box-shadow: var(--classic-inset-shadow-dark);
 }
 .rt-SwitchRoot:where(.rt-variant-classic):where([data-state='unchecked']:active)::before {
     background-color: var(--gray-a5);
 }
 .rt-SwitchRoot:where(.rt-variant-classic):where([data-state='checked'])::before {
-    box-shadow: inset 0 0 0 1px var(--gray-a3), inset 0 0 0 1px var(--accent-a4), inset 0 0 0 1px var(--black-a1), inset 0 1.5px 2px 0 var(--black-a2);
+    box-shadow: inset 0 0 0 var(--border-width-standard) var(--gray-a3), inset 0 0 0 var(--border-width-standard) var(--accent-a4), inset 0 0 0 var(--border-width-standard) var(--black-a1), inset 0 var(--slider-classic-inset-offset) 2px 0 var(--black-a2);
 }
 .rt-SwitchRoot:where(.rt-variant-classic):where([data-state='checked']:active)::before {
     filter: var(--switch-surface-checked-active-filter);
 }
 .rt-SwitchRoot:where(.rt-variant-classic):where(.rt-high-contrast)::before {
-    box-shadow: inset 0 0 0 1px var(--gray-a3), inset 0 0 0 1px var(--black-a2), inset 0 1.5px 2px 0 var(--black-a2);
+    box-shadow: inset 0 0 0 var(--border-width-standard) var(--gray-a3), inset 0 0 0 var(--border-width-standard) var(--black-a2), inset 0 var(--slider-classic-inset-offset) 2px 0 var(--black-a2);
     background-image: linear-gradient(to right, var(--switch-high-contrast-checked-color-overlay) 40%, transparent 60%), linear-gradient(to right, var(--accent-track) 40%, transparent 60%);
 }
 .rt-SwitchRoot:where(.rt-variant-classic):where(.rt-high-contrast):where([data-state='checked']:active)::before {
@@ -13396,8 +13632,8 @@
     filter: none;
     background-image: none;
     background-color: var(--gray-a5);
-    box-shadow: var(--shadow-1);
-    opacity: 0.5;
+    box-shadow: var(--classic-inset-shadow-dark);
+    opacity: var(--opacity-disabled);
 }
 .rt-SwitchRoot:where(.rt-variant-classic) :where(.rt-SwitchThumb):where([data-state='unchecked']) {
     box-shadow: 0 1px 3px var(--black-a3), 0 2px 4px -1px var(--black-a1), 0 0 0 1px var(--black-a2);
@@ -13474,7 +13710,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    transition: var(--transition-tabs);
+    transition: var(--transition-tabs), var(--transition-background-blur);
     box-sizing: border-box;
     padding: var(--tab-inner-padding-y) var(--tab-inner-padding-x);
     border-radius: var(--tab-inner-border-radius);
@@ -13663,6 +13899,10 @@
                 backdrop-filter: var(--backdrop-filter-components);
         --backdrop-filter-components: blur(var(--backdrop-blur-components));
     }
+    :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) :is(.rt-BaseTabListTrigger:where(:hover) :where(.rt-BaseTabListTriggerInner)) {
+        -webkit-backdrop-filter: none !important;
+                backdrop-filter: none !important;
+    }
     .rt-BaseTabListTrigger:where(:focus-visible:hover) :where(.rt-BaseTabListTriggerInner) {
         background-color: var(--accent-a3);
     }
@@ -14282,7 +14522,7 @@
     top: calc(var(--classic-elevation-offset) / 3);
     background-color: var(--color-surface);
     color: var(--gray-12);
-    box-shadow: inset 0 var(--classic-border-width) calc(var(--classic-shadow-blur-small) / 1.5) var(--gray-a3), inset 0 calc(-1 * var(--classic-border-width)) var(--gray-a1), inset 0 calc(var(--classic-border-width) * 2) calc(var(--classic-shadow-blur-medium) / 3) var(--gray-a2), 0 0 0 var(--classic-border-width) var(--gray-a5);
+    box-shadow: inset 0 var(--classic-border-width) calc(var(--classic-shadow-blur-small) / 1.5) var(--gray-a4), inset 0 calc(-1 * var(--classic-border-width)) var(--gray-a2), inset 0 calc(var(--classic-border-width) * 2) calc(var(--classic-shadow-blur-medium) / 3) var(--gray-a3), 0 0 0 var(--classic-border-width) var(--gray-a5);
 }
 :where([data-panel-background='translucent']) .rt-TextAreaRoot:where(.rt-variant-classic) {
     -webkit-backdrop-filter: var(--backdrop-filter-components);
@@ -14300,11 +14540,11 @@
 }
 @media (hover: hover) {
     .rt-TextAreaRoot:where(.rt-variant-classic):where(:hover:not(:has(.rt-TextAreaInput:focus))) {
-        box-shadow: inset 0 calc(var(--classic-border-width) / 1.5) calc(var(--classic-shadow-blur-small) / 2) var(--gray-a2), inset 0 calc(-1 * var(--classic-border-width) / 1.5) var(--gray-a1), inset 0 var(--classic-border-width) calc(var(--classic-shadow-blur-medium) / 4) var(--gray-a2), 0 0 0 var(--classic-border-width) var(--gray-a6);
+        box-shadow: inset 0 calc(var(--classic-border-width) / 1.5) calc(var(--classic-shadow-blur-small) / 2) var(--gray-a3), inset 0 calc(-1 * var(--classic-border-width) / 1.5) var(--gray-a2), inset 0 var(--classic-border-width) calc(var(--classic-shadow-blur-medium) / 4) var(--gray-a3), 0 0 0 var(--classic-border-width) var(--gray-a6);
     }
 }
 .rt-TextAreaRoot:where(.rt-variant-classic):where(:has(.rt-TextAreaInput:focus)) {
-    box-shadow: inset 0 calc(var(--classic-border-width) / 2) calc(var(--classic-shadow-blur-small) / 3) var(--gray-a1), 0 0 0 2px var(--focus-8);
+    box-shadow: inset 0 calc(var(--classic-border-width) / 2) calc(var(--classic-shadow-blur-small) / 3) var(--gray-a2), 0 0 0 2px var(--focus-8);
 }
 .rt-TextAreaRoot:where(.rt-variant-classic) :where(.rt-TextAreaInput)::placeholder {
     color: var(--gray-a10);
@@ -14402,6 +14642,10 @@
                 backdrop-filter: var(--backdrop-filter-components);
         --backdrop-filter-components: blur(var(--backdrop-blur-components));
     }
+    :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) .rt-TextAreaRoot:where(.rt-variant-ghost):where(:hover:not(:has(.rt-TextAreaInput:focus))) {
+        -webkit-backdrop-filter: none !important;
+                backdrop-filter: none !important;
+    }
 }
 .rt-TextAreaRoot:where(.rt-variant-ghost):where(:focus-within) {
     background-color: var(--accent-2);
@@ -14421,6 +14665,10 @@
     -webkit-backdrop-filter: var(--backdrop-filter-components);
             backdrop-filter: var(--backdrop-filter-components);
 }
+:where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) .rt-TextAreaRoot:where(.rt-variant-ghost):where(:focus-within) {
+    -webkit-backdrop-filter: none !important;
+            backdrop-filter: none !important;
+}
 .rt-TextAreaRoot:where(.rt-variant-ghost):where(:has(.rt-TextAreaInput:where(:autofill, [data-com-onepassword-filled]):not(:disabled, :read-only))) {
     background-color: var(--accent-a2);
     box-shadow: inset 0 0 0 1px var(--accent-a5), inset 0 0 0 1px var(--gray-a4);
@@ -14471,6 +14719,10 @@
                 backdrop-filter: var(--backdrop-filter-components);
         --backdrop-filter-components: blur(var(--backdrop-blur-components));
     }
+    :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) .rt-TextAreaRoot:where(.rt-variant-surface):where(:hover:not(:has(.rt-TextAreaInput:focus))) {
+        -webkit-backdrop-filter: none !important;
+                backdrop-filter: none !important;
+    }
 }
 .rt-TextAreaRoot:where(.rt-variant-surface):where(:focus-within) {
     background-color: var(--accent-2);
@@ -14494,6 +14746,10 @@
     -webkit-backdrop-filter: var(--backdrop-filter-components);
             backdrop-filter: var(--backdrop-filter-components);
 }
+:where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) .rt-TextAreaRoot:where(.rt-variant-surface):where(:focus-within) {
+    -webkit-backdrop-filter: none !important;
+            backdrop-filter: none !important;
+}
 .rt-TextAreaRoot:where(.rt-variant-surface):where(:has(.rt-TextAreaInput:where(:autofill, [data-com-onepassword-filled]):not(:disabled, :read-only))) {
     background-color: var(--accent-a2);
     box-shadow: inset 0 0 0 1px var(--accent-a5), inset 0 0 0 1px var(--gray-a4);
@@ -15154,7 +15410,7 @@
     top: calc(var(--classic-elevation-offset) / 3);
     background-color: var(--color-surface);
     color: var(--gray-12);
-    box-shadow: inset 0 var(--classic-border-width) calc(var(--classic-shadow-blur-small) / 1.5) var(--gray-a3), inset 0 calc(-1 * var(--classic-border-width)) var(--gray-a1), inset 0 calc(var(--classic-border-width) * 2) calc(var(--classic-shadow-blur-medium) / 3) var(--gray-a2), 0 0 0 var(--classic-border-width) var(--gray-a5);
+    box-shadow: inset 0 var(--classic-border-width) calc(var(--classic-shadow-blur-small) / 1.5) var(--gray-a4), inset 0 calc(-1 * var(--classic-border-width)) var(--gray-a2), inset 0 calc(var(--classic-border-width) * 2) calc(var(--classic-shadow-blur-medium) / 3) var(--gray-a3), 0 0 0 var(--classic-border-width) var(--gray-a5);
 }
 :where([data-panel-background='translucent']) .rt-TextFieldRoot:where(.rt-variant-classic) {
     -webkit-backdrop-filter: var(--backdrop-filter-components);
@@ -15172,11 +15428,11 @@
 }
 @media (hover: hover) {
     .rt-TextFieldRoot:where(.rt-variant-classic):where(:hover:not(:has(.rt-TextFieldInput:focus))) {
-        box-shadow: inset 0 calc(var(--classic-border-width) / 1.5) calc(var(--classic-shadow-blur-small) / 2) var(--gray-a2), inset 0 calc(-1 * var(--classic-border-width) / 1.5) var(--gray-a1), inset 0 var(--classic-border-width) calc(var(--classic-shadow-blur-medium) / 4) var(--gray-a2), 0 0 0 var(--classic-border-width) var(--gray-a6);
+        box-shadow: inset 0 calc(var(--classic-border-width) / 1.5) calc(var(--classic-shadow-blur-small) / 2) var(--gray-a3), inset 0 calc(-1 * var(--classic-border-width) / 1.5) var(--gray-a2), inset 0 var(--classic-border-width) calc(var(--classic-shadow-blur-medium) / 4) var(--gray-a3), 0 0 0 var(--classic-border-width) var(--gray-a6);
     }
 }
 .rt-TextFieldRoot:where(.rt-variant-classic):where(:has(.rt-TextFieldInput:focus)) {
-    box-shadow: inset 0 calc(var(--classic-border-width) / 2) calc(var(--classic-shadow-blur-small) / 3) var(--gray-a1), 0 0 0 2px var(--focus-8);
+    box-shadow: inset 0 calc(var(--classic-border-width) / 2) calc(var(--classic-shadow-blur-small) / 3) var(--gray-a2), 0 0 0 2px var(--focus-8);
 }
 .rt-TextFieldRoot:where(.rt-variant-classic) :where(.rt-TextFieldInput)::placeholder {
     color: var(--gray-a10);
@@ -15292,6 +15548,10 @@
                 backdrop-filter: var(--backdrop-filter-components);
         --backdrop-filter-components: blur(var(--backdrop-blur-components));
     }
+    :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) .rt-TextFieldRoot:where(.rt-variant-ghost):where(:hover:not(:has(.rt-TextFieldInput:focus))) {
+        -webkit-backdrop-filter: none !important;
+                backdrop-filter: none !important;
+    }
 }
 .rt-TextFieldRoot:where(.rt-variant-ghost):where(:focus-within) {
     background-color: var(--accent-2);
@@ -15311,6 +15571,10 @@
     -webkit-backdrop-filter: var(--backdrop-filter-components);
             backdrop-filter: var(--backdrop-filter-components);
 }
+:where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) .rt-TextFieldRoot:where(.rt-variant-ghost):where(:focus-within) {
+    -webkit-backdrop-filter: none !important;
+            backdrop-filter: none !important;
+}
 .rt-TextFieldRoot:where(.rt-variant-ghost):where(:has(.rt-TextFieldInput:where(:autofill, [data-com-onepassword-filled]):not(:disabled, :read-only))) {
     background-color: var(--accent-a2);
     box-shadow: inset 0 0 0 1px var(--accent-a5), inset 0 0 0 1px var(--gray-a4);
@@ -15367,6 +15631,10 @@
                 backdrop-filter: var(--backdrop-filter-components);
         --backdrop-filter-components: blur(var(--backdrop-blur-components));
     }
+    :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) .rt-TextFieldRoot:where(.rt-variant-surface):where(:hover:not(:has(.rt-TextFieldInput:focus))) {
+        -webkit-backdrop-filter: none !important;
+                backdrop-filter: none !important;
+    }
 }
 .rt-TextFieldRoot:where(.rt-variant-surface):where(:focus-within) {
     background-color: var(--accent-2);
@@ -15390,6 +15658,10 @@
     -webkit-backdrop-filter: var(--backdrop-filter-components);
             backdrop-filter: var(--backdrop-filter-components);
 }
+:where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) .rt-TextFieldRoot:where(.rt-variant-surface):where(:focus-within) {
+    -webkit-backdrop-filter: none !important;
+            backdrop-filter: none !important;
+}
 .rt-TextFieldRoot:where(.rt-variant-surface):where(:has(.rt-TextFieldInput:where(:autofill, [data-com-onepassword-filled]):not(:disabled, :read-only))) {
     background-color: var(--accent-a2);
     box-shadow: inset 0 0 0 1px var(--accent-a5), inset 0 0 0 1px var(--gray-a4);