@kushagradhawan/kookie-ui 0.1.22 → 0.1.23

package/styles.css

@@ -3322,7 +3322,7 @@
   }
 }
 :where(.radix-themes) {
-  --backdrop-blur-panel: 64px;
+  --backdrop-blur-panel: 48px;
   --backdrop-blur-components: 16px;
   --backdrop-blur-heavy: 48px;
   --backdrop-blur-light: 16px;
@@ -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;
@@ -3429,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);
@@ -4528,8 +4591,12 @@
   --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-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));
@@ -4640,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);
@@ -4739,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 {
@@ -6848,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);
@@ -6885,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);
@@ -6923,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);
@@ -6961,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);
@@ -6999,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);
@@ -7037,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);
@@ -7880,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;
@@ -8754,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);
@@ -8931,51 +9015,49 @@
   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);
-}
-: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);
+  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([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;
   --margin-right: 0px;
@@ -9336,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;
@@ -9344,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) {
@@ -9515,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;
@@ -9549,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);
@@ -9569,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);
@@ -9600,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) {
@@ -9612,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);
@@ -9632,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) {
@@ -9644,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);
@@ -9664,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) {
@@ -9676,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);
@@ -9696,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) {
@@ -9708,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);
@@ -9728,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);
@@ -9746,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 {
@@ -9764,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));
@@ -12579,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;
@@ -12604,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;
@@ -13795,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;
@@ -13811,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;
@@ -13829,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);
@@ -13877,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);
@@ -13888,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);
@@ -13899,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);
@@ -13910,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);
@@ -13921,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);
@@ -13933,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);
@@ -13954,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);
@@ -13986,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% {
@@ -14009,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 {
@@ -14037,123 +14177,310 @@
 .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-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-border-radius: var(--radius-3);
+  .rt-BaseRadioRoot:where(.xs\:rt-r-size-2) {
+    --radio-size: var(--space-4);
   }
-  .rt-RadioCardsRoot:where(.xs\: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(.xs\:rt-r-size-3) {
+    --radio-size: calc(var(--space-4) * 1.25);
   }
 }
 @media (min-width: 768px) {
-  .rt-RadioCardsRoot:where(.sm\: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(.sm\:rt-r-size-1) {
+    --radio-size: calc(var(--space-4) * 0.875);
   }
-  .rt-RadioCardsRoot:where(.sm\: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(.sm\:rt-r-size-2) {
+    --radio-size: var(--space-4);
   }
-  .rt-RadioCardsRoot:where(.sm\: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(.sm\:rt-r-size-3) {
+    --radio-size: calc(var(--space-4) * 1.25);
   }
 }
 @media (min-width: 1024px) {
-  .rt-RadioCardsRoot:where(.md\: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(.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) * var(--spacing-multiplier-medium));
+    --radio-cards-item-border-radius: var(--radius-3);
+  }
+  .rt-RadioCardsRoot:where(.xs\: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: 768px) {
+  .rt-RadioCardsRoot:where(.sm\: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(.sm\: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(.sm\: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: 1024px) {
+  .rt-RadioCardsRoot:where(.md\: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(.md\: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(.md\:rt-r-size-3) {
@@ -14161,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);
   }
 }
@@ -14171,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) {
@@ -14179,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) {
@@ -14187,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);
   }
 }
@@ -14197,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) {
@@ -14205,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) {
@@ -14213,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);
@@ -14228,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 {
@@ -14246,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));
@@ -14295,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;
@@ -14629,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);
@@ -14666,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;
@@ -14679,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;
@@ -14730,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: '';
 }
@@ -14748,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)) {
@@ -14819,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) {
@@ -14854,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) {
@@ -14889,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) {
@@ -14924,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) {
@@ -14959,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) {
@@ -14994,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) {
@@ -15028,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;
@@ -15050,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 {
@@ -15115,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);
@@ -15144,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);
 }
@@ -15521,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);
 }
@@ -15537,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);
@@ -15561,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);
   }
@@ -15592,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);
@@ -15616,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);
   }
@@ -15648,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);
@@ -15672,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);
   }
@@ -15704,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);
@@ -15728,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);
   }
@@ -15760,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);
@@ -15784,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);
   }
@@ -15816,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);
@@ -15840,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);
@@ -15889,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);
@@ -15912,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);
 }
@@ -15990,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);
@@ -17748,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;
@@ -17783,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;
@@ -17798,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);
@@ -17911,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);
@@ -18301,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 {
@@ -18326,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);
@@ -19216,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);
@@ -19234,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);
@@ -20104,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);
@@ -20122,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);