@kushagradhawan/kookie-ui 0.1.21 → 0.1.23

package/styles.css

@@ -3322,12 +3322,12 @@
   }
 }
 :where(.radix-themes) {
-  --backdrop-blur-panel: 40px;
-  --backdrop-blur-components: 8px;
-  --backdrop-blur-heavy: 16px;
-  --backdrop-blur-light: 8px;
-  --backdrop-blur-dialog: 16px;
-  --panel-opacity-light: 0.25;
+  --backdrop-blur-panel: 48px;
+  --backdrop-blur-components: 16px;
+  --backdrop-blur-heavy: 48px;
+  --backdrop-blur-light: 16px;
+  --backdrop-blur-dialog: 32px;
+  --panel-opacity-light: 0.75;
   --panel-opacity-heavy: 0.75;
   --surface-opacity-light: 0.25;
   --surface-opacity-heavy: 0.75;
@@ -3339,18 +3339,38 @@
   --surface-mix-percentage: 75%;
   --dialog-mix-percentage: 50%;
   --border-width-standard: 1px;
-  --classic-elevation-offset: -0.03em;
-  --classic-active-padding-offset-1: 1px;
-  --classic-active-padding-offset-2: 2px;
-  --classic-shadow-blur-small: 0.17em;
-  --classic-shadow-blur-medium: 0.25em;
-  --classic-shadow-blur-large: 0.5em;
-  --classic-border-width: 0.05em;
-  --classic-border-width-thick: 0.075em;
+  --border-width-inset: 1px;
+  --border-width-none: 0px;
+  --classic-elevation-offset: -0.02em;
+  --classic-active-padding-offset-1: 0.5px;
+  --classic-active-padding-offset-2: 1px;
+  --classic-shadow-blur-small: 0.15em;
+  --classic-shadow-blur-medium: 0.2em;
+  --classic-shadow-blur-large: 0.4em;
+  --classic-border-width: 0.03em;
+  --classic-border-width-thick: 0.05em;
   --classic-border-width-thin: 0.1em;
-  --classic-shadow-offset-y: 0.08em;
+  --classic-shadow-offset-y: 0.04em;
   --classic-shadow-offset-negative: -0.1em;
   --classic-word-spacing: -0.1em;
+  --classic-inset-shadow-offset: 0.5px;
+  --classic-inset-shadow-offset-negative: -0.5px;
+  --classic-inset-shadow-blur: 0.5px;
+  --classic-elevation-factor-subtle: 3;
+  --classic-shadow-factor-light: 1.5;
+  --classic-shadow-factor-medium: 2;
+  --classic-shadow-factor-heavy: 3;
+  --classic-shadow-factor-subtle: 4;
+  --classic-border-factor-half: 2;
+  --classic-border-factor-light: 1.5;
+  --classic-border-multiplier-double: 2;
+  --classic-shadow-medium-factor-third: 3;
+  --classic-inset-shadow-light: inset 0 var(--classic-border-width) calc(var(--classic-shadow-blur-small) / var(--classic-shadow-factor-light)) var(--gray-a3), inset 0 calc(-1 * var(--classic-border-width)) var(--gray-a1), 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-a2), 0 0 0 var(--classic-border-width) var(--gray-a5);
+  --classic-inset-shadow-light-hover: 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-a2), inset 0 calc(-1 * var(--classic-border-width) / var(--classic-border-factor-light)) var(--gray-a1), inset 0 var(--classic-border-width) calc(var(--classic-shadow-blur-medium) / var(--classic-shadow-factor-subtle)) var(--gray-a2), 0 0 0 var(--classic-border-width) var(--gray-a6);
+  --classic-inset-shadow-light-focus: 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-a1), 0 0 0 var(--focus-outline-width) var(--focus-8);
+  --classic-inset-shadow-dark: 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);
+  --classic-inset-shadow-dark-hover: 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);
+  --classic-inset-shadow-dark-focus: 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);
   --color-mix-percentage-light: 25%;
   --color-mix-percentage-medium: 50%;
   --color-mix-percentage-heavy: 75%;
