diff --git a/src/Layout.module.css b/src/Layout.module.css
index a71ab1d..b8999d9 100644
--- a/src/Layout.module.css
+++ b/src/Layout.module.css
@@ -64,29 +64,20 @@
     div {
       text-align: center;
       &.filled {
-        color: light-dark(var(--color-light-on-surface), var(--color-dark-on-surface));
+        color: var(--color-on-surface);
         background-color: transparent;
         border-radius: calc(var(--border-radius) * 2);
         padding-block: calc(var(--spacing));
       }
     }
     &.inactive {
-      color: light-dark(
-        var(--color-light-on-surface-variant),
-        var(--color-dark-on-surface-variant)
-      );
+      color: var(--color-on-surface-variant);
     }
     &.active {
-      color: light-dark(var(--color-light-on-surface), var(--color-dark-on-surface));
+      color: var(--color-on-surface);
       div.filled {
-        color: light-dark(
-          var(--color-light-on-secondary-container),
-          var(--color-dark-on-secondary-container)
-        );
-        background-color: light-dark(
-          var(--color-light-secondary-container),
-          var(--color-dark-secondary-container)
-        );
+        color: var(--color-on-secondary-container);
+        background-color: var(--color-secondary-container);
       }
     }
   }
diff --git a/src/components.css b/src/components.css
index fe79330..612a322 100644
--- a/src/components.css
+++ b/src/components.css
@@ -1,8 +1,8 @@
 @layer base {
   :root {
-    --button-text: light-dark(var(--color-light-on-primary), var(--color-dark-on-primary));
-    --button-surface: light-dark(var(--color-light-primary), var(--color-dark-primary));
-    --button-outline: light-dark(var(--color-light-outline), var(--color-dark-outline));
+    --button-text: var(--color-on-primary);
+    --button-surface: var(--color-primary);
+    --button-outline: var(--color-outline);
   }
 
   :where(ul, menu) {
@@ -12,14 +12,14 @@
 
   :where(a) {
     text-decoration: none;
-    color: light-dark(var(--color-light-on-surface), var(--color-dark-on-surface));
+    color: var(--color-on-surface);
 
     &:hover {
-      color: light-dark(var(--color-light-primary), var(--color-dark-primary));
+      color: var(--color-primary);
     }
 
     &:active {
-      color: light-dark(var(--color-light-tertiary), var(--color-dark-tertiary));
+      color: var(--color-tertiary);
     }
   }
 
@@ -116,42 +116,36 @@
       box-shadow: var(--elevation-0);
     }
     &:disabled {
-      --button-text: light-dark(
-        color-mix(in oklch, var(--color-light-on-surface) 38%, transparent),
-        color-mix(in oklch, var(--color-dark-on-surface) 38%, transparent)
-      );
-      --button-surface: light-dark(
-        color-mix(in oklch, var(--color-light-on-surface) 12%, transparent),
-        color-mix(in oklch, var(--color-dark-on-surface) 12%, transparent)
-      );
+      --button-text: color-mix(in oklch, var(--color-on-surface) 38%, transparent);
+      --button-surface: color-mix(in oklch, var(--color-on-surface) 12%, transparent);
       cursor: not-allowed;
     }
     &.filled:not(:disabled) {
-      --button-text: light-dark(var(--color-light-on-primary), var(--color-dark-on-primary));
-      --button-surface: light-dark(var(--color-light-primary), var(--color-dark-primary));
+      --button-text: var(--color-on-primary);
+      --button-surface: var(--color-primary);
       &.secondary {
-        --button-text: light-dark(var(--color-light-on-secondary), var(--color-dark-on-secondary));
-        --button-surface: light-dark(var(--color-light-secondary), var(--color-dark-secondary));
+        --button-text: var(--color-on-secondary);
+        --button-surface: var(--color-secondary);
       }
       &.tertiary {
-        --button-text: light-dark(var(--color-light-on-tertiary), var(--color-dark-on-tertiary));
-        --button-surface: light-dark(var(--color-light-tertiary), var(--color-dark-tertiary));
+        --button-text: var(--color-on-tertiary);
+        --button-surface: var(--color-tertiary);
       }
       &.danger {
-        --button-text: light-dark(var(--color-light-on-error), var(--color-dark-on-error));
-        --button-surface: light-dark(var(--color-light-error), var(--color-dark-error));
+        --button-text: var(--color-on-error);
+        --button-surface: var(--color-error);
       }
       &.warn {
-        --button-text: light-dark(var(--color-light-on-warning), var(--color-dark-on-warning));
-        --button-surface: light-dark(var(--color-light-warning), var(--color-dark-warning));
+        --button-text: var(--color-on-warning);
+        --button-surface: var(--color-warning);
       }
       &.success {
-        --button-text: light-dark(var(--color-light-on-success), var(--color-dark-on-success));
-        --button-surface: light-dark(var(--color-light-success), var(--color-dark-success));
+        --button-text: var(--color-on-success);
+        --button-surface: var(--color-success);
       }
       &.info {
-        --button-text: light-dark(var(--color-light-on-info), var(--color-dark-on-info));
-        --button-surface: light-dark(var(--color-light-info), var(--color-dark-info));
+        --button-text: var(--color-on-info);
+        --button-surface: var(--color-info);
       }
       &:hover {
         color: var(--button-surface);
@@ -164,83 +158,35 @@
       }
     }
     &.filled:disabled {
-      --button-text: light-dark(
-        color-mix(in oklch, var(--color-light-on-surface) 38%, transparent),
-        color-mix(in oklch, var(--color-dark-on-surface) 38%, transparent)
-      );
-      --button-surface: light-dark(
-        color-mix(in oklch, var(--color-light-on-surface) 12%, transparent),
-        color-mix(in oklch, var(--color-dark-on-surface) 12%, transparent)
-      );
+      --button-text: color-mix(in oklch, var(--color-on-surface) 38%, transparent);
+      --button-surface: color-mix(in oklch, var(--color-on-surface) 12%, transparent);
     }
     &.tonal:not(:disabled) {
-      --button-text: light-dark(
-        var(--color-light-on-primary-container),
-        var(--color-dark-on-primary-container)
-      );
-      --button-surface: light-dark(
-        var(--color-light-primary-container),
-        var(--color-dark-primary-container)
-      );
+      --button-text: var(--color-on-primary-container);
+      --button-surface: var(--color-primary-container);
       &.secondary {
-        --button-text: light-dark(
-          var(--color-light-on-secondary-container),
-          var(--color-dark-on-secondary-container)
-        );
-        --button-surface: light-dark(
-          var(--color-light-secondary-container),
-          var(--color-dark-secondary-container)
-        );
+        --button-text: var(--color-on-secondary-container);
+        --button-surface: var(--color-secondary-container);
       }
       &.tertiary {
-        --button-text: light-dark(
-          var(--color-light-on-tertiary-container),
-          var(--color-dark-on-tertiary-container)
-        );
-        --button-surface: light-dark(
-          var(--color-light-tertiary-container),
-          var(--color-dark-tertiary-container)
-        );
+        --button-text: var(--color-on-tertiary-container);
+        --button-surface: var(--color-tertiary-container);
       }
       &.danger {
-        --button-text: light-dark(
-          var(--color-light-on-error-container),
-          var(--color-dark-on-error-container)
-        );
-        --button-surface: light-dark(
-          var(--color-light-error-container),
-          var(--color-dark-error-container)
-        );
+        --button-text: var(--color-on-error-container);
+        --button-surface: var(--color-error-container);
       }
       &.warn {
-        --button-text: light-dark(
-          var(--color-light-on-warning-container),
-          var(--color-dark-on-warning-container)
-        );
-        --button-surface: light-dark(
-          var(--color-light-warning-container),
-          var(--color-dark-warning-container)
-        );
+        --button-text: var(--color-on-warning-container);
+        --button-surface: var(--color-warning-container);
       }
       &.success {
-        --button-text: light-dark(
-          var(--color-light-on-success-container),
-          var(--color-dark-on-success-container)
-        );
-        --button-surface: light-dark(
-          var(--color-light-success-container),
-          var(--color-dark-success-container)
-        );
+        --button-text: var(--color-on-success-container);
+        --button-surface: var(--color-success-container);
       }
       &.info {
-        --button-text: light-dark(
-          var(--color-light-on-info-container),
-          var(--color-dark-on-info-container)
-        );
-        --button-surface: light-dark(
-          var(--color-light-info-container),
-          var(--color-dark-info-container)
-        );
+        --button-text: var(--color-on-info-container);
+        --button-surface: var(--color-info-container);
       }
       &:hover {
         color: var(--button-surface);
@@ -253,30 +199,30 @@
       }
     }
     &.tonal:disabled {
-      --button-text: color-mix(in oklch, var(--color-dark-on-surface) 38%, transparent);
-      --button-surface: color-mix(in oklch, var(--color-dark-on-surface) 12%, transparent);
+      --button-text: color-mix(in oklch, var(--color-on-surface) 38%, transparent);
+      --button-surface: color-mix(in oklch, var(--color-on-surface) 12%, transparent);
     }
     &.outlined:not(:disabled) {
       border: 1px solid var(--button-outline);
-      --button-text: light-dark(var(--color-light-primary), var(--color-dark-primary));
+      --button-text: var(--color-primary);
       --button-surface: transparent;
       &.secondary {
-        --button-text: light-dark(var(--color-light-secondary), var(--color-dark-secondary));
+        --button-text: var(--color-secondary);
       }
       &.tertiary {
-        --button-text: light-dark(var(--color-light-tertiary), var(--color-dark-tertiary));
+        --button-text: var(--color-tertiary);
       }
       &.danger {
-        --button-text: light-dark(var(--color-light-error), var(--color-dark-error));
+        --button-text: var(--color-error);
       }
       &.warn {
-        --button-text: light-dark(var(--color-light-warning), var(--color-dark-warning));
+        --button-text: var(--color-warning);
       }
       &.success {
-        --button-text: light-dark(var(--color-light-success), var(--color-dark-success));
+        --button-text: var(--color-success);
       }
       &.info {
-        --button-text: light-dark(var(--color-light-info), var(--color-dark-info));
+        --button-text: var(--color-info);
       }
       &:hover {
         background-color: color-mix(in oklch, var(--button-text) 8%, transparent);
@@ -287,36 +233,29 @@
       }
     }
     &.outlined:disabled {
-      border: 1px solid
-        light-dark(
-          color-mix(in oklch, var(--color-light-on-surface) 12%, transparent),
-          color-mix(in oklch, var(--color-dark-on-surface) 12%, transparent)
-        );
-      --button-text: light-dark(
-        color-mix(in oklch, var(--color-light-on-surface) 38%, transparent),
-        color-mix(in oklch, var(--color-dark-on-surface) 38%, transparent)
-      );
+      border: 1px solid color-mix(in oklch, var(--color-on-surface) 12%, transparent);
+      --button-text: color-mix(in oklch, var(--color-on-surface) 38%, transparent);
     }
     &.text:not(:disabled) {
-      --button-text: light-dark(var(--color-light-primary), var(--color-dark-primary));
+      --button-text: var(--color-primary);
       --button-surface: transparent;
       &.secondary {
-        --button-text: light-dark(var(--color-light-secondary), var(--color-dark-secondary));
+        --button-text: var(--color-secondary);
       }
       &.tertiary {
-        --button-text: light-dark(var(--color-light-tertiary), var(--color-dark-tertiary));
+        --button-text: var(--color-tertiary);
       }
       &.danger {
-        --button-text: light-dark(var(--color-light-error), var(--color-dark-error));
+        --button-text: var(--color-error);
       }
       &.warn {
-        --button-text: light-dark(var(--color-light-warning), var(--color-dark-warning));
+        --button-text: var(--color-warning);
       }
       &.success {
-        --button-text: light-dark(var(--color-light-success), var(--color-dark-success));
+        --button-text: var(--color-success);
       }
       &.info {
-        --button-text: light-dark(var(--color-light-info), var(--color-dark-info));
+        --button-text: var(--color-info);
       }
       &:hover {
         --button-surface: color-mix(in oklch, var(--button-text) 8%, transparent);
@@ -327,37 +266,31 @@
       }
     }
     &.text:disabled {
-      --button-text: light-dark(
-        color-mix(in oklch, var(--color-light-on-surface) 38%, transparent),
-        color-mix(in oklch, var(--color-dark-on-surface) 38%, transparent)
-      );
+      --button-text: color-mix(in oklch, var(--color-on-surface) 38%, transparent);
       --button-surface: transparent;
     }
     &.icon:not(:disabled) {
-      --button-text: light-dark(
-        var(--color-light-on-surface-variant),
-        var(--color-dark-on-surface-variant)
-      );
+      --button-text: var(--color-on-surface-variant);
       --button-surface: transparent;
       &.selected {
-        --button-text: light-dark(var(--color-light-primary), var(--color-dark-primary));
+        --button-text: var(--color-primary);
         &.secondary {
-          --button-text: light-dark(var(--color-light-secondary), var(--color-dark-secondary));
+          --button-text: var(--color-secondary);
         }
         &.tertiary {
-          --button-text: light-dark(var(--color-light-tertiary), var(--color-dark-tertiary));
+          --button-text: var(--color-tertiary);
         }
         &.danger {
-          --button-text: light-dark(var(--color-light-error), var(--color-dark-error));
+          --button-text: var(--color-error);
         }
         &.warn {
-          --button-text: light-dark(var(--color-light-warning), var(--color-dark-warning));
+          --button-text: var(--color-warning);
         }
         &.success {
-          --button-text: light-dark(var(--color-light-success), var(--color-dark-success));
+          --button-text: var(--color-success);
         }
         &.info {
-          --button-text: light-dark(var(--color-light-info), var(--color-dark-info));
+          --button-text: var(--color-info);
         }
       }
       &:hover {
@@ -369,126 +302,75 @@
       }
     }
     &.icon:disabled {
-      --button-text: light-dark(
-        color-mix(in oklch, var(--color-light-on-surface) 38%, transparent),
-        color-mix(in oklch, var(--color-dark-on-surface) 38%, transparent)
-      );
+      --button-text: color-mix(in oklch, var(--color-on-surface) 38%, transparent);
       --button-surface: transparent;
     }
     &.filled_icon:not(:disabled) {
-      --button-text: light-dark(var(--color-light-on-primary), var(--color-dark-on-primary));
-      --button-surface: light-dark(var(--color-light-primary), var(--color-dark-primary));
+      --button-text: var(--color-on-primary);
+      --button-surface: var(--color-primary);
       &.secondary {
-        --button-text: light-dark(var(--color-light-on-secondary), var(--color-dark-on-secondary));
-        --button-surface: light-dark(var(--color-light-secondary), var(--color-dark-secondary));
+        --button-text: var(--color-on-secondary);
+        --button-surface: var(--color-secondary);
       }
       &.tertiary {
-        --button-text: light-dark(var(--color-light-on-tertiary), var(--color-dark-on-tertiary));
-        --button-surface: light-dark(var(--color-light-tertiary), var(--color-dark-tertiary));
+        --button-text: var(--color-on-tertiary);
+        --button-surface: var(--color-tertiary);
       }
       &.danger {
-        --button-text: light-dark(var(--color-light-on-error), var(--color-dark-on-error));
-        --button-surface: light-dark(var(--color-light-error), var(--color-dark-error));
+        --button-text: var(--color-on-error);
+        --button-surface: var(--color-error);
       }
       &.warn {
-        --button-text: light-dark(var(--color-light-on-warning), var(--color-dark-on-warning));
-        --button-surface: light-dark(var(--color-light-warning), var(--color-dark-warning));
+        --button-text: var(--color-on-warning);
+        --button-surface: var(--color-warning);
       }
       &.success {
-        --button-text: light-dark(var(--color-light-on-success), var(--color-dark-on-success));
-        --button-surface: light-dark(var(--color-light-success), var(--color-dark-success));
+        --button-text: var(--color-on-success);
+        --button-surface: var(--color-success);
       }
       &.info {
-        --button-text: light-dark(var(--color-light-on-info), var(--color-dark-on-info));
-        --button-surface: light-dark(var(--color-light-info), var(--color-dark-info));
+        --button-text: var(--color-on-info);
+        --button-surface: var(--color-info);
       }
       &.unselected {
-        --button-text: light-dark(var(--color-light-primary), var(--color-dark-primary));
-        --button-surface: light-dark(
-          var(--color-light-surface-container-highest),
-          var(--color-dark-surface-container-highest)
-        );
+        --button-text: var(--color-primary);
+        --button-surface: var(--color-surface-container-highest);
       }
     }
     &.filled_icon:disabled {
-      --button-text: light-dark(
-        color-mix(in oklch, var(--color-light-on-surface) 38%, transparent),
-        color-mix(in oklch, var(--color-dark-on-surface) 38%, transparent)
-      );
-      --button-surface: light-dark(
-        color-mix(in oklch, var(--color-light-on-surface) 12%, transparent),
-        color-mix(in oklch, var(--color-dark-on-surface) 12%, transparent)
-      );
+      --button-text: color-mix(in oklch, var(--color-on-surface) 38%, transparent);
+      --button-surface: color-mix(in oklch, var(--color-on-surface) 12%, transparent);
     }
     &.tonal_icon:not(:disabled) {
-      --button-text: light-dark(
-        var(--color-light-on-primary-container),
-        var(--color-dark-on-primary-container)
-      );
-      --button-surface: light-dark(
-        var(--color-light-primary-container),
-        var(--color-dark-primary-container)
-      );
+      --button-text: var(--color-on-primary-container);
+      --button-surface: var(--color-primary-container);
       &.secondary {
-        --button-text: light-dark(
-          var(--color-light-on-secondary-container),
-          var(--color-dark-on-secondary-container)
-        );
-        --button-surface: light-dark(
-          var(--color-light-secondary-container),
-          var(--color-dark-secondary-container)
-        );
+        --button-text: var(--color-on-secondary-container);
+        --button-surface: var(--color-secondary-container);
       }
       &.tertiary {
-        --button-text: light-dark(
-          var(--color-light-on-tertiary-container),
-          var(--color-dark-on-tertiary-container)
-        );
-        --button-surface: light-dark(
-          var(--color-light-tertiary-container),
-          var(--color-dark-tertiary-container)
-        );
+        --button-text: var(--color-on-tertiary-container);
+        --button-surface: var(--color-tertiary-container);
       }
       &.danger {
-        --button-text: light-dark(
-          var(--color-light-on-error-container),
-          var(--color-dark-on-error-container)
-        );
-        --button-surface: light-dark(
-          var(--color-light-error-container),
-          var(--color-dark-error-container)
-        );
+        --button-text: var(--color-on-error-container);
+        --button-surface: var(--color-error-container);
       }
       &.warn {
-        --button-text: light-dark(
-          var(--color-light-on-warning-container),
-          var(--color-dark-on-warning-container)
-        );
-        --button-surface: light-dark(var(--color-light-warning), var(--color-dark-warning));
+        --button-text: var(--color-on-warning-container);
+        --button-surface: var(--color-warning);
       }
       &.success {
-        --button-text: light-dark(
-          var(--color-light-on-success-container),
-          var(--color-dark-on-success-container)
-        );
-        --button-surface: light-dark(
-          var(--color-light-success-container),
-          var(--color-dark-success-container)
-        );
+        --button-text: var(--color-on-success-container);
+        --button-surface: var(--color-success-container);
       }
       &.info {
-        --button-text: light-dark(var(--color-light-on-info), var(--color-dark-on-info));
-        --button-surface: light-dark(var(--color-light-info), var(--color-dark-info));
+        --button-text: var(--color-on-info);
+        --button-surface: var(--color-info);
       }
       &.unselected {
-        --button-text: light-dark(
-          var(--color-light-on-surface-variant),
-          var(--color-dark-on-surface-variant)
-        );
-        --button-surface: light-dark(
-          var(--color-light-surface-container-highest),
-          var(--color-dark-surface-container-highest)
-        );
+        --button-text: var(--color-on-surface-variant);
+        --button-surface: var(--color-surface-container-highest);
       }
       &:hover {
         --button-surface: color-mix(in oklch, var(--button-text) 8%, transparent);
@@ -499,31 +381,16 @@
       }
     }
     &.tonal_icon:disabled {
-      --button-text: light-dark(
-        color-mix(in oklch, var(--color-light-on-surface) 38%, transparent),
-        color-mix(in oklch, var(--color-dark-on-surface) 38%, transparent)
-      );
-      --button-surface: light-dark(
-        color-mix(in oklch, var(--color-light-on-surface) 12%, transparent),
-        color-mix(in oklch, var(--color-dark-on-surface) 12%, transparent)
-      );
+      --button-text: color-mix(in oklch, var(--color-on-surface) 38%, transparent);
+      --button-surface: color-mix(in oklch, var(--color-on-surface) 12%, transparent);
     }
     &.outlined_icon:not(:disabled) {
-      --button-text: light-dark(
-        var(--color-light-on-surface-variant),
-        var(--color-dark-on-surface-variant)
-      );
+      --button-text: var(--color-on-surface-variant);
       --button-surface: transparent;
       border: 1px solid var(--button-outline);
       &.selected {
-        --button-text: light-dark(
-          var(--color-light-inverse-on-surface),
-          var(--color-dark-inverse-on-surface)
-        );
-        --button-surface: light-dark(
-          var(--color-light-inverse-surface),
-          var(--color-dark-inverse-surface)
-        );
+        --button-text: var(--color-inverse-on-surface);
+        --button-surface: var(--color-inverse-surface);
       }
       &:hover {
         --button-surface: color-mix(in oklch, var(--button-text) 8%, transparent);
@@ -534,34 +401,20 @@
       }
     }
     &.outlined_icon:disabled {
-      --button-text: light-dark(
-        color-mix(in oklch, var(--color-light-on-surface) 38%, transparent),
-        color-mix(in oklch, var(--color-dark-on-surface) 38%, transparent)
-      );
-      --button-surface: light-dark(
-        color-mix(in oklch, var(--color-light-on-surface) 12%, transparent),
-        color-mix(in oklch, var(--color-dark-on-surface) 12%, transparent)
-      );
-      border: 1px solid
-        light-dark(
-          color-mix(in oklch, var(--color-light-on-surface) 12%, transparent),
-          color-mix(in oklch, var(--color-dark-on-surface) 12%, transparent)
-        );
+      --button-text: color-mix(in oklch, var(--color-on-surface) 38%, transparent);
+      --button-surface: color-mix(in oklch, var(--color-on-surface) 12%, transparent);
+      border: 1px solid color-mix(in oklch, var(--color-on-surface) 12%, transparent);
     }
   }
 
   :where(input, textarea, select) {
     border: none;
-    border-bottom: 1px solid
-      light-dark(var(--color-light-on-surface-variant), var(--color-dark-on-surface-variant));
+    border-bottom: 1px solid var(--color-on-surface-variant);
     border-top-left-radius: calc(var(--border-radius) * 2);
     border-top-right-radius: calc(var(--border-radius) * 2);
     line-height: 1.5em;
-    color: light-dark(var(--color-light-on-surface), var(--color-dark-on-surface));
-    background-color: light-dark(
-      var(--color-light-surface-container-highest),
-      var(--color-dark-surface-container-highest)
-    );
+    color: var(--color-on-surface);
+    background-color: var(--color-surface-container-highest);
     .input_wrapper & {
       padding: 0;
       border: none;
@@ -588,9 +441,6 @@
     flex-direction: row;
     align-items: center;
     gap: calc(var(--spacing) * 2);
-    background-color: light-dark(
-      var(--color-light-surface-container-highest),
-      var(--color-dark-surface-container-highest)
-    );
+    background-color: var(--color-surface-container-highest);
   }
 }
