@duskmoon-dev/core 1.14.2 → 1.16.0

package/dist/components/index.css

@@ -76,7 +76,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);
@@ -149,7 +149,7 @@
   .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,
@@ -161,7 +161,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,
@@ -173,7 +173,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,
@@ -185,7 +185,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,
@@ -197,7 +197,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,
@@ -209,7 +209,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,
@@ -221,7 +221,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,
@@ -233,7 +233,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,
@@ -471,7 +471,7 @@
     --btn-py: 0.25rem;
     font-size: 0.75rem;
     line-height: 1rem;
-    border-radius: 0.25rem;
+    border-radius: var(--radius-xs);
   }
 
   .btn-sm {
@@ -479,7 +479,7 @@
     --btn-py: 0.375rem;
     font-size: 0.8125rem;
     line-height: 1.125rem;
-    border-radius: 0.375rem;
+    border-radius: var(--radius-xs);
   }
 
   .btn-md {
@@ -487,7 +487,7 @@
     --btn-py: 0.625rem;
     font-size: 0.875rem;
     line-height: 1.25rem;
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
   }
 
   .btn-lg {
@@ -495,7 +495,7 @@
     --btn-py: 0.875rem;
     font-size: 1rem;
     line-height: 1.5rem;
-    border-radius: 0.625rem;
+    border-radius: var(--radius-sm);
   }
 
   /* Block Button */
@@ -514,13 +514,13 @@
   }
 
   .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) {
@@ -541,7 +541,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;
   }
 
@@ -555,7 +555,7 @@
   .btn-circle {
     --btn-p: 0.625rem;
     --btn-py: 0.625rem;
-    border-radius: 50%;
+    border-radius: var(--radius-full);
     aspect-ratio: 1;
   }
 
@@ -591,7 +591,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);
@@ -825,7 +825,7 @@
   .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, color-mix(in srgb, var(--color-shadow) 70%, transparent), transparent);
     color: white;
     margin-top: auto;
     min-height: 50%;
@@ -834,6 +834,13 @@
   .card-full-image .card-title {
     color: white;
   }
+
+  /* Reduce Motion */
+  @media (prefers-reduced-motion: reduce) {
+    .card {
+      transition: none;
+    }
+  }
 }
 
 
@@ -854,7 +861,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;
   }
 
@@ -905,7 +912,7 @@
     padding: 0.375rem 0.625rem;
     font-size: 0.75rem;
     line-height: 1rem;
-    border-radius: 0.25rem;
+    border-radius: var(--radius-xs);
     height: 1.75rem;
   }
 
@@ -913,7 +920,7 @@
     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;
   }
 
@@ -921,7 +928,7 @@
     padding: 1rem 1.25rem;
     font-size: 1.125rem;
     line-height: 1.75rem;
-    border-radius: 0.625rem;
+    border-radius: var(--radius-sm);
     height: 3.5rem;
   }
 
@@ -942,7 +949,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 {
@@ -970,13 +977,13 @@
   }
 
   .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 {
@@ -990,14 +997,14 @@
   }
 
   .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;
   }
 
@@ -1008,7 +1015,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;
   }
@@ -1031,6 +1038,15 @@
     box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
     outline: none;
   }
+
+  /* Reduce Motion */
+  @media (prefers-reduced-motion: reduce) {
+    .input,
+    .input-filled,
+    .file-input {
+      transition: none;
+    }
+  }
 }
 
 
@@ -1077,7 +1093,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;
@@ -1106,8 +1122,8 @@
   }
 
   .checkbox:focus-visible {
-    outline: 2px solid var(--color-primary);
-    outline-offset: 2px;
+    outline: none;
+    box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
   }
 
   .checkbox:disabled {
@@ -1131,6 +1147,21 @@
     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);
@@ -1158,7 +1189,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;
@@ -1181,13 +1212,13 @@
     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 color-mix(in oklch, currentColor 20%, transparent);
   }
 
   .radio:disabled {
@@ -1212,12 +1243,52 @@
     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/Switch */
   .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;
@@ -1233,7 +1304,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;
   }
 
@@ -1247,8 +1318,8 @@
   }
 
   .toggle:focus-visible {
-    outline: 2px solid var(--color-primary);
-    outline-offset: 2px;
+    outline: none;
+    box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
   }
 
   .toggle:disabled {
@@ -1301,8 +1372,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;
@@ -1367,8 +1438,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;
   }
@@ -1400,8 +1471,17 @@
   .form-control.error .input,
   .form-control.error .select,
   .form-control.error .textarea,
-  .input-error {
+  .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 color-mix(in oklch, var(--color-error) 10%, transparent);
   }
 
   .form-control.error .label-text {
@@ -1410,14 +1490,64 @@
 
   .form-control.success .input,
   .form-control.success .select,
-  .form-control.success .textarea {
+  .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 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 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 color-mix(in oklch, var(--color-info) 10%, transparent);
+  }
+
+  .form-control.info .label-text {
+    color: var(--color-info);
+  }
+
   /* Helper Text */
   .helper-text {
     font-size: 0.75rem;
@@ -1433,6 +1563,17 @@
     color: var(--color-success);
   }
 
+  .helper-text.warning {
+    color: var(--color-warning);
+  }
+
+  .helper-text.info {
+    color: var(--color-info);
+  }
+
+  /* Native HTML Validation (:user-invalid/:user-valid, :invalid/:valid, ARIA)
+   * is handled in form-group.css to avoid duplication. */
+
   /* Required Field Indicator */
   .label-text.required::after {
     content: ' *';
@@ -1445,7 +1586,7 @@
     width: 100%;
     height: 0.5rem;
     background-color: var(--color-surface-container-highest);
-    border-radius: 0.25rem;
+    border-radius: var(--radius-xs);
     cursor: pointer;
   }
 
@@ -1454,7 +1595,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;
   }