@@ -3363,10 +3383,50 @@
   --content-icon-size-2: var(--space-4);
   --content-icon-size-3: calc(var(--space-4) * 1.175);
   --content-icon-size-4: var(--space-5);
-  --indicator-icon-size-1: calc(8px * var(--scaling));
+  --indicator-icon-size-1: calc(9px * var(--scaling));
   --indicator-icon-size-2: calc(10px * var(--scaling));
+  --indicator-icon-size-3: calc(12px * var(--scaling));
+  --select-indicator-icon-size-1: calc(8px * var(--scaling));
+  --select-indicator-icon-size-2: calc(10px * var(--scaling));
+  --select-indicator-icon-size-3: calc(10px * var(--scaling));
+  --select-item-indicator-width-factor: 1.2;
+  --separator-height-thin: 1px;
+  --progress-default-duration: 5s;
+  --progress-animation-delay-start: 5s;
+  --progress-animation-delay-shine: 7.5s;
+  --progress-animation-duration-fade: 2.5s;
+  --progress-animation-duration-pulse: 5s;
+  --progress-shine-width-multiplier: 4;
+  --progress-gradient-stop-start: 25%;
+  --progress-gradient-stop-end: 75%;
+  --progress-border-radius-factor: 3;
+  --progress-scale-initial: 0.01;
+  --progress-scale-step-1: 0.1;
+  --progress-scale-step-2: 0.6;
+  --progress-scale-step-3: 0.9;
+  --progress-scale-final: 1;
+  --progress-timing-step-1: 20%;
+  --progress-timing-step-2: 30%;
+  --progress-timing-step-3: 40%;
+  --progress-timing-step-4: 50%;
+  --slider-thumb-hit-area-multiplier: 3;
+  --slider-thumb-inset-factor: 0.25;
+  --slider-track-radius-factor: 3;
+  --slider-focus-ring-inner: 3px;
+  --slider-focus-ring-outer: 5px;
+  --slider-classic-inset-offset: 1.5px;
+  --size-multiplier-small: 0.75;
+  --size-multiplier-large: 1.25;
+  --opacity-disabled: 0.5;
+  --opacity-soft-variant: 0.75;
+  --opacity-high-contrast: 0.8;
+  --position-center: 50%;
+  --position-full: 100%;
+  --position-negative-full: -100%;
+  --position-zero: 0%;
   --transition-backdrop-filter: backdrop-filter var(--duration-2) var(--ease-1);
   --transition-background-blur: background-color var(--duration-2) var(--ease-1), backdrop-filter var(--duration-2) var(--ease-1);
+  --transition-transform-progress: transform 120ms;
   --spacing-multiplier-small: 0.5;
   --spacing-multiplier-medium: 0.75;
   --spacing-multiplier-large: 1.25;
@@ -3392,6 +3452,10 @@
   --scale-active: 0.98;
   --scale-pressed: 0.96;
   --scale-normal: 1;
+  --backdrop-filter-nested-disabled: none;
+  --backdrop-filter-nested-enabled: var(--backdrop-filter-components);
+  --backdrop-filter-nested-panel: var(--backdrop-filter-panel);
+  --backdrop-filter-nested-dialog: var(--backdrop-filter-dialog);
   --color-background: white;
   --color-overlay: var(--black-a6);
   --color-panel-solid: white;
@@ -3425,8 +3489,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);
@@ -4505,11 +4572,11 @@
   --space-7: calc(40px * var(--scaling));
   --space-8: calc(48px * var(--scaling));
   --space-9: calc(64px * var(--scaling));
-  --duration-1: 100ms;
-  --duration-2: 150ms;
-  --duration-3: 200ms;
-  --duration-4: 300ms;
-  --duration-5: 500ms;
+  --duration-1: 50ms;
+  --duration-2: 100ms;
+  --duration-3: 150ms;
+  --duration-4: 200ms;
+  --duration-5: 300ms;
   --ease-1: ease-out;
   --ease-2: ease-in-out;
   --ease-3: cubic-bezier(0.4, 0, 0.2, 1);