diff --git a/src/components/PatternPreview.module.css b/src/components/PatternPreview.module.css
new file mode 100644
index 0000000..68a09d6
--- /dev/null
+++ b/src/components/PatternPreview.module.css
@@ -0,0 +1,21 @@
+@layer components {
+  .pattern_preview {
+    flex-basis: 140px;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    gap: calc(var(--spacing) * 2);
+    color: var(--color-on-surface);
+    background-color: var(--color-surface-container);
+    padding: calc(var(--spacing)) calc(var(--spacing) * 2);
+    border-radius: calc(var(--border-radius) * 2);
+    .canvas_wrapper {
+      flex: 1 0;
+      canvas {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+}
diff --git a/src/components/PatternPreview.tsx b/src/components/PatternPreview.tsx
index 03d0f24..fd8c024 100644
--- a/src/components/PatternPreview.tsx
+++ b/src/components/PatternPreview.tsx
@@ -1,9 +1,18 @@
 import { FC } from 'react';
+import styles from './PatternPreview.module.css';
+
+const canvasSafeBound = {
+  coordinate: { pt: 5.5, pr: 5.5, pb: 5.5, pl: 5.5 },
+  chart: { pt: 5.5, pr: 5.5, pb: 5.5, pl: 5.5 },
+};
 
 const PatternPreview: FC = () => {
   return (
-    <div>
-      <canvas />
+    <div className={styles.pattern_preview}>
+      <h4>Pattern Preview</h4>
+      <div>
+        <canvas />
+      </div>
     </div>
   );
 };
diff --git a/src/components/ScrollArea.module.css b/src/components/ScrollArea.module.css
index 654e145..e71bbb6 100644
--- a/src/components/ScrollArea.module.css
+++ b/src/components/ScrollArea.module.css
@@ -30,10 +30,7 @@
       aspect-ratio: 1 / 3;
       position: absolute;
       border-radius: calc(var(--border-radius) * 2);
-      background-color: light-dark(
-        color-mix(in oklch, var(--color-light-primary) 70%, transparent),
-        color-mix(in oklch, var(--color-dark-primary) 70%, transparent)
-      );
+      background-color: color-mix(in oklch, var(--color-primary) 70%, transparent);
       cursor: pointer;
     }
   }
@@ -47,10 +44,7 @@
       aspect-ratio: 3 / 1;
       position: absolute;
       border-radius: calc(var(--border-radius) * 2);
-      background-color: light-dark(
-        color-mix(in oklch, var(--color-light-primary) 70%, transparent),
-        color-mix(in oklch, var(--color-dark-primary) 70%, transparent)
-      );
+      background-color: color-mix(in oklch, var(--color-primary) 70%, transparent);
       cursor: pointer;
     }
   }