@@ -1468,13 +1609,25 @@
     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 color-mix(in oklch, currentColor 20%, transparent);
+  }
+
+  /* Reduce Motion */
+  @media (prefers-reduced-motion: reduce) {
+    .form-control,
+    .input,
+    .select,
+    .textarea,
+    .range,
+    .label-float .form-control ~ label {
+      transition: none;
+    }
   }
 }
 
@@ -1546,7 +1699,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;
@@ -1561,8 +1714,8 @@
   .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 color-mix(in oklch, currentColor 20%, transparent);
   }
 
   .menu li > a.active,
@@ -1698,9 +1851,9 @@
   }
 
   .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 color-mix(in oklch, currentColor 20%, transparent);
+    border-radius: var(--radius-xs);
   }
 
   /* Separator - Default shows "/" */
@@ -1782,7 +1935,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;
   }
@@ -1838,7 +1991,7 @@
   .breadcrumbs-contained {
     padding: 0.75rem 1rem;
     background-color: var(--color-surface-container);
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
   }
 
   /* No Wrap Variant */
@@ -1887,8 +2040,8 @@
   }
 
   .tab:focus-visible {
-    outline: 2px solid var(--color-primary);
-    outline-offset: -2px;
+    outline: none;
+    box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
   }
 
   .tab.tab-active,
@@ -1905,13 +2058,13 @@
   /* Tabs Boxed */
   .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;
   }
@@ -1931,7 +2084,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;
   }
 
@@ -1971,7 +2124,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;
@@ -2038,7 +2191,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;
@@ -2080,8 +2233,8 @@
   .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 color-mix(in oklch, currentColor 20%, transparent);
   }
 
   .pagination-item:disabled,
@@ -2139,7 +2292,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 {
@@ -2193,12 +2346,12 @@
 
   .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 */
@@ -2255,7 +2408,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);
@@ -2272,7 +2425,7 @@
     position: fixed;
     inset: 0;
     z-index: -1;
-    background-color: rgb(0 0 0 / 0.5);
+    background-color: color-mix(in srgb, var(--color-scrim) 50%, transparent);
     cursor: pointer;
   }
 
@@ -2354,7 +2507,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;
   }
@@ -2365,8 +2518,8 @@
   }
 
   .modal-close:focus-visible {
-    outline: 2px solid var(--color-primary);
-    outline-offset: 2px;
+    outline: none;
+    box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
   }
 
   /* Modal Header */
@@ -2404,7 +2557,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;
     }
   }
 
@@ -2458,7 +2611,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    border-radius: 50%;
+    border-radius: var(--radius-full);
     font-size: 2rem;
   }
 
@@ -2530,7 +2683,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);
@@ -2588,7 +2741,7 @@
 
   /* Shape Variants */
   .avatar-rounded {
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
   }
 
   .avatar-square {
@@ -2633,8 +2786,8 @@
 
   /* Ring */
   .avatar-ring {
-    outline: 2px solid var(--color-primary);
-    outline-offset: 2px;
+    outline: none;
+    box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
   }
 
   .avatar-ring-primary {
@@ -2660,7 +2813,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);
   }
 
@@ -2720,7 +2873,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);
   }
@@ -2870,7 +3023,7 @@
     transform: translateY(-50%);
     width: 0.375rem;
     height: 0.375rem;
-    border-radius: 50%;
+    border-radius: var(--radius-full);
     background-color: currentColor;
   }
 
@@ -2879,7 +3032,7 @@
     width: 0.5rem;
     height: 0.5rem;
     padding: 0;
-    border-radius: 50%;
+    border-radius: var(--radius-full);
   }
 }
 
@@ -2898,10 +3051,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;
   }
@@ -2928,6 +3081,7 @@
   .chip-primary {
     background-color: var(--color-primary);
     color: var(--color-primary-content);
+    border-color: var(--color-primary);
   }
 
   .chip-primary:hover {
@@ -2937,6 +3091,7 @@
   .chip-secondary {
     background-color: var(--color-secondary);
     color: var(--color-secondary-content);
+    border-color: var(--color-secondary);
   }
 
   .chip-secondary:hover {
@@ -2946,6 +3101,7 @@
   .chip-tertiary {
     background-color: var(--color-tertiary);
     color: var(--color-tertiary-content);
+    border-color: var(--color-tertiary);
   }
 
   .chip-tertiary:hover {
@@ -2955,6 +3111,7 @@
   .chip-info {
     background-color: var(--color-info);
     color: var(--color-info-content);
+    border-color: var(--color-info);
   }
 
   .chip-info:hover {
@@ -2964,6 +3121,7 @@
   .chip-success {
     background-color: var(--color-success);
     color: var(--color-success-content);
+    border-color: var(--color-success);
   }
 
   .chip-success:hover {
@@ -2973,6 +3131,7 @@
   .chip-warning {
     background-color: var(--color-warning);
     color: var(--color-warning-content);
+    border-color: var(--color-warning);
   }
 
   .chip-warning:hover {
@@ -2982,6 +3141,7 @@
   .chip-error {
     background-color: var(--color-error);
     color: var(--color-error-content);
+    border-color: var(--color-error);
   }
 
   .chip-error:hover {
@@ -2999,7 +3159,6 @@
   }
 
   .chip-outlined.chip-primary {
-    border-color: var(--color-primary);
     color: var(--color-primary);
   }
 
@@ -3008,7 +3167,6 @@
   }
 
   .chip-outlined.chip-secondary {
-    border-color: var(--color-secondary);
     color: var(--color-secondary);
   }
 
@@ -3017,7 +3175,6 @@
   }
 
   .chip-outlined.chip-tertiary {
-    border-color: var(--color-tertiary);
     color: var(--color-tertiary);
   }
 
@@ -3026,7 +3183,6 @@
   }
 
   .chip-outlined.chip-info {
-    border-color: var(--color-info);
     color: var(--color-info);
   }
 
@@ -3035,7 +3191,6 @@
   }
 
   .chip-outlined.chip-success {
-    border-color: var(--color-success);
     color: var(--color-success);
   }
 
@@ -3044,7 +3199,6 @@
   }
 
   .chip-outlined.chip-warning {
-    border-color: var(--color-warning);
     color: var(--color-warning);
   }
 
@@ -3053,7 +3207,6 @@
   }
 
   .chip-outlined.chip-error {
-    border-color: var(--color-error);
     color: var(--color-error);
   }
 