@@ -4523,9 +4590,13 @@
   --transition-select: background var(--duration-2) var(--ease-1), box-shadow var(--duration-2) var(--ease-1), backdrop-filter var(--duration-2) var(--ease-1);
   --transition-badge: background var(--duration-2) var(--ease-1), box-shadow var(--duration-2) var(--ease-1), padding var(--duration-1) var(--ease-1);
   --transition-card: background-color var(--duration-2) var(--ease-1), box-shadow var(--duration-2) var(--ease-1), backdrop-filter var(--duration-2) var(--ease-1), top var(--duration-2) var(--ease-1);
-  --transition-tabs: color var(--duration-2) var(--ease-1), background-color var(--duration-2) var(--ease-1), font-weight var(--duration-3) var(--ease-2), letter-spacing var(--duration-3) var(--ease-2), word-spacing var(--duration-3) var(--ease-2), transform var(--duration-2) var(--ease-1);
+  --transition-tabs: color var(--duration-1) var(--ease-1), background-color var(--duration-1) var(--ease-1), font-weight var(--duration-2) var(--ease-2), letter-spacing var(--duration-2) var(--ease-2), word-spacing var(--duration-2) var(--ease-2), transform var(--duration-1) var(--ease-1);
+  --transition-segmented-control: opacity var(--duration-2) var(--ease-1), transform var(--duration-2) var(--ease-3), background-color var(--duration-2) var(--ease-1);
   --transition-menu: background var(--duration-1) var(--ease-1), color var(--duration-2) var(--ease-1), backdrop-filter var(--duration-2) var(--ease-1);
+  --transition-checkbox: background-color var(--duration-2) var(--ease-1), box-shadow var(--duration-2) var(--ease-1), color var(--duration-1) var(--ease-1);
+  --transition-radio: background-color var(--duration-2) var(--ease-1), box-shadow var(--duration-2) var(--ease-1), color var(--duration-1) var(--ease-1);
   --transition-focus: outline var(--duration-2) var(--ease-1), outline-offset var(--duration-2) var(--ease-1);
+  --transition-progress: transform var(--duration-2) var(--ease-1);
   --font-size-0: calc(10px * var(--scaling));
   --font-size-1: calc(12px * var(--scaling));
   --font-size-2: calc(14px * var(--scaling));
@@ -4636,7 +4707,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;
   color: var(--gray-12);
@@ -4735,8 +4806,12 @@
     --transition-badge: none;
     --transition-card: none;
     --transition-tabs: none;
+    --transition-segmented-control: none;
     --transition-menu: none;
+    --transition-checkbox: none;
+    --transition-radio: none;
     --transition-focus: none;
+    --transition-progress: none;
   }
 }
 @font-face {
@@ -5178,10 +5253,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;
@@ -5199,7 +5274,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;
@@ -5217,7 +5292,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 {
@@ -6232,6 +6307,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);
@@ -6246,6 +6325,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%;
@@ -6836,7 +6919,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);
@@ -6873,7 +6956,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);
@@ -6911,7 +6994,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);
@@ -6949,7 +7032,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);
@@ -6987,7 +7070,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);
@@ -7025,7 +7108,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);
@@ -7618,6 +7701,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);
@@ -7643,6 +7730,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);
 }
@@ -7663,6 +7754,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;
@@ -7856,14 +7951,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;
@@ -8730,10 +8817,31 @@
 .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;
+}
 :where(.dark, .dark-theme) :where(.radix-themes), :where(.radix-themes) :where(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) {
   --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);
@@ -8907,49 +9015,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;
@@ -8973,20 +9080,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);
@@ -9053,6 +9223,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);
@@ -9074,6 +9248,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);
 }
@@ -9240,6 +9418,7 @@
   height: var(--checkbox-size);
   width: var(--checkbox-size);
   border-radius: var(--checkbox-border-radius);
