npm - phoenix_duskmoon - Versions diffs - 9.1.1 → 9.2.0 - Mend

phoenix_duskmoon 9.1.1 → 9.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/assets/css/element-theme-bridge.css +11 -0
package/assets/js/hooks/theme_switcher.js +19 -5
package/package.json +6 -6
package/priv/static/phoenix_duskmoon.css +1131 -643

package/priv/static/phoenix_duskmoon.css CHANGED Viewed

@@ -36,10 +36,12 @@
     --font-weight-bold: 700;
     --tracking-tight: -0.025em;
     --tracking-wide: 0.025em;
+    --radius-xs: 0.125rem;
     --radius-sm: 0.25rem;
     --radius-md: 0.375rem;
     --radius-lg: 0.5rem;
     --radius-xl: 0.75rem;
+    --radius-2xl: 1rem;
     --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
     --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
     --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
@@ -645,6 +647,9 @@
     --tw-border-style: none;
     border-style: none;
   }
+  .border-accent {
+    border-color: var(--color-accent);
+  }
   .border-current {
     border-color: currentcolor;
   }
@@ -657,6 +662,15 @@
   .border-t-transparent {
     border-top-color: transparent;
   }
+  .bg-base-100 {
+    background-color: var(--color-base-100);
+  }
+  .bg-base-200 {
+    background-color: var(--color-base-200);
+  }
+  .bg-base-300 {
+    background-color: var(--color-base-300);
+  }
   .bg-error {
     background-color: var(--color-error);
   }
@@ -666,9 +680,15 @@
   .bg-gray-900 {
     background-color: var(--color-gray-900);
   }
+  .bg-info {
+    background-color: var(--color-info);
+  }
   .bg-primary {
     background-color: var(--color-primary);
   }
+  .bg-success {
+    background-color: var(--color-success);
+  }
   .bg-surface-container {
     background-color: var(--color-surface-container);
   }
@@ -678,6 +698,9 @@
   .bg-transparent {
     background-color: transparent;
   }
+  .bg-warning {
+    background-color: var(--color-warning);
+  }
   .p-0 {
     padding: calc(var(--spacing) * 0);
   }
@@ -782,9 +805,18 @@
   .text-error {
     color: var(--color-error);
   }
+  .text-error-content {
+    color: var(--color-error-content);
+  }
   .text-gray-500 {
     color: var(--color-gray-500);
   }
+  .text-info {
+    color: var(--color-info);
+  }
+  .text-info-content {
+    color: var(--color-info-content);
+  }
   .text-inherit {
     color: inherit;
   }
@@ -803,9 +835,21 @@
   .text-secondary {
     color: var(--color-secondary);
   }
+  .text-success {
+    color: var(--color-success);
+  }
+  .text-success-content {
+    color: var(--color-success-content);
+  }
   .text-tertiary {
     color: var(--color-tertiary);
   }
+  .text-warning {
+    color: var(--color-warning);
+  }
+  .text-warning-content {
+    color: var(--color-warning-content);
+  }
   .text-white {
     color: var(--color-white);
   }