@@ -3064,6 +3217,7 @@
   /* Tonal/Soft Variant */
   .chip-tonal {
     background-color: var(--color-surface-container-high);
+    border-color: transparent;
   }
 
   .chip-tonal.chip-primary {
@@ -3170,7 +3324,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;
   }
@@ -3183,6 +3337,7 @@
   .chip-selected {
     background-color: var(--color-primary);
     color: var(--color-primary-content);
+    border-color: var(--color-primary);
   }
 
   .chip-selected.chip-outlined {
@@ -3256,8 +3411,8 @@
   }
 
   .list-item:focus-visible {
-    outline: 2px solid var(--color-primary);
-    outline-offset: -2px;
+    outline: none;
+    box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
     background-color: var(--color-surface-container);
   }
 
@@ -3304,7 +3459,7 @@
   /* List Variants */
   .list-bordered {
     border: 1px solid var(--color-outline);
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
     padding: 0;
   }
 
@@ -3479,7 +3634,7 @@
   /* Bordered Table */
   .table-bordered {
     border: 1px solid var(--color-outline);
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
     overflow: hidden;
   }
 
@@ -3599,8 +3754,8 @@
   /* Focus State for Interactive Tables */
   .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 color-mix(in oklch, currentColor 20%, transparent);
   }
 }
 
@@ -3631,7 +3786,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;
   }
 
@@ -3658,7 +3813,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;
@@ -3740,7 +3895,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);
   }
 
   /* Group Header */
@@ -3786,7 +3941,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;
   }
@@ -3811,7 +3966,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 {
@@ -3827,7 +3982,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 {
@@ -3840,7 +3995,7 @@
     background-color: transparent;
     border: none;
     cursor: pointer;
-    border-radius: 50%;
+    border-radius: var(--radius-full);
     transition: background-color 150ms ease-in-out;
   }
 
@@ -3965,7 +4120,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;
   }
@@ -4044,7 +4199,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;
@@ -4064,7 +4219,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;
   }
@@ -4165,7 +4320,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%;
@@ -4235,7 +4390,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;
   }
 
@@ -4259,7 +4414,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 {
@@ -4275,7 +4430,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 {
@@ -4299,7 +4454,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 {
@@ -4386,7 +4541,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;
   }
 
@@ -4434,7 +4589,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;
   }
 
@@ -4673,7 +4828,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;
   }
 
@@ -4743,7 +4898,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;
@@ -4767,7 +4922,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;
@@ -4793,7 +4948,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);
   }
 
@@ -4826,7 +4981,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;
   }
@@ -4883,7 +5038,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;
   }
@@ -4893,8 +5048,8 @@
   }
 
   .datepicker-day:focus-visible {
-    outline: 2px solid var(--color-primary);
-    outline-offset: 2px;
+    outline: none;
+    box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
   }
 
   .datepicker-day-other-month {
@@ -4908,7 +5063,7 @@
 
   .datepicker-day-selected {
     background-color: var(--color-primary);
-    color: var(--color-on-primary);
+    color: var(--color-primary-content);
   }
 
   .datepicker-day-selected:hover {
@@ -4931,14 +5086,14 @@
 
   .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;
   }
 
   /* Month/Year View */
@@ -4961,7 +5116,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;
   }
@@ -4976,7 +5131,7 @@
   .datepicker-year.selected,
   .datepicker-year-selected {
     background-color: var(--color-primary);
-    color: var(--color-on-primary);
+    color: var(--color-primary-content);
   }
 
   .datepicker-day-disabled {
@@ -5013,7 +5168,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 {
@@ -5046,17 +5201,17 @@
   }
 
   .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);
   }
 
@@ -5118,7 +5273,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;
@@ -5185,7 +5340,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;
   }
 
@@ -5291,7 +5446,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;
   }
 
@@ -5491,7 +5646,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;
   }
@@ -5574,7 +5729,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 {
@@ -5585,7 +5740,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;
   }
@@ -5618,7 +5773,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;
@@ -5635,7 +5790,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;
   }
 
@@ -5645,7 +5800,7 @@
     left: 0;
     height: 100%;
     background-color: var(--color-primary);
-    border-radius: 9999px;
+    border-radius: var(--radius-full);
     transition: width 150ms ease-in-out;
   }
 