diff --git a/src/page-components/device/DeviceDetail.module.css b/src/page-components/device/DeviceDetail.module.css
index 4a03e9e..7061a9b 100644
--- a/src/page-components/device/DeviceDetail.module.css
+++ b/src/page-components/device/DeviceDetail.module.css
@@ -3,9 +3,6 @@
     flex: 2;
     border-radius: calc(var(--border-radius) * 2);
     padding: calc(var(--spacing) * 2);
-    background-color: light-dark(
-      var(--color-light-surface-container),
-      var(--color-dark-surface-container)
-    );
+    background-color: var(--color-surface-container);
   }
 }
diff --git a/src/page-components/device/DeviceList.module.css b/src/page-components/device/DeviceList.module.css
index 0ed2460..08b299e 100644
--- a/src/page-components/device/DeviceList.module.css
+++ b/src/page-components/device/DeviceList.module.css
@@ -24,8 +24,8 @@
       padding-inline: calc(var(--spacing) * 2);
       padding-block: calc(var(--spacing) * 3);
       border-radius: calc(var(--border-radius) * 2);
-      background-color: light-dark(var(--color-light-surface), var(--color-dark-surface));
-      color: light-dark(var(--color-light-on-surface), var(--color-dark-on-surface));
+      background-color: var(--color-surface);
+      color: var(--color-on-surface);
       display: flex;
       flex-direction: row;
       align-items: center;