@@ -956,6 +1000,11 @@
 }
 [data-theme="sunshine"] {
   color-scheme: light;
+  --theme-name: "sunshine";
+  --theme-mode: "light";
+  --theme-family: "duskmoon";
+  --theme-pair: "moonlight";
+  --theme-description: "Warm amber/coral";
   --color-primary: oklch(72% 0.17 75);
   --color-primary-content: oklch(100% 0 0);
   --color-primary-container: oklch(95% 0.035 95.91);
@@ -968,6 +1017,11 @@
   --color-tertiary-content: oklch(18% 0.010 235);
   --color-tertiary-container: oklch(95% 0.035 235);
   --color-on-tertiary-container: oklch(22% 0.012 235);
+  --color-accent: oklch(85.23% 0.14 327);
+  --color-accent-content: oklch(41% 0.112 45.904);
+  --color-neutral: oklch(0% 0 0);
+  --color-neutral-content: oklch(80% 0.015 50);
+  --color-neutral-variant: oklch(50% 0.02 260);
   --color-surface: oklch(100% 0 0);
   --color-surface-dim: oklch(96% 0.01 85);
   --color-surface-bright: oklch(100% 0 0);
@@ -976,24 +1030,9 @@
   --color-surface-container: oklch(97% 0.01 85);
   --color-surface-container-high: oklch(96% 0.01 85);
   --color-surface-container-highest: oklch(94% 0.01 85);
+  --color-surface-variant: oklch(94% 0.02 85);
   --color-on-surface: oklch(27% 0.02 260);
   --color-on-surface-variant: oklch(50% 0.02 260);
-  --color-info: oklch(41.94% 0.114 254.39);
-  --color-info-content: oklch(91.94% 0.114 254.39);
-  --color-info-container: oklch(95% 0.03 235);
-  --color-on-info-container: oklch(35% 0.08 235);
-  --color-success: oklch(67.21% 0.19 133.55);
-  --color-success-content: oklch(27.21% 0.19 133.55);
-  --color-success-container: oklch(93% 0.04 150);
-  --color-on-success-container: oklch(30% 0.08 150);
-  --color-warning: oklch(68.19% 0.203 42.44);
-  --color-warning-content: oklch(18.19% 0.6 42);
-  --color-warning-container: oklch(93% 0.05 80);
-  --color-on-warning-container: oklch(38% 0.10 80);
-  --color-error: oklch(61.17% 0.237 28.15);
-  --color-error-content: oklch(90.01% 0.153 84.78);
-  --color-error-container: oklch(93% 0.04 25);
-  --color-on-error-container: oklch(32% 0.10 25);
   --color-base-100: oklch(100% 0.005 255);
   --color-base-200: oklch(95% 0.008 255);
   --color-base-300: oklch(90% 0.01 255);
@@ -1006,50 +1045,11 @@
   --color-base-content: oklch(10% 0 255);
   --color-outline: oklch(75% 0.01 260);
   --color-outline-variant: oklch(85% 0.01 260);
-  --color-accent: oklch(85.23% 0.14 327);
-  --color-accent-content: oklch(41% 0.112 45.904);
-  --color-neutral: oklch(0% 0 0);
-  --color-neutral-content: oklch(80% 0.015 50);
-  --color-neutral-variant: oklch(50% 0.02 260);
-  --radius-selector: 0.25rem;
-  --radius-field: 0.625rem;
-  --radius-box: 2rem;
-  --size-selector: 0.1875rem;
-  --size-field: 0.1875rem;
-  --border: 0.5px;
-  --depth: 1;
-  --noise: 1;
-  --color-surface-variant: oklch(94% 0.02 85);
   --color-inverse-surface: oklch(25% 0.02 260);
   --color-inverse-on-surface: oklch(95% 0.01 260);
   --color-inverse-primary: oklch(80% 0.14 55);
   --color-shadow: oklch(0% 0 0);
   --color-scrim: oklch(0% 0 0 / 50%);
-}
-:root {
-  color-scheme: light;
-  --color-primary: oklch(72% 0.17 75);
-  --color-primary-content: oklch(100% 0 0);
-  --color-primary-container: oklch(95% 0.035 95.91);
-  --color-on-primary-container: oklch(25% 0.03 95.91);
-  --color-secondary: oklch(62% 0.19 20);
-  --color-secondary-content: oklch(100% 0 0);
-  --color-secondary-container: oklch(94% 0.05 87.01);
-  --color-on-secondary-container: oklch(25% 0.05 87.01);
-  --color-tertiary: oklch(80% 0.085 235);
-  --color-tertiary-content: oklch(18% 0.010 235);
-  --color-tertiary-container: oklch(95% 0.035 235);
-  --color-on-tertiary-container: oklch(22% 0.012 235);
-  --color-surface: oklch(100% 0 0);
-  --color-surface-dim: oklch(96% 0.01 85);
-  --color-surface-bright: oklch(100% 0 0);
-  --color-surface-container-lowest: oklch(100% 0 0);
-  --color-surface-container-low: oklch(99% 0.01 85);
-  --color-surface-container: oklch(97% 0.01 85);
-  --color-surface-container-high: oklch(96% 0.01 85);
-  --color-surface-container-highest: oklch(94% 0.01 85);
-  --color-on-surface: oklch(27% 0.02 260);
-  --color-on-surface-variant: oklch(50% 0.02 260);
   --color-info: oklch(41.94% 0.114 254.39);
   --color-info-content: oklch(91.94% 0.114 254.39);
   --color-info-container: oklch(95% 0.03 235);
@@ -1066,23 +1066,6 @@
   --color-error-content: oklch(90.01% 0.153 84.78);
   --color-error-container: oklch(93% 0.04 25);
   --color-on-error-container: oklch(32% 0.10 25);
-  --color-base-100: oklch(100% 0.005 255);
-  --color-base-200: oklch(95% 0.008 255);
-  --color-base-300: oklch(90% 0.01 255);
-  --color-base-400: oklch(55% 0.06 255);
-  --color-base-500: oklch(45% 0.05 255);
-  --color-base-600: oklch(35% 0.04 255);
-  --color-base-700: oklch(25% 0.03 255);
-  --color-base-800: oklch(18% 0.02 255);
-  --color-base-900: oklch(12% 0.01 255);
-  --color-base-content: oklch(10% 0 255);
-  --color-outline: oklch(75% 0.01 260);
-  --color-outline-variant: oklch(85% 0.01 260);
-  --color-accent: oklch(85.23% 0.14 327);
-  --color-accent-content: oklch(41% 0.112 45.904);
-  --color-neutral: oklch(0% 0 0);
-  --color-neutral-content: oklch(80% 0.015 50);
-  --color-neutral-variant: oklch(50% 0.02 260);
   --radius-selector: 0.25rem;
   --radius-field: 0.625rem;
   --radius-box: 2rem;
@@ -1091,15 +1074,14 @@
   --border: 0.5px;
   --depth: 1;
   --noise: 1;
-  --color-surface-variant: oklch(94% 0.02 85);
-  --color-inverse-surface: oklch(25% 0.02 260);
-  --color-inverse-on-surface: oklch(95% 0.01 260);
-  --color-inverse-primary: oklch(80% 0.14 55);
-  --color-shadow: oklch(0% 0 0);
-  --color-scrim: oklch(0% 0 0 / 50%);
 }
 [data-theme="moonlight"] {
   color-scheme: dark;
+  --theme-name: "moonlight";
+  --theme-mode: "dark";
+  --theme-family: "duskmoon";
+  --theme-pair: "sunshine";
+  --theme-description: "Neutral white/gold";
   --color-primary: oklch(85.45% 0 0);
   --color-primary-content: oklch(14.94% 0.031 39.947);
   --color-primary-container: oklch(25% 0.01 0);
@@ -1112,6 +1094,11 @@
   --color-tertiary-content: oklch(14% 0.012 255);
   --color-tertiary-container: oklch(28% 0.030 255);
   --color-on-tertiary-container: oklch(88% 0.010 255);
+  --color-accent: oklch(75.65% 0.1303 335.51);
+  --color-accent-content: oklch(14.258% 0.033 299.844);
+  --color-neutral: oklch(23% 0 0);
+  --color-neutral-content: oklch(52.43% 0 0);
+  --color-neutral-variant: oklch(55% 0.01 260);
   --color-surface: oklch(20% 0.02 260);
   --color-surface-dim: oklch(17% 0.02 260);
   --color-surface-bright: oklch(28% 0.02 260);
@@ -1120,8 +1107,26 @@
   --color-surface-container: oklch(22% 0.02 260);
   --color-surface-container-high: oklch(25% 0.02 260);
   --color-surface-container-highest: oklch(28% 0.01 260);
+  --color-surface-variant: oklch(30% 0.02 260);
   --color-on-surface: oklch(95% 0.01 260);
   --color-on-surface-variant: oklch(75% 0.01 260);
+  --color-base-100: oklch(22% 0.019 237.69);
+  --color-base-200: oklch(20% 0.019 237.69);
+  --color-base-300: oklch(18% 0.019 237.69);
+  --color-base-400: oklch(26% 0.019 237.69);
+  --color-base-500: oklch(32% 0.019 237.69);
+  --color-base-600: oklch(40% 0.018 237.69);
+  --color-base-700: oklch(55% 0.017 237.69);
+  --color-base-800: oklch(70% 0.016 237.69);
+  --color-base-900: oklch(85% 0.015 237.69);
+  --color-base-content: oklch(77.383% 0.043 245.096);
+  --color-outline: oklch(44% 0.01 260);
+  --color-outline-variant: oklch(35% 0.01 260);
+  --color-inverse-surface: oklch(95% 0.01 260);
+  --color-inverse-on-surface: oklch(25% 0.02 260);
+  --color-inverse-primary: oklch(55% 0.16 255);
+  --color-shadow: oklch(0% 0 0);
+  --color-scrim: oklch(0% 0 0 / 60%);
   --color-info: oklch(82.42% 0.09757279812867503 240.7677443360475);
   --color-info-content: oklch(17.111% 0.017 206.015);
   --color-info-container: oklch(32% 0.06 235);
@@ -1138,23 +1143,6 @@
   --color-error-content: oklch(86.38% 0.298 39.17);
   --color-error-container: oklch(30% 0.08 25);
   --color-on-error-container: oklch(88% 0.06 25);
-  --color-base-100: oklch(22% 0.019 237.69);
-  --color-base-200: oklch(20% 0.019 237.69);
-  --color-base-300: oklch(18% 0.019 237.69);
-  --color-base-400: oklch(26% 0.019 237.69);
-  --color-base-500: oklch(32% 0.019 237.69);
-  --color-base-600: oklch(40% 0.018 237.69);
-  --color-base-700: oklch(55% 0.017 237.69);
-  --color-base-800: oklch(70% 0.016 237.69);
-  --color-base-900: oklch(85% 0.015 237.69);
-  --color-base-content: oklch(77.383% 0.043 245.096);
-  --color-outline: oklch(44% 0.01 260);
-  --color-outline-variant: oklch(35% 0.01 260);
-  --color-accent: oklch(75.65% 0.1303 335.51);
-  --color-accent-content: oklch(14.258% 0.033 299.844);
-  --color-neutral: oklch(23% 0 0);
-  --color-neutral-content: oklch(52.43% 0 0);
-  --color-neutral-variant: oklch(55% 0.01 260);
   --radius-selector: 0.125rem;
   --radius-field: 0.375rem;
   --radius-box: 1rem;
@@ -1163,98 +1151,6 @@
   --border: 1px;
   --depth: 0.8;
   --noise: 0.6;
-  --color-surface-variant: oklch(30% 0.02 260);
-  --color-inverse-surface: oklch(95% 0.01 260);
-  --color-inverse-on-surface: oklch(25% 0.02 260);
-  --color-inverse-primary: oklch(55% 0.16 255);
-  --color-shadow: oklch(0% 0 0);
-  --color-scrim: oklch(0% 0 0 / 60%);
-  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.15);
-  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.25), 0 1px 2px -1px rgb(0 0 0 / 0.25);
-  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.25), 0 2px 4px -2px rgb(0 0 0 / 0.25);
-  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.3), 0 4px 6px -4px rgb(0 0 0 / 0.3);
-  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.3), 0 8px 10px -6px rgb(0 0 0 / 0.3);
-  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.5);
-}
-@media (prefers-color-scheme: dark) {
-  :root:not([data-theme]) {
-    color-scheme: dark;
-    --color-primary: oklch(85.45% 0 0);
-    --color-primary-content: oklch(14.94% 0.031 39.947);
-    --color-primary-container: oklch(25% 0.01 0);
-    --color-on-primary-container: oklch(85% 0.01 0);
-    --color-secondary: oklch(83.33% 0.0981 73.78);
-    --color-secondary-content: oklch(14.507% 0.035 2.72);
-    --color-secondary-container: oklch(28% 0.03 73.78);
-    --color-on-secondary-container: oklch(88% 0.03 73.78);
-    --color-tertiary: oklch(72% 0.090 255);
-    --color-tertiary-content: oklch(14% 0.012 255);
-    --color-tertiary-container: oklch(28% 0.030 255);
-    --color-on-tertiary-container: oklch(88% 0.010 255);
-    --color-surface: oklch(20% 0.02 260);
-    --color-surface-dim: oklch(17% 0.02 260);
-    --color-surface-bright: oklch(28% 0.02 260);
-    --color-surface-container-lowest: oklch(14% 0.02 260);
-    --color-surface-container-low: oklch(20% 0.02 260);
-    --color-surface-container: oklch(22% 0.02 260);
-    --color-surface-container-high: oklch(25% 0.02 260);
-    --color-surface-container-highest: oklch(28% 0.01 260);
-    --color-on-surface: oklch(95% 0.01 260);
-    --color-on-surface-variant: oklch(75% 0.01 260);
-    --color-info: oklch(82.42% 0.09757279812867503 240.7677443360475);
-    --color-info-content: oklch(17.111% 0.017 206.015);
-    --color-info-container: oklch(32% 0.06 235);
-    --color-on-info-container: oklch(88% 0.06 235);
-    --color-success: oklch(82.19% 0.0621 133.3);
-    --color-success-content: oklch(17.112% 0.017 144.778);
-    --color-success-container: oklch(30% 0.05 150);
-    --color-on-success-container: oklch(85% 0.06 150);
-    --color-warning: oklch(76.36% 0.1752731353930708 61.96388739129725);
-    --color-warning-content: oklch(17.113% 0.016 74.427);
-    --color-warning-container: oklch(35% 0.06 80);
-    --color-on-warning-container: oklch(90% 0.06 80);
-    --color-error: oklch(46.38% 0.1898 29.17);
-    --color-error-content: oklch(86.38% 0.298 39.17);
-    --color-error-container: oklch(30% 0.08 25);
-    --color-on-error-container: oklch(88% 0.06 25);
-    --color-base-100: oklch(22% 0.019 237.69);
-    --color-base-200: oklch(20% 0.019 237.69);
-    --color-base-300: oklch(18% 0.019 237.69);
-    --color-base-400: oklch(26% 0.019 237.69);
-    --color-base-500: oklch(32% 0.019 237.69);
-    --color-base-600: oklch(40% 0.018 237.69);
-    --color-base-700: oklch(55% 0.017 237.69);
-    --color-base-800: oklch(70% 0.016 237.69);
-    --color-base-900: oklch(85% 0.015 237.69);
-    --color-base-content: oklch(77.383% 0.043 245.096);
-    --color-outline: oklch(44% 0.01 260);
-    --color-outline-variant: oklch(35% 0.01 260);
-    --color-accent: oklch(75.65% 0.1303 335.51);
-    --color-accent-content: oklch(14.258% 0.033 299.844);
-    --color-neutral: oklch(23% 0 0);
-    --color-neutral-content: oklch(52.43% 0 0);
-    --color-neutral-variant: oklch(55% 0.01 260);
-    --radius-selector: 0.125rem;
-    --radius-field: 0.375rem;
-    --radius-box: 1rem;
-    --size-selector: 0.125rem;
-    --size-field: 0.125rem;
-    --border: 1px;
-    --depth: 0.8;
-    --noise: 0.6;
-    --color-surface-variant: oklch(30% 0.02 260);
-    --color-inverse-surface: oklch(95% 0.01 260);
-    --color-inverse-on-surface: oklch(25% 0.02 260);
-    --color-inverse-primary: oklch(55% 0.16 255);
-    --color-shadow: oklch(0% 0 0);
-    --color-scrim: oklch(0% 0 0 / 60%);
-    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.15);
-    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.25), 0 1px 2px -1px rgb(0 0 0 / 0.25);
-    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.25), 0 2px 4px -2px rgb(0 0 0 / 0.25);
-    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.3), 0 4px 6px -4px rgb(0 0 0 / 0.3);
-    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.3), 0 8px 10px -6px rgb(0 0 0 / 0.3);
-    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.5);
-  }
 }
 .sr-only {
   position: absolute;
@@ -1298,7 +1194,7 @@
     cursor: pointer;
     user-select: none;
     border: 1px solid transparent;
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
     transition: all 150ms ease-in-out;
     background-color: var(--color-surface-container);
     color: var(--btn-text-color);
@@ -1375,7 +1271,7 @@
   .btn-outline, .btn-outlined {
     --btn-text-color: var(--color-on-surface);
     background-color: transparent;
-    border: 1px solid var(--color-outline);
+    border-color: var(--color-outline);
   }
   .btn-outline:hover, .btn-outlined:hover {
     background-color: var(--color-surface-container);
@@ -1383,7 +1279,7 @@
   }
   .btn-outline.btn-primary, .btn-outlined.btn-primary {
     --btn-text-color: var(--color-primary);
-    border-color: var(--color-primary);
+    border-color: currentColor;
   }
   .btn-outline.btn-primary:hover, .btn-outlined.btn-primary:hover {
     --btn-text-color: var(--color-primary-content);
@@ -1391,7 +1287,7 @@
   }
   .btn-outline.btn-secondary, .btn-outlined.btn-secondary {
     --btn-text-color: var(--color-secondary);
-    border-color: var(--color-secondary);
+    border-color: currentColor;
   }
   .btn-outline.btn-secondary:hover, .btn-outlined.btn-secondary:hover {
     --btn-text-color: var(--color-secondary-content);
@@ -1399,7 +1295,7 @@
   }
   .btn-outline.btn-tertiary, .btn-outlined.btn-tertiary {
     --btn-text-color: var(--color-tertiary);
-    border-color: var(--color-tertiary);
+    border-color: currentColor;
   }
   .btn-outline.btn-tertiary:hover, .btn-outlined.btn-tertiary:hover {
     --btn-text-color: var(--color-tertiary-content);
@@ -1407,7 +1303,7 @@
   }
   .btn-outline.btn-info, .btn-outlined.btn-info {
     --btn-text-color: var(--color-info);
-    border-color: var(--color-info);
+    border-color: currentColor;
   }
   .btn-outline.btn-info:hover, .btn-outlined.btn-info:hover {
     --btn-text-color: var(--color-info-content);
@@ -1415,7 +1311,7 @@
   }
   .btn-outline.btn-success, .btn-outlined.btn-success {
     --btn-text-color: var(--color-success);
-    border-color: var(--color-success);
+    border-color: currentColor;
   }
   .btn-outline.btn-success:hover, .btn-outlined.btn-success:hover {
     --btn-text-color: var(--color-success-content);
@@ -1423,7 +1319,7 @@
   }
   .btn-outline.btn-warning, .btn-outlined.btn-warning {
     --btn-text-color: var(--color-warning);
-    border-color: var(--color-warning);
+    border-color: currentColor;
   }
   .btn-outline.btn-warning:hover, .btn-outlined.btn-warning:hover {
     --btn-text-color: var(--color-warning-content);
@@ -1431,7 +1327,7 @@
   }
   .btn-outline.btn-error, .btn-outlined.btn-error {
     --btn-text-color: var(--color-error);
-    border-color: var(--color-error);
+    border-color: currentColor;
   }
   .btn-outline.btn-error:hover, .btn-outlined.btn-error:hover {
     --btn-text-color: var(--color-error-content);
@@ -1658,28 +1554,28 @@
     --btn-py: 0.25rem;
     font-size: 0.75rem;
     line-height: 1rem;
-    border-radius: 0.25rem;
+    border-radius: var(--radius-xs);
   }
   .btn-sm {
     --btn-p: 0.75rem;
     --btn-py: 0.375rem;
     font-size: 0.8125rem;
     line-height: 1.125rem;
-    border-radius: 0.375rem;
+    border-radius: var(--radius-xs);
   }
   .btn-md {
     --btn-p: 1.25rem;
     --btn-py: 0.625rem;
     font-size: 0.875rem;
     line-height: 1.25rem;
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
   }
   .btn-lg {
     --btn-p: 1.75rem;
     --btn-py: 0.875rem;
     font-size: 1rem;
     line-height: 1.5rem;
-    border-radius: 0.625rem;
+    border-radius: var(--radius-sm);
   }
   .btn-block {
     display: flex;
@@ -1692,12 +1588,12 @@
     border-radius: 0;
   }
   .btn-group .btn:first-child {
-    border-top-left-radius: 0.5rem;
-    border-bottom-left-radius: 0.5rem;
+    border-top-left-radius: var(--radius-sm);
+    border-bottom-left-radius: var(--radius-sm);
   }
   .btn-group .btn:last-child {
-    border-top-right-radius: 0.5rem;
-    border-bottom-right-radius: 0.5rem;
+    border-top-right-radius: var(--radius-sm);
+    border-bottom-right-radius: var(--radius-sm);
   }
   .btn-group .btn:not(:first-child) {
     margin-inline-start: -1px;
@@ -1714,7 +1610,7 @@
     height: 1rem;
     border: 2px solid var(--btn-text-color);
     border-right-color: transparent;
-    border-radius: 50%;
+    border-radius: var(--radius-full);
     animation: btn-spin 0.6s linear infinite;
   }
   @keyframes btn-spin {
@@ -1725,7 +1621,7 @@
   .btn-circle {
     --btn-p: 0.625rem;
     --btn-py: 0.625rem;
-    border-radius: 50%;
+    border-radius: var(--radius-full);
     aspect-ratio: 1;
   }
   .btn-square {
@@ -1748,7 +1644,7 @@
     flex-direction: column;
     position: relative;
     overflow: hidden;
-    border-radius: 1rem;
+    border-radius: var(--radius-lg);
     background-color: var(--color-surface);
     color: var(--color-on-surface);
     box-shadow: var(--shadow-sm);
@@ -1923,7 +1819,10 @@
   .card-full-image .card-body {
     position: relative;
     z-index: 1;
-    background: linear-gradient(to top, rgb(0 0 0 / 0.7), transparent);
+    background: linear-gradient(to top, var(--color-shadow), transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background: linear-gradient(to top, color-mix(in srgb, var(--color-shadow) 70%, transparent), transparent);
+    }
     color: white;
     margin-top: auto;
     min-height: 50%;
@@ -1931,6 +1830,11 @@
   .card-full-image .card-title {
     color: white;
   }
+  @media (prefers-reduced-motion: reduce) {
+    .card {
+      transition: none;
+    }
+  }
 }
 @layer components {
   .input {
@@ -1942,7 +1846,7 @@
     background-color: var(--color-surface);
     color: var(--color-on-surface);
     border: 1px solid currentColor;
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
     transition: border-color 150ms ease-in-out, box-shadow 150ms ease-in-out;
   }
   .input::placeholder {
@@ -1996,21 +1900,21 @@
     padding: 0.375rem 0.625rem;
     font-size: 0.75rem;
     line-height: 1rem;
-    border-radius: 0.25rem;
+    border-radius: var(--radius-xs);
     height: 1.75rem;
   }
   .input-sm {
     padding: 0.5rem 0.75rem;
     font-size: 0.875rem;
     line-height: 1.25rem;
-    border-radius: 0.375rem;
+    border-radius: var(--radius-xs);
     height: 2.25rem;
   }
   .input-lg {
     padding: 1rem 1.25rem;
     font-size: 1.125rem;
     line-height: 1.75rem;
-    border-radius: 0.625rem;
+    border-radius: var(--radius-sm);
     height: 3.5rem;
   }
   .input-ghost {
@@ -2029,7 +1933,7 @@
     background-color: var(--color-surface-container);
     border-color: transparent;
     border-bottom: 2px solid var(--color-outline);
-    border-radius: 0.5rem 0.5rem 0 0;
+    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
   }
   .input-filled:focus-visible {
     border-bottom-color: var(--color-primary);
@@ -2065,12 +1969,12 @@
     border-radius: 0;
   }
   .input-group > .input:first-child {
-    border-top-left-radius: 0.5rem;
-    border-bottom-left-radius: 0.5rem;
+    border-top-left-radius: var(--radius-sm);
+    border-bottom-left-radius: var(--radius-sm);
   }
   .input-group > .input:last-child {
-    border-top-right-radius: 0.5rem;
-    border-bottom-right-radius: 0.5rem;
+    border-top-right-radius: var(--radius-sm);
+    border-bottom-right-radius: var(--radius-sm);
   }
   .input-group-text {
     display: flex;
@@ -2082,13 +1986,13 @@
     border: 1px solid var(--color-outline);
   }
   .input-group-text:first-child {
-    border-top-left-radius: 0.5rem;
-    border-bottom-left-radius: 0.5rem;
+    border-top-left-radius: var(--radius-sm);
+    border-bottom-left-radius: var(--radius-sm);
     border-right: none;
   }
   .input-group-text:last-child {
-    border-top-right-radius: 0.5rem;
-    border-bottom-right-radius: 0.5rem;
+    border-top-right-radius: var(--radius-sm);
+    border-bottom-right-radius: var(--radius-sm);
     border-left: none;
   }
   .file-input {
@@ -2097,7 +2001,7 @@
     padding: 0;
     background-color: var(--color-surface);
     border: 1px solid var(--color-outline);
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
     overflow: hidden;
     cursor: pointer;
   }
@@ -2120,6 +2024,11 @@
     }
     outline: none;
   }
+  @media (prefers-reduced-motion: reduce) {
+    .input, .input-filled, .file-input {
+      transition: none;
+    }
+  }
 }
 @layer components {
   .form-control {
@@ -2151,7 +2060,7 @@
     width: 1.25rem;
     height: 1.25rem;
     border: 2px solid var(--color-outline);
-    border-radius: 0.25rem;
+    border-radius: var(--radius-xs);
     background-color: transparent;
     cursor: pointer;
     transition: all 150ms ease-in-out;
@@ -2176,8 +2085,11 @@
     transform: rotate(45deg);
   }
   .checkbox:focus-visible {
-    outline: 2px solid var(--color-primary);
-    outline-offset: 2px;
+    outline: none;
+    box-shadow: 0 0 0 3px currentColor;
+    @supports (color: color-mix(in lab, red, red)) {
+      box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
+    }
   }
   .checkbox:disabled {
     cursor: not-allowed;
@@ -2195,6 +2107,18 @@
     background-color: var(--color-success);
     border-color: var(--color-success);
   }
+  .checkbox-tertiary:checked {
+    background-color: var(--color-tertiary);
+    border-color: var(--color-tertiary);
+  }
+  .checkbox-info:checked {
+    background-color: var(--color-info);
+    border-color: var(--color-info);
+  }
+  .checkbox-warning:checked {
+    background-color: var(--color-warning);
+    border-color: var(--color-warning);
+  }
   .checkbox-error:checked {
     background-color: var(--color-error);
     border-color: var(--color-error);
@@ -2216,7 +2140,7 @@
     width: 1.25rem;
     height: 1.25rem;
     border: 2px solid var(--color-outline);
-    border-radius: 50%;
+    border-radius: var(--radius-full);
     background-color: transparent;
     cursor: pointer;
     transition: all 150ms ease-in-out;
@@ -2236,12 +2160,15 @@
     width: 0.5rem;
     height: 0.5rem;
     background-color: var(--color-primary);
-    border-radius: 50%;
+    border-radius: var(--radius-full);
     transform: translate(-50%, -50%);
   }
   .radio:focus-visible {
-    outline: 2px solid var(--color-primary);
-    outline-offset: 2px;
+    outline: none;
+    box-shadow: 0 0 0 3px currentColor;
+    @supports (color: color-mix(in lab, red, red)) {
+      box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
+    }
   }
   .radio:disabled {
     cursor: not-allowed;
@@ -2259,11 +2186,41 @@
   .radio-secondary:checked::after {
     background-color: var(--color-secondary);
   }
+  .radio-tertiary:checked {
+    border-color: var(--color-tertiary);
+  }
+  .radio-tertiary:checked::after {
+    background-color: var(--color-tertiary);
+  }
+  .radio-info:checked {
+    border-color: var(--color-info);
+  }
+  .radio-info:checked::after {
+    background-color: var(--color-info);
+  }
+  .radio-success:checked {
+    border-color: var(--color-success);
+  }
+  .radio-success:checked::after {
+    background-color: var(--color-success);
+  }
+  .radio-warning:checked {
+    border-color: var(--color-warning);
+  }
+  .radio-warning:checked::after {
+    background-color: var(--color-warning);
+  }
+  .radio-error:checked {
+    border-color: var(--color-error);
+  }
+  .radio-error:checked::after {
+    background-color: var(--color-error);
+  }
   .toggle {
     appearance: none;
     width: 3rem;
     height: 1.5rem;
-    border-radius: 1rem;
+    border-radius: var(--radius-lg);
     background-color: var(--color-surface-container-highest);
     cursor: pointer;
     transition: all 150ms ease-in-out;
@@ -2278,7 +2235,7 @@
     width: 1rem;
     height: 1rem;
     background-color: var(--color-on-surface-variant);
-    border-radius: 50%;
+    border-radius: var(--radius-full);
     transition: all 150ms ease-in-out;
   }
   .toggle:checked {
@@ -2289,8 +2246,11 @@
     background-color: var(--color-primary-content);
   }
   .toggle:focus-visible {
-    outline: 2px solid var(--color-primary);
-    outline-offset: 2px;
+    outline: none;
+    box-shadow: 0 0 0 3px currentColor;
+    @supports (color: color-mix(in lab, red, red)) {
+      box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
+    }
   }
   .toggle:disabled {
     cursor: not-allowed;
@@ -2332,8 +2292,8 @@
     line-height: 1.5rem;
     background-color: var(--color-surface);
     color: var(--color-on-surface);
-    border: 1px solid var(--color-outline);
-    border-radius: 0.5rem;
+    border: 1px solid currentColor;
+    border-radius: var(--radius-sm);
     cursor: pointer;
     background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
     background-position: right 0.75rem center;
@@ -2384,8 +2344,8 @@
     line-height: 1.5rem;
     background-color: var(--color-surface);
     color: var(--color-on-surface);
-    border: 1px solid var(--color-outline);
-    border-radius: 0.5rem;
+    border: 1px solid currentColor;
+    border-radius: var(--radius-sm);
     resize: vertical;
     transition: border-color 150ms ease-in-out;
   }
@@ -2407,18 +2367,58 @@
   .textarea-bordered {
     border-color: var(--color-outline);
   }
-  .form-control.error .input, .form-control.error .select, .form-control.error .textarea, .input-error {
+  .form-control.error .input, .form-control.error .select, .form-control.error .textarea, .input-error, .select-error, .textarea-error {
     border-color: var(--color-error);
   }
+  .form-control.error .input:focus-visible, .form-control.error .select:focus-visible, .form-control.error .textarea:focus-visible {
+    border-color: var(--color-error);
+    box-shadow: 0 0 0 3px var(--color-error);
+    @supports (color: color-mix(in lab, red, red)) {
+      box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-error) 10%, transparent);
+    }
+  }
   .form-control.error .label-text {
     color: var(--color-error);
   }
-  .form-control.success .input, .form-control.success .select, .form-control.success .textarea {
+  .form-control.success .input, .form-control.success .select, .form-control.success .textarea, .input-success, .select-success, .textarea-success {
     border-color: var(--color-success);
   }
+  .form-control.success .input:focus-visible, .form-control.success .select:focus-visible, .form-control.success .textarea:focus-visible {
+    border-color: var(--color-success);
+    box-shadow: 0 0 0 3px var(--color-success);
+    @supports (color: color-mix(in lab, red, red)) {
+      box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-success) 10%, transparent);
+    }
+  }
   .form-control.success .label-text {
     color: var(--color-success);
   }
+  .form-control.warning .input, .form-control.warning .select, .form-control.warning .textarea, .input-warning, .select-warning, .textarea-warning {
+    border-color: var(--color-warning);
+  }
+  .form-control.warning .input:focus-visible, .form-control.warning .select:focus-visible, .form-control.warning .textarea:focus-visible {
+    border-color: var(--color-warning);
+    box-shadow: 0 0 0 3px var(--color-warning);
+    @supports (color: color-mix(in lab, red, red)) {
+      box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-warning) 10%, transparent);
+    }
+  }
+  .form-control.warning .label-text {
+    color: var(--color-warning);
+  }
+  .form-control.info .input, .form-control.info .select, .form-control.info .textarea, .input-info, .select-info, .textarea-info {
+    border-color: var(--color-info);
+  }
+  .form-control.info .input:focus-visible, .form-control.info .select:focus-visible, .form-control.info .textarea:focus-visible {
+    border-color: var(--color-info);
+    box-shadow: 0 0 0 3px var(--color-info);
+    @supports (color: color-mix(in lab, red, red)) {
+      box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-info) 10%, transparent);
+    }
+  }
+  .form-control.info .label-text {
+    color: var(--color-info);
+  }
   .helper-text {
     font-size: 0.75rem;
     color: var(--color-on-surface-variant);
@@ -2430,6 +2430,12 @@
   .helper-text.success {
     color: var(--color-success);
   }
+  .helper-text.warning {
+    color: var(--color-warning);
+  }
+  .helper-text.info {
+    color: var(--color-info);
+  }
   .label-text.required::after {
     content: ' *';
     color: var(--color-error);
@@ -2439,7 +2445,7 @@
     width: 100%;
     height: 0.5rem;
     background-color: var(--color-surface-container-highest);
-    border-radius: 0.25rem;
+    border-radius: var(--radius-xs);
     cursor: pointer;
   }
   .range::-webkit-slider-thumb {
@@ -2447,7 +2453,7 @@
     width: 1.25rem;
     height: 1.25rem;
     background-color: var(--color-primary);
-    border-radius: 50%;
+    border-radius: var(--radius-full);
     cursor: pointer;
     transition: transform 150ms ease-in-out;
   }
@@ -2459,12 +2465,20 @@
     height: 1.25rem;
     background-color: var(--color-primary);
     border: none;
-    border-radius: 50%;
+    border-radius: var(--radius-full);
     cursor: pointer;
   }
   .range:focus-visible {
-    outline: 2px solid var(--color-primary);
-    outline-offset: 2px;
+    outline: none;
+    box-shadow: 0 0 0 3px currentColor;
+    @supports (color: color-mix(in lab, red, red)) {
+      box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .form-control, .input, .select, .textarea, .range, .label-float .form-control ~ label {
+      transition: none;
+    }
   }
 }
 @layer components {
@@ -2518,7 +2532,7 @@
     font-size: 0.875rem;
     color: var(--color-on-surface);
     text-decoration: none;
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
     cursor: pointer;
     transition: background-color 150ms ease-in-out, color 150ms ease-in-out;
     white-space: nowrap;
@@ -2527,8 +2541,11 @@
     background-color: var(--color-surface-container);
   }
   .menu li > a:focus-visible, .menu li > button:focus-visible, .menu-item:focus-visible {
-    outline: 2px solid var(--color-primary);
-    outline-offset: -2px;
+    outline: none;
+    box-shadow: 0 0 0 3px currentColor;
+    @supports (color: color-mix(in lab, red, red)) {
+      box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
+    }
   }
   .menu li > a.active, .menu li > button.active, .menu-item.active, .menu li > a[aria-current="page"], .menu li > button[aria-current="page"] {
     background-color: var(--color-primary-container);
@@ -2626,9 +2643,12 @@
     text-decoration: underline;
   }
   .breadcrumb-link:focus-visible {
-    outline: 2px solid var(--color-primary);
-    outline-offset: 2px;
-    border-radius: 0.25rem;
+    outline: none;
+    box-shadow: 0 0 0 3px currentColor;
+    @supports (color: color-mix(in lab, red, red)) {
+      box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
+    }
+    border-radius: var(--radius-xs);
   }
   .breadcrumb-separator {
     display: inline-flex;
@@ -2692,7 +2712,7 @@
     color: var(--color-on-surface-variant);
     background-color: transparent;
     border: none;
-    border-radius: 0.25rem;
+    border-radius: var(--radius-xs);
     cursor: pointer;
     transition: background-color 150ms ease-in-out;
   }