@@ -5685,7 +5840,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);
   }
@@ -5708,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;
@@ -5744,10 +5899,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;
   }
@@ -5757,8 +5912,8 @@
   }
 
   .file-upload-button:focus-visible {
-    outline: 2px solid var(--color-primary);
-    outline-offset: 2px;
+    outline: none;
+    box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
   }
 
   .file-upload-button:disabled {
@@ -5970,7 +6125,7 @@
     padding: 1rem;
     margin: 0;
     border: 1px solid var(--color-outline-variant);
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
     background-color: transparent;
   }
 
@@ -6182,11 +6337,172 @@
     box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-warning) 10%, transparent);
   }
 
+  /* Info State on Form Group */
+  .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 color-mix(in oklch, var(--color-info) 10%, transparent);
+  }
+
   /* Disabled Form Group */
   .form-group-disabled {
     opacity: 0.5;
     pointer-events: none;
   }
+
+  /* ARIA-based validation states — mirrors class-based states for native form validation */
+  .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 color-mix(in oklch, var(--color-error) 10%, transparent);
+  }
+
+  /* ARIA-based validation for checkbox, radio, switch, file-input
+     (frameworks like React Hook Form / Angular set aria-invalid programmatically) */
+  .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 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 color-mix(in oklch, var(--color-error) 20%, transparent);
+  }
+
+  /* ARIA required indicator for labels */
+  .form-label[aria-required="true"]::after,
+  label[aria-required="true"]::after {
+    content: ' *';
+    color: var(--color-error);
+  }
+
+  /* Native :invalid pseudo-class (opt-in with .validate class to avoid red on page load) */
+  .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);
+  }
+
+  /* :user-invalid — fires only after user interaction (no .validate wrapper needed) */
+  .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 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 color-mix(in oklch, var(--color-success) 10%, transparent);
+  }
+
+  /* Checkbox & Radio — validation pseudo-classes */
+  .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 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 — validation pseudo-classes (required but unchecked) */
+  .switch:user-invalid {
+    border-color: var(--color-error);
+  }
+
+  .switch:user-invalid:focus-visible {
+    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 — validation pseudo-classes */
+  .file-input:user-invalid {
+    border-color: var(--color-error);
+  }
+
+  .file-input:user-invalid:focus-visible {
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-error) 20%, transparent);
+  }
+
+  /* Filled Input — validation with bottom border */
+  .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;
+  }
 }
 
 /**
@@ -6216,7 +6532,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;
   }
@@ -6258,7 +6574,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 {
@@ -6278,7 +6594,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 +6626,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);
   }
 
   /* Inline Search Input */
@@ -6358,7 +6674,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;
@@ -6380,7 +6696,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;
   }
@@ -6417,7 +6733,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;
   }
 
@@ -6448,7 +6764,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;
@@ -6489,7 +6805,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;
   }
 
@@ -6499,7 +6815,7 @@
   }
 
   .multi-select-option-selected .multi-select-option-checkbox svg {
-    color: var(--color-on-primary);
+    color: var(--color-primary-content);
   }
 
   /* Option Icon */
@@ -6562,7 +6878,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;
   }
@@ -6583,7 +6899,7 @@
     font-weight: 600;
     color: var(--color-primary-content);
     background-color: var(--color-primary);
-    border-radius: 0.625rem;
+    border-radius: var(--radius-sm);
   }
 
   /* Size Variants */
@@ -6591,7 +6907,7 @@
     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 {
@@ -6603,7 +6919,7 @@
     min-height: 3.25rem;
     padding: 0.625rem 1rem;
     font-size: 1.125rem;
-    border-radius: 0.625rem;
+    border-radius: var(--radius-sm);
   }
 
   /* Outlined Variant (Default) */
@@ -6617,7 +6933,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 {
@@ -6708,7 +7024,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;
   }
 
@@ -6755,7 +7071,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);
@@ -6794,7 +7110,7 @@
     width: 1rem;
     height: 0.25rem;
     background-color: var(--color-outline);
-    border-radius: 0.125rem;
+    border-radius: var(--radius-xs);
   }
 
   /* Size Variants */
@@ -6802,14 +7118,14 @@
     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);
   }
 
   /* Compact Gap */
@@ -6827,7 +7143,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 {
@@ -6983,7 +7299,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);
@@ -7019,14 +7335,14 @@
     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);
   }
 
   /* Compact Gap */
@@ -7039,7 +7355,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 {
@@ -7051,7 +7367,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 {
@@ -7207,7 +7523,7 @@
     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;
   }
 
@@ -7216,7 +7532,7 @@
     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;
@@ -7560,7 +7876,7 @@
   .rating-item:focus-visible {
     outline: none;
     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 color-mix(in oklch, var(--color-primary)   20%, transparent); }
@@ -7651,7 +7967,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;
   }
@@ -7670,7 +7986,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;
@@ -7714,27 +8030,27 @@
   .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);
   }
 
   /* Color Variants */