@@ -37,20 +37,14 @@
         text-overflow: ellipsis;
       }
       &:hover {
-        background-color: light-dark(
-          color-mix(in oklch, var(--color-light-on-surface) 8%, transparent),
-          color-mix(in oklch, var(--color-dark-on-surface) 8%, transparent)
-        );
+        background-color: color-mix(in oklch, var(--color-on-surface) 8%, transparent);
       }
     }
     .empty_prompt {
       padding-block: calc(var(--spacing) * 1);
       text-align: center;
       font-size: calc(var(--font-size) * 0.8);
-      color: light-dark(
-        var(--color-light-on-surface-variant),
-        var(--color-dark-on-surface-variant)
-      );
+      color: var(--color-on-surface-variant);
     }
   }
 }
diff --git a/src/page-components/pattern-editor/PatternHeader.module.css b/src/page-components/pattern-editor/PatternHeader.module.css
index 549f52c..dd5da28 100644
--- a/src/page-components/pattern-editor/PatternHeader.module.css
+++ b/src/page-components/pattern-editor/PatternHeader.module.css
@@ -7,10 +7,7 @@
     gap: calc(var(--spacing) * 2);
     padding: calc(var(--spacing) * 2) calc(var(--spacing) * 4);
     border-radius: calc(var(--border-radius) * 2);
-    color: light-dark(var(--color-light-on-surface), var(--color-dark-on-surface));
-    background-color: light-dark(
-      var(--color-light-surface-container),
-      var(--color-dark-surface-container)
-    );
+    color: var(--color-light-on-surface);
+    background-color: var(--color-surface-container);
   }
 }
diff --git a/src/page-components/pattern-library/PatternDetail.module.css b/src/page-components/pattern-library/PatternDetail.module.css
index f824bca..c465ca3 100644
--- a/src/page-components/pattern-library/PatternDetail.module.css
+++ b/src/page-components/pattern-library/PatternDetail.module.css
@@ -2,9 +2,6 @@
   .pattern_detail {
     flex: 2;
     border-radius: calc(var(--border-radius) * 2);
-    background-color: light-dark(
-      var(--color-light-surface-container),
-      var(--color-dark-surface-container)
-    );
+    background-color: var(--color-surface-container);
   }
 }
diff --git a/src/page-components/pattern-library/Patterns.module.css b/src/page-components/pattern-library/Patterns.module.css
index a18ade9..94c2d18 100644
--- a/src/page-components/pattern-library/Patterns.module.css
+++ b/src/page-components/pattern-library/Patterns.module.css
@@ -5,9 +5,6 @@
     overflow: hidden;
     flex: 1;
     border-radius: calc(var(--border-radius) * 2);
-    background-color: light-dark(
-      var(--color-light-surface-container),
-      var(--color-dark-surface-container)
-    );
+    background-color: var(--color-surface-container);
   }
 }
diff --git a/src/page-components/play-control/ChannelHost.module.css b/src/page-components/play-control/ChannelHost.module.css
index ff3dc15..a9b12b6 100644
--- a/src/page-components/play-control/ChannelHost.module.css
+++ b/src/page-components/play-control/ChannelHost.module.css
@@ -3,10 +3,7 @@
     flex: 1;
     padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
     border-radius: calc(var(--border-radius) * 2);
-    background-color: light-dark(
-      var(--color-light-surface-container),
-      var(--color-dark-surface-container)
-    );
+    background-color: var(--color-surface-container);
     display: flex;
     flex-direction: column;
     gap: calc(var(--spacing));
diff --git a/src/pages/Device.module.css b/src/pages/Device.module.css
index 8b31cc3..a2f05c5 100644
--- a/src/pages/Device.module.css
+++ b/src/pages/Device.module.css
@@ -6,9 +6,6 @@
     align-items: stretch;
     gap: calc(var(--spacing) * 2);
     border-radius: calc(var(--border-radius) * 2);
-    background-color: light-dark(
-      var(--color-light-surface-container),
-      var(--color-dark-surface-container)
-    );
+    background-color: var(--color-surface-container);
   }
 }