@@ -2733,7 +2753,7 @@
   .breadcrumbs-contained {
     padding: 0.75rem 1rem;
     background-color: var(--color-surface-container);
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
   }
   .breadcrumbs-nowrap {
     flex-wrap: nowrap;
@@ -2773,8 +2793,11 @@
     background-color: var(--color-surface-container);
   }
   .tab:focus-visible {
-    outline: 2px solid var(--color-primary);
-    outline-offset: -2px;
+    outline: none;
+    box-shadow: 0 0 0 3px currentColor;
+    @supports (color: color-mix(in lab, red, red)) {
+      box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
+    }
   }
   .tab.tab-active, .tab[aria-selected="true"] {
     color: var(--color-primary);
@@ -2786,12 +2809,12 @@
   }
   .tabs-boxed {
     background-color: var(--color-surface-container);
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
     padding: 0.25rem;
     border: none;
   }
   .tabs-boxed .tab {
-    border-radius: 0.375rem;
+    border-radius: var(--radius-xs);
     border-bottom: none;
     margin-bottom: 0;
   }
@@ -2806,7 +2829,7 @@
   .tabs-lifted .tab {
     border: 1px solid transparent;
     border-bottom: none;
-    border-radius: 0.5rem 0.5rem 0 0;
+    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
     margin-bottom: -1px;
   }
   .tabs-lifted .tab.tab-active, .tabs-lifted .tab[aria-selected="true"] {
@@ -2837,7 +2860,7 @@
     padding: 0.5rem;
     background-color: var(--color-surface);
     border: 1px solid var(--color-outline);
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
     box-shadow: var(--shadow-lg);
     opacity: 0;
     visibility: hidden;
@@ -2889,7 +2912,7 @@
     color: var(--color-on-surface);
     background-color: transparent;
     border: 1px solid var(--color-outline);
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
     cursor: pointer;
     transition: all 150ms ease-in-out;
     white-space: nowrap;
@@ -2913,8 +2936,11 @@
     border-color: var(--color-tertiary);
   }
   .pagination-item:focus-visible, .pagination-prev:focus-visible, .pagination-next:focus-visible, .pagination li > a:focus-visible, .pagination li > button:focus-visible {
-    outline: 2px solid var(--color-primary);
-    outline-offset: 2px;
+    outline: none;
+    box-shadow: 0 0 0 3px currentColor;
+    @supports (color: color-mix(in lab, red, red)) {
+      box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
+    }
   }
   .pagination-item:disabled, .pagination-item-disabled, .pagination-prev:disabled, .pagination-next:disabled, .pagination li > a:disabled, .pagination li > button:disabled {
     opacity: 0.5;
@@ -2957,7 +2983,7 @@
     color: var(--color-on-surface);
     background-color: var(--color-surface);
     border: 1px solid var(--color-outline);
-    border-radius: 0.375rem;
+    border-radius: var(--radius-xs);
   }
   .pagination-input input:focus {
     outline: none;
@@ -2990,10 +3016,10 @@
     border-radius: 0;
   }
   .pagination-compact .pagination-item:first-child, .pagination-compact .pagination-prev {
-    border-radius: 0.5rem 0 0 0.5rem;
+    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
   }
   .pagination-compact .pagination-item:last-child, .pagination-compact .pagination-next {
-    border-radius: 0 0.5rem 0.5rem 0;
+    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
   }
   .pagination-responsive {
     flex-wrap: wrap;
@@ -3030,7 +3056,7 @@
     padding: 1.5rem;
     background-color: var(--color-surface);
     color: var(--color-on-surface);
-    border-radius: 1rem;
+    border-radius: var(--radius-lg);
     box-shadow: var(--shadow-2xl);
     overflow-y: auto;
     transform: scale(0.95);
@@ -3043,7 +3069,10 @@
     position: fixed;
     inset: 0;
     z-index: -1;
-    background-color: rgb(0 0 0 / 0.5);
+    background-color: var(--color-scrim);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in srgb, var(--color-scrim) 50%, transparent);
+    }
     cursor: pointer;
   }
   .modal-backdrop::before {
@@ -3108,7 +3137,7 @@
     color: var(--color-on-surface-variant);
     background-color: transparent;
     border: none;
-    border-radius: 50%;
+    border-radius: var(--radius-full);
     cursor: pointer;
     transition: background-color 150ms ease-in-out, color 150ms ease-in-out;
   }
@@ -3117,8 +3146,11 @@
     color: var(--color-on-surface);
   }
   .modal-close:focus-visible {
-    outline: 2px solid var(--color-primary);
-    outline-offset: 2px;
+    outline: none;
+    box-shadow: 0 0 0 3px currentColor;
+    @supports (color: color-mix(in lab, red, red)) {
+      box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
+    }
   }
   .modal-header {
     margin-bottom: 1rem;
@@ -3147,7 +3179,7 @@
       max-width: 100%;
       max-height: 90vh;
       margin: 0;
-      border-radius: 1rem 1rem 0 0;
+      border-radius: var(--radius-lg) var(--radius-lg) 0 0;
     }
   }
   .drawer-modal {
@@ -3188,7 +3220,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    border-radius: 50%;
+    border-radius: var(--radius-full);
     font-size: 2rem;
   }
   .alert-dialog .modal-icon.info {
@@ -3238,7 +3270,7 @@
     position: relative;
     width: 3rem;
     height: 3rem;
-    border-radius: 50%;
+    border-radius: var(--radius-full);
     overflow: hidden;
     background-color: var(--color-surface-container);
     color: var(--color-on-surface);
@@ -3285,7 +3317,7 @@
     font-size: 2rem;
   }
   .avatar-rounded {
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
   }
   .avatar-square {
     border-radius: 0;
@@ -3319,8 +3351,11 @@
     color: var(--color-error-content);
   }
   .avatar-ring {
-    outline: 2px solid var(--color-primary);
-    outline-offset: 2px;
+    outline: none;
+    box-shadow: 0 0 0 3px currentColor;
+    @supports (color: color-mix(in lab, red, red)) {
+      box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
+    }
   }
   .avatar-ring-primary {
     outline-color: var(--color-primary);
@@ -3340,7 +3375,7 @@
     height: 25%;
     min-width: 0.5rem;
     min-height: 0.5rem;
-    border-radius: 50%;
+    border-radius: var(--radius-full);
     border: 2px solid var(--color-surface);
   }
   .avatar-online::after {
@@ -3385,7 +3420,7 @@
     font-weight: 500;
     line-height: 1rem;
     white-space: nowrap;
-    border-radius: 9999px;
+    border-radius: var(--radius-full);
     background-color: var(--color-surface-container);
     color: var(--color-on-surface);
   }
@@ -3503,14 +3538,14 @@
     transform: translateY(-50%);
     width: 0.375rem;
     height: 0.375rem;
-    border-radius: 50%;
+    border-radius: var(--radius-full);
     background-color: currentColor;
   }
   .badge-dot {
     width: 0.5rem;
     height: 0.5rem;
     padding: 0;
-    border-radius: 50%;
+    border-radius: var(--radius-full);
   }
 }
 @layer components {
@@ -3522,10 +3557,10 @@
     font-size: 0.875rem;
     font-weight: 500;
     line-height: 1.25rem;
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
     background-color: var(--color-surface-container);
     color: var(--color-on-surface);
-    border: 1px solid transparent;
+    border: 1px solid currentColor;
     cursor: default;
     transition: all 150ms ease-in-out;
   }
@@ -3548,6 +3583,7 @@
   .chip-primary {
     background-color: var(--color-primary);
     color: var(--color-primary-content);
+    border-color: var(--color-primary);
   }
   .chip-primary:hover {
     background-color: var(--color-primary);
@@ -3558,6 +3594,7 @@
   .chip-secondary {
     background-color: var(--color-secondary);
     color: var(--color-secondary-content);
+    border-color: var(--color-secondary);
   }
   .chip-secondary:hover {
     background-color: var(--color-secondary);
@@ -3568,6 +3605,7 @@
   .chip-tertiary {
     background-color: var(--color-tertiary);
     color: var(--color-tertiary-content);
+    border-color: var(--color-tertiary);
   }
   .chip-tertiary:hover {
     background-color: var(--color-tertiary);
@@ -3578,6 +3616,7 @@
   .chip-info {
     background-color: var(--color-info);
     color: var(--color-info-content);
+    border-color: var(--color-info);
   }
   .chip-info:hover {
     background-color: var(--color-info);
@@ -3588,6 +3627,7 @@
   .chip-success {
     background-color: var(--color-success);
     color: var(--color-success-content);
+    border-color: var(--color-success);
   }
   .chip-success:hover {
     background-color: var(--color-success);
@@ -3598,6 +3638,7 @@
   .chip-warning {
     background-color: var(--color-warning);
     color: var(--color-warning-content);
+    border-color: var(--color-warning);
   }
   .chip-warning:hover {
     background-color: var(--color-warning);
@@ -3608,6 +3649,7 @@
   .chip-error {
     background-color: var(--color-error);
     color: var(--color-error-content);
+    border-color: var(--color-error);
   }
   .chip-error:hover {
     background-color: var(--color-error);
@@ -3623,49 +3665,42 @@
     background-color: var(--color-surface-container);
   }
   .chip-outlined.chip-primary {
-    border-color: var(--color-primary);
     color: var(--color-primary);
   }
   .chip-outlined.chip-primary:hover {
     background-color: var(--color-primary-container);
   }
   .chip-outlined.chip-secondary {
-    border-color: var(--color-secondary);
     color: var(--color-secondary);
   }
   .chip-outlined.chip-secondary:hover {
     background-color: var(--color-secondary-container);
   }
   .chip-outlined.chip-tertiary {
-    border-color: var(--color-tertiary);
     color: var(--color-tertiary);
   }
   .chip-outlined.chip-tertiary:hover {
     background-color: var(--color-tertiary-container);
   }
   .chip-outlined.chip-info {
-    border-color: var(--color-info);
     color: var(--color-info);
   }
   .chip-outlined.chip-info:hover {
     background-color: var(--color-info-container);
   }
   .chip-outlined.chip-success {
-    border-color: var(--color-success);
     color: var(--color-success);
   }
   .chip-outlined.chip-success:hover {
     background-color: var(--color-success-container);
   }
   .chip-outlined.chip-warning {
-    border-color: var(--color-warning);
     color: var(--color-warning);
   }
   .chip-outlined.chip-warning:hover {
     background-color: var(--color-warning-container);
   }
   .chip-outlined.chip-error {
-    border-color: var(--color-error);
     color: var(--color-error);
   }
   .chip-outlined.chip-error:hover {
@@ -3673,6 +3708,7 @@
   }
   .chip-tonal {
     background-color: var(--color-surface-container-high);
+    border-color: transparent;
   }
   .chip-tonal.chip-primary {
     background-color: var(--color-primary-container);
@@ -3793,7 +3829,7 @@
     opacity: 0.7;
     background-color: transparent;
     border: none;
-    border-radius: 50%;
+    border-radius: var(--radius-full);
     cursor: pointer;
     transition: opacity 150ms ease-in-out;
   }
@@ -3803,6 +3839,7 @@
   .chip-selected {
     background-color: var(--color-primary);
     color: var(--color-primary-content);
+    border-color: var(--color-primary);
   }
   .chip-selected.chip-outlined {
     background-color: var(--color-primary);
@@ -3849,8 +3886,11 @@
     background-color: var(--color-surface-container);
   }
   .list-item:focus-visible {
-    outline: 2px solid var(--color-primary);
-    outline-offset: -2px;
+    outline: none;
+    box-shadow: 0 0 0 3px currentColor;
+    @supports (color: color-mix(in lab, red, red)) {
+      box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
+    }
     background-color: var(--color-surface-container);
   }
   .list-item-icon {
@@ -3889,7 +3929,7 @@
   }
   .list-bordered {
     border: 1px solid var(--color-outline);
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
     padding: 0;
   }
   .list-bordered .list-item {
@@ -4004,7 +4044,7 @@
   }
   .table-bordered {
     border: 1px solid var(--color-outline);
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
     overflow: hidden;
   }
   .table-bordered th, .table-bordered td {
@@ -4086,8 +4126,11 @@
     z-index: 1;
   }
   .table tr:focus-visible, .table-row:focus-visible {
-    outline: 2px solid var(--color-primary);
-    outline-offset: -2px;
+    outline: none;
+    box-shadow: 0 0 0 3px currentColor;
+    @supports (color: color-mix(in lab, red, red)) {
+      box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
+    }
   }
 }
 @layer components {
@@ -4104,7 +4147,7 @@
     color: var(--color-on-surface);
     background-color: var(--color-surface);
     border: 1px solid currentColor;
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
     transition: border-color 150ms ease-in-out, box-shadow 150ms ease-in-out;
   }
   .autocomplete-input:focus {
@@ -4130,7 +4173,7 @@
     margin-top: 0.25rem;
     background-color: var(--color-surface);
     border: 1px solid var(--color-outline);
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
     box-shadow: var(--shadow-lg);
     overflow-y: auto;
     opacity: 0;
@@ -4194,7 +4237,7 @@
     background-color: var(--color-primary-container);
     color: var(--color-on-primary-container);
     font-weight: 600;
-    border-radius: 0.125rem;
+    border-radius: var(--radius-xs);
   }
   .autocomplete-group-header {
     padding: 0.5rem 1rem;
@@ -4232,7 +4275,7 @@
     color: var(--color-on-surface-variant);
     background-color: transparent;
     border: none;
-    border-radius: 50%;
+    border-radius: var(--radius-full);
     cursor: pointer;
     transition: background-color 150ms ease-in-out, color 150ms ease-in-out;
   }
@@ -4252,7 +4295,7 @@
     min-height: 2.75rem;
     background-color: var(--color-surface);
     border: 1px solid var(--color-outline);
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
   }
   .autocomplete-tags:focus-within {
     border-color: var(--color-primary);
@@ -4266,7 +4309,7 @@
     font-size: 0.75rem;
     background-color: var(--color-primary-container);
     color: var(--color-on-primary-container);
-    border-radius: 0.25rem;
+    border-radius: var(--radius-xs);
   }
   .autocomplete-tag-remove {
     display: flex;
@@ -4278,7 +4321,7 @@
     background-color: transparent;
     border: none;
     cursor: pointer;
-    border-radius: 50%;
+    border-radius: var(--radius-full);
     transition: background-color 150ms ease-in-out;
   }
   .autocomplete-tag-remove:hover {
@@ -4401,7 +4444,7 @@
     color: var(--color-on-surface);
     background-color: var(--color-surface);
     border: 1px solid currentColor;
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
     cursor: pointer;
     transition: border-color 150ms ease-in-out, box-shadow 150ms ease-in-out;
   }
@@ -4468,7 +4511,7 @@
     color: var(--color-on-surface-variant);
     background-color: transparent;
     border: none;
-    border-radius: 50%;
+    border-radius: var(--radius-full);
     cursor: pointer;
     flex-shrink: 0;
     transition: background-color 150ms ease-in-out;
@@ -4485,7 +4528,7 @@
     margin-top: 0.25rem;
     background-color: var(--color-surface);
     border: 1px solid var(--color-outline-variant);
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
     box-shadow: var(--shadow-md);
     overflow: hidden;
   }
@@ -4565,7 +4608,7 @@
     color: var(--color-on-surface);
     background-color: transparent;
     border: none;
-    border-radius: 0.375rem;
+    border-radius: var(--radius-xs);
     cursor: pointer;
     text-align: left;
     width: 100%;
@@ -4624,7 +4667,7 @@
     color: var(--color-on-surface);
     background-color: var(--color-surface-container);
     border: none;
-    border-radius: 0.375rem;
+    border-radius: var(--radius-xs);
     outline: none;
   }
   .cascader-search-input:focus {
@@ -4642,7 +4685,7 @@
   .cascader-sm .cascader-trigger {
     padding: 0.5rem 0.75rem;
     font-size: 0.875rem;
-    border-radius: 0.375rem;
+    border-radius: var(--radius-xs);
   }
   .cascader-sm .cascader-panel {
     min-width: 8rem;
@@ -4655,7 +4698,7 @@
   .cascader-lg .cascader-trigger {
     padding: 1rem 1.25rem;
     font-size: 1.125rem;
-    border-radius: 0.625rem;
+    border-radius: var(--radius-sm);
   }
   .cascader-lg .cascader-panel {
     min-width: 12rem;
@@ -4673,7 +4716,7 @@
     background-color: var(--color-surface-container);
     border: none;
     border-bottom: 2px solid var(--color-outline);
-    border-radius: 0.5rem 0.5rem 0 0;
+    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
   }
   .cascader-filled .cascader-trigger:focus {
     border-bottom-color: currentColor;
@@ -4768,7 +4811,7 @@
     height: 1rem;
     border: 2px solid var(--color-outline);
     border-top-color: var(--color-primary);
-    border-radius: 50%;
+    border-radius: var(--radius-full);
     animation: cascader-spin 0.8s linear infinite;
   }
   @keyframes cascader-spin {
@@ -4801,7 +4844,7 @@
     appearance: none;
     background-color: transparent;
     border: 2px solid var(--checkbox-border-color);
-    border-radius: 0.125rem;
+    border-radius: var(--radius-xs);
     transition: background-color 150ms ease-in-out, border-color 150ms ease-in-out;
   }
   .checkbox::before {
@@ -4968,7 +5011,7 @@
     color: var(--color-on-surface);
     background-color: var(--color-surface);
     border: 1px solid currentColor;
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
     transition: border-color 150ms ease-in-out, box-shadow 150ms ease-in-out;
   }
   .datepicker-input-container .datepicker-input[type="date"]::-webkit-calendar-picker-indicator {
@@ -5028,7 +5071,7 @@
     padding: 0;
     background: transparent;
     border: none;
-    border-radius: 50%;
+    border-radius: var(--radius-full);
     cursor: pointer;
     color: var(--color-on-surface-variant);
     transition: background-color 150ms ease-in-out;
@@ -5048,7 +5091,7 @@
     margin-top: 0.25rem;
     background-color: var(--color-surface);
     border: 1px solid var(--color-outline);
-    border-radius: 0.75rem;
+    border-radius: var(--radius-md);
     box-shadow: var(--shadow-lg);
     opacity: 0;
     visibility: hidden;
@@ -5067,7 +5110,7 @@
     min-width: 18rem;
     background-color: var(--color-surface);
     border: 1px solid var(--color-outline);
-    border-radius: 0.75rem;
+    border-radius: var(--radius-md);
     box-shadow: var(--shadow-lg);
   }
   .datepicker-header {
@@ -5095,7 +5138,7 @@
     color: var(--color-on-surface-variant);
     background-color: transparent;
     border: none;
-    border-radius: 50%;
+    border-radius: var(--radius-full);
     cursor: pointer;
     transition: background-color 150ms ease-in-out, color 150ms ease-in-out;
   }
@@ -5142,7 +5185,7 @@
     color: var(--color-on-surface);
     background-color: transparent;
     border: none;
-    border-radius: 50%;
+    border-radius: var(--radius-full);
     cursor: pointer;
     transition: background-color 150ms ease-in-out, color 150ms ease-in-out;
   }
@@ -5150,8 +5193,11 @@
     background-color: var(--color-surface-container);
   }
   .datepicker-day:focus-visible {
-    outline: 2px solid var(--color-primary);
-    outline-offset: 2px;
+    outline: none;
+    box-shadow: 0 0 0 3px currentColor;
+    @supports (color: color-mix(in lab, red, red)) {
+      box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
+    }
   }
   .datepicker-day-other-month {
     color: var(--color-on-surface-variant);
@@ -5162,7 +5208,7 @@
   }
   .datepicker-day-selected {
     background-color: var(--color-primary);
-    color: var(--color-on-primary);
+    color: var(--color-primary-content);
   }
   .datepicker-day-selected:hover {
     background-color: var(--color-primary);
@@ -5180,13 +5226,13 @@
   }
   .datepicker-day-range-start {
     background-color: var(--color-primary);
-    color: var(--color-on-primary);
-    border-radius: 50% 0 0 50%;
+    color: var(--color-primary-content);
+    border-radius: var(--radius-full) 0 0 var(--radius-full);
   }
   .datepicker-day-range-end {
     background-color: var(--color-primary);
-    color: var(--color-on-primary);
-    border-radius: 0 50% 50% 0;
+    color: var(--color-primary-content);
+    border-radius: 0 var(--radius-full) var(--radius-full) 0;
   }
   .datepicker-months, .datepicker-years {
     display: grid;
@@ -5204,7 +5250,7 @@
     color: var(--color-on-surface);
     background-color: transparent;
     border: none;
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
     cursor: pointer;
     transition: background-color 150ms ease-in-out;
   }
@@ -5213,7 +5259,7 @@
   }
   .datepicker-month.selected, .datepicker-month-selected, .datepicker-year.selected, .datepicker-year-selected {
     background-color: var(--color-primary);
-    color: var(--color-on-primary);
+    color: var(--color-primary-content);
   }
   .datepicker-day-disabled {
     color: var(--color-on-surface-variant);
@@ -5244,7 +5290,7 @@
     color: var(--color-on-surface);
     background-color: var(--color-surface-container);
     border: 1px solid var(--color-outline);
-    border-radius: 0.25rem;
+    border-radius: var(--radius-xs);
   }
   .datepicker-time-input:focus {
     outline: none;
@@ -5272,15 +5318,15 @@
     transition: background-color 150ms ease-in-out;
   }
   .datepicker-time-period-btn:first-child {
-    border-radius: 0.25rem 0.25rem 0 0;
+    border-radius: var(--radius-xs) var(--radius-xs) 0 0;
   }
   .datepicker-time-period-btn:last-child {
-    border-radius: 0 0 0.25rem 0.25rem;
+    border-radius: 0 0 var(--radius-xs) var(--radius-xs);
     border-top: none;
   }
   .datepicker-time-period-btn.active {
     background-color: var(--color-primary);
-    color: var(--color-on-primary);
+    color: var(--color-primary-content);
     border-color: var(--color-primary);
   }
   .datepicker-sm .datepicker-input {
@@ -5325,7 +5371,7 @@
     color: var(--color-on-surface);
     background-color: transparent;
     border: none;
-    border-radius: 0.375rem;
+    border-radius: var(--radius-xs);
     cursor: pointer;
     text-align: left;
     transition: background-color 150ms ease-in-out;
@@ -5377,7 +5423,7 @@
     color: var(--color-on-surface);
     background-color: var(--color-surface);
     border: 1px solid var(--color-outline);
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
     transition: border-color 150ms ease-in-out, box-shadow 150ms ease-in-out;
   }
   .datetime-picker-input:focus {
@@ -5465,7 +5511,7 @@
     color: var(--color-on-surface);
     background-color: var(--color-surface);
     border: 1px solid var(--color-outline);
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
     transition: border-color 150ms ease-in-out;
   }
   .datetime-range-picker-input:focus {
@@ -5632,7 +5678,7 @@
     padding: 2rem;
     background-color: var(--color-surface);
     border: 2px dashed currentColor;
-    border-radius: 0.75rem;
+    border-radius: var(--radius-md);
     cursor: pointer;
     transition: border-color 150ms ease-in-out, background-color 150ms ease-in-out;
   }
@@ -5704,7 +5750,7 @@
     gap: 0.75rem;
     padding: 0.75rem;
     background-color: var(--color-surface-container);
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
   }
   .file-upload-item-icon {
     display: flex;
@@ -5714,7 +5760,7 @@
     height: 2.5rem;
     background-color: var(--color-primary-container);
     color: var(--color-on-primary-container);
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
     font-size: 1.25rem;
     flex-shrink: 0;
   }