@@ -7862,7 +8178,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;
@@ -7896,7 +8212,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) {
@@ -7921,7 +8237,7 @@
   .select-outlined {
     background-color: transparent;
     border: 1px solid var(--color-outline);
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
   }
 
   /* Color Variants — base .select:focus-visible uses currentColor 20%, so no per-variant
@@ -7941,7 +8257,7 @@
     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;
   }
 
@@ -7949,7 +8265,7 @@
     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;
   }
 
@@ -7957,7 +8273,7 @@
     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;
   }
@@ -8003,7 +8319,7 @@
 
   .select-multiple option {
     padding: 0.5rem 0.75rem;
-    border-radius: 0.25rem;
+    border-radius: var(--radius-xs);
   }
 
   .select-multiple option:checked {
@@ -8060,7 +8376,7 @@
     width: 100%;
     height: 0.25rem;
     background-color: var(--color-surface-container-highest);
-    border-radius: 9999px;
+    border-radius: var(--radius-full);
   }
 
   /* Slider Track Filled (Progress) */
@@ -8070,7 +8386,7 @@
     left: 0;
     height: 100%;
     background-color: var(--color-primary);
-    border-radius: 9999px;
+    border-radius: var(--radius-full);
   }
 
   /* Slider Thumb */
@@ -8081,20 +8397,20 @@
     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 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 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 color-mix(in srgb, var(--color-shadow) 20%, transparent);
   }
 
   .slider-thumb:active {
@@ -8114,7 +8430,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;
@@ -8162,7 +8478,7 @@
     width: 0.125rem;
     height: 0.5rem;
     background-color: var(--color-outline);
-    border-radius: 9999px;
+    border-radius: var(--radius-full);
   }
 
   .slider-mark-active {
@@ -8226,7 +8542,7 @@
 
   .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 color-mix(in srgb, var(--color-shadow) 20%, transparent);
   }
 
   .slider-primary .slider-thumb-label {
@@ -8245,7 +8561,7 @@
 
   .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 color-mix(in srgb, var(--color-shadow) 20%, transparent);
   }
 
   .slider-secondary .slider-mark-active { background-color: var(--color-secondary-content); }
@@ -8266,7 +8582,7 @@
 
   .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 color-mix(in srgb, var(--color-shadow) 20%, transparent);
   }
 
   .slider-tertiary .slider-mark-active { background-color: var(--color-tertiary-content); }
@@ -8288,7 +8604,7 @@
 
   .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 color-mix(in srgb, var(--color-shadow) 20%, transparent);
   }
 
   .slider-info .slider-mark-active { background-color: var(--color-info-content); }
@@ -8310,7 +8626,7 @@
 
   .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 color-mix(in srgb, var(--color-shadow) 20%, transparent);
   }
 
   .slider-success .slider-mark-active { background-color: var(--color-success-content); }
@@ -8332,7 +8648,7 @@
 
   .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 color-mix(in srgb, var(--color-shadow) 20%, transparent);
   }
 
   .slider-warning .slider-mark-active { background-color: var(--color-warning-content); }
@@ -8354,7 +8670,7 @@
 
   .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 color-mix(in srgb, var(--color-shadow) 20%, transparent);
   }
 
   .slider-error .slider-mark-active { background-color: var(--color-error-content); }
@@ -8470,7 +8786,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 {
@@ -8536,7 +8852,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);
     /* Use !important to override global * { transition } rules */
     transition: background-color 200ms ease-in-out !important,
       width 200ms ease-in-out !important,
@@ -8841,7 +9157,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;
@@ -8890,7 +9206,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) {
@@ -8915,7 +9231,7 @@
   .textarea-outlined {
     background-color: transparent;
     border: 1px solid var(--color-outline);
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
   }
 
   /* Ghost Variant */
@@ -8963,7 +9279,7 @@
     padding: 0.5rem 0.75rem;
     font-size: 0.875rem;
     line-height: 1.25rem;
-    border-radius: 0.375rem;
+    border-radius: var(--radius-xs);
   }
 
   .textarea-lg {
@@ -8971,7 +9287,7 @@
     padding: 1rem 1.25rem;
     font-size: 1.125rem;
     line-height: 1.75rem;
-    border-radius: 0.625rem;
+    border-radius: var(--radius-sm);
   }
 
   /* ============================================
@@ -9126,8 +9442,8 @@
 
   /* Focus-visible ring on the label when its radio is focused */
   .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 color-mix(in oklch, currentColor 20%, transparent);
   }
 
   /* Active/checked state */
@@ -9233,8 +9549,8 @@
   }
 
   .theme-controller-trigger:focus-visible {
-    outline: 2px solid var(--color-primary);
-    outline-offset: 2px;
+    outline: none;
+    box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
   }
 
   /* Chevron indicator */
@@ -9372,7 +9688,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;
@@ -9503,7 +9819,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: color-mix(in oklch, var(--color-surface-variant) 30%, transparent);
   }
@@ -9511,7 +9827,7 @@
   /* Toggle buttons in group */
   .toggle-group .toggle-btn {
     border: none;
-    border-radius: 0.375rem;
+    border-radius: var(--radius-xs);
     margin: 0;
   }
 
@@ -9562,14 +9878,14 @@
     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,
@@ -9581,7 +9897,7 @@
 
   /* Chip-like toggle */
   .toggle-chip {
-    border-radius: 1rem;
+    border-radius: var(--radius-lg);
     padding: 0.5rem 1rem;
   }
 
@@ -9626,7 +9942,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);
   }
 
@@ -9660,7 +9976,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;
   }
 
@@ -9707,7 +10023,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;
   }
@@ -9747,7 +10063,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 {
@@ -9759,7 +10075,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;
   }
@@ -9780,7 +10096,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;
   }
 
@@ -9791,7 +10107,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;
   }
@@ -9809,7 +10125,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 {
@@ -9820,7 +10136,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 {
@@ -9834,7 +10150,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,
@@ -9932,7 +10248,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);
   }
 
@@ -9961,7 +10277,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;
   }