diff --git a/src/pages/PatternEditor.module.css b/src/pages/PatternEditor.module.css
index 7a15b36..72dca72 100644
--- a/src/pages/PatternEditor.module.css
+++ b/src/pages/PatternEditor.module.css
@@ -1,9 +1,9 @@
 @layer pages {
-  .pattern_editor_layout {
+  .pattern_editor_content {
+    flex: 1 0;
+    padding: 0;
     display: flex;
-    flex-direction: column;
-    min-height: 0;
-    min-width: 0;
+    flex-direction: row;
     align-items: stretch;
     gap: calc(var(--spacing) * 4);
   }
diff --git a/src/theme.css b/src/theme.css
index ae371f6..0c6ba0d 100644
--- a/src/theme.css
+++ b/src/theme.css
@@ -35,8 +35,8 @@
 
   body {
     position: relative;
-    color: light-dark(var(--color-light-on-surface), var(--color-dark-on-surface));
-    background-color: light-dark(var(--color-light-surface), var(--color-dark-surface));
+    color: var(--color-on-surface);
+    background-color: var(--color-surface);
   }
 
   :where(h1, h2, h3, h4, h5, h6, p, div, span) {
diff --git a/src/variables.css b/src/variables.css
index 372336f..86b8019 100644
--- a/src/variables.css
+++ b/src/variables.css
@@ -4,220 +4,131 @@
 
     --color-white: #ffffff;
     --color-black: #000000;
-    --color-light-primary: #744c1f;
-    --color-light-on-primary: #fff5c0;
-    --color-light-primary-container: #95693b;
-    --color-light-on-primary-container: #fff5c0;
-    --color-light-primary-fixed: #95693b;
-    --color-light-primary-fixed-dim: #7a5124;
-    --color-light-on-primary-fixed: #fff5c0;
-    --color-light-on-primary-fixed-variant: #fff5c0;
-    --color-light-inverse-primary: #6f481b;
-    --color-light-secondary: #67513b;
-    --color-light-on-secondary: #fffae0;
-    --color-light-secondary-container: #866e57;
-    --color-light-on-secondary-container: #fffae0;
-    --color-light-secondary-fixed: #866e57;
-    --color-light-secondary-fixed-dim: #6c5540;
-    --color-light-on-secondary-fixed: #fffae0;
-    --color-light-on-secondary-fixed-variant: #fffae0;
-    --color-light-inverse-secondary: #dec1a8;
-    --color-light-tertiary: #5c561a;
-    --color-light-on-tertiary: #ffffbb;
-    --color-light-tertiary-container: #7b7436;
-    --color-light-on-tertiary-container: #ffffbb;
-    --color-light-tertiary-fixed: #7b7436;
-    --color-light-tertiary-fixed-dim: #615b1f;
-    --color-light-on-tertiary-fixed: #ffffbb;
-    --color-light-on-tertiary-fixed-variant: #ffffbb;
-    --color-light-inverse-tertiary: #d3c886;
-    --color-light-error: #b20000;
-    --color-light-on-error: #ffc89b;
-    --color-light-error-container: #d92f18;
-    --color-light-on-error-container: #ffc89b;
-    --color-light-error-fixed: #ffab80;
-    --color-light-error-fixed-dim: #ff8e66;
-    --color-light-on-error-fixed: #640000;
-    --color-light-on-error-fixed-variant: #9f0000;
-    --color-light-inverse-error: #ff8e66;
-    --color-light-surface: #fff8f1;
-    --color-light-surface-dim: #bfb7b1;
-    --color-light-surface-bright: #fff8f1;
-    --color-light-surface-variant: #efe0d4;
-    --color-light-surface-container: #e9e1db;
-    --color-light-surface-container-lowest: #fffef7;
-    --color-light-surface-container-low: #f7efe9;
-    --color-light-surface-container-high: #dbd3cd;
-    --color-light-surface-container-highest: #cdc5bf;
-    --color-light-on-surface: #090000;
-    --color-light-on-surface-variant: #41362d;
-    --color-light-inverse-surface: #f7efe9;
-    --color-light-inverse-on-surface: #090000;
-    --color-light-outline: #5f5349;
-    --color-light-outline-variant: #7d7065;
-    --color-light-scrim: #090000;
-    --color-light-shadow: #090000;
-    --color-light-warning: #834600;
-    --color-light-on-warning: #ffed93;
-    --color-light-warning-container: #a66204;
-    --color-light-on-warning-container: #ffed93;
-    --color-light-warning-fixed: #a66204;
-    --color-light-warning-fixed-dim: #884a00;
-    --color-light-on-warning-fixed: #ffed93;
-    --color-light-on-warning-fixed-variant: #ffed93;
-    --color-light-inverse-warning: #5b2300;
-    --color-light-defensive: #7131b4;
-    --color-light-on-defensive: #ffdeff;
-    --color-light-defensive-container: #9350d6;
-    --color-light-on-defensive-container: #ffdeff;
-    --color-light-defensive-fixed: #9350d6;
-    --color-light-defensive-fixed-dim: #7737ba;
-    --color-light-on-defensive-fixed: #ffdeff;
-    --color-light-on-defensive-fixed-variant: #ffdeff;
-    --color-light-inverse-defensive: #47038c;
-    --color-light-aggressive: #b6002d;
-    --color-light-on-aggressive: #ffc3cc;
-    --color-light-aggressive-container: #dc2247;
-    --color-light-on-aggressive-container: #ffc3cc;
-    --color-light-aggressive-fixed: #dc2247;
-    --color-light-aggressive-fixed-dim: #bd0031;
-    --color-light-on-aggressive-fixed: #ffc3cc;
-    --color-light-on-aggressive-fixed-variant: #ffc3cc;
-    --color-light-inverse-aggressive: #88000e;
-    --color-light-gentle: #7c4b00;
-    --color-light-on-gentle: #fff25f;
-    --color-light-gentle-container: #9e6700;
-    --color-light-on-gentle-container: #fff25f;
-    --color-light-gentle-fixed: #9e6700;
-    --color-light-gentle-fixed-dim: #814f00;
-    --color-light-on-gentle-fixed: #fff25f;
-    --color-light-on-gentle-fixed-variant: #fff25f;
-    --color-light-inverse-gentle: #562900;
-    --color-light-success: #1c6300;
-    --color-light-on-success: #d6ff6a;
-    --color-light-success-container: #3f8200;
-    --color-light-on-success-container: #d6ff6a;
-    --color-light-success-fixed: #3f8200;
-    --color-light-success-fixed-dim: #226800;
-    --color-light-on-success-fixed: #d6ff6a;
-    --color-light-on-success-fixed-variant: #d6ff6a;
-    --color-light-inverse-success: #053f00;
-    --color-light-info: #225694;
-    --color-light-on-info: #ddffff;
-    --color-light-info-container: #4973b4;
-    --color-light-on-info-container: #ddffff;
-    --color-light-info-fixed: #4973b4;
-    --color-light-info-fixed-dim: #2a5a99;
-    --color-light-on-info-fixed: #ddffff;
-    --color-light-on-info-fixed-variant: #ddffff;
-    --color-light-inverse-info: #00346e;
-    --color-dark-primary: #ffe6b1;
-    --color-dark-on-primary: #280000;
-    --color-dark-primary-container: #ecb986;
-    --color-dark-on-primary-container: #2b0000;
-    --color-dark-primary-fixed: #ffd8a5;
-    --color-dark-primary-fixed-dim: #f1bd8a;
-    --color-dark-on-primary-fixed: #280000;
-    --color-dark-on-primary-fixed-variant: #2d0600;
-    --color-dark-inverse-primary: #e8b482;
-    --color-dark-secondary: #ffebd1;
-    --color-dark-on-secondary: #1a0000;
-    --color-dark-secondary-container: #dabea5;
-    --color-dark-on-secondary-container: #1f0500;
-    --color-dark-secondary-fixed: #fbddc4;
-    --color-dark-secondary-fixed-dim: #dec1a8;
-    --color-dark-on-secondary-fixed: #1a0000;
-    --color-dark-on-secondary-fixed-variant: #220c00;
-    --color-dark-inverse-secondary: #715a44;
-    --color-dark-tertiary: #fef1ad;
-    --color-dark-on-tertiary: #150100;
-    --color-dark-tertiary-container: #cfc482;
-    --color-dark-on-tertiary-container: #1b0c00;
-    --color-dark-tertiary-fixed: #f0e4a0;
-    --color-dark-tertiary-fixed-dim: #d3c886;
-    --color-dark-on-tertiary-fixed: #150100;
-    --color-dark-on-tertiary-fixed-variant: #1e1200;
-    --color-dark-inverse-tertiary: #666023;
-    --color-dark-error: #ffb88d;
-    --color-dark-on-error: #4e0000;
-    --color-dark-error-container: #ff8a63;
-    --color-dark-on-error-container: #540000;
-    --color-dark-error-fixed: #ffab80;
-    --color-dark-error-fixed-dim: #ff8e66;
-    --color-dark-on-error-fixed: #640000;
-    --color-dark-on-error-fixed-variant: #9f0000;
-    --color-dark-inverse-error: #bf0902;
-    --color-dark-surface: #18120c;
-    --color-dark-surface-dim: #18120c;
-    --color-dark-surface-bright: #554f4a;
-    --color-dark-surface-variant: #50453b;
-    --color-dark-surface-container: #352f2a;
-    --color-dark-surface-container-lowest: #090000;
-    --color-dark-surface-container-low: #241f1a;
-    --color-dark-surface-container-high: #403a35;
-    --color-dark-surface-container-highest: #4c4640;
-    --color-dark-on-surface: #fffef7;
-    --color-dark-on-surface-variant: #fffdf0;
-    --color-dark-inverse-surface: #352f2a;
-    --color-dark-inverse-on-surface: #fffef7;
-    --color-dark-outline: #fcede1;
-    --color-dark-outline-variant: #cec0b4;
-    --color-dark-scrim: #090000;
-    --color-dark-shadow: #090000;
-    --color-dark-defensive: #ffcfff;
-    --color-dark-on-defensive: #050055;
-    --color-dark-defensive-container: #eca2ff;
-    --color-dark-on-defensive-container: #0d005d;
-    --color-dark-defensive-fixed: #ffc1ff;
-    --color-dark-defensive-fixed-dim: #f0a5ff;
-    --color-dark-on-defensive-fixed: #050055;
-    --color-dark-on-defensive-fixed-variant: #140062;
-    --color-dark-inverse-defensive: #ffcbff;
-    --color-dark-warning: #ffde85;
-    --color-dark-on-warning: #350000;
-    --color-dark-warning-container: #ffb15b;
-    --color-dark-on-warning-container: #380000;
-    --color-dark-warning-fixed: #ffd179;
-    --color-dark-warning-fixed-dim: #ffb55e;
-    --color-dark-on-warning-fixed: #350000;
-    --color-dark-on-warning-fixed-variant: #3a0000;
-    --color-dark-inverse-warning: #ffda82;
-    --color-dark-gentle: #ffe350;
-    --color-dark-on-gentle: #370000;
-    --color-dark-gentle-container: #fcb61a;
-    --color-dark-on-gentle-container: #390000;
-    --color-dark-gentle-fixed: #ffd642;
-    --color-dark-gentle-fixed-dim: #ffba20;
-    --color-dark-on-gentle-fixed: #370000;
-    --color-dark-on-gentle-fixed-variant: #3b0000;
-    --color-dark-inverse-gentle: #ffdf4c;
-    --color-dark-info: #cef0ff;
-    --color-dark-on-info: #00013a;
-    --color-dark-info-container: #9fc3ff;
-    --color-dark-on-info-container: #000d41;
-    --color-dark-info-fixed: #c0e2ff;
-    --color-dark-info-fixed-dim: #a3c6ff;
-    --color-dark-on-info-fixed: #00013a;
-    --color-dark-on-info-fixed-variant: #001346;
-    --color-dark-inverse-info: #caecff;
-    --color-dark-aggressive: #ffb3bd;
-    --color-dark-on-aggressive: #4d0000;
-    --color-dark-aggressive-container: #ff8492;
-    --color-dark-on-aggressive-container: #540000;
-    --color-dark-aggressive-fixed: #ffa6b0;
-    --color-dark-aggressive-fixed-dim: #ff8896;
-    --color-dark-on-aggressive-fixed: #4d0000;
-    --color-dark-on-aggressive-fixed-variant: #590000;
-    --color-dark-inverse-aggressive: #ffafba;
-    --color-dark-success: #c7ff5b;
-    --color-dark-on-success: #001600;
-    --color-dark-success-container: #97d529;
-    --color-dark-on-success-container: #001c00;
-    --color-dark-success-fixed: #b9f54d;
-    --color-dark-success-fixed-dim: #9cd92e;
-    --color-dark-on-success-fixed: #001600;
-    --color-dark-on-success-fixed-variant: #001f00;
-    --color-dark-inverse-success: #c2ff57;
+    --color-primary: light-dark(#744c1f, #ffe6b1);
+    --color-on-primary: light-dark(#fff5c0, #280000);
+    --color-primary-container: light-dark(#95693b, #ecb986);
+    --color-on-primary-container: light-dark(#fff5c0, #2b0000);
+    --color-primary-fixed: light-dark(#95693b, #ffd8a5);
+    --color-primary-fixed-dim: light-dark(#7a5124, #f1bd8a);
+    --color-on-primary-fixed: light-dark(#fff5c0, #280000);
+    --color-on-primary-fixed-variant: light-dark(#fff5c0, #2d0600);
+    --color-inverse-primary: light-dark(#6f481b, #e8b482);
+    --color-secondary: light-dark(#67513b, #ffebd1);
+    --color-on-secondary: light-dark(#fffae0, #1a0000);
+    --color-secondary-container: light-dark(#866e57, #dabea5);
+    --color-on-secondary-container: light-dark(#fffae0, #1f0500);
+    --color-secondary-fixed: light-dark(#866e57, #fbddc4);
+    --color-secondary-fixed-dim: light-dark(#6c5540, #dec1a8);
+    --color-on-secondary-fixed: light-dark(#fffae0, #1a0000);
+    --color-on-secondary-fixed-variant: light-dark(#fffae0, #220c00);
+    --color-inverse-secondary: light-dark(#dec1a8, #715a44);
+    --color-tertiary: light-dark(#5c561a, #fef1ad);
+    --color-on-tertiary: light-dark(#ffffbb, #150100);
+    --color-tertiary-container: light-dark(#7b7436, #cfc482);
+    --color-on-tertiary-container: light-dark(#ffffbb, #1b0c00);
+    --color-tertiary-fixed: light-dark(#7b7436, #f0e4a0);
+    --color-tertiary-fixed-dim: light-dark(#615b1f, #d3c886);
+    --color-on-tertiary-fixed: light-dark(#ffffbb, #150100);
+    --color-on-tertiary-fixed-variant: light-dark(#ffffbb, #1e1200);
+    --color-inverse-tertiary: light-dark(#d3c886, #666023);
+    --color-error: light-dark(#b20000, #ffb88d);
+    --color-on-error: light-dark(#ffc89b, #4e0000);
+    --color-error-container: light-dark(#d92f18, #ff8a63);
+    --color-on-error-container: light-dark(#ffc89b, #540000);
+    --color-error-fixed: light-dark(#ffab80, #ffab80);
+    --color-error-fixed-dim: light-dark(#ff8e66, #ff8e66);
+    --color-on-error-fixed: light-dark(#640000, #640000);
+    --color-on-error-fixed-variant: light-dark(#9f0000, #9f0000);
+    --color-inverse-error: light-dark(#ff8e66, #bf0902);
+    --color-surface: light-dark(#fff8f1, #18120c);
+    --color-surface-dim: light-dark(#bfb7b1, #18120c);
+    --color-surface-bright: light-dark(#fff8f1, #554f4a);
+    --color-surface-variant: light-dark(#efe0d4, #50453b);
+    --color-surface-container: light-dark(#e9e1db, #352f2a);
+    --color-surface-container-lowest: light-dark(#fffef7, #090000);
+    --color-surface-container-low: light-dark(#f7efe9, #241f1a);
+    --color-surface-container-high: light-dark(#dbd3cd, #403a35);
+    --color-surface-container-highest: light-dark(#cdc5bf, #4c4640);
+    --color-on-surface: light-dark(#090000, #fffef7);
+    --color-on-surface-variant: light-dark(#41362d, #fffdf0);
+    --color-inverse-surface: light-dark(#f7efe9, #352f2a);
+    --color-inverse-on-surface: light-dark(#090000, #fffef7);
+    --color-outline: light-dark(#5f5349, #fcede1);
+    --color-outline-variant: light-dark(#7d7065, #cec0b4);
+    --color-scrim: light-dark(#090000, #090000);
+    --color-shadow: light-dark(#090000, #090000);
+    --color-aggressive: light-dark(#b6002d, #ffb3bd);
+    --color-on-aggressive: light-dark(#ffc3cc, #4d0000);
+    --color-aggressive-container: light-dark(#dc2247, #ff8492);
+    --color-on-aggressive-container: light-dark(#ffc3cc, #540000);
+    --color-aggressive-fixed: light-dark(#dc2247, #ffa6b0);
+    --color-aggressive-fixed-dim: light-dark(#bd0031, #ff8896);
+    --color-on-aggressive-fixed: light-dark(#ffc3cc, #4d0000);
+    --color-on-aggressive-fixed-variant: light-dark(#ffc3cc, #590000);
+    --color-inverse-aggressive: light-dark(#88000e, #ffafba);
+    --color-warning: light-dark(#834600, #ffde85);
+    --color-on-warning: light-dark(#ffed93, #350000);
+    --color-warning-container: light-dark(#a66204, #ffb15b);
+    --color-on-warning-container: light-dark(#ffed93, #380000);
+    --color-warning-fixed: light-dark(#a66204, #ffd179);
+    --color-warning-fixed-dim: light-dark(#884a00, #ffb55e);
+    --color-on-warning-fixed: light-dark(#ffed93, #350000);
+    --color-on-warning-fixed-variant: light-dark(#ffed93, #3a0000);
+    --color-inverse-warning: light-dark(#5b2300, #ffda82);
+    --color-success: light-dark(#1c6300, #c7ff5b);
+    --color-on-success: light-dark(#d6ff6a, #001600);
+    --color-success-container: light-dark(#3f8200, #97d529);
+    --color-on-success-container: light-dark(#d6ff6a, #001c00);
+    --color-success-fixed: light-dark(#3f8200, #b9f54d);
+    --color-success-fixed-dim: light-dark(#226800, #9cd92e);
+    --color-on-success-fixed: light-dark(#d6ff6a, #001600);
+    --color-on-success-fixed-variant: light-dark(#d6ff6a, #001f00);
+    --color-inverse-success: light-dark(#053f00, #c2ff57);
+    --color-info: light-dark(#225694, #cef0ff);
+    --color-on-info: light-dark(#ddffff, #00013a);
+    --color-info-container: light-dark(#4973b4, #9fc3ff);
+    --color-on-info-container: light-dark(#ddffff, #000d41);
+    --color-info-fixed: light-dark(#4973b4, #c0e2ff);
+    --color-info-fixed-dim: light-dark(#2a5a99, #a3c6ff);
+    --color-on-info-fixed: light-dark(#ddffff, #00013a);
+    --color-on-info-fixed-variant: light-dark(#ddffff, #001346);
+    --color-inverse-info: light-dark(#00346e, #caecff);
+    --color-gentle: light-dark(#7c4b00, #ffe350);
+    --color-on-gentle: light-dark(#fff25f, #370000);
+    --color-gentle-container: light-dark(#9e6700, #fcb61a);
+    --color-on-gentle-container: light-dark(#fff25f, #390000);
+    --color-gentle-fixed: light-dark(#9e6700, #ffd642);
+    --color-gentle-fixed-dim: light-dark(#814f00, #ffba20);
+    --color-on-gentle-fixed: light-dark(#fff25f, #370000);
+    --color-on-gentle-fixed-variant: light-dark(#fff25f, #3b0000);
+    --color-inverse-gentle: light-dark(#562900, #ffdf4c);
+    --color-defensive: light-dark(#7131b4, #ffcfff);
+    --color-on-defensive: light-dark(#ffdeff, #050055);
+    --color-defensive-container: light-dark(#9350d6, #eca2ff);
+    --color-on-defensive-container: light-dark(#ffdeff, #0d005d);
+    --color-defensive-fixed: light-dark(#9350d6, #ffc1ff);
+    --color-defensive-fixed-dim: light-dark(#7737ba, #f0a5ff);
+    --color-on-defensive-fixed: light-dark(#ffdeff, #050055);
+    --color-on-defensive-fixed-variant: light-dark(#ffdeff, #140062);
+    --color-inverse-defensive: light-dark(#47038c, #ffcbff);
+    --color-swatch-primary-0: #280000;
+    --color-swatch-primary-5: #2d0600;
+    --color-swatch-primary-10: #351300;
+    --color-swatch-primary-15: #3f1e00;
+    --color-swatch-primary-20: #4a2800;
+    --color-swatch-primary-25: #573305;
+    --color-swatch-primary-30: #643e11;
+    --color-swatch-primary-35: #714a1d;
+    --color-swatch-primary-40: #7f5628;
+    --color-swatch-primary-50: #9a6e3f;
+    --color-swatch-primary-60: #b78757;
+    --color-swatch-primary-70: #d3a270;
+    --color-swatch-primary-80: #f1bd8a;
+    --color-swatch-primary-90: #ffd8a5;
+    --color-swatch-primary-95: #ffe7b2;
+    --color-swatch-primary-98: #ffefba;
+    --color-swatch-primary-99: #fff2bd;
+    --color-swatch-primary-100: #fff5c0;
     --color-swatch-aggressive-0: #4d0000;
     --color-swatch-aggressive-5: #580000;
     --color-swatch-aggressive-10: #660000;
@@ -254,42 +165,42 @@
     --color-swatch-neutral-variant-98: #fff7ea;
     --color-swatch-neutral-variant-99: #fffaed;
     --color-swatch-neutral-variant-100: #fffdf0;
-    --color-swatch-primary-0: #280000;
-    --color-swatch-primary-5: #2d0600;
-    --color-swatch-primary-10: #351300;
-    --color-swatch-primary-15: #3f1e00;
-    --color-swatch-primary-20: #4a2800;
-    --color-swatch-primary-25: #573305;
-    --color-swatch-primary-30: #643e11;
-    --color-swatch-primary-35: #714a1d;
-    --color-swatch-primary-40: #7f5628;
-    --color-swatch-primary-50: #9a6e3f;
-    --color-swatch-primary-60: #b78757;
-    --color-swatch-primary-70: #d3a270;
-    --color-swatch-primary-80: #f1bd8a;
-    --color-swatch-primary-90: #ffd8a5;
-    --color-swatch-primary-95: #ffe7b2;
-    --color-swatch-primary-98: #ffefba;
-    --color-swatch-primary-99: #fff2bd;
-    --color-swatch-primary-100: #fff5c0;
-    --color-swatch-error-0: #4e0000;
-    --color-swatch-error-5: #580000;
-    --color-swatch-error-10: #640000;
-    --color-swatch-error-15: #720000;
-    --color-swatch-error-20: #810000;
-    --color-swatch-error-25: #900000;
-    --color-swatch-error-30: #9f0000;
-    --color-swatch-error-35: #af0000;
-    --color-swatch-error-40: #bf0902;
-    --color-swatch-error-50: #df361d;
-    --color-swatch-error-60: #ff5435;
-    --color-swatch-error-70: #ff714d;
-    --color-swatch-error-80: #ff8e66;
-    --color-swatch-error-90: #ffab80;
-    --color-swatch-error-95: #ffb98d;
-    --color-swatch-error-98: #ffc295;
-    --color-swatch-error-99: #ffc598;
-    --color-swatch-error-100: #ffc89b;
+    --color-swatch-defensive-0: #050055;
+    --color-swatch-defensive-5: #130062;
+    --color-swatch-defensive-10: #25006e;
+    --color-swatch-defensive-15: #35007b;
+    --color-swatch-defensive-20: #440089;
+    --color-swatch-defensive-25: #521296;
+    --color-swatch-defensive-30: #6021a4;
+    --color-swatch-defensive-35: #6e2eb1;
+    --color-swatch-defensive-40: #7c3cbf;
+    --color-swatch-defensive-50: #9855db;
+    --color-swatch-defensive-60: #b56ff8;
+    --color-swatch-defensive-70: #d28aff;
+    --color-swatch-defensive-80: #f0a5ff;
+    --color-swatch-defensive-90: #ffc1ff;
+    --color-swatch-defensive-95: #ffcfff;
+    --color-swatch-defensive-98: #ffd8ff;
+    --color-swatch-defensive-99: #ffdbff;
+    --color-swatch-defensive-100: #ffdeff;
+    --color-swatch-neutral-0: #090000;
+    --color-swatch-neutral-5: #161008;
+    --color-swatch-neutral-10: #201b16;
+    --color-swatch-neutral-15: #2a2520;
+    --color-swatch-neutral-20: #352f2a;
+    --color-swatch-neutral-25: #403a35;
+    --color-swatch-neutral-30: #4c4640;
+    --color-swatch-neutral-35: #58514c;
+    --color-swatch-neutral-40: #645d58;
+    --color-swatch-neutral-50: #7d7670;
+    --color-swatch-neutral-60: #978f89;
+    --color-swatch-neutral-70: #b1aaa4;
+    --color-swatch-neutral-80: #cdc5bf;
+    --color-swatch-neutral-90: #e9e1db;
+    --color-swatch-neutral-95: #f7efe9;
+    --color-swatch-neutral-98: #fff8f1;
+    --color-swatch-neutral-99: #fffbf4;
+    --color-swatch-neutral-100: #fffef7;
     --color-swatch-secondary-0: #1a0000;
     --color-swatch-secondary-5: #220c00;
     --color-swatch-secondary-10: #2a1800;
@@ -308,6 +219,24 @@
     --color-swatch-secondary-98: #fff4da;
     --color-swatch-secondary-99: #fff7dd;
     --color-swatch-secondary-100: #fffae0;
+    --color-swatch-gentle-0: #370000;
+    --color-swatch-gentle-5: #3b0000;
+    --color-swatch-gentle-10: #410f00;
+    --color-swatch-gentle-15: #4a1b00;
+    --color-swatch-gentle-20: #542600;
+    --color-swatch-gentle-25: #5f3100;
+    --color-swatch-gentle-30: #6b3c00;
+    --color-swatch-gentle-35: #794800;
+    --color-swatch-gentle-40: #865400;
+    --color-swatch-gentle-50: #a36c00;
+    --color-swatch-gentle-60: #c28500;
+    --color-swatch-gentle-70: #e19f00;
+    --color-swatch-gentle-80: #ffba20;
+    --color-swatch-gentle-90: #ffd642;
+    --color-swatch-gentle-95: #ffe451;
+    --color-swatch-gentle-98: #ffec5a;
+    --color-swatch-gentle-99: #ffef5d;
+    --color-swatch-gentle-100: #fff25f;
     --color-swatch-success-0: #001600;
     --color-swatch-success-5: #001f00;
     --color-swatch-success-10: #062600;
@@ -362,24 +291,6 @@
     --color-swatch-tertiary-98: #fffbb6;
     --color-swatch-tertiary-99: #fffdb9;
     --color-swatch-tertiary-100: #ffffbb;
-    --color-swatch-neutral-0: #090000;
-    --color-swatch-neutral-5: #161008;
-    --color-swatch-neutral-10: #201b16;
-    --color-swatch-neutral-15: #2a2520;
-    --color-swatch-neutral-20: #352f2a;
-    --color-swatch-neutral-25: #403a35;
-    --color-swatch-neutral-30: #4c4640;
-    --color-swatch-neutral-35: #58514c;
-    --color-swatch-neutral-40: #645d58;
-    --color-swatch-neutral-50: #7d7670;
-    --color-swatch-neutral-60: #978f89;
-    --color-swatch-neutral-70: #b1aaa4;
-    --color-swatch-neutral-80: #cdc5bf;
-    --color-swatch-neutral-90: #e9e1db;
-    --color-swatch-neutral-95: #f7efe9;
-    --color-swatch-neutral-98: #fff8f1;
-    --color-swatch-neutral-99: #fffbf4;
-    --color-swatch-neutral-100: #fffef7;
     --color-swatch-info-0: #00013a;
     --color-swatch-info-5: #001346;
     --color-swatch-info-10: #001d52;
@@ -398,42 +309,24 @@
     --color-swatch-info-98: #d7f9ff;
     --color-swatch-info-99: #dafcff;
     --color-swatch-info-100: #ddffff;
-    --color-swatch-defensive-0: #050055;
-    --color-swatch-defensive-5: #130062;
-    --color-swatch-defensive-10: #25006e;
-    --color-swatch-defensive-15: #35007b;
-    --color-swatch-defensive-20: #440089;
-    --color-swatch-defensive-25: #521296;
-    --color-swatch-defensive-30: #6021a4;
-    --color-swatch-defensive-35: #6e2eb1;
-    --color-swatch-defensive-40: #7c3cbf;
-    --color-swatch-defensive-50: #9855db;
-    --color-swatch-defensive-60: #b56ff8;
-    --color-swatch-defensive-70: #d28aff;
-    --color-swatch-defensive-80: #f0a5ff;
-    --color-swatch-defensive-90: #ffc1ff;
-    --color-swatch-defensive-95: #ffcfff;
-    --color-swatch-defensive-98: #ffd8ff;
-    --color-swatch-defensive-99: #ffdbff;
-    --color-swatch-defensive-100: #ffdeff;
-    --color-swatch-gentle-0: #370000;
-    --color-swatch-gentle-5: #3b0000;
-    --color-swatch-gentle-10: #410f00;
-    --color-swatch-gentle-15: #4a1b00;
-    --color-swatch-gentle-20: #542600;
-    --color-swatch-gentle-25: #5f3100;
-    --color-swatch-gentle-30: #6b3c00;
-    --color-swatch-gentle-35: #794800;
-    --color-swatch-gentle-40: #865400;
-    --color-swatch-gentle-50: #a36c00;
-    --color-swatch-gentle-60: #c28500;
-    --color-swatch-gentle-70: #e19f00;
-    --color-swatch-gentle-80: #ffba20;
-    --color-swatch-gentle-90: #ffd642;
-    --color-swatch-gentle-95: #ffe451;
-    --color-swatch-gentle-98: #ffec5a;
-    --color-swatch-gentle-99: #ffef5d;
-    --color-swatch-gentle-100: #fff25f;
+    --color-swatch-error-0: #4e0000;
+    --color-swatch-error-5: #580000;
+    --color-swatch-error-10: #640000;
+    --color-swatch-error-15: #720000;
+    --color-swatch-error-20: #810000;
+    --color-swatch-error-25: #900000;
+    --color-swatch-error-30: #9f0000;
+    --color-swatch-error-35: #af0000;
+    --color-swatch-error-40: #bf0902;
+    --color-swatch-error-50: #df361d;
+    --color-swatch-error-60: #ff5435;
+    --color-swatch-error-70: #ff714d;
+    --color-swatch-error-80: #ff8e66;
+    --color-swatch-error-90: #ffab80;
+    --color-swatch-error-95: #ffb98d;
+    --color-swatch-error-98: #ffc295;
+    --color-swatch-error-99: #ffc598;
+    --color-swatch-error-100: #ffc89b;
 
     --spacing: 4px;
     --border-radius: 2px;
@@ -441,55 +334,15 @@
     --line-height: 1.2em;
 
     --elevation-0: none;
-    --elevation-1-ambient: 0 1px 3px 1px
-      light-dark(
-        color-mix(in oklch, var(--color-light-shadow) 15%, transparent),
-        color-mix(in oklch, var(--color-dark-shadow) 15%, transparent)
-      );
-    --elevation-1-umbra: 0 1px 2px 0px
-      light-dark(
-        color-mix(in oklch, var(--color-light-shadow) 30%, transparent),
-        color-mix(in oklch, var(--color-dark-shadow) 30%, transparent)
-      );
-    --elevation-2-ambient: 0 2px 6px 2px
-      light-dark(
-        color-mix(in oklch, var(--color-light-shadow) 15%, transparent),
-        color-mix(in oklch, var(--color-dark-shadow) 15%, transparent)
-      );
-    --elevation-2-umbra: 0 1px 2px 0px
-      light-dark(
-        color-mix(in oklch, var(--color-light-shadow) 30%, transparent),
-        color-mix(in oklch, var(--color-dark-shadow) 30%, transparent)
-      );
-    --elevation-3-ambient: 0 4px 8px 3px
-      light-dark(
-        color-mix(in oklch, var(--color-light-shadow) 15%, transparent),
-        color-mix(in oklch, var(--color-dark-shadow) 15%, transparent)
-      );
-    --elevation-3-umbra: 0 1px 3px 0px
-      light-dark(
-        color-mix(in oklch, var(--color-light-shadow) 30%, transparent),
-        color-mix(in oklch, var(--color-dark-shadow) 30%, transparent)
-      );
-    --elevation-4-ambient: 0 6px 10px 4px
-      light-dark(
-        color-mix(in oklch, var(--color-light-shadow) 15%, transparent),
-        color-mix(in oklch, var(--color-dark-shadow) 15%, transparent)
-      );
-    --elevation-4-umbra: 0 2px 3px 0px
-      light-dark(
-        color-mix(in oklch, var(--color-light-shadow) 30%, transparent),
-        color-mix(in oklch, var(--color-dark-shadow) 30%, transparent)
-      );
-    --elevation-5-ambient: 0 8px 12px 6px
-      light-dark(
-        color-mix(in oklch, var(--color-light-shadow) 15%, transparent),
-        color-mix(in oklch, var(--color-dark-shadow) 15%, transparent)
-      );
-    --elevation-5-umbra: 0 4px 4px 0px
-      light-dark(
-        color-mix(in oklch, var(--color-light-shadow) 30%, transparent),
-        color-mix(in oklch, var(--color-dark-shadow) 30%, transparent)
-      );
+    --elevation-1-ambient: 0 1px 3px 1px color-mix(in oklch, var(--color-shadow) 15%, transparent);
+    --elevation-1-umbra: 0 1px 2px 0px color-mix(in oklch, var(--color-shadow) 30%, transparent);
+    --elevation-2-ambient: 0 2px 6px 2px color-mix(in oklch, var(--color-shadow) 15%, transparent);
+    --elevation-2-umbra: 0 1px 2px 0px color-mix(in oklch, var(--color-shadow) 30%, transparent);
+    --elevation-3-ambient: 0 4px 8px 3px color-mix(in oklch, var(--color-shadow) 15%, transparent);
+    --elevation-3-umbra: 0 1px 3px 0px color-mix(in oklch, var(--color-shadow) 30%, transparent);
+    --elevation-4-ambient: 0 6px 10px 4px color-mix(in oklch, var(--color-shadow) 15%, transparent);
+    --elevation-4-umbra: 0 2px 3px 0px color-mix(in oklch, var(--color-shadow) 30%, transparent);
+    --elevation-5-ambient: 0 8px 12px 6px color-mix(in oklch, var(--color-shadow) 15%, transparent);
+    --elevation-5-umbra: 0 4px 4px 0px color-mix(in oklch, var(--color-shadow) 30%, transparent);
   }
 }