@@ -5743,7 +5789,7 @@
     color: var(--color-on-surface-variant);
     background-color: transparent;
     border: none;
-    border-radius: 50%;
+    border-radius: var(--radius-full);
     cursor: pointer;
     transition: background-color 150ms ease-in-out, color 150ms ease-in-out;
     flex-shrink: 0;
@@ -5757,7 +5803,7 @@
     height: 0.25rem;
     margin-top: 0.5rem;
     background-color: var(--color-surface-container-highest);
-    border-radius: 9999px;
+    border-radius: var(--radius-full);
     overflow: hidden;
   }
   .file-upload-progress-bar {
@@ -5766,7 +5812,7 @@
     left: 0;
     height: 100%;
     background-color: var(--color-primary);
-    border-radius: 9999px;
+    border-radius: var(--radius-full);
     transition: width 150ms ease-in-out;
   }
   .file-upload-item.uploading .file-upload-item-icon {
@@ -5796,7 +5842,7 @@
   .file-upload-preview-item {
     position: relative;
     aspect-ratio: 1;
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
     overflow: hidden;
     background-color: var(--color-surface-container);
   }
@@ -5817,7 +5863,7 @@
     background-color: var(--color-on-surface);
     color: var(--color-surface);
     border: none;
-    border-radius: 50%;
+    border-radius: var(--radius-full);
     cursor: pointer;
     opacity: 0;
     transition: opacity 150ms ease-in-out;
@@ -5846,10 +5892,10 @@
     padding: 0.75rem 1.5rem;
     font-size: 0.875rem;
     font-weight: 500;
-    color: var(--color-on-primary);
+    color: var(--color-primary-content);
     background-color: var(--color-primary);
     border: none;
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
     cursor: pointer;
     transition: background-color 150ms ease-in-out, box-shadow 150ms ease-in-out;
   }
@@ -5857,8 +5903,11 @@
     box-shadow: var(--shadow-md);
   }
   .file-upload-button:focus-visible {
-    outline: 2px solid var(--color-primary);
-    outline-offset: 2px;
+    outline: none;
+    box-shadow: 0 0 0 3px currentColor;
+    @supports (color: color-mix(in lab, red, red)) {
+      box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
+    }
   }
   .file-upload-button:disabled {
     opacity: 0.6;
@@ -6043,7 +6092,7 @@
     padding: 1rem;
     margin: 0;
     border: 1px solid var(--color-outline-variant);
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
     background-color: transparent;
   }
   .fieldset-legend {
@@ -6202,10 +6251,131 @@
       box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-warning) 10%, transparent);
     }
   }
+  .form-group-info .form-label {
+    color: var(--color-info);
+  }
+  .form-group-info .input, .form-group-info .select, .form-group-info .textarea {
+    border-color: var(--color-info);
+  }
+  .form-group-info .input:focus-visible, .form-group-info .select:focus-visible, .form-group-info .textarea:focus-visible {
+    border-color: var(--color-info);
+    box-shadow: 0 0 0 3px var(--color-info);
+    @supports (color: color-mix(in lab, red, red)) {
+      box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-info) 10%, transparent);
+    }
+  }
   .form-group-disabled {
     opacity: 0.5;
     pointer-events: none;
   }
+  .input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] {
+    border-color: var(--color-error);
+    color: var(--color-error);
+  }
+  .input[aria-invalid="true"]:focus-visible, .select[aria-invalid="true"]:focus-visible, .textarea[aria-invalid="true"]:focus-visible {
+    border-color: var(--color-error);
+    box-shadow: 0 0 0 3px var(--color-error);
+    @supports (color: color-mix(in lab, red, red)) {
+      box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-error) 10%, transparent);
+    }
+  }
+  .checkbox[aria-invalid="true"], .radio[aria-invalid="true"], .file-input[aria-invalid="true"] {
+    border-color: var(--color-error);
+  }
+  .checkbox[aria-invalid="true"]:focus-visible, .radio[aria-invalid="true"]:focus-visible, .file-input[aria-invalid="true"]:focus-visible {
+    box-shadow: 0 0 0 3px var(--color-error);
+    @supports (color: color-mix(in lab, red, red)) {
+      box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-error) 20%, transparent);
+    }
+  }
+  .switch[aria-invalid="true"] {
+    border-color: var(--color-error);
+  }
+  .switch[aria-invalid="true"]:focus-visible {
+    box-shadow: 0 0 0 3px var(--color-error);
+    @supports (color: color-mix(in lab, red, red)) {
+      box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-error) 20%, transparent);
+    }
+  }
+  .form-label[aria-required="true"]::after, label[aria-required="true"]::after {
+    content: ' *';
+    color: var(--color-error);
+  }
+  .validate .input:invalid, .validate .select:invalid, .validate .textarea:invalid {
+    border-color: var(--color-error);
+  }
+  .validate .input:valid, .validate .select:valid, .validate .textarea:valid {
+    border-color: var(--color-success);
+  }
+  .input:user-invalid, .select:user-invalid, .textarea:user-invalid {
+    border-color: var(--color-error);
+  }
+  .input:user-invalid:focus-visible, .select:user-invalid:focus-visible, .textarea:user-invalid:focus-visible {
+    border-color: var(--color-error);
+    box-shadow: 0 0 0 3px var(--color-error);
+    @supports (color: color-mix(in lab, red, red)) {
+      box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-error) 10%, transparent);
+    }
+  }
+  .input:user-valid, .select:user-valid, .textarea:user-valid {
+    border-color: var(--color-success);
+  }
+  .input:user-valid:focus-visible, .select:user-valid:focus-visible, .textarea:user-valid:focus-visible {
+    border-color: var(--color-success);
+    box-shadow: 0 0 0 3px var(--color-success);
+    @supports (color: color-mix(in lab, red, red)) {
+      box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-success) 10%, transparent);
+    }
+  }
+  .checkbox:user-invalid, .radio:user-invalid {
+    border-color: var(--color-error);
+  }
+  .checkbox:user-invalid:focus-visible, .radio:user-invalid:focus-visible {
+    box-shadow: 0 0 0 3px var(--color-error);
+    @supports (color: color-mix(in lab, red, red)) {
+      box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-error) 20%, transparent);
+    }
+  }
+  .checkbox:user-valid:checked, .radio:user-valid:checked {
+    border-color: var(--color-success);
+    background-color: var(--color-success);
+  }
+  .switch:user-invalid {
+    border-color: var(--color-error);
+  }
+  .switch:user-invalid:focus-visible {
+    box-shadow: 0 0 0 3px var(--color-error);
+    @supports (color: color-mix(in lab, red, red)) {
+      box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-error) 20%, transparent);
+    }
+  }
+  .switch:user-valid:checked {
+    background-color: var(--color-success);
+    border-color: var(--color-success);
+  }
+  .file-input:user-invalid {
+    border-color: var(--color-error);
+  }
+  .file-input:user-invalid:focus-visible {
+    box-shadow: 0 0 0 3px var(--color-error);
+    @supports (color: color-mix(in lab, red, red)) {
+      box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-error) 20%, transparent);
+    }
+  }
+  .input-filled:user-invalid {
+    border-bottom-color: var(--color-error);
+  }
+  .input-filled:user-invalid:focus-visible {
+    border-bottom-color: var(--color-error);
+    box-shadow: none;
+  }
+  .input-filled:user-valid {
+    border-bottom-color: var(--color-success);
+  }
+  .input-filled:user-valid:focus-visible {
+    border-bottom-color: var(--color-success);
+    box-shadow: none;
+  }
 }
 @layer components {
   .multi-select {
@@ -6226,7 +6396,7 @@
     color: var(--color-on-surface);
     background-color: var(--color-surface);
     border: 1px solid currentColor;
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
     cursor: pointer;
     transition: border-color 150ms ease-in-out, box-shadow 150ms ease-in-out;
   }
@@ -6263,7 +6433,7 @@
     line-height: 1.25rem;
     background-color: var(--color-surface-container-high);
     color: var(--color-on-surface);
-    border-radius: 1rem;
+    border-radius: var(--radius-lg);
   }
   .multi-select-tag-text {
     overflow: hidden;
@@ -6281,7 +6451,7 @@
     color: inherit;
     background-color: transparent;
     border: none;
-    border-radius: 50%;
+    border-radius: var(--radius-full);
     cursor: pointer;
     opacity: 0.7;
     transition: opacity 150ms ease-in-out, background-color 150ms ease-in-out;
@@ -6310,7 +6480,7 @@
     line-height: 1.25rem;
     background-color: var(--color-surface-container);
     color: var(--color-on-surface-variant);
-    border-radius: 1rem;
+    border-radius: var(--radius-lg);
   }
   .multi-select-input {
     flex: 1;
@@ -6350,7 +6520,7 @@
     color: var(--color-on-surface-variant);
     background-color: transparent;
     border: none;
-    border-radius: 50%;
+    border-radius: var(--radius-full);
     cursor: pointer;
     flex-shrink: 0;
     transition: background-color 150ms ease-in-out;
@@ -6369,7 +6539,7 @@
     margin-top: 0.25rem;
     background-color: var(--color-surface);
     border: 1px solid var(--color-outline-variant);
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
     box-shadow: var(--shadow-md);
     overflow: hidden;
   }
@@ -6398,7 +6568,7 @@
     color: var(--color-on-surface);
     background-color: var(--color-surface-container);
     border: none;
-    border-radius: 0.375rem;
+    border-radius: var(--radius-xs);
     outline: none;
   }
   .multi-select-search-input:focus {
@@ -6423,7 +6593,7 @@
     color: var(--color-on-surface);
     background-color: transparent;
     border: none;
-    border-radius: 0.375rem;
+    border-radius: var(--radius-xs);
     cursor: pointer;
     text-align: left;
     transition: background-color 150ms ease-in-out;
@@ -6459,7 +6629,7 @@
     height: 1rem;
     background-color: transparent;
     border: 2px solid var(--color-on-surface-variant);
-    border-radius: 0.125rem;
+    border-radius: var(--radius-xs);
     flex-shrink: 0;
   }
   .multi-select-option-selected .multi-select-option-checkbox {
@@ -6467,7 +6637,7 @@
     border-color: var(--color-primary);
   }
   .multi-select-option-selected .multi-select-option-checkbox svg {
-    color: var(--color-on-primary);
+    color: var(--color-primary-content);
   }
   .multi-select-option-icon {
     display: flex;
@@ -6517,7 +6687,7 @@
     color: var(--color-primary);
     background-color: transparent;
     border: none;
-    border-radius: 0.375rem;
+    border-radius: var(--radius-xs);
     cursor: pointer;
     transition: background-color 150ms ease-in-out;
   }
@@ -6538,13 +6708,13 @@
     font-weight: 600;
     color: var(--color-primary-content);
     background-color: var(--color-primary);
-    border-radius: 0.625rem;
+    border-radius: var(--radius-sm);
   }
   .multi-select-sm .multi-select-trigger {
     min-height: 2.25rem;
     padding: 0.375rem 0.5rem;
     font-size: 0.875rem;
-    border-radius: 0.375rem;
+    border-radius: var(--radius-xs);
   }
   .multi-select-sm .multi-select-tag {
     font-size: 0.625rem;
@@ -6554,7 +6724,7 @@
     min-height: 3.25rem;
     padding: 0.625rem 1rem;
     font-size: 1.125rem;
-    border-radius: 0.625rem;
+    border-radius: var(--radius-sm);
   }
   .multi-select-outlined .multi-select-trigger {
     background-color: var(--color-surface);
@@ -6564,7 +6734,7 @@
     background-color: var(--color-surface-container);
     border: none;
     border-bottom: 2px solid var(--color-outline);
-    border-radius: 0.5rem 0.5rem 0 0;
+    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
   }
   .multi-select-filled .multi-select-trigger:focus-within {
     border-bottom-color: currentColor;
@@ -6662,7 +6832,7 @@
     height: 1rem;
     border: 2px solid var(--color-outline);
     border-top-color: var(--color-primary);
-    border-radius: 50%;
+    border-radius: var(--radius-full);
     animation: multi-select-spin 0.8s linear infinite;
   }
   @keyframes multi-select-spin {
@@ -6695,7 +6865,7 @@
     color: var(--color-on-surface);
     background-color: var(--color-surface);
     border: 2px solid currentColor;
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
     outline: none;
     transition: border-color 150ms ease-in-out, box-shadow 150ms ease-in-out;
     caret-color: var(--color-primary);
@@ -6729,19 +6899,19 @@
     width: 1rem;
     height: 0.25rem;
     background-color: var(--color-outline);
-    border-radius: 0.125rem;
+    border-radius: var(--radius-xs);
   }
   .otp-input-sm .otp-input-field {
     width: 2.5rem;
     height: 3rem;
     font-size: 1.25rem;
-    border-radius: 0.375rem;
+    border-radius: var(--radius-xs);
   }
   .otp-input-lg .otp-input-field {
     width: 3.5rem;
     height: 4rem;
     font-size: 1.75rem;
-    border-radius: 0.625rem;
+    border-radius: var(--radius-sm);
   }
   .otp-input-compact {
     gap: 0.25rem;
@@ -6753,7 +6923,7 @@
     background-color: var(--color-surface-container);
     border: none;
     border-bottom: 2px solid var(--color-outline);
-    border-radius: 0.5rem 0.5rem 0 0;
+    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
   }
   .otp-input-filled .otp-input-field:focus {
     border-bottom-color: var(--color-primary);
@@ -6891,7 +7061,7 @@
     color: var(--color-on-surface);
     background-color: var(--color-surface);
     border: 2px solid currentColor;
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
     outline: none;
     transition: border-color 150ms ease-in-out, box-shadow 150ms ease-in-out;
     caret-color: var(--color-primary);
@@ -6922,13 +7092,13 @@
     width: 2.5rem;
     height: 3rem;
     font-size: 1.25rem;
-    border-radius: 0.375rem;
+    border-radius: var(--radius-xs);
   }
   .pin-input-lg .pin-input-field {
     width: 3.5rem;
     height: 4rem;
     font-size: 1.75rem;
-    border-radius: 0.625rem;
+    border-radius: var(--radius-sm);
   }
   .pin-input-compact {
     gap: 0.25rem;
@@ -6937,7 +7107,7 @@
     background-color: var(--color-surface-container);
     border: none;
     border-bottom: 2px solid var(--color-outline);
-    border-radius: 0.5rem 0.5rem 0 0;
+    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
   }
   .pin-input-filled .pin-input-field:focus {
     border-bottom-color: var(--color-primary);
@@ -6946,7 +7116,7 @@
   .pin-input-circle .pin-input-field {
     width: 3rem;
     height: 3rem;
-    border-radius: 50%;
+    border-radius: var(--radius-full);
   }
   .pin-input-circle.pin-input-sm .pin-input-field {
     width: 2.5rem;
@@ -7090,14 +7260,14 @@
     appearance: none;
     background-color: transparent;
     border: 2px solid var(--radio-border-color);
-    border-radius: 50%;
+    border-radius: var(--radius-full);
     transition: border-color 150ms ease-in-out;
   }
   .radio::before {
     content: "";
     width: 0.5em;
     height: 0.5em;
-    border-radius: 50%;
+    border-radius: var(--radius-full);
     background-color: var(--radio-color);
     transform: scale(0);
     transition: transform 150ms ease-in-out;
@@ -7359,7 +7529,7 @@
     @supports (color: color-mix(in lab, red, red)) {
       box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-warning) 20%, transparent);
     }