@@ -10012,7 +10328,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;
   }
@@ -10093,7 +10409,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;
@@ -10121,7 +10437,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;
   }
@@ -10173,7 +10489,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;
   }
 
@@ -10196,7 +10512,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;
   }
@@ -10230,7 +10546,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;
@@ -10302,7 +10618,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;
   }
 
@@ -10316,7 +10632,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);
   }
@@ -10333,13 +10649,13 @@
   .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);
   }
 
   /* Outlined Variant (Default) */
@@ -10353,7 +10669,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 {
@@ -10446,7 +10762,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;
   }
 
@@ -10470,7 +10786,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 {
@@ -10483,7 +10799,7 @@
     color: inherit;
     background-color: transparent;
     border: none;
-    border-radius: 50%;
+    border-radius: var(--radius-full);
     cursor: pointer;
     opacity: 0.7;
   }
@@ -10525,7 +10841,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);
@@ -10575,7 +10891,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;
@@ -10793,14 +11109,14 @@
     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 Backdrop (native ::backdrop) */
   dialog.dialog::backdrop {
-    background-color: rgb(0 0 0 / 0.5);
+    background-color: color-mix(in srgb, var(--color-scrim) 50%, transparent);
   }
 
   /* Dialog Box - inner container for flex layout */
@@ -10839,7 +11155,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;
@@ -10851,8 +11167,8 @@
   }
 
   .dialog-close:focus-visible {
-    outline: 2px solid var(--color-primary);
-    outline-offset: 2px;
+    outline: none;
+    box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
   }
 
   /* Dialog Body */
@@ -10961,7 +11277,7 @@
     width: 100%;
     height: 0.5rem;
     background-color: var(--color-surface-container-highest);
-    border-radius: 9999px;
+    border-radius: var(--radius-full);
     overflow: hidden;
   }
 
@@ -10972,7 +11288,7 @@
     left: 0;
     height: 100%;
     background-color: var(--color-primary);
-    border-radius: 9999px;
+    border-radius: var(--radius-full);
     transition: width 300ms ease-in-out;
   }
 
@@ -11197,7 +11513,7 @@
   /* Base Skeleton */
   .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;
   }
 
@@ -11205,20 +11521,20 @@
   .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);
   }
 
   /* Size Variants */
@@ -11246,7 +11562,7 @@
   .skeleton-avatar {
     width: 3rem;
     height: 3rem;
-    border-radius: 50%;
+    border-radius: var(--radius-full);
   }
 
   .skeleton-avatar-sm {
@@ -11262,18 +11578,18 @@
   .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;
   }
 
@@ -11282,7 +11598,7 @@
     height: 0.875rem;
     width: 100%;
     margin-bottom: 0.5rem;
-    border-radius: 0.25rem;
+    border-radius: var(--radius-xs);
   }
 
   .skeleton-line:last-child {
@@ -11376,7 +11692,7 @@
   .skeleton-table-cell {
     flex: 1;
     height: 1rem;
-    border-radius: 0.25rem;
+    border-radius: var(--radius-xs);
   }
 
   /* List Skeleton */
@@ -11471,7 +11787,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;
@@ -11578,7 +11894,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;
@@ -11590,8 +11906,8 @@
   }
 
   .snackbar-action:focus-visible {
-    outline: 2px solid var(--color-primary);
-    outline-offset: 2px;
+    outline: none;
+    box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
   }
 
   /* Snackbar Close */
@@ -11605,7 +11921,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;
@@ -11784,7 +12100,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;
@@ -11854,7 +12170,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;
@@ -12012,7 +12328,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;
   }
 
@@ -12061,7 +12377,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;
@@ -12505,7 +12821,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;
@@ -12568,7 +12884,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;
   }
@@ -12684,7 +13000,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;
@@ -12709,7 +13025,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;
   }
 
@@ -12967,7 +13283,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;
   }
 
@@ -13389,7 +13705,7 @@
     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 color-mix(in srgb, var(--color-shadow) 10%, transparent);
   }
 
   /* Navigation Item */
@@ -13420,8 +13736,8 @@
   }
 
   .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 color-mix(in oklch, currentColor 20%, transparent);
   }
 
   /* Active State */
@@ -13437,7 +13753,7 @@
     justify-content: center;
     width: 4rem;
     height: 2rem;
-    border-radius: 1rem;
+    border-radius: var(--radius-lg);
     transition: background-color 150ms ease-in-out;
   }
 
@@ -13483,9 +13799,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;
   }
 
@@ -13500,7 +13816,7 @@
 
   /* Variants */
   .bottom-nav-elevated {
-    box-shadow: 0 -4px 6px -1px rgb(0 0 0 / 0.1);
+    box-shadow: 0 -4px 6px -1px color-mix(in srgb, var(--color-shadow) 10%, transparent);
   }
 
   .bottom-nav-bordered {
@@ -13634,6 +13950,331 @@
   }
 }
 