+  transition: var(--transition-checkbox);
 }
 .rt-BaseCheckboxIndicator {
   position: absolute;
@@ -9248,151 +9427,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) {
@@ -9419,8 +9620,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;
@@ -9453,18 +9655,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);
@@ -9473,29 +9675,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);
@@ -9504,11 +9706,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) {
@@ -9516,18 +9718,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);
@@ -9536,11 +9738,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) {
@@ -9548,18 +9750,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);
@@ -9568,11 +9770,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) {
@@ -9580,18 +9782,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);
@@ -9600,11 +9802,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) {
@@ -9612,18 +9814,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);
@@ -9632,16 +9834,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);
@@ -9650,14 +9853,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 {
@@ -9668,13 +9880,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));
@@ -12483,16 +12701,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;
@@ -12508,15 +12742,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;
@@ -13699,13 +13933,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;
@@ -13715,16 +13949,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;
@@ -13733,45 +13967,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);
@@ -13781,7 +14015,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);
@@ -13792,7 +14026,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);
@@ -13803,7 +14037,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);
@@ -13814,7 +14048,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);
@@ -13825,7 +14059,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);
@@ -13837,7 +14071,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);
@@ -13858,10 +14092,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);
@@ -13890,7 +14126,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% {
@@ -13913,19 +14149,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 {
@@ -13941,71 +14177,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) {
@@ -14013,7 +14436,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);
   }
 }
@@ -14023,7 +14446,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) {
@@ -14031,7 +14454,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) {
@@ -14039,7 +14462,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);
   }
 }
@@ -14049,7 +14472,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) {
@@ -14057,7 +14480,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) {
@@ -14065,7 +14488,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);
   }
 }
@@ -14075,7 +14498,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) {
@@ -14083,7 +14506,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) {
@@ -14091,7 +14514,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);
   }
 }
@@ -14101,7 +14524,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) {
@@ -14109,7 +14532,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) {
@@ -14117,13 +14540,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);
@@ -14132,14 +14556,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 {
@@ -14150,21 +14583,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));
@@ -14199,175 +14644,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;
@@ -14533,22 +14809,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);
@@ -14570,8 +14853,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;
@@ -14583,45 +14866,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;
@@ -14634,14 +14916,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: '';
 }
@@ -14652,7 +14932,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)) {
@@ -14723,8 +15003,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) {
@@ -14758,7 +15055,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) {
@@ -14793,7 +15090,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) {
@@ -14828,7 +15125,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) {
@@ -14863,7 +15160,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) {
@@ -14898,7 +15195,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) {
@@ -14932,10 +15229,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;
@@ -14954,8 +15254,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 {
@@ -15019,7 +15319,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);
@@ -15048,7 +15348,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);
 }
@@ -15425,7 +15725,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);
 }
@@ -15441,8 +15741,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);
@@ -15465,22 +15765,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);
   }
@@ -15496,8 +15796,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);
@@ -15520,23 +15820,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);
   }
@@ -15552,8 +15852,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);
@@ -15576,23 +15876,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);
   }
@@ -15608,8 +15908,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);
@@ -15632,23 +15932,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);
   }
@@ -15664,8 +15964,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);
@@ -15688,23 +15988,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);
   }
@@ -15720,8 +16020,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);
@@ -15744,20 +16044,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);
@@ -15793,12 +16093,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);
@@ -15816,25 +16116,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);
 }
@@ -15894,7 +16194,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);
@@ -16009,6 +16309,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);
@@ -16018,6 +16322,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);
 }
@@ -17644,7 +17952,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;
@@ -17679,10 +17987,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;
@@ -17694,102 +18002,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);
@@ -17807,18 +18115,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);
@@ -18197,19 +18505,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 {
@@ -18222,8 +18530,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);
@@ -18300,7 +18608,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);
@@ -18489,6 +18797,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);
   }
@@ -19108,7 +19420,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);
@@ -19126,11 +19438,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);
@@ -19228,6 +19540,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);
@@ -19247,6 +19563,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);
@@ -19297,6 +19617,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);
@@ -19320,6 +19644,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);
@@ -19980,7 +20308,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);
@@ -19998,11 +20326,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);
@@ -20118,6 +20446,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);
@@ -20137,6 +20469,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);
@@ -20193,6 +20529,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);
@@ -20216,6 +20556,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);