-    border-radius: 0.25rem;
+    border-radius: var(--radius-xs);
   }
   .rating-primary .rating-item:focus-visible {
     box-shadow: 0 0 0 3px var(--color-primary);
@@ -7461,7 +7631,7 @@
     color: var(--color-on-surface);
     background-color: var(--color-surface-container);
     border: 1px solid var(--color-outline);
-    border-radius: 1.25rem;
+    border-radius: var(--radius-xl);
     padding: 0.25rem;
     gap: 0.25rem;
   }
@@ -7478,7 +7648,7 @@
     color: var(--color-on-surface);
     background-color: transparent;
     border: none;
-    border-radius: 1rem;
+    border-radius: var(--radius-lg);
     cursor: pointer;
     transition: background-color 150ms ease-in-out, color 150ms ease-in-out;
     user-select: none;
@@ -7518,24 +7688,24 @@
   .segment-control-sm {
     padding: 0.125rem;
     gap: 0.125rem;
-    border-radius: 1rem;
+    border-radius: var(--radius-lg);
   }
   .segment-control-sm .segment-item {
     padding: 0.375rem 0.75rem;
     font-size: 0.75rem;
     line-height: 1rem;
-    border-radius: 0.75rem;
+    border-radius: var(--radius-md);
   }
   .segment-control-lg {
     padding: 0.375rem;
     gap: 0.375rem;
-    border-radius: 1.5rem;
+    border-radius: var(--radius-2xl);
   }
   .segment-control-lg .segment-item {
     padding: 0.75rem 1.5rem;
     font-size: 1rem;
     line-height: 1.5rem;
-    border-radius: 1.25rem;
+    border-radius: var(--radius-xl);
   }
   .segment-control-primary .segment-item-active {
     background-color: var(--color-primary);
@@ -7629,7 +7799,7 @@
     color: var(--color-on-surface);
     background-color: var(--color-surface);
     border: 1px solid currentColor;
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
     outline: none;
     cursor: pointer;
     appearance: none;
@@ -7660,7 +7830,7 @@
     background-color: var(--color-surface-container);
     border: none;
     border-bottom: 2px solid var(--color-outline);
-    border-radius: 0.5rem 0.5rem 0 0;
+    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
   }
   .select-filled:hover:not(:disabled) {
     background-color: var(--color-surface-container-high);
@@ -7694,7 +7864,7 @@
   .select-outlined {
     background-color: transparent;
     border: 1px solid var(--color-outline);
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
   }
   .select-primary {
     color: var(--color-primary);
@@ -7721,21 +7891,21 @@
     padding: 0.375rem 2rem 0.375rem 0.625rem;
     font-size: 0.75rem;
     line-height: 1rem;
-    border-radius: 0.25rem;
+    border-radius: var(--radius-xs);
     background-size: 1rem 1rem;
   }
   .select-sm {
     padding: 0.5rem 2.25rem 0.5rem 0.75rem;
     font-size: 0.875rem;
     line-height: 1.25rem;
-    border-radius: 0.375rem;
+    border-radius: var(--radius-xs);
     background-size: 1.125rem 1.125rem;
   }
   .select-lg {
     padding: 1rem 3rem 1rem 1.25rem;
     font-size: 1.125rem;
     line-height: 1.75rem;
-    border-radius: 0.625rem;
+    border-radius: var(--radius-sm);
     background-size: 1.5rem 1.5rem;
     background-position: right 1rem center;
   }
@@ -7771,7 +7941,7 @@
   }
   .select-multiple option {
     padding: 0.5rem 0.75rem;
-    border-radius: 0.25rem;
+    border-radius: var(--radius-xs);
   }
   .select-multiple option:checked {
     background-color: var(--color-primary-container);
@@ -7815,7 +7985,7 @@
     width: 100%;
     height: 0.25rem;
     background-color: var(--color-surface-container-highest);
-    border-radius: 9999px;
+    border-radius: var(--radius-full);
   }
   .slider-track-filled {
     position: absolute;
@@ -7823,7 +7993,7 @@
     left: 0;
     height: 100%;
     background-color: var(--color-primary);
-    border-radius: 9999px;
+    border-radius: var(--radius-full);
   }
   .slider-thumb {
     position: absolute;
@@ -7832,18 +8002,27 @@
     height: 1.25rem;
     background-color: var(--color-primary);
     border: none;
-    border-radius: 50%;
-    box-shadow: 0 2px 4px rgb(0 0 0 / 0.2);
+    border-radius: var(--radius-full);
+    box-shadow: 0 2px 4px var(--color-shadow);
+    @supports (color: color-mix(in lab, red, red)) {
+      box-shadow: 0 2px 4px color-mix(in srgb, var(--color-shadow) 20%, transparent);
+    }
     transform: translate(-50%, -50%);
     cursor: grab;
     transition: box-shadow 150ms ease-in-out, transform 150ms ease-in-out;
   }
   .slider-thumb:hover {
-    box-shadow: 0 0 0 8px var(--color-primary-container), 0 2px 4px rgb(0 0 0 / 0.2);
+    box-shadow: 0 0 0 8px var(--color-primary-container), 0 2px 4px var(--color-shadow);
+    @supports (color: color-mix(in lab, red, red)) {
+      box-shadow: 0 0 0 8px var(--color-primary-container), 0 2px 4px color-mix(in srgb, var(--color-shadow) 20%, transparent);
+    }
   }
   .slider-thumb:focus-visible {
     outline: none;
-    box-shadow: 0 0 0 8px var(--color-primary-container), 0 2px 4px rgb(0 0 0 / 0.2);
+    box-shadow: 0 0 0 8px var(--color-primary-container), 0 2px 4px var(--color-shadow);
+    @supports (color: color-mix(in lab, red, red)) {
+      box-shadow: 0 0 0 8px var(--color-primary-container), 0 2px 4px color-mix(in srgb, var(--color-shadow) 20%, transparent);
+    }
   }
   .slider-thumb:active {
     cursor: grabbing;
@@ -7860,7 +8039,7 @@
     font-weight: 500;
     color: var(--color-primary-content);
     background-color: var(--color-primary);
-    border-radius: 0.25rem;
+    border-radius: var(--radius-xs);
     white-space: nowrap;
     opacity: 0;
     visibility: hidden;
@@ -7898,7 +8077,7 @@
     width: 0.125rem;
     height: 0.5rem;
     background-color: var(--color-outline);
-    border-radius: 9999px;
+    border-radius: var(--radius-full);
   }
   .slider-mark-active {
     background-color: var(--color-primary-content);
@@ -7946,7 +8125,10 @@
     background-color: var(--color-primary-content);
   }
   .slider-primary .slider-thumb:hover, .slider-primary .slider-thumb:focus-visible {
-    box-shadow: 0 0 0 8px var(--color-primary-container), 0 2px 4px rgb(0 0 0 / 0.2);
+    box-shadow: 0 0 0 8px var(--color-primary-container), 0 2px 4px var(--color-shadow);
+    @supports (color: color-mix(in lab, red, red)) {
+      box-shadow: 0 0 0 8px var(--color-primary-container), 0 2px 4px color-mix(in srgb, var(--color-shadow) 20%, transparent);
+    }
   }
   .slider-primary .slider-thumb-label {
     background-color: var(--color-primary);
@@ -7959,7 +8141,10 @@
     background-color: var(--color-secondary);
   }
   .slider-secondary .slider-thumb:hover, .slider-secondary .slider-thumb:focus-visible {
-    box-shadow: 0 0 0 8px var(--color-secondary-container), 0 2px 4px rgb(0 0 0 / 0.2);
+    box-shadow: 0 0 0 8px var(--color-secondary-container), 0 2px 4px var(--color-shadow);
+    @supports (color: color-mix(in lab, red, red)) {
+      box-shadow: 0 0 0 8px var(--color-secondary-container), 0 2px 4px color-mix(in srgb, var(--color-shadow) 20%, transparent);
+    }
   }
   .slider-secondary .slider-mark-active {
     background-color: var(--color-secondary-content);
@@ -7975,7 +8160,10 @@
     background-color: var(--color-tertiary);
   }
   .slider-tertiary .slider-thumb:hover, .slider-tertiary .slider-thumb:focus-visible {
-    box-shadow: 0 0 0 8px var(--color-tertiary-container), 0 2px 4px rgb(0 0 0 / 0.2);
+    box-shadow: 0 0 0 8px var(--color-tertiary-container), 0 2px 4px var(--color-shadow);
+    @supports (color: color-mix(in lab, red, red)) {
+      box-shadow: 0 0 0 8px var(--color-tertiary-container), 0 2px 4px color-mix(in srgb, var(--color-shadow) 20%, transparent);
+    }
   }
   .slider-tertiary .slider-mark-active {
     background-color: var(--color-tertiary-content);
@@ -7991,7 +8179,10 @@
     background-color: var(--color-info);
   }
   .slider-info .slider-thumb:hover, .slider-info .slider-thumb:focus-visible {
-    box-shadow: 0 0 0 8px var(--color-info-container), 0 2px 4px rgb(0 0 0 / 0.2);
+    box-shadow: 0 0 0 8px var(--color-info-container), 0 2px 4px var(--color-shadow);
+    @supports (color: color-mix(in lab, red, red)) {
+      box-shadow: 0 0 0 8px var(--color-info-container), 0 2px 4px color-mix(in srgb, var(--color-shadow) 20%, transparent);
+    }
   }
   .slider-info .slider-mark-active {
     background-color: var(--color-info-content);
@@ -8007,7 +8198,10 @@
     background-color: var(--color-success);
   }
   .slider-success .slider-thumb:hover, .slider-success .slider-thumb:focus-visible {
-    box-shadow: 0 0 0 8px var(--color-success-container), 0 2px 4px rgb(0 0 0 / 0.2);
+    box-shadow: 0 0 0 8px var(--color-success-container), 0 2px 4px var(--color-shadow);
+    @supports (color: color-mix(in lab, red, red)) {
+      box-shadow: 0 0 0 8px var(--color-success-container), 0 2px 4px color-mix(in srgb, var(--color-shadow) 20%, transparent);
+    }
   }
   .slider-success .slider-mark-active {
     background-color: var(--color-success-content);
@@ -8023,7 +8217,10 @@
     background-color: var(--color-warning);
   }
   .slider-warning .slider-thumb:hover, .slider-warning .slider-thumb:focus-visible {
-    box-shadow: 0 0 0 8px var(--color-warning-container), 0 2px 4px rgb(0 0 0 / 0.2);
+    box-shadow: 0 0 0 8px var(--color-warning-container), 0 2px 4px var(--color-shadow);
+    @supports (color: color-mix(in lab, red, red)) {
+      box-shadow: 0 0 0 8px var(--color-warning-container), 0 2px 4px color-mix(in srgb, var(--color-shadow) 20%, transparent);
+    }
   }
   .slider-warning .slider-mark-active {
     background-color: var(--color-warning-content);
@@ -8039,7 +8236,10 @@
     background-color: var(--color-error);
   }
   .slider-error .slider-thumb:hover, .slider-error .slider-thumb:focus-visible {
-    box-shadow: 0 0 0 8px var(--color-error-container), 0 2px 4px rgb(0 0 0 / 0.2);
+    box-shadow: 0 0 0 8px var(--color-error-container), 0 2px 4px var(--color-shadow);
+    @supports (color: color-mix(in lab, red, red)) {
+      box-shadow: 0 0 0 8px var(--color-error-container), 0 2px 4px color-mix(in srgb, var(--color-shadow) 20%, transparent);
+    }
   }
   .slider-error .slider-mark-active {
     background-color: var(--color-error-content);
@@ -8145,7 +8345,7 @@
     color: var(--color-on-surface);
     background-color: var(--color-surface);
     border: 1px solid var(--color-outline);
-    border-radius: 0.375rem;
+    border-radius: var(--radius-xs);
   }
   .slider-input:focus {
     outline: none;
@@ -8194,7 +8394,7 @@
     width: var(--switch-thumb-size);
     height: var(--switch-thumb-size);
     background-color: var(--switch-thumb-color);
-    border-radius: 50%;
+    border-radius: var(--radius-full);
     transition: background-color 200ms ease-in-out !important;
   }
   .switch:checked {
@@ -8422,7 +8622,7 @@
     color: var(--color-on-surface);
     background-color: var(--color-surface);
     border: 1px solid currentColor;
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
     outline: none;
     resize: vertical;
     transition: border-color 150ms ease-in-out, box-shadow 150ms ease-in-out;
@@ -8460,7 +8660,7 @@
     background-color: var(--color-surface-container);
     border: none;
     border-bottom: 2px solid var(--color-outline);
-    border-radius: 0.5rem 0.5rem 0 0;
+    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
   }
   .textarea-filled:hover:not(:disabled) {
     background-color: var(--color-surface-container-high);
@@ -8494,7 +8694,7 @@
   .textarea-outlined {
     background-color: transparent;
     border: 1px solid var(--color-outline);
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
   }
   .textarea-ghost {
     background-color: transparent;
@@ -8538,14 +8738,14 @@
     padding: 0.5rem 0.75rem;
     font-size: 0.875rem;
     line-height: 1.25rem;
-    border-radius: 0.375rem;
+    border-radius: var(--radius-xs);
   }
   .textarea-lg {
     min-height: 8rem;
     padding: 1rem 1.25rem;
     font-size: 1.125rem;
     line-height: 1.75rem;
-    border-radius: 0.625rem;
+    border-radius: var(--radius-sm);
   }
   .textarea-resize-none {
     resize: none;
@@ -8637,8 +8837,11 @@
     background-color: var(--color-surface-container-high);
   }
   .theme-controller-item:focus-visible + .theme-controller-label {
-    outline: 2px solid var(--color-primary);
-    outline-offset: 2px;
+    outline: none;
+    box-shadow: 0 0 0 3px currentColor;
+    @supports (color: color-mix(in lab, red, red)) {
+      box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
+    }
   }
   .theme-controller-item:checked + .theme-controller-label {
     background-color: var(--color-primary-container);
@@ -8718,8 +8921,11 @@
     background-color: var(--color-surface-container-high);
   }
   .theme-controller-trigger:focus-visible {
-    outline: 2px solid var(--color-primary);
-    outline-offset: 2px;
+    outline: none;
+    box-shadow: 0 0 0 3px currentColor;
+    @supports (color: color-mix(in lab, red, red)) {
+      box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
+    }
   }
   .theme-controller-trigger::after {
     content: '';
@@ -8817,7 +9023,7 @@
     color: var(--color-on-surface);
     background-color: transparent;
     border: 1px solid currentColor;
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
     cursor: pointer;
     transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
     user-select: none;
@@ -8930,7 +9136,7 @@
     align-items: center;
     gap: 0;
     border: 1px solid var(--color-outline);
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
     padding: 0.25rem;
     background-color: var(--color-surface-variant);
     @supports (color: color-mix(in lab, red, red)) {
@@ -8939,7 +9145,7 @@
   }
   .toggle-group .toggle-btn {
     border: none;
-    border-radius: 0.375rem;
+    border-radius: var(--radius-xs);
     margin: 0;
   }
   .toggle-group .toggle-btn:not(:last-child) {
@@ -8976,13 +9182,13 @@
     gap: 0;
     background-color: var(--color-surface);
     border: 1px solid var(--color-outline-variant);
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
     padding: 0.25rem;
   }
   .toggle-segmented .toggle-btn {
     border: none;
     background-color: transparent;
-    border-radius: 0.375rem;
+    border-radius: var(--radius-xs);
   }
   .toggle-segmented .toggle-btn.toggle-btn-active, .toggle-segmented .toggle-btn.active {
     background-color: var(--color-surface-variant);
@@ -8990,7 +9196,7 @@
     box-shadow: var(--shadow-sm);
   }
   .toggle-chip {
-    border-radius: 1rem;
+    border-radius: var(--radius-lg);
     padding: 0.5rem 1rem;
   }
   .toggle-chip.toggle-btn-active, .toggle-chip.active {
@@ -9025,7 +9231,7 @@
     width: 0.5rem;
     height: 0.5rem;
     background-color: var(--color-error);
-    border-radius: 50%;
+    border-radius: var(--radius-full);
     border: 2px solid var(--color-surface);
   }
   .toggle-full {
@@ -9052,7 +9258,7 @@
     margin-left: -0.5rem;
     border: 2px solid currentColor;
     border-top-color: transparent;
-    border-radius: 50%;
+    border-radius: var(--radius-full);
     animation: toggle-spin 0.6s linear infinite;
   }
   @keyframes toggle-spin {
@@ -9088,7 +9294,7 @@
     color: var(--color-on-surface);
     background-color: var(--color-surface);
     border: 1px solid currentColor;
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
     outline: none;
     transition: border-color 150ms ease-in-out, box-shadow 150ms ease-in-out;
   }
@@ -9124,7 +9330,7 @@
     padding: 0.75rem 1rem;
     background-color: var(--color-surface);
     border: 1px solid currentColor;
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
   }
   .time-input-segment {
     width: 2rem;
@@ -9135,7 +9341,7 @@
     color: var(--color-on-surface);
     background-color: transparent;
     border: none;
-    border-radius: 0.25rem;
+    border-radius: var(--radius-xs);
     outline: none;
     transition: background-color 150ms ease-in-out;
   }
@@ -9152,7 +9358,7 @@
     display: inline-flex;
     margin-left: 0.5rem;
     background-color: var(--color-surface-container);
-    border-radius: 0.375rem;
+    border-radius: var(--radius-xs);
     padding: 0.125rem;
   }
   .time-input-period-btn {
@@ -9162,7 +9368,7 @@
     color: var(--color-on-surface-variant);
     background-color: transparent;
     border: none;
-    border-radius: 0.25rem;
+    border-radius: var(--radius-xs);
     cursor: pointer;
     transition: background-color 150ms ease-in-out, color 150ms ease-in-out;
   }