+/**
+ * Circle Menu Component Styles
+ * DuskMoonUI - Radial circular navigation menu with CSS-only checkbox toggle
+ *
+ * Usage:
+ *   <nav class="circle-menu">
+ *     <input type="checkbox" class="circle-menu-toggler" id="cm-1">
+ *     <label class="circle-menu-label" for="cm-1"></label>
+ *     <ul class="circle-menu-list">
+ *       <li class="circle-menu-item"><a href="#">icon</a></li>
+ *     </ul>
+ *   </nav>
+ */
+
+@layer components {
+  /* === Container === */
+  .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;
+
+    /* Color tokens (overridden by variants) */
+    --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: 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);
+  }
+
+  /* === Hidden checkbox toggler === */
+  .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;
+  }
+
+  /* === Circular toggle button (label) === */
+  .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;
+  }
+
+  /* Top bar of hamburger icon */
+  .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 creates middle + bottom bars */
+    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);
+  }
+
+  /* Second diagonal of X (hidden by default) */
+  .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;
+  }
+
+  /* Hover: lighten the toggle button */
+  .circle-menu-toggler:hover + .circle-menu-label {
+    background-color: color-mix(in oklch, var(--circle-menu-btn-bg) 80%, var(--circle-menu-bar-color));
+  }
+
+  /* Focus visible ring on toggle button */
+  .circle-menu-toggler:focus-visible + .circle-menu-label {
+    outline: none;
+    box-shadow: 0 0 0 3px var(--circle-menu-item-ring);
+  }
+
+  /* === Checked: hamburger → X === */
+  .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;
+  }
+
+  /* === Menu list === */
+  .circle-menu-list {
+    position: absolute;
+    inset: 0;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    pointer-events: none;
+  }
+
+  /* === Menu items (collapsed at center) === */
+  .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;
+  }
+
+  /* Item anchor/button — circular shape */
+  .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: 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);
+  }
+
+  /* Counter-rotate icons to stay upright as item container rotates */
+  .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); }
+
+  /* === Checked: fan items out in a circle === */
+  .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;
+  }
+
+  /* Radial positions for up to 6 items (rotate + translate along rotated X axis) */
+  .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)));
+  }
+
+  /* === Size variants === */
+  .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;
+  }
+
+  /* === Color variants === */
+  .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: 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: 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: 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: 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: 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: 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: color-mix(in oklch, var(--color-error) 40%, transparent);
+  }
+
+  /* === Reduced motion === */
+  @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;
+    }
+  }
+}
+
 /**
  * Drawer Component Styles
  * DuskMoonUI - Material Design 3 inspired navigation drawer system
@@ -13645,7 +14286,7 @@
     position: fixed;
     inset: 0;
     z-index: 1100;
-    background-color: rgb(0 0 0 / 0.5);
+    background-color: color-mix(in srgb, var(--color-scrim) 50%, transparent);
     opacity: 0;
     visibility: hidden;
     transition: opacity 300ms ease-out, visibility 300ms ease-out;
@@ -13692,7 +14333,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 {
@@ -13706,7 +14347,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 {
@@ -13720,7 +14361,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 {
@@ -13734,7 +14375,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 {
@@ -13767,7 +14408,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;
   }
@@ -13777,8 +14418,8 @@
   }
 
   .drawer-close:focus-visible {
-    outline: 2px solid var(--color-primary);
-    outline-offset: 2px;
+    outline: none;
+    box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
   }
 
   /* Drawer Body (main content area) */
@@ -13809,7 +14450,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;
@@ -13822,8 +14463,8 @@
   }
 
   .drawer-item:focus-visible {
-    outline: 2px solid var(--color-primary);
-    outline-offset: 2px;
+    outline: none;
+    box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
   }
 
   /* Active Item States */
@@ -13861,7 +14502,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;
   }
 
@@ -13903,7 +14544,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;
@@ -14069,8 +14710,8 @@
 
   .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 color-mix(in oklch, currentColor 20%, transparent);
   }
 
   /* Active state */
@@ -14134,8 +14775,8 @@
   }
 
   .nested-menu summary:focus-visible {
-    outline: 2px solid var(--color-primary);
-    outline-offset: -2px;
+    outline: none;
+    box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
   }
 
   /* Chevron indicator */
@@ -14231,7 +14872,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);
   }
 
   /* Compact — tighter padding throughout */
@@ -14326,8 +14967,8 @@
   }
 
   .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 color-mix(in oklch, currentColor 20%, transparent);
   }
 
   /* Step Icon (Number/Icon Circle) */
@@ -14342,26 +14983,26 @@
     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 {
@@ -14450,7 +15091,7 @@
   .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 {
@@ -14465,7 +15106,7 @@
   .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 {
@@ -14532,7 +15173,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);
   }
 
@@ -14597,7 +15238,7 @@
   .accordion {
     display: flex;
     flex-direction: column;
-    border-radius: 0.75rem;
+    border-radius: var(--radius-md);
     overflow: hidden;
   }
 
@@ -14610,13 +15251,13 @@
 
   .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 */
@@ -14642,7 +15283,7 @@
   .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 color-mix(in oklch, currentColor 20%, transparent);
   }
 
   .accordion-item.open .accordion-header {
@@ -14727,7 +15368,7 @@
   /* Separated Variant */
   .accordion-separated .accordion-item {
     margin-top: 0.5rem;
-    border-radius: 0.75rem;
+    border-radius: var(--radius-md);
   }
 
   .accordion-separated .accordion-item:first-child {
@@ -14843,7 +15484,7 @@
     position: fixed;
     inset: 0;
     z-index: 1100;
-    background-color: rgb(0 0 0 / 0.5);
+    background-color: color-mix(in srgb, var(--color-scrim) 50%, transparent);
     opacity: 0;
     visibility: hidden;
     transition: opacity 300ms ease-out, visibility 300ms ease-out;
@@ -14865,8 +15506,8 @@
     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 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);
@@ -14890,7 +15531,7 @@
     width: 2rem;
     height: 0.25rem;
     background-color: var(--color-outline-variant);
-    border-radius: 9999px;
+    border-radius: var(--radius-full);
   }
 
   .bottomsheet-handle:active {
@@ -14922,7 +15563,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;
   }