@@ -9176,7 +9382,7 @@
   .time-input-sm .time-input-field {
     padding: 0.5rem 2rem 0.5rem 0.75rem;
     font-size: 0.875rem;
-    border-radius: 0.375rem;
+    border-radius: var(--radius-xs);
   }
   .time-input-sm .time-input-segment {
     width: 1.75rem;
@@ -9185,7 +9391,7 @@
   .time-input-lg .time-input-field {
     padding: 1rem 3rem 1rem 1.25rem;
     font-size: 1.125rem;
-    border-radius: 0.625rem;
+    border-radius: var(--radius-sm);
   }
   .time-input-lg .time-input-segment {
     width: 2.5rem;
@@ -9195,7 +9401,7 @@
     background-color: var(--color-surface-container);
     border: none;
     border-bottom: 2px solid var(--color-outline);
-    border-radius: 0.5rem 0.5rem 0 0;
+    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
   }
   .time-input-filled .time-input-field:focus, .time-input-filled .time-input-segments:focus-within {
     border-bottom-color: currentColor;
@@ -9287,7 +9493,7 @@
     padding: 0.5rem;
     background-color: var(--color-surface);
     border: 1px solid var(--color-outline-variant);
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
     box-shadow: var(--shadow-md);
   }
   .time-picker-dropdown-open {
@@ -9312,7 +9518,7 @@
     color: var(--color-on-surface);
     background-color: transparent;
     border: none;
-    border-radius: 0.25rem;
+    border-radius: var(--radius-xs);
     cursor: pointer;
     transition: background-color 150ms ease-in-out;
   }
@@ -9347,7 +9553,7 @@
     color: var(--color-on-surface);
     background-color: var(--color-surface);
     border: 1px solid currentColor;
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
     cursor: pointer;
     transition: border-color 150ms ease-in-out, box-shadow 150ms ease-in-out;
   }
@@ -9417,7 +9623,7 @@
     color: var(--color-on-surface-variant);
     background-color: transparent;
     border: none;
-    border-radius: 50%;
+    border-radius: var(--radius-full);
     cursor: pointer;
     flex-shrink: 0;
     transition: background-color 150ms ease-in-out;
@@ -9441,7 +9647,7 @@
     padding: 0.5rem;
     background-color: var(--color-surface);
     border: 1px solid var(--color-outline-variant);
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
     box-shadow: var(--shadow-md);
     overflow-y: auto;
   }
@@ -9482,7 +9688,7 @@
     color: var(--color-on-surface);
     background-color: var(--color-surface-container);
     border: none;
-    border-radius: 0.375rem;
+    border-radius: var(--radius-xs);
     outline: none;
   }
   .tree-select-search-input:focus {
@@ -9500,7 +9706,7 @@
     font-size: 0.875rem;
     color: var(--color-on-surface);
     background-color: transparent;
-    border-radius: 0.375rem;
+    border-radius: var(--radius-xs);
     cursor: pointer;
     transition: background-color 150ms ease-in-out;
   }
@@ -9530,7 +9736,7 @@
     color: var(--color-on-surface-variant);
     background-color: transparent;
     border: none;
-    border-radius: 0.25rem;
+    border-radius: var(--radius-xs);
     cursor: pointer;
     flex-shrink: 0;
     transition: transform 150ms ease-in-out;
@@ -9586,7 +9792,7 @@
     height: 1rem;
     background-color: transparent;
     border: 2px solid var(--color-on-surface-variant);
-    border-radius: 0.125rem;
+    border-radius: var(--radius-xs);
     transition: background-color 150ms ease-in-out, border-color 150ms ease-in-out;
   }
   .tree-select-checkbox-input:checked + .tree-select-checkbox-box {
@@ -9598,7 +9804,7 @@
     display: block;
     width: 0.375rem;
     height: 0.625rem;
-    border: 2px solid var(--color-on-primary);
+    border: 2px solid var(--color-primary-content);
     border-width: 0 2px 2px 0;
     transform: rotate(45deg) translateY(-1px);
   }
@@ -9611,12 +9817,12 @@
   .tree-select-sm .tree-select-trigger {
     padding: 0.5rem 0.75rem;
     font-size: 0.875rem;
-    border-radius: 0.375rem;
+    border-radius: var(--radius-xs);
   }
   .tree-select-lg .tree-select-trigger {
     padding: 1rem 1.25rem;
     font-size: 1.125rem;
-    border-radius: 0.625rem;
+    border-radius: var(--radius-sm);
   }
   .tree-select-outlined .tree-select-trigger {
     background-color: var(--color-surface);
@@ -9626,7 +9832,7 @@
     background-color: var(--color-surface-container);
     border: none;
     border-bottom: 2px solid var(--color-outline);
-    border-radius: 0.5rem 0.5rem 0 0;
+    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
   }
   .tree-select-filled .tree-select-trigger:focus {
     border-bottom-color: currentColor;
@@ -9725,7 +9931,7 @@
     height: 1rem;
     border: 2px solid var(--color-outline);
     border-top-color: var(--color-primary);
-    border-radius: 50%;
+    border-radius: var(--radius-full);
     animation: tree-select-spin 0.8s linear infinite;
   }
   @keyframes tree-select-spin {
@@ -9747,7 +9953,7 @@
     font-size: 0.75rem;
     background-color: var(--color-primary-container);
     color: var(--color-on-primary-container);
-    border-radius: 1rem;
+    border-radius: var(--radius-lg);
   }
   .tree-select-tag-remove {
     display: flex;
@@ -9759,7 +9965,7 @@
     color: inherit;
     background-color: transparent;
     border: none;
-    border-radius: 50%;
+    border-radius: var(--radius-full);
     cursor: pointer;
     opacity: 0.7;
   }
@@ -9785,7 +9991,7 @@
     align-items: flex-start;
     gap: 0.75rem;
     padding: 1rem;
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
     background-color: var(--color-surface-container);
     color: var(--color-on-surface);
     border: 1px solid var(--color-outline);
@@ -9827,7 +10033,7 @@
     opacity: 0.7;
     background-color: transparent;
     border: none;
-    border-radius: 0.25rem;
+    border-radius: var(--radius-xs);
     cursor: pointer;
     transition: opacity 150ms ease-in-out;
     flex-shrink: 0;
@@ -10010,12 +10216,15 @@
     max-height: calc(100vh - 4rem);
     background-color: var(--color-surface);
     color: var(--color-on-surface);
-    border-radius: 1.5rem;
+    border-radius: var(--radius-2xl);
     box-shadow: var(--shadow-2xl);
     overflow: hidden;
   }
   dialog.dialog::backdrop {
-    background-color: rgb(0 0 0 / 0.5);
+    background-color: var(--color-scrim);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in srgb, var(--color-scrim) 50%, transparent);
+    }
   }
   .dialog-box {
     display: flex;
@@ -10047,7 +10256,7 @@
     color: var(--color-on-surface-variant);
     background-color: transparent;
     border: none;
-    border-radius: 50%;
+    border-radius: var(--radius-full);
     cursor: pointer;
     transition: background-color 150ms ease-in-out, color 150ms ease-in-out;
     flex-shrink: 0;
@@ -10057,8 +10266,11 @@
     color: var(--color-on-surface);
   }
   .dialog-close:focus-visible {
-    outline: 2px solid var(--color-primary);
-    outline-offset: 2px;
+    outline: none;
+    box-shadow: 0 0 0 3px currentColor;
+    @supports (color: color-mix(in lab, red, red)) {
+      box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
+    }
   }
   .dialog-body {
     padding: 1rem 1.5rem;
@@ -10136,7 +10348,7 @@
     width: 100%;
     height: 0.5rem;
     background-color: var(--color-surface-container-highest);
-    border-radius: 9999px;
+    border-radius: var(--radius-full);
     overflow: hidden;
   }
   .progress-bar {
@@ -10145,7 +10357,7 @@
     left: 0;
     height: 100%;
     background-color: var(--color-primary);
-    border-radius: 9999px;
+    border-radius: var(--radius-full);
     transition: width 300ms ease-in-out;
   }
   .progress-primary .progress-bar {
@@ -10308,23 +10520,23 @@
 @layer components {
   .skeleton {
     background-color: var(--color-surface-container-high);
-    border-radius: 0.25rem;
+    border-radius: var(--radius-xs);
     animation: skeleton-pulse 2s ease-in-out infinite;
   }
   .skeleton-text {
     height: 1rem;
     width: 100%;
-    border-radius: 0.25rem;
+    border-radius: var(--radius-xs);
   }
   .skeleton-circle {
-    border-radius: 50%;
+    border-radius: var(--radius-full);
     aspect-ratio: 1;
   }
   .skeleton-rect {
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
   }
   .skeleton-rounded {
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
   }
   .skeleton-xs {
     height: 0.5rem;
@@ -10344,7 +10556,7 @@
   .skeleton-avatar {
     width: 3rem;
     height: 3rem;
-    border-radius: 50%;
+    border-radius: var(--radius-full);
   }
   .skeleton-avatar-sm {
     width: 2rem;
@@ -10357,23 +10569,23 @@
   .skeleton-button {
     height: 2.5rem;
     width: 6rem;
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
   }
   .skeleton-image {
     aspect-ratio: 16 / 9;
     width: 100%;
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
   }
   .skeleton-card {
     width: 100%;
-    border-radius: 1rem;
+    border-radius: var(--radius-lg);
     padding: 1rem;
   }
   .skeleton-line {
     height: 0.875rem;
     width: 100%;
     margin-bottom: 0.5rem;
-    border-radius: 0.25rem;
+    border-radius: var(--radius-xs);
   }
   .skeleton-line:last-child {
     width: 75%;
@@ -10443,7 +10655,7 @@
   .skeleton-table-cell {
     flex: 1;
     height: 1rem;
-    border-radius: 0.25rem;
+    border-radius: var(--radius-xs);
   }
   .skeleton-list {
     display: flex;
@@ -10516,7 +10728,7 @@
     padding: 0.875rem 1rem;
     background-color: var(--color-surface-container-highest);
     color: var(--color-on-surface);
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
     box-shadow: var(--shadow-md);
     pointer-events: auto;
     opacity: 0;
@@ -10599,7 +10811,7 @@
     color: var(--color-primary);
     background-color: transparent;
     border: none;
-    border-radius: 0.25rem;
+    border-radius: var(--radius-xs);
     cursor: pointer;
     transition: background-color 150ms ease-in-out;
     white-space: nowrap;
@@ -10609,8 +10821,11 @@
     background-color: var(--color-primary-container);
   }
   .snackbar-action:focus-visible {
-    outline: 2px solid var(--color-primary);
-    outline-offset: 2px;
+    outline: none;
+    box-shadow: 0 0 0 3px currentColor;
+    @supports (color: color-mix(in lab, red, red)) {
+      box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
+    }
   }
   .snackbar-close {
     display: flex;
@@ -10622,7 +10837,7 @@
     color: var(--color-on-surface-variant);
     background-color: transparent;
     border: none;
-    border-radius: 50%;
+    border-radius: var(--radius-full);
     cursor: pointer;
     transition: background-color 150ms ease-in-out;
     flex-shrink: 0;
@@ -10758,7 +10973,7 @@
     background-color: var(--color-surface);
     color: var(--color-on-surface);
     border: 1px solid var(--color-outline);
-    border-radius: 0.75rem;
+    border-radius: var(--radius-md);
     box-shadow: var(--shadow-lg);
     pointer-events: auto;
     opacity: 0;
@@ -10812,7 +11027,7 @@
     color: var(--color-on-surface-variant);
     background-color: transparent;
     border: none;
-    border-radius: 0.25rem;
+    border-radius: var(--radius-xs);
     cursor: pointer;
     transition: background-color 150ms ease-in-out, color 150ms ease-in-out;
     flex-shrink: 0;
@@ -10948,7 +11163,7 @@
     left: 0;
     height: 3px;
     background-color: currentColor;
-    border-radius: 0 0 0.75rem 0.75rem;
+    border-radius: 0 0 var(--radius-md) var(--radius-md);
     animation: toast-progress linear forwards;
   }
   @keyframes toast-progress {
@@ -10984,7 +11199,7 @@
     white-space: nowrap;
     background-color: var(--color-on-surface);
     color: var(--color-surface);
-    border-radius: 0.25rem;
+    border-radius: var(--radius-xs);
     box-shadow: var(--shadow-md);
     opacity: 0;
     visibility: hidden;
@@ -11321,7 +11536,7 @@
     color: var(--color-on-surface);
     background-color: transparent;
     border: none;
-    border-radius: 50%;
+    border-radius: var(--radius-full);
     cursor: pointer;
     transition: background-color 150ms ease-in-out;
     flex-shrink: 0;
@@ -11375,7 +11590,7 @@
     color: var(--color-on-surface-variant);
     background-color: transparent;
     border: none;
-    border-radius: 50%;
+    border-radius: var(--radius-full);
     cursor: pointer;
     transition: background-color 150ms ease-in-out, color 150ms ease-in-out;
   }
@@ -11466,7 +11681,7 @@
     color: var(--color-on-surface);
     background-color: transparent;
     border: none;
-    border-radius: 50%;
+    border-radius: var(--radius-full);
     cursor: pointer;
     transition: background-color 150ms ease-in-out;
     flex-shrink: 0;
@@ -11489,7 +11704,7 @@
     color: var(--color-on-surface);
     background-color: var(--color-surface-container);
     border: none;
-    border-radius: 9999px;
+    border-radius: var(--radius-full);
     transition: background-color 150ms ease-in-out;
   }
   .appbar .appbar-search:focus, input.appbar-search:focus {
@@ -11666,7 +11881,7 @@
     color: var(--color-on-surface);
     background-color: var(--color-surface-container);
     border: none;
-    border-radius: 9999px;
+    border-radius: var(--radius-full);
     transition: background-color 150ms ease-in-out;
   }
   .appbar-search-input:focus {
@@ -11918,7 +12133,10 @@
     min-height: 5rem;
     padding-bottom: env(safe-area-inset-bottom, 0);
     background-color: var(--color-surface);
-    box-shadow: 0 -1px 3px 0 rgb(0 0 0 / 0.1);
+    box-shadow: 0 -1px 3px 0 var(--color-shadow);
+    @supports (color: color-mix(in lab, red, red)) {
+      box-shadow: 0 -1px 3px 0 color-mix(in srgb, var(--color-shadow) 10%, transparent);
+    }
   }
   .bottom-nav-item {
     display: flex;
@@ -11944,8 +12162,11 @@
     outline: none;
   }
   .bottom-nav-item:focus-visible .bottom-nav-indicator {
-    outline: 2px solid var(--color-primary);
-    outline-offset: 2px;
+    outline: none;
+    box-shadow: 0 0 0 3px currentColor;
+    @supports (color: color-mix(in lab, red, red)) {
+      box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
+    }
   }
   .bottom-nav-item.active {
     color: var(--color-on-surface);
@@ -11957,7 +12178,7 @@
     justify-content: center;
     width: 4rem;
     height: 2rem;
-    border-radius: 1rem;
+    border-radius: var(--radius-lg);
     transition: background-color 150ms ease-in-out;
   }
   .bottom-nav-item:hover .bottom-nav-indicator {
@@ -11994,9 +12215,9 @@
     font-size: 0.625rem;
     font-weight: 600;
     line-height: 1rem;
-    color: var(--color-on-error);
+    color: var(--color-error-content);
     background-color: var(--color-error);
-    border-radius: 9999px;
+    border-radius: var(--radius-full);
     text-align: center;
   }
   .bottom-nav-badge-dot {
@@ -12008,7 +12229,10 @@
     right: 0.75rem;
   }
   .bottom-nav-elevated {
-    box-shadow: 0 -4px 6px -1px rgb(0 0 0 / 0.1);
+    box-shadow: 0 -4px 6px -1px var(--color-shadow);
+    @supports (color: color-mix(in lab, red, red)) {
+      box-shadow: 0 -4px 6px -1px color-mix(in srgb, var(--color-shadow) 10%, transparent);
+    }
   }
   .bottom-nav-bordered {
     box-shadow: none;
@@ -12110,12 +12334,295 @@
     }
   }
 }
+@layer components {
+  .circle-menu {
+    --circle-menu-size: 3rem;
+    --circle-menu-item-size: 3rem;
+    --circle-menu-radius: 5.5rem;
+    --circle-menu-icon-size: 1.25rem;
+    --circle-menu-bar-width: 1.125rem;
+    --circle-menu-bar-height: 0.1875rem;
+    --circle-menu-bar-gap: 0.375rem;
+    --circle-menu-btn-bg: var(--color-primary-container);
+    --circle-menu-bar-color: var(--color-on-primary-container);
+    --circle-menu-item-bg: var(--color-primary-container);
+    --circle-menu-item-color: var(--color-on-primary-container);
+    --circle-menu-item-ring: var(--color-primary);
+    @supports (color: color-mix(in lab, red, red)) {
+      --circle-menu-item-ring: color-mix(in oklch, var(--color-primary) 30%, transparent);
+    }
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--circle-menu-size);
+    height: var(--circle-menu-size);
+  }
+  .circle-menu-toggler {
+    position: absolute;
+    inset: 0;
+    margin: auto;
+    width: var(--circle-menu-size);
+    height: var(--circle-menu-size);
+    z-index: 10;
+    opacity: 0;
+    cursor: pointer;
+  }
+  .circle-menu-label {
+    position: absolute;
+    inset: 0;
+    margin: auto;
+    display: block;
+    width: var(--circle-menu-size);
+    height: var(--circle-menu-size);
+    border-radius: var(--radius-full);
+    background-color: var(--circle-menu-btn-bg);
+    z-index: 1;
+    pointer-events: none;
+    transition: background-color 0.3s ease;
+  }
+  .circle-menu-label::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: var(--circle-menu-bar-width);
+    height: var(--circle-menu-bar-height);
+    border-radius: var(--radius-full);
+    background-color: var(--circle-menu-bar-color);
+    box-shadow: 0 var(--circle-menu-bar-gap) 0 var(--circle-menu-bar-color), 0 calc(-1 * var(--circle-menu-bar-gap)) 0 var(--circle-menu-bar-color);
+    transform: translate(-50%, -50%);
+    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+  .circle-menu-label::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: var(--circle-menu-bar-width);
+    height: var(--circle-menu-bar-height);
+    border-radius: var(--radius-full);
+    background-color: var(--circle-menu-bar-color);
+    transform: translate(-50%, -50%) rotate(-45deg);
+    opacity: 0;
+    transition: opacity 0.25s ease;
+  }
+  .circle-menu-toggler:hover + .circle-menu-label {
+    background-color: var(--circle-menu-btn-bg);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklch, var(--circle-menu-btn-bg) 80%, var(--circle-menu-bar-color));
+    }
+  }
+  .circle-menu-toggler:focus-visible + .circle-menu-label {
+    outline: none;
+    box-shadow: 0 0 0 3px var(--circle-menu-item-ring);
+  }
+  .circle-menu-toggler:checked + .circle-menu-label::before {
+    box-shadow: none;
+    transform: translate(-50%, -50%) rotate(45deg);
+  }
+  .circle-menu-toggler:checked + .circle-menu-label::after {
+    opacity: 1;
+  }
+  .circle-menu-list {
+    position: absolute;
+    inset: 0;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    pointer-events: none;
+  }
+  .circle-menu-item {
+    position: absolute;
+    inset: 0;
+    margin: auto;
+    width: var(--circle-menu-item-size);
+    height: var(--circle-menu-item-size);
+    opacity: 0;
+    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
+  }
+  .circle-menu-item a, .circle-menu-item button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    border-radius: var(--radius-full);
+    text-decoration: none;
+    font-size: var(--circle-menu-icon-size);
+    color: var(--circle-menu-item-color);
+    background-color: var(--circle-menu-item-bg);
+    border: none;
+    cursor: pointer;
+    pointer-events: none;
+    transition: box-shadow 0.2s ease, background-color 0.2s ease;
+  }
+  .circle-menu-item a:hover, .circle-menu-item button:hover {
+    background-color: var(--circle-menu-item-bg);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklch, var(--circle-menu-item-bg) 80%, var(--circle-menu-item-color));
+    }
+    box-shadow: 0 0 0 3px var(--circle-menu-item-ring);
+  }
+  .circle-menu-item a:focus-visible, .circle-menu-item button:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 3px var(--circle-menu-item-ring);
+  }
+  .circle-menu-item:nth-child(1) a, .circle-menu-item:nth-child(1) button {
+    transform: rotate(0deg);
+  }
+  .circle-menu-item:nth-child(2) a, .circle-menu-item:nth-child(2) button {
+    transform: rotate(-60deg);
+  }
+  .circle-menu-item:nth-child(3) a, .circle-menu-item:nth-child(3) button {
+    transform: rotate(-120deg);
+  }
+  .circle-menu-item:nth-child(4) a, .circle-menu-item:nth-child(4) button {
+    transform: rotate(-180deg);
+  }
+  .circle-menu-item:nth-child(5) a, .circle-menu-item:nth-child(5) button {
+    transform: rotate(-240deg);
+  }
+  .circle-menu-item:nth-child(6) a, .circle-menu-item:nth-child(6) button {
+    transform: rotate(-300deg);
+  }
+  .circle-menu-toggler:checked ~ .circle-menu-list {
+    pointer-events: auto;
+  }
+  .circle-menu-toggler:checked ~ .circle-menu-list .circle-menu-item {
+    opacity: 1;
+  }
+  .circle-menu-toggler:checked ~ .circle-menu-list .circle-menu-item a, .circle-menu-toggler:checked ~ .circle-menu-list .circle-menu-item button {
+    pointer-events: auto;
+  }
+  .circle-menu-toggler:checked ~ .circle-menu-list .circle-menu-item:nth-child(1) {
+    transform: rotate(0deg) translateX(calc(-1 * var(--circle-menu-radius)));
+  }
+  .circle-menu-toggler:checked ~ .circle-menu-list .circle-menu-item:nth-child(2) {
+    transform: rotate(60deg) translateX(calc(-1 * var(--circle-menu-radius)));
+  }
+  .circle-menu-toggler:checked ~ .circle-menu-list .circle-menu-item:nth-child(3) {
+    transform: rotate(120deg) translateX(calc(-1 * var(--circle-menu-radius)));
+  }
+  .circle-menu-toggler:checked ~ .circle-menu-list .circle-menu-item:nth-child(4) {
+    transform: rotate(180deg) translateX(calc(-1 * var(--circle-menu-radius)));
+  }
+  .circle-menu-toggler:checked ~ .circle-menu-list .circle-menu-item:nth-child(5) {
+    transform: rotate(240deg) translateX(calc(-1 * var(--circle-menu-radius)));
+  }
+  .circle-menu-toggler:checked ~ .circle-menu-list .circle-menu-item:nth-child(6) {
+    transform: rotate(300deg) translateX(calc(-1 * var(--circle-menu-radius)));
+  }
+  .circle-menu-sm {
+    --circle-menu-size: 2.5rem;
+    --circle-menu-item-size: 2.5rem;
+    --circle-menu-radius: 4.5rem;
+    --circle-menu-icon-size: 1rem;
+    --circle-menu-bar-width: 0.9375rem;
+    --circle-menu-bar-gap: 0.3125rem;
+  }
+  .circle-menu-lg {
+    --circle-menu-size: 3.5rem;
+    --circle-menu-item-size: 3.5rem;
+    --circle-menu-radius: 6.5rem;
+    --circle-menu-icon-size: 1.5rem;
+    --circle-menu-bar-width: 1.3125rem;
+    --circle-menu-bar-gap: 0.4375rem;
+  }
+  .circle-menu-primary {
+    --circle-menu-btn-bg: var(--color-primary);
+    --circle-menu-bar-color: var(--color-primary-content);
+    --circle-menu-item-bg: var(--color-primary);
+    --circle-menu-item-color: var(--color-primary-content);
+    --circle-menu-item-ring: var(--color-primary);
+    @supports (color: color-mix(in lab, red, red)) {
+      --circle-menu-item-ring: color-mix(in oklch, var(--color-primary) 40%, transparent);
+    }
+  }
+  .circle-menu-secondary {
+    --circle-menu-btn-bg: var(--color-secondary);
+    --circle-menu-bar-color: var(--color-secondary-content);
+    --circle-menu-item-bg: var(--color-secondary);
+    --circle-menu-item-color: var(--color-secondary-content);
+    --circle-menu-item-ring: var(--color-secondary);
+    @supports (color: color-mix(in lab, red, red)) {
+      --circle-menu-item-ring: color-mix(in oklch, var(--color-secondary) 40%, transparent);
+    }
+  }
+  .circle-menu-tertiary {
+    --circle-menu-btn-bg: var(--color-tertiary);
+    --circle-menu-bar-color: var(--color-tertiary-content);
+    --circle-menu-item-bg: var(--color-tertiary);
+    --circle-menu-item-color: var(--color-tertiary-content);
+    --circle-menu-item-ring: var(--color-tertiary);
+    @supports (color: color-mix(in lab, red, red)) {
+      --circle-menu-item-ring: color-mix(in oklch, var(--color-tertiary) 40%, transparent);
+    }
+  }
+  .circle-menu-info {
+    --circle-menu-btn-bg: var(--color-info);
+    --circle-menu-bar-color: var(--color-info-content);
+    --circle-menu-item-bg: var(--color-info);
+    --circle-menu-item-color: var(--color-info-content);
+    --circle-menu-item-ring: var(--color-info);
+    @supports (color: color-mix(in lab, red, red)) {
+      --circle-menu-item-ring: color-mix(in oklch, var(--color-info) 40%, transparent);
+    }
+  }
+  .circle-menu-success {
+    --circle-menu-btn-bg: var(--color-success);
+    --circle-menu-bar-color: var(--color-success-content);
+    --circle-menu-item-bg: var(--color-success);
+    --circle-menu-item-color: var(--color-success-content);
+    --circle-menu-item-ring: var(--color-success);
+    @supports (color: color-mix(in lab, red, red)) {
+      --circle-menu-item-ring: color-mix(in oklch, var(--color-success) 40%, transparent);
+    }
+  }
+  .circle-menu-warning {
+    --circle-menu-btn-bg: var(--color-warning);
+    --circle-menu-bar-color: var(--color-warning-content);
+    --circle-menu-item-bg: var(--color-warning);
+    --circle-menu-item-color: var(--color-warning-content);
+    --circle-menu-item-ring: var(--color-warning);
+    @supports (color: color-mix(in lab, red, red)) {
+      --circle-menu-item-ring: color-mix(in oklch, var(--color-warning) 40%, transparent);
+    }
+  }
+  .circle-menu-error {
+    --circle-menu-btn-bg: var(--color-error);
+    --circle-menu-bar-color: var(--color-error-content);
+    --circle-menu-item-bg: var(--color-error);
+    --circle-menu-item-color: var(--color-error-content);
+    --circle-menu-item-ring: var(--color-error);
+    @supports (color: color-mix(in lab, red, red)) {
+      --circle-menu-item-ring: color-mix(in oklch, var(--color-error) 40%, transparent);
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .circle-menu-label {
+      transition: none;
+    }
+    .circle-menu-label::before, .circle-menu-label::after {
+      transition: none;
+    }
+    .circle-menu-item {
+      transition: none;
+    }
+    .circle-menu-item a, .circle-menu-item button {
+      transition: none;
+    }
+  }
+}
 @layer components {
   .drawer-backdrop {
     position: fixed;
     inset: 0;
     z-index: 1100;
-    background-color: rgb(0 0 0 / 0.5);
+    background-color: var(--color-scrim);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in srgb, var(--color-scrim) 50%, transparent);
+    }
     opacity: 0;
     visibility: hidden;
     transition: opacity 300ms ease-out, visibility 300ms ease-out;
@@ -12152,7 +12659,7 @@
     width: 20rem;
     max-width: calc(100vw - 3.5rem);
     transform: translateX(-100%);
-    border-radius: 0 1rem 1rem 0;
+    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
   }
   .drawer-left.drawer-open {
     transform: translateX(0);
@@ -12164,7 +12671,7 @@
     width: 20rem;
     max-width: calc(100vw - 3.5rem);
     transform: translateX(100%);
-    border-radius: 1rem 0 0 1rem;
+    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
   }
   .drawer-right.drawer-open {
     transform: translateX(0);
@@ -12176,7 +12683,7 @@
     height: auto;
     max-height: 80vh;
     transform: translateY(-100%);
-    border-radius: 0 0 1rem 1rem;
+    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
   }
   .drawer-top.drawer-open {
     transform: translateY(0);
@@ -12188,7 +12695,7 @@
     height: auto;
     max-height: 80vh;
     transform: translateY(100%);
-    border-radius: 1rem 1rem 0 0;
+    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
   }
   .drawer-bottom.drawer-open {
     transform: translateY(0);
@@ -12216,7 +12723,7 @@
     color: var(--color-on-surface-variant);
     background-color: transparent;
     border: none;
-    border-radius: 50%;
+    border-radius: var(--radius-full);
     cursor: pointer;
     transition: background-color 150ms ease-in-out;
   }
@@ -12224,8 +12731,11 @@
     background-color: var(--color-surface-container);
   }
   .drawer-close:focus-visible {
-    outline: 2px solid var(--color-primary);
-    outline-offset: 2px;
+    outline: none;
+    box-shadow: 0 0 0 3px currentColor;
+    @supports (color: color-mix(in lab, red, red)) {
+      box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
+    }
   }
   .drawer-body {
     flex: 1;
@@ -12250,7 +12760,7 @@
     color: var(--color-on-surface-variant);
     background-color: transparent;
     border: none;
-    border-radius: 1.75rem;
+    border-radius: var(--radius-2xl);
     cursor: pointer;
     text-decoration: none;
     transition: background-color 150ms ease-in-out, color 150ms ease-in-out;
@@ -12261,8 +12771,11 @@
     color: var(--color-on-surface);
   }
   .drawer-item:focus-visible {
-    outline: 2px solid var(--color-primary);
-    outline-offset: 2px;
+    outline: none;
+    box-shadow: 0 0 0 3px currentColor;
+    @supports (color: color-mix(in lab, red, red)) {
+      box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
+    }
   }
   .drawer-item-active, .drawer-item-active-primary {
     background-color: var(--color-secondary-container);
@@ -12291,7 +12804,7 @@
     font-weight: 500;
     background-color: var(--color-error-container);
     color: var(--color-on-error-container);
-    border-radius: 9999px;
+    border-radius: var(--radius-full);
     margin-left: auto;
   }
   .drawer-item-nested {
@@ -12323,7 +12836,7 @@
   .drawer-profile-avatar {
     width: 2.5rem;
     height: 2.5rem;
-    border-radius: 50%;
+    border-radius: var(--radius-full);
     background-color: var(--color-primary-container);
     display: flex;
     align-items: center;
@@ -12439,8 +12952,11 @@
     background-color: var(--color-surface-container);
   }
   .nested-menu li > a:focus-visible, .nested-menu li > button:focus-visible {
-    outline: 2px solid var(--color-primary);
-    outline-offset: -2px;
+    outline: none;
+    box-shadow: 0 0 0 3px currentColor;
+    @supports (color: color-mix(in lab, red, red)) {
+      box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
+    }
   }
   .nested-menu li > a.active, .nested-menu li > button.active, .nested-menu li > a[aria-current="page"], .nested-menu li > button[aria-current="page"] {
     background-color: var(--color-primary-container);
@@ -12485,8 +13001,11 @@
     background-color: var(--color-surface-container);
   }
   .nested-menu summary:focus-visible {
-    outline: 2px solid var(--color-primary);
-    outline-offset: -2px;
+    outline: none;
+    box-shadow: 0 0 0 3px currentColor;
+    @supports (color: color-mix(in lab, red, red)) {
+      box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
+    }
   }
   .nested-menu summary::after {
     content: "";
@@ -12552,7 +13071,7 @@
     background-color: var(--color-surface);
     border: 1px solid var(--color-outline-variant);
     border-radius: var(--radius-card, 0.75rem);
-    box-shadow: var(--shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));
+    box-shadow: var(--shadow-sm);
   }
   .nested-menu-compact {
     padding: 0.25rem;
@@ -12615,8 +13134,11 @@
     outline: none;
   }
   .stepper-step-button:focus-visible .stepper-step-icon {
-    outline: 2px solid var(--color-primary);
-    outline-offset: 2px;
+    outline: none;
+    box-shadow: 0 0 0 3px currentColor;
+    @supports (color: color-mix(in lab, red, red)) {
+      box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
+    }
   }
   .stepper-step-icon {
     display: flex;
@@ -12629,23 +13151,23 @@
     color: var(--color-on-surface-variant);
     background-color: var(--color-surface);
     border: 2px solid var(--color-outline-variant);
-    border-radius: 50%;
+    border-radius: var(--radius-full);
     transition: background-color 150ms ease-in-out, border-color 150ms ease-in-out, color 150ms ease-in-out;
   }
   .stepper-step-active .stepper-step-icon {
     background-color: var(--color-primary);
     border-color: var(--color-primary);
-    color: var(--color-on-primary);
+    color: var(--color-primary-content);
   }
   .stepper-step-completed .stepper-step-icon {
     background-color: var(--color-primary);
     border-color: var(--color-primary);
-    color: var(--color-on-primary);
+    color: var(--color-primary-content);
   }
   .stepper-step-error .stepper-step-icon {
     background-color: var(--color-error);
     border-color: var(--color-error);
-    color: var(--color-on-error);
+    color: var(--color-error-content);
   }
   .stepper-step-disabled .stepper-step-icon {
     opacity: 0.6;
@@ -12713,7 +13235,7 @@
   .stepper-secondary .stepper-step-active .stepper-step-icon, .stepper-secondary .stepper-step-completed .stepper-step-icon {
     background-color: var(--color-secondary);
     border-color: var(--color-secondary);
-    color: var(--color-on-secondary);
+    color: var(--color-secondary-content);
   }
   .stepper-secondary .stepper-step-completed .stepper-step-connector {
     background-color: var(--color-secondary);
@@ -12724,7 +13246,7 @@
   .stepper-tertiary .stepper-step-active .stepper-step-icon, .stepper-tertiary .stepper-step-completed .stepper-step-icon {
     background-color: var(--color-tertiary);
     border-color: var(--color-tertiary);
-    color: var(--color-on-tertiary);
+    color: var(--color-tertiary-content);
   }
   .stepper-tertiary .stepper-step-completed .stepper-step-connector {
     background-color: var(--color-tertiary);
@@ -12775,7 +13297,7 @@
   }
   .stepper-dots .stepper-step-active .stepper-step-icon {
     width: 1.5rem;
-    border-radius: 9999px;
+    border-radius: var(--radius-full);
     background-color: var(--color-primary);
   }
   .stepper-dots .stepper-step-completed .stepper-step-icon {
@@ -12813,7 +13335,7 @@
   .accordion {
     display: flex;
     flex-direction: column;
-    border-radius: 0.75rem;
+    border-radius: var(--radius-md);
     overflow: hidden;
   }
   .accordion-item {
@@ -12823,12 +13345,12 @@
   }
   .accordion-item:first-child {
     margin-top: 0;
-    border-top-left-radius: 0.75rem;
-    border-top-right-radius: 0.75rem;
+    border-top-left-radius: var(--radius-md);
+    border-top-right-radius: var(--radius-md);
   }
   .accordion-item:last-child {
-    border-bottom-left-radius: 0.75rem;
-    border-bottom-right-radius: 0.75rem;
+    border-bottom-left-radius: var(--radius-md);
+    border-bottom-right-radius: var(--radius-md);
   }
   .accordion-header {
     display: flex;
@@ -12850,7 +13372,10 @@
   .accordion-header:focus-visible {
     outline: none;
     background-color: var(--color-surface-container);
-    box-shadow: inset 0 0 0 2px var(--color-primary);
+    box-shadow: 0 0 0 3px currentColor;
+    @supports (color: color-mix(in lab, red, red)) {
+      box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
+    }
   }
   .accordion-item.open .accordion-header {
     background-color: var(--color-surface-container);
@@ -12915,7 +13440,7 @@
   }
   .accordion-separated .accordion-item {
     margin-top: 0.5rem;
-    border-radius: 0.75rem;
+    border-radius: var(--radius-md);
   }
   .accordion-separated .accordion-item:first-child {
     margin-top: 0;
@@ -12992,7 +13517,10 @@
     position: fixed;
     inset: 0;
     z-index: 1100;
-    background-color: rgb(0 0 0 / 0.5);
+    background-color: var(--color-scrim);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in srgb, var(--color-scrim) 50%, transparent);
+    }
     opacity: 0;
     visibility: hidden;
     transition: opacity 300ms ease-out, visibility 300ms ease-out;
@@ -13011,8 +13539,11 @@
     flex-direction: column;
     max-height: 90vh;
     background-color: var(--color-surface);
-    border-radius: 1.75rem 1.75rem 0 0;
-    box-shadow: 0 -25px 50px -12px rgb(0 0 0 / 0.25);
+    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
+    box-shadow: 0 -25px 50px -12px var(--color-shadow);
+    @supports (color: color-mix(in lab, red, red)) {
+      box-shadow: 0 -25px 50px -12px color-mix(in srgb, var(--color-shadow) 25%, transparent);
+    }
     transform: translateY(100%);
     transition: transform 300ms ease-out;
     padding-bottom: env(safe-area-inset-bottom, 0);
@@ -13032,7 +13563,7 @@
     width: 2rem;
     height: 0.25rem;
     background-color: var(--color-outline-variant);
-    border-radius: 9999px;
+    border-radius: var(--radius-full);
   }
   .bottomsheet-handle:active {
     cursor: grabbing;
@@ -13059,7 +13590,7 @@
     color: var(--color-on-surface-variant);
     background-color: transparent;
     border: none;
-    border-radius: 50%;
+    border-radius: var(--radius-full);
     cursor: pointer;
     transition: background-color 150ms ease-in-out;
   }
@@ -13067,8 +13598,11 @@
     background-color: var(--color-surface-container);
   }
   .bottomsheet-close:focus-visible {
-    outline: 2px solid var(--color-primary);
-    outline-offset: 2px;
+    outline: none;
+    box-shadow: 0 0 0 3px currentColor;
+    @supports (color: color-mix(in lab, red, red)) {
+      box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
+    }
   }
   .bottomsheet-content {
     flex: 1;
@@ -13156,7 +13690,7 @@
     color: var(--color-on-surface);
     background-color: transparent;
     border: none;
-    border-radius: 0.75rem;
+    border-radius: var(--radius-md);
     cursor: pointer;
     transition: background-color 150ms ease-in-out;
   }
@@ -13171,7 +13705,7 @@
     height: 3rem;
     font-size: 1.5rem;
     background-color: var(--color-surface-container-high);
-    border-radius: 50%;
+    border-radius: var(--radius-full);
     color: var(--color-on-surface-variant);
   }
   .bottomsheet-sm {
@@ -13187,7 +13721,10 @@
   }
   .bottomsheet-persistent {
     position: absolute;
-    box-shadow: 0 -4px 6px -1px rgb(0 0 0 / 0.1);
+    box-shadow: 0 -4px 6px -1px var(--color-shadow);
+    @supports (color: color-mix(in lab, red, red)) {
+      box-shadow: 0 -4px 6px -1px color-mix(in srgb, var(--color-shadow) 10%, transparent);
+    }
   }
   .bottomsheet-peek {
     max-height: 30vh;
@@ -13211,7 +13748,7 @@
     width: 0.25rem;
     height: 1rem;
     background-color: var(--color-outline-variant);
-    border-radius: 9999px;
+    border-radius: var(--radius-full);
     cursor: pointer;
   }
   .bottomsheet-detent.active {
@@ -13239,7 +13776,7 @@
       width: 24rem;
       max-width: calc(100vw - 3.5rem);
       max-height: 100vh;
-      border-radius: 1rem 0 0 1rem;
+      border-radius: var(--radius-lg) 0 0 var(--radius-lg);
       transform: translateX(100%);
     }
     .bottomsheet-responsive.show {
@@ -13259,7 +13796,7 @@
   .collapse {
     display: flex;
     flex-direction: column;
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
     background-color: var(--color-surface);
     visibility: visible !important;
   }
@@ -13282,8 +13819,11 @@
     background-color: var(--color-surface-container);
   }
   .collapse-trigger:focus-visible {
-    outline: 2px solid var(--color-primary);
-    outline-offset: -2px;
+    outline: none;
+    box-shadow: 0 0 0 3px currentColor;
+    @supports (color: color-mix(in lab, red, red)) {
+      box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
+    }
   }
   .collapse-icon {
     display: flex;
@@ -13345,14 +13885,17 @@
     border: none;
     cursor: pointer;
     transition: background-color 150ms ease-in-out;
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
   }
   .collapse-toggle:hover {
     background-color: var(--color-primary-container);
   }
   .collapse-toggle:focus-visible {
-    outline: 2px solid var(--color-primary);
-    outline-offset: 2px;
+    outline: none;
+    box-shadow: 0 0 0 3px currentColor;
+    @supports (color: color-mix(in lab, red, red)) {
+      box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
+    }
   }
   .collapse-toggle-icon {
     display: flex;
@@ -13368,7 +13911,7 @@
   .collapse-card {
     background-color: var(--color-surface);
     border: 1px solid var(--color-outline-variant);
-    border-radius: 0.75rem;
+    border-radius: var(--radius-md);
     overflow: hidden;
     box-shadow: var(--shadow-sm);
   }
@@ -13388,7 +13931,7 @@
   }
   .collapse-bordered {
     border: 1px solid var(--color-outline-variant);
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
   }
   .collapse-ghost {
     background-color: transparent;
@@ -13482,7 +14025,7 @@
     margin-left: 0.5rem;
     border: 2px solid var(--color-outline);
     border-top-color: var(--color-primary);
-    border-radius: 50%;
+    border-radius: var(--radius-full);
     animation: collapse-spin 0.8s linear infinite;
   }
   @keyframes collapse-spin {
@@ -13627,7 +14170,7 @@
     padding: 1rem;
     background-color: var(--color-surface);
     border: 1px solid var(--color-outline-variant);
-    border-radius: 0.75rem;
+    border-radius: var(--radius-md);
     box-shadow: var(--shadow-lg);
     opacity: 0;
     visibility: hidden;
@@ -13652,7 +14195,7 @@
     padding: 1rem;
     background-color: var(--color-surface);
     border: 1px solid var(--color-outline-variant);
-    border-radius: 0.75rem;
+    border-radius: var(--radius-md);
     box-shadow: var(--shadow-lg);
     opacity: 0;
     visibility: hidden;
@@ -13781,7 +14324,7 @@
     color: var(--color-on-surface-variant);
     background-color: transparent;
     border: none;
-    border-radius: 0.25rem;
+    border-radius: var(--radius-xs);
     cursor: pointer;
     transition: background-color 150ms ease-in-out;
   }