@@ -14932,8 +15573,8 @@
   }
 
   .bottomsheet-close:focus-visible {
-    outline: 2px solid var(--color-primary);
-    outline-offset: 2px;
+    outline: none;
+    box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
   }
 
   /* Bottom Sheet Content */
@@ -15037,7 +15678,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;
   }
@@ -15054,7 +15695,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);
   }
 
@@ -15076,7 +15717,7 @@
   /* Persistent (non-modal) */
   .bottomsheet-persistent {
     position: absolute;
-    box-shadow: 0 -4px 6px -1px rgb(0 0 0 / 0.1);
+    box-shadow: 0 -4px 6px -1px color-mix(in srgb, var(--color-shadow) 10%, transparent);
   }
 
   /* Expandable Heights */
@@ -15107,7 +15748,7 @@
     width: 0.25rem;
     height: 1rem;
     background-color: var(--color-outline-variant);
-    border-radius: 9999px;
+    border-radius: var(--radius-full);
     cursor: pointer;
   }
 
@@ -15142,7 +15783,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%);
     }
 
@@ -15177,7 +15818,7 @@
   .collapse {
     display: flex;
     flex-direction: column;
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
     background-color: var(--color-surface);
     /* Override Tailwind's visibility: collapse utility */
     visibility: visible !important;
@@ -15205,8 +15846,8 @@
   }
 
   .collapse-trigger:focus-visible {
-    outline: 2px solid var(--color-primary);
-    outline-offset: -2px;
+    outline: none;
+    box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
   }
 
   /* Collapse Icon */
@@ -15293,7 +15934,7 @@
     border: none;
     cursor: pointer;
     transition: background-color 150ms ease-in-out;
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
   }
 
   .collapse-toggle:hover {
@@ -15301,8 +15942,8 @@
   }
 
   .collapse-toggle:focus-visible {
-    outline: 2px solid var(--color-primary);
-    outline-offset: 2px;
+    outline: none;
+    box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
   }
 
   /* Toggle Icon */
@@ -15323,7 +15964,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);
   }
@@ -15351,7 +15992,7 @@
   /* Bordered Variant */
   .collapse-bordered {
     border: 1px solid var(--color-outline-variant);
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
   }
 
   /* Ghost Variant */
@@ -15475,7 +16116,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;
   }
 
@@ -15675,7 +16316,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;
@@ -15710,7 +16351,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;
@@ -15876,7 +16517,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;
   }
@@ -15886,8 +16527,8 @@
   }
 
   .popover-close:focus-visible {
-    outline: 2px solid var(--color-primary);
-    outline-offset: 2px;
+    outline: none;
+    box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
   }
 
   /* Popover Body */
@@ -16109,7 +16750,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;
@@ -16120,8 +16761,8 @@
   }
 
   .popover-menu-item:focus-visible {
-    outline: 2px solid var(--color-primary);
-    outline-offset: -2px;
+    outline: none;
+    box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
   }
 
   .popover-menu-item-icon {
@@ -16164,7 +16805,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);
@@ -16188,33 +16829,33 @@
 
   /* Native popover backdrop */
   .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: 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;
     }
   }
 
   /* Native popover with modal backdrop */
   .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: 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;
     }
   }
 
@@ -16433,7 +17074,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;
   }
@@ -16447,7 +17088,7 @@
     width: 0.75rem;
     height: 0.75rem;
     background-color: var(--color-outline-variant);
-    border-radius: 50%;
+    border-radius: var(--radius-full);
   }
 
   /* Timeline Content */
@@ -16480,7 +17121,7 @@
   .timeline-card {
     padding: 1rem;
     background-color: var(--color-surface-container);
-    border-radius: 0.75rem;
+    border-radius: var(--radius-md);
     margin-top: 0.5rem;
   }
 
@@ -16535,7 +17176,7 @@
   }
 
   .timeline-item.completed .timeline-marker-icon {
-    color: var(--color-on-primary);
+    color: var(--color-primary-content);
   }
 
   /* Active State */
@@ -16547,8 +17188,8 @@
 
   .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);
   }
 
   /* Size Variants */
@@ -16758,7 +17399,7 @@
 
   .code-block {
     border: 1px solid var(--color-outline);
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
     overflow: hidden;
   }
 
@@ -16804,7 +17445,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;
@@ -16961,8 +17602,8 @@
   }
 
   .markdown-body a:focus-visible {
-    outline: 2px solid var(--color-primary);
-    outline-offset: 2px;
+    outline: none;
+    box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
   }
 
   /* Emphasis */
@@ -17056,7 +17697,7 @@
     padding-block: 0.2em;
     padding-inline: 0.4em;
     background-color: var(--color-surface-container-high);
-    border-radius: 6px;
+    border-radius: var(--radius-xs);
   }
 
   /* Code blocks */
@@ -17068,7 +17709,7 @@
     margin-block-end: 1rem;
     overflow-x: auto;
     background-color: var(--color-surface-container);
-    border-radius: 6px;
+    border-radius: var(--radius-xs);
   }
 
   /* Reset code inside pre */
@@ -17087,7 +17728,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);
   }
 
@@ -17244,7 +17885,7 @@
     color: var(--color-on-tertiary-container);
     padding-block: 0.1em;
     padding-inline: 0.2em;
-    border-radius: 2px;
+    border-radius: var(--radius-xs);
   }
 
   /* Details/Summary */