@@ -13789,8 +14332,11 @@
     background-color: var(--color-surface-container);
   }
   .popover-close:focus-visible {
-    outline: 2px solid var(--color-primary);
-    outline-offset: 2px;
+    outline: none;
+    box-shadow: 0 0 0 3px currentColor;
+    @supports (color: color-mix(in lab, red, red)) {
+      box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
+    }
   }
   .popover-body {
     font-size: 0.875rem;
@@ -13965,7 +14511,7 @@
     color: var(--color-on-surface);
     background-color: transparent;
     border: none;
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
     cursor: pointer;
     text-align: left;
     transition: background-color 150ms ease-in-out;
@@ -13974,8 +14520,11 @@
     background-color: var(--color-surface-container);
   }
   .popover-menu-item:focus-visible {
-    outline: 2px solid var(--color-primary);
-    outline-offset: -2px;
+    outline: none;
+    box-shadow: 0 0 0 3px currentColor;
+    @supports (color: color-mix(in lab, red, red)) {
+      box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
+    }
   }
   .popover-menu-item-icon {
     display: flex;
@@ -14006,7 +14555,7 @@
     margin: 0;
     background-color: var(--color-surface);
     border: 1px solid var(--color-outline-variant);
-    border-radius: 0.75rem;
+    border-radius: var(--radius-md);
     box-shadow: var(--shadow-lg);
     opacity: 0;
     transform: scale(0.95);
@@ -14024,27 +14573,33 @@
     }
   }
   .popover[popover]::backdrop {
-    background-color: rgb(0 0 0 / 0);
+    background-color: transparent;
     transition: background-color 150ms ease-out, overlay 150ms ease-out allow-discrete, display 150ms ease-out allow-discrete;
   }
   .popover[popover]:popover-open::backdrop {
-    background-color: rgb(0 0 0 / 0.1);
+    background-color: var(--color-scrim);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in srgb, var(--color-scrim) 10%, transparent);
+    }
   }
   @starting-style {
     .popover[popover]:popover-open::backdrop {
-      background-color: rgb(0 0 0 / 0);
+      background-color: transparent;
     }
   }
   .popover-modal[popover]::backdrop {
-    background-color: rgb(0 0 0 / 0);
+    background-color: transparent;
     transition: background-color 150ms ease-out, overlay 150ms ease-out allow-discrete, display 150ms ease-out allow-discrete;
   }
   .popover-modal[popover]:popover-open::backdrop {
-    background-color: rgb(0 0 0 / 0.3);
+    background-color: var(--color-scrim);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in srgb, var(--color-scrim) 30%, transparent);
+    }
   }
   @starting-style {
     .popover-modal[popover]:popover-open::backdrop {
-      background-color: rgb(0 0 0 / 0);
+      background-color: transparent;
     }
   }
   .popover-primary[popover] {
@@ -14201,7 +14756,7 @@
     height: 2.5rem;
     background-color: var(--color-surface);
     border: 2px solid var(--color-outline-variant);
-    border-radius: 50%;
+    border-radius: var(--radius-full);
     flex-shrink: 0;
     z-index: 1;
   }
@@ -14213,7 +14768,7 @@
     width: 0.75rem;
     height: 0.75rem;
     background-color: var(--color-outline-variant);
-    border-radius: 50%;
+    border-radius: var(--radius-full);
   }
   .timeline-content {
     flex: 1;
@@ -14239,7 +14794,7 @@
   .timeline-card {
     padding: 1rem;
     background-color: var(--color-surface-container);
-    border-radius: 0.75rem;
+    border-radius: var(--radius-md);
     margin-top: 0.5rem;
   }
   .timeline-item-primary .timeline-marker {
@@ -14280,7 +14835,7 @@
     background-color: var(--color-primary);
   }
   .timeline-item.completed .timeline-marker-icon {
-    color: var(--color-on-primary);
+    color: var(--color-primary-content);
   }
   .timeline-item.active .timeline-marker {
     border-color: var(--color-primary);
@@ -14288,8 +14843,8 @@
     box-shadow: 0 0 0 4px var(--color-primary-container);
   }
   .timeline-item.active .timeline-marker-icon, .timeline-item.active .timeline-marker-dot {
-    color: var(--color-on-primary);
-    background-color: var(--color-on-primary);
+    color: var(--color-primary-content);
+    background-color: var(--color-primary-content);
   }
   .timeline-sm::before {
     left: 0.75rem;
@@ -14434,7 +14989,7 @@
 @layer components {
   .code-block {
     border: 1px solid var(--color-outline);
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
     overflow: hidden;
   }
   .code-header {
@@ -14466,7 +15021,7 @@
     gap: 0.375rem;
     padding: 0.25rem 0.5rem;
     border: none;
-    border-radius: 0.25rem;
+    border-radius: var(--radius-xs);
     background: transparent;
     color: var(--color-on-surface-variant);
     font-size: 0.75rem;
@@ -14564,8 +15119,11 @@
     text-decoration: underline;
   }
   .markdown-body a:focus-visible {
-    outline: 2px solid var(--color-primary);
-    outline-offset: 2px;
+    outline: none;
+    box-shadow: 0 0 0 3px currentColor;
+    @supports (color: color-mix(in lab, red, red)) {
+      box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
+    }
   }
   .markdown-body strong, .markdown-body b {
     font-weight: 600;
@@ -14627,7 +15185,7 @@
     padding-block: 0.2em;
     padding-inline: 0.4em;
     background-color: var(--color-surface-container-high);
-    border-radius: 6px;
+    border-radius: var(--radius-xs);
   }
   .markdown-body pre {
     font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
@@ -14637,7 +15195,7 @@
     margin-block-end: 1rem;
     overflow-x: auto;
     background-color: var(--color-surface-container);
-    border-radius: 6px;
+    border-radius: var(--radius-xs);
   }
   .markdown-body pre > code {
     font-size: inherit;
@@ -14652,7 +15210,7 @@
     padding-inline: 0.4em;
     background-color: var(--color-surface-container);
     border: 1px solid var(--color-outline-variant);
-    border-radius: 6px;
+    border-radius: var(--radius-xs);
     box-shadow: inset 0 -1px 0 var(--color-outline-variant);
   }
   .markdown-body samp {
@@ -14758,7 +15316,7 @@
     color: var(--color-on-tertiary-container);
     padding-block: 0.1em;
     padding-inline: 0.2em;
-    border-radius: 2px;
+    border-radius: var(--radius-xs);
   }
   .markdown-body details {
     margin-block-end: 1rem;
@@ -14782,7 +15340,7 @@
     }
   }
 }
-el-dm-accordion, el-dm-alert, el-dm-art-atom, el-dm-art-cat-stargazer, el-dm-art-circular-gallery, el-dm-art-color-spin, el-dm-art-csswitch, el-dm-art-eclipse, el-dm-art-flower-animation, el-dm-art-gemini-input, el-dm-art-moon, el-dm-art-mountain, el-dm-art-plasma-ball, el-dm-art-snow, el-dm-art-snowball-preloader, el-dm-art-sun, el-dm-art-synthwave-starfield, el-dm-autocomplete, el-dm-badge, el-dm-bottom-navigation, el-dm-bottom-sheet, el-dm-breadcrumbs, el-dm-button, el-dm-card, el-dm-cascader, el-dm-chip, el-dm-datepicker, el-dm-dialog, el-dm-drawer, el-dm-file-upload, el-dm-form, el-dm-input, el-dm-markdown, el-dm-markdown-input, el-dm-menu, el-dm-navbar, el-dm-pagination, el-dm-popover, el-dm-pro-data-grid, el-dm-progress, el-dm-select, el-dm-slider, el-dm-stepper, el-dm-switch, el-dm-table, el-dm-tabs, el-dm-tooltip {
+el-dm-accordion, el-dm-alert, el-dm-art-atom, el-dm-art-cat-stargazer, el-dm-art-circular-gallery, el-dm-art-color-spin, el-dm-art-csswitch, el-dm-art-eclipse, el-dm-art-flower-animation, el-dm-art-gemini-input, el-dm-art-moon, el-dm-art-mountain, el-dm-art-plasma-ball, el-dm-art-snow, el-dm-art-snowball-preloader, el-dm-art-sun, el-dm-art-synthwave-starfield, el-dm-autocomplete, el-dm-badge, el-dm-bottom-navigation, el-dm-bottom-sheet, el-dm-breadcrumbs, el-dm-button, el-dm-card, el-dm-cascader, el-dm-chip, el-dm-circle-menu, el-dm-code-block, el-dm-code-engine, el-dm-datepicker, el-dm-dialog, el-dm-drawer, el-dm-file-upload, el-dm-form, el-dm-form-group, el-dm-input, el-dm-markdown, el-dm-markdown-input, el-dm-menu, el-dm-navbar, el-dm-navigation, el-dm-nested-menu, el-dm-otp-input, el-dm-pagination, el-dm-pin-input, el-dm-popover, el-dm-pro-data-grid, el-dm-progress, el-dm-segment-control, el-dm-select, el-dm-slider, el-dm-stepper, el-dm-switch, el-dm-table, el-dm-tabs, el-dm-theme-controller, el-dm-time-input, el-dm-tooltip {
   --color-primary: inherit;
   --color-primary-content: inherit;
   --color-on-primary: inherit;
@@ -18941,76 +19499,6 @@ el-dm-popover[placement^="right"]::part(arrow) {
     --art-synthwave-starfield-size: 900px;
   }
 }
-@layer base {
-  :root, [data-theme="sunshine"] {
-    --color-primary: oklch(0.55 0.2 260);
-    --color-on-primary: oklch(1 0 0);
-    --color-primary-container: oklch(0.9 0.05 260);
-    --color-on-primary-container: oklch(0.25 0.1 260);
-    --color-secondary: oklch(0.5 0.1 280);
-    --color-on-secondary: oklch(1 0 0);
-    --color-secondary-container: oklch(0.92 0.03 280);
-    --color-on-secondary-container: oklch(0.25 0.05 280);
-    --color-tertiary: oklch(0.55 0.15 30);
-    --color-on-tertiary: oklch(1 0 0);
-    --color-tertiary-container: oklch(0.92 0.04 30);
-    --color-on-tertiary-container: oklch(0.3 0.08 30);
-    --color-error: oklch(0.55 0.2 25);
-    --color-on-error: oklch(1 0 0);
-    --color-error-container: oklch(0.92 0.05 25);
-    --color-on-error-container: oklch(0.3 0.1 25);
-    --color-surface: oklch(0.99 0.005 260);
-    --color-on-surface: oklch(0.2 0.02 260);
-    --color-surface-variant: oklch(0.93 0.01 260);
-    --color-on-surface-variant: oklch(0.45 0.03 260);
-    --color-surface-container: oklch(0.96 0.008 260);
-    --color-surface-container-low: oklch(0.97 0.006 260);
-    --color-surface-container-lowest: oklch(1 0 0);
-    --color-surface-container-high: oklch(0.94 0.01 260);
-    --color-surface-container-highest: oklch(0.92 0.012 260);
-    --color-outline: oklch(0.55 0.02 260);
-    --color-outline-variant: oklch(0.8 0.015 260);
-    --color-inverse-surface: oklch(0.25 0.02 260);
-    --color-inverse-on-surface: oklch(0.95 0.005 260);
-    --color-inverse-primary: oklch(0.8 0.12 260);
-    --color-scrim: oklch(0 0 0);
-    --color-shadow: oklch(0 0 0);
-  }
-  [data-theme="moonlight"] {
-    --color-primary: oklch(0.8 0.12 260);
-    --color-on-primary: oklch(0.3 0.15 260);
-    --color-primary-container: oklch(0.35 0.15 260);
-    --color-on-primary-container: oklch(0.9 0.05 260);
-    --color-secondary: oklch(0.8 0.06 280);
-    --color-on-secondary: oklch(0.3 0.08 280);
-    --color-secondary-container: oklch(0.35 0.08 280);
-    --color-on-secondary-container: oklch(0.92 0.03 280);
-    --color-tertiary: oklch(0.8 0.1 30);
-    --color-on-tertiary: oklch(0.35 0.12 30);
-    --color-tertiary-container: oklch(0.4 0.1 30);
-    --color-on-tertiary-container: oklch(0.92 0.04 30);
-    --color-error: oklch(0.85 0.12 25);
-    --color-on-error: oklch(0.35 0.15 25);
-    --color-error-container: oklch(0.4 0.12 25);
-    --color-on-error-container: oklch(0.92 0.05 25);
-    --color-surface: oklch(0.2 0.015 260);
-    --color-on-surface: oklch(0.93 0.01 260);
-    --color-surface-variant: oklch(0.35 0.02 260);
-    --color-on-surface-variant: oklch(0.8 0.02 260);
-    --color-surface-container: oklch(0.22 0.018 260);
-    --color-surface-container-low: oklch(0.18 0.012 260);
-    --color-surface-container-lowest: oklch(0.15 0.01 260);
-    --color-surface-container-high: oklch(0.25 0.02 260);
-    --color-surface-container-highest: oklch(0.28 0.022 260);
-    --color-outline: oklch(0.55 0.025 260);
-    --color-outline-variant: oklch(0.35 0.02 260);
-    --color-inverse-surface: oklch(0.93 0.01 260);
-    --color-inverse-on-surface: oklch(0.25 0.02 260);
-    --color-inverse-primary: oklch(0.55 0.2 260);
-    --color-scrim: oklch(0 0 0);
-    --color-shadow: oklch(0 0 0);
-  }
-}
 @property --tw-translate-x {
   syntax: "*";
   inherits: false;