@dialpad/dialtone-css 8.80.0-next.7 → 8.80.0-next.8

package/lib/dist/dialtone-default-theme.css

@@ -1234,6 +1234,9 @@
   .d-box--pbe-800 {
     --box-pbe: var(--dt-spacing-800);
   }
+  .d-box--surface-overlay {
+    --box-surface: var(--dt-color-surface-overlay);
+  }
   .d-box--surface-primary {
     --box-surface: var(--dt-color-surface-primary);
   }
@@ -1621,20 +1624,17 @@
   .d-box--br-circle {
     --box-br: var(--dt-size-radius-circle);
   }
-  .d-box--shadow-small {
-    --box-shadow: var(--dt-shadow-small);
-  }
-  .d-box--shadow-medium {
-    --box-shadow: var(--dt-shadow-medium);
+  .d-box--shadow-raised {
+    --box-shadow: var(--dt-shadow-raised);
   }
-  .d-box--shadow-large {
-    --box-shadow: var(--dt-shadow-large);
+  .d-box--shadow-overlay {
+    --box-shadow: var(--dt-shadow-overlay);
   }
-  .d-box--shadow-extra-large {
-    --box-shadow: var(--dt-shadow-extra-large);
+  .d-box--shadow-modal {
+    --box-shadow: var(--dt-shadow-modal);
   }
-  .d-box--shadow-card {
-    --box-shadow: var(--dt-shadow-card);
+  .d-box--is-0 {
+    inline-size: 0;
   }
   .d-box--is-1px {
     inline-size: var(--dt-layout-1px);
@@ -1660,54 +1660,102 @@
   .d-box--is-75 {
     inline-size: var(--dt-layout-75);
   }
-  .d-box--is-0 {
-    inline-size: var(--dt-layout-0);
-  }
   .d-box--is-100 {
     inline-size: var(--dt-layout-100);
   }
+  .d-box--is-125 {
+    inline-size: var(--dt-layout-125);
+  }
+  .d-box--is-150 {
+    inline-size: var(--dt-layout-150);
+  }
+  .d-box--is-175 {
+    inline-size: var(--dt-layout-175);
+  }
   .d-box--is-200 {
     inline-size: var(--dt-layout-200);
   }
+  .d-box--is-250 {
+    inline-size: var(--dt-layout-250);
+  }
   .d-box--is-300 {
     inline-size: var(--dt-layout-300);
   }
+  .d-box--is-350 {
+    inline-size: var(--dt-layout-350);
+  }
   .d-box--is-400 {
     inline-size: var(--dt-layout-400);
   }
+  .d-box--is-450 {
+    inline-size: var(--dt-layout-450);
+  }
   .d-box--is-500 {
     inline-size: var(--dt-layout-500);
   }
+  .d-box--is-550 {
+    inline-size: var(--dt-layout-550);
+  }
   .d-box--is-600 {
     inline-size: var(--dt-layout-600);
   }
+  .d-box--is-650 {
+    inline-size: var(--dt-layout-650);
+  }
   .d-box--is-700 {
     inline-size: var(--dt-layout-700);
   }
+  .d-box--is-750 {
+    inline-size: var(--dt-layout-750);
+  }
   .d-box--is-800 {
     inline-size: var(--dt-layout-800);
   }
+  .d-box--is-850 {
+    inline-size: var(--dt-layout-850);
+  }
   .d-box--is-900 {
     inline-size: var(--dt-layout-900);
   }
+  .d-box--is-950 {
+    inline-size: var(--dt-layout-950);
+  }
   .d-box--is-1000 {
     inline-size: var(--dt-layout-1000);
   }
+  .d-box--is-1050 {
+    inline-size: var(--dt-layout-1050);
+  }
   .d-box--is-1100 {
     inline-size: var(--dt-layout-1100);
   }
+  .d-box--is-1150 {
+    inline-size: var(--dt-layout-1150);
+  }
   .d-box--is-1200 {
     inline-size: var(--dt-layout-1200);
   }
+  .d-box--is-1250 {
+    inline-size: var(--dt-layout-1250);
+  }
   .d-box--is-1300 {
     inline-size: var(--dt-layout-1300);
   }
+  .d-box--is-1350 {
+    inline-size: var(--dt-layout-1350);
+  }
   .d-box--is-1400 {
     inline-size: var(--dt-layout-1400);
   }
+  .d-box--is-1450 {
+    inline-size: var(--dt-layout-1450);
+  }
   .d-box--is-1500 {
     inline-size: var(--dt-layout-1500);
   }
+  .d-box--is-1550 {
+    inline-size: var(--dt-layout-1550);
+  }
   .d-box--is-1600 {
     inline-size: var(--dt-layout-1600);
   }
@@ -1756,6 +1804,9 @@
   .d-box--is-100p {
     inline-size: var(--dt-layout-100-percent);
   }
+  .d-box--bls-0 {
+    block-size: 0;
+  }
   .d-box--bls-1px {
     block-size: var(--dt-layout-1px);
   }
@@ -1780,54 +1831,102 @@
   .d-box--bls-75 {
     block-size: var(--dt-layout-75);
   }
-  .d-box--bls-0 {
-    block-size: var(--dt-layout-0);
-  }
   .d-box--bls-100 {
     block-size: var(--dt-layout-100);
   }
+  .d-box--bls-125 {
+    block-size: var(--dt-layout-125);
+  }
+  .d-box--bls-150 {
+    block-size: var(--dt-layout-150);
+  }
+  .d-box--bls-175 {
+    block-size: var(--dt-layout-175);
+  }
   .d-box--bls-200 {
     block-size: var(--dt-layout-200);
   }
+  .d-box--bls-250 {
+    block-size: var(--dt-layout-250);
+  }
   .d-box--bls-300 {
     block-size: var(--dt-layout-300);
   }
+  .d-box--bls-350 {
+    block-size: var(--dt-layout-350);
+  }
   .d-box--bls-400 {
     block-size: var(--dt-layout-400);
   }
+  .d-box--bls-450 {
+    block-size: var(--dt-layout-450);
+  }
   .d-box--bls-500 {
     block-size: var(--dt-layout-500);
   }
+  .d-box--bls-550 {
+    block-size: var(--dt-layout-550);
+  }
   .d-box--bls-600 {
     block-size: var(--dt-layout-600);
   }
+  .d-box--bls-650 {
+    block-size: var(--dt-layout-650);
+  }
   .d-box--bls-700 {
     block-size: var(--dt-layout-700);
   }
+  .d-box--bls-750 {
+    block-size: var(--dt-layout-750);
+  }
   .d-box--bls-800 {
     block-size: var(--dt-layout-800);
   }
+  .d-box--bls-850 {
+    block-size: var(--dt-layout-850);
+  }
   .d-box--bls-900 {
     block-size: var(--dt-layout-900);
   }
+  .d-box--bls-950 {
+    block-size: var(--dt-layout-950);
+  }
   .d-box--bls-1000 {
     block-size: var(--dt-layout-1000);
   }
+  .d-box--bls-1050 {
+    block-size: var(--dt-layout-1050);
+  }
   .d-box--bls-1100 {
     block-size: var(--dt-layout-1100);
   }
+  .d-box--bls-1150 {
+    block-size: var(--dt-layout-1150);
+  }
   .d-box--bls-1200 {
     block-size: var(--dt-layout-1200);
   }
+  .d-box--bls-1250 {
+    block-size: var(--dt-layout-1250);
+  }
   .d-box--bls-1300 {
     block-size: var(--dt-layout-1300);
   }
+  .d-box--bls-1350 {
+    block-size: var(--dt-layout-1350);
+  }
   .d-box--bls-1400 {
     block-size: var(--dt-layout-1400);
   }
+  .d-box--bls-1450 {
+    block-size: var(--dt-layout-1450);
+  }
   .d-box--bls-1500 {
     block-size: var(--dt-layout-1500);
   }
+  .d-box--bls-1550 {
+    block-size: var(--dt-layout-1550);
+  }
   .d-box--bls-1600 {
     block-size: var(--dt-layout-1600);
   }
@@ -1876,6 +1975,9 @@
   .d-box--bls-100p {
     block-size: var(--dt-layout-100-percent);
   }
+  .d-box--min-is-0 {
+    min-inline-size: 0;
+  }
   .d-box--min-is-1px {
     min-inline-size: var(--dt-layout-1px);
   }
@@ -1900,54 +2002,102 @@
   .d-box--min-is-75 {
     min-inline-size: var(--dt-layout-75);
   }
-  .d-box--min-is-0 {
-    min-inline-size: var(--dt-layout-0);
-  }
   .d-box--min-is-100 {
     min-inline-size: var(--dt-layout-100);
   }
+  .d-box--min-is-125 {
+    min-inline-size: var(--dt-layout-125);
+  }
+  .d-box--min-is-150 {
+    min-inline-size: var(--dt-layout-150);
+  }
+  .d-box--min-is-175 {
+    min-inline-size: var(--dt-layout-175);
+  }
   .d-box--min-is-200 {
     min-inline-size: var(--dt-layout-200);
   }
+  .d-box--min-is-250 {
+    min-inline-size: var(--dt-layout-250);
+  }
   .d-box--min-is-300 {
     min-inline-size: var(--dt-layout-300);
   }
+  .d-box--min-is-350 {
+    min-inline-size: var(--dt-layout-350);
+  }
   .d-box--min-is-400 {
     min-inline-size: var(--dt-layout-400);
   }
+  .d-box--min-is-450 {
+    min-inline-size: var(--dt-layout-450);
+  }
   .d-box--min-is-500 {
     min-inline-size: var(--dt-layout-500);
   }
+  .d-box--min-is-550 {
+    min-inline-size: var(--dt-layout-550);
+  }
   .d-box--min-is-600 {
     min-inline-size: var(--dt-layout-600);
   }
+  .d-box--min-is-650 {
+    min-inline-size: var(--dt-layout-650);
+  }
   .d-box--min-is-700 {
     min-inline-size: var(--dt-layout-700);
   }
+  .d-box--min-is-750 {
+    min-inline-size: var(--dt-layout-750);
+  }
   .d-box--min-is-800 {
     min-inline-size: var(--dt-layout-800);
   }
+  .d-box--min-is-850 {
+    min-inline-size: var(--dt-layout-850);
+  }
   .d-box--min-is-900 {
     min-inline-size: var(--dt-layout-900);
   }
+  .d-box--min-is-950 {
+    min-inline-size: var(--dt-layout-950);
+  }
   .d-box--min-is-1000 {
     min-inline-size: var(--dt-layout-1000);
   }
+  .d-box--min-is-1050 {
+    min-inline-size: var(--dt-layout-1050);
+  }
   .d-box--min-is-1100 {
     min-inline-size: var(--dt-layout-1100);
   }
+  .d-box--min-is-1150 {
+    min-inline-size: var(--dt-layout-1150);
+  }
   .d-box--min-is-1200 {
     min-inline-size: var(--dt-layout-1200);
   }
+  .d-box--min-is-1250 {
+    min-inline-size: var(--dt-layout-1250);
+  }
   .d-box--min-is-1300 {
     min-inline-size: var(--dt-layout-1300);
   }
+  .d-box--min-is-1350 {
+    min-inline-size: var(--dt-layout-1350);
+  }
   .d-box--min-is-1400 {
     min-inline-size: var(--dt-layout-1400);
   }
+  .d-box--min-is-1450 {
+    min-inline-size: var(--dt-layout-1450);
+  }
   .d-box--min-is-1500 {
     min-inline-size: var(--dt-layout-1500);
   }
+  .d-box--min-is-1550 {
+    min-inline-size: var(--dt-layout-1550);
+  }
   .d-box--min-is-1600 {
     min-inline-size: var(--dt-layout-1600);
   }
@@ -1996,6 +2146,9 @@
   .d-box--min-is-100p {
     min-inline-size: var(--dt-layout-100-percent);
   }
+  .d-box--max-is-0 {
+    max-inline-size: 0;
+  }
   .d-box--max-is-1px {
     max-inline-size: var(--dt-layout-1px);
   }
@@ -2020,54 +2173,102 @@
   .d-box--max-is-75 {
     max-inline-size: var(--dt-layout-75);
   }
-  .d-box--max-is-0 {
-    max-inline-size: var(--dt-layout-0);
-  }
   .d-box--max-is-100 {
     max-inline-size: var(--dt-layout-100);
   }
+  .d-box--max-is-125 {
+    max-inline-size: var(--dt-layout-125);
+  }
+  .d-box--max-is-150 {
+    max-inline-size: var(--dt-layout-150);
+  }
+  .d-box--max-is-175 {
+    max-inline-size: var(--dt-layout-175);
+  }
   .d-box--max-is-200 {
     max-inline-size: var(--dt-layout-200);
   }
+  .d-box--max-is-250 {
+    max-inline-size: var(--dt-layout-250);
+  }
   .d-box--max-is-300 {
     max-inline-size: var(--dt-layout-300);
   }
+  .d-box--max-is-350 {
+    max-inline-size: var(--dt-layout-350);
+  }
   .d-box--max-is-400 {
     max-inline-size: var(--dt-layout-400);
   }
+  .d-box--max-is-450 {
+    max-inline-size: var(--dt-layout-450);
+  }
   .d-box--max-is-500 {
     max-inline-size: var(--dt-layout-500);
   }
+  .d-box--max-is-550 {
+    max-inline-size: var(--dt-layout-550);
+  }
   .d-box--max-is-600 {
     max-inline-size: var(--dt-layout-600);
   }
+  .d-box--max-is-650 {
+    max-inline-size: var(--dt-layout-650);
+  }
   .d-box--max-is-700 {
     max-inline-size: var(--dt-layout-700);
   }
+  .d-box--max-is-750 {
+    max-inline-size: var(--dt-layout-750);
+  }
   .d-box--max-is-800 {
     max-inline-size: var(--dt-layout-800);
   }
+  .d-box--max-is-850 {
+    max-inline-size: var(--dt-layout-850);
+  }
   .d-box--max-is-900 {
     max-inline-size: var(--dt-layout-900);
   }
+  .d-box--max-is-950 {
+    max-inline-size: var(--dt-layout-950);
+  }
   .d-box--max-is-1000 {
     max-inline-size: var(--dt-layout-1000);
   }
+  .d-box--max-is-1050 {
+    max-inline-size: var(--dt-layout-1050);
+  }
   .d-box--max-is-1100 {
     max-inline-size: var(--dt-layout-1100);
   }
+  .d-box--max-is-1150 {
+    max-inline-size: var(--dt-layout-1150);
+  }
   .d-box--max-is-1200 {
     max-inline-size: var(--dt-layout-1200);
   }
+  .d-box--max-is-1250 {
+    max-inline-size: var(--dt-layout-1250);
+  }
   .d-box--max-is-1300 {
     max-inline-size: var(--dt-layout-1300);
   }
+  .d-box--max-is-1350 {
+    max-inline-size: var(--dt-layout-1350);
+  }
   .d-box--max-is-1400 {
     max-inline-size: var(--dt-layout-1400);
   }
+  .d-box--max-is-1450 {
+    max-inline-size: var(--dt-layout-1450);
+  }
   .d-box--max-is-1500 {
     max-inline-size: var(--dt-layout-1500);
   }
+  .d-box--max-is-1550 {
+    max-inline-size: var(--dt-layout-1550);
+  }
   .d-box--max-is-1600 {
     max-inline-size: var(--dt-layout-1600);
   }
@@ -2116,6 +2317,9 @@
   .d-box--max-is-100p {
     max-inline-size: var(--dt-layout-100-percent);
   }
+  .d-box--min-bls-0 {
+    min-block-size: 0;
+  }
   .d-box--min-bls-1px {
     min-block-size: var(--dt-layout-1px);
   }
@@ -2140,54 +2344,102 @@
   .d-box--min-bls-75 {
     min-block-size: var(--dt-layout-75);
   }
-  .d-box--min-bls-0 {
-    min-block-size: var(--dt-layout-0);
-  }
   .d-box--min-bls-100 {
     min-block-size: var(--dt-layout-100);
   }
+  .d-box--min-bls-125 {
+    min-block-size: var(--dt-layout-125);
+  }
+  .d-box--min-bls-150 {
+    min-block-size: var(--dt-layout-150);
+  }
+  .d-box--min-bls-175 {
+    min-block-size: var(--dt-layout-175);
+  }
   .d-box--min-bls-200 {
     min-block-size: var(--dt-layout-200);
   }
+  .d-box--min-bls-250 {
+    min-block-size: var(--dt-layout-250);
+  }
   .d-box--min-bls-300 {
     min-block-size: var(--dt-layout-300);
   }
+  .d-box--min-bls-350 {
+    min-block-size: var(--dt-layout-350);
+  }
   .d-box--min-bls-400 {
     min-block-size: var(--dt-layout-400);
   }
+  .d-box--min-bls-450 {
+    min-block-size: var(--dt-layout-450);
+  }
   .d-box--min-bls-500 {
     min-block-size: var(--dt-layout-500);
   }
+  .d-box--min-bls-550 {
+    min-block-size: var(--dt-layout-550);
+  }
   .d-box--min-bls-600 {
     min-block-size: var(--dt-layout-600);
   }
+  .d-box--min-bls-650 {
+    min-block-size: var(--dt-layout-650);
+  }
   .d-box--min-bls-700 {
     min-block-size: var(--dt-layout-700);
   }
+  .d-box--min-bls-750 {
+    min-block-size: var(--dt-layout-750);
+  }
   .d-box--min-bls-800 {
     min-block-size: var(--dt-layout-800);
   }
+  .d-box--min-bls-850 {
+    min-block-size: var(--dt-layout-850);
+  }
   .d-box--min-bls-900 {
     min-block-size: var(--dt-layout-900);
   }
+  .d-box--min-bls-950 {
+    min-block-size: var(--dt-layout-950);
+  }
   .d-box--min-bls-1000 {
     min-block-size: var(--dt-layout-1000);
   }
+  .d-box--min-bls-1050 {
+    min-block-size: var(--dt-layout-1050);
+  }
   .d-box--min-bls-1100 {
     min-block-size: var(--dt-layout-1100);
   }
+  .d-box--min-bls-1150 {
+    min-block-size: var(--dt-layout-1150);
+  }
   .d-box--min-bls-1200 {
     min-block-size: var(--dt-layout-1200);
   }
+  .d-box--min-bls-1250 {
+    min-block-size: var(--dt-layout-1250);
+  }
   .d-box--min-bls-1300 {
     min-block-size: var(--dt-layout-1300);
   }
+  .d-box--min-bls-1350 {
+    min-block-size: var(--dt-layout-1350);
+  }
   .d-box--min-bls-1400 {
     min-block-size: var(--dt-layout-1400);
   }
+  .d-box--min-bls-1450 {
+    min-block-size: var(--dt-layout-1450);
+  }
   .d-box--min-bls-1500 {
     min-block-size: var(--dt-layout-1500);
   }
+  .d-box--min-bls-1550 {
+    min-block-size: var(--dt-layout-1550);
+  }
   .d-box--min-bls-1600 {
     min-block-size: var(--dt-layout-1600);
   }
@@ -2236,6 +2488,9 @@
   .d-box--min-bls-100p {
     min-block-size: var(--dt-layout-100-percent);
   }
+  .d-box--max-bls-0 {
+    max-block-size: 0;
+  }
   .d-box--max-bls-1px {
     max-block-size: var(--dt-layout-1px);
   }
@@ -2260,54 +2515,102 @@
   .d-box--max-bls-75 {
     max-block-size: var(--dt-layout-75);
   }
-  .d-box--max-bls-0 {
-    max-block-size: var(--dt-layout-0);
-  }
   .d-box--max-bls-100 {
     max-block-size: var(--dt-layout-100);
   }
+  .d-box--max-bls-125 {
+    max-block-size: var(--dt-layout-125);
+  }
+  .d-box--max-bls-150 {
+    max-block-size: var(--dt-layout-150);
+  }
+  .d-box--max-bls-175 {
+    max-block-size: var(--dt-layout-175);
+  }
   .d-box--max-bls-200 {
     max-block-size: var(--dt-layout-200);
   }
+  .d-box--max-bls-250 {
+    max-block-size: var(--dt-layout-250);
+  }
   .d-box--max-bls-300 {
     max-block-size: var(--dt-layout-300);
   }
+  .d-box--max-bls-350 {
+    max-block-size: var(--dt-layout-350);
+  }
   .d-box--max-bls-400 {
     max-block-size: var(--dt-layout-400);
   }
+  .d-box--max-bls-450 {
+    max-block-size: var(--dt-layout-450);
+  }
   .d-box--max-bls-500 {
     max-block-size: var(--dt-layout-500);
   }
+  .d-box--max-bls-550 {
+    max-block-size: var(--dt-layout-550);
+  }
   .d-box--max-bls-600 {
     max-block-size: var(--dt-layout-600);
   }
+  .d-box--max-bls-650 {
+    max-block-size: var(--dt-layout-650);
+  }
   .d-box--max-bls-700 {
     max-block-size: var(--dt-layout-700);
   }
+  .d-box--max-bls-750 {
+    max-block-size: var(--dt-layout-750);
+  }
   .d-box--max-bls-800 {
     max-block-size: var(--dt-layout-800);
   }
+  .d-box--max-bls-850 {
+    max-block-size: var(--dt-layout-850);
+  }
   .d-box--max-bls-900 {
     max-block-size: var(--dt-layout-900);
   }
+  .d-box--max-bls-950 {
+    max-block-size: var(--dt-layout-950);
+  }
   .d-box--max-bls-1000 {
     max-block-size: var(--dt-layout-1000);
   }
+  .d-box--max-bls-1050 {
+    max-block-size: var(--dt-layout-1050);
+  }
   .d-box--max-bls-1100 {
     max-block-size: var(--dt-layout-1100);
   }
+  .d-box--max-bls-1150 {
+    max-block-size: var(--dt-layout-1150);
+  }
   .d-box--max-bls-1200 {
     max-block-size: var(--dt-layout-1200);
   }
+  .d-box--max-bls-1250 {
+    max-block-size: var(--dt-layout-1250);
+  }
   .d-box--max-bls-1300 {
     max-block-size: var(--dt-layout-1300);
   }
+  .d-box--max-bls-1350 {
+    max-block-size: var(--dt-layout-1350);
+  }
   .d-box--max-bls-1400 {
     max-block-size: var(--dt-layout-1400);
   }
+  .d-box--max-bls-1450 {
+    max-block-size: var(--dt-layout-1450);
+  }
   .d-box--max-bls-1500 {
     max-block-size: var(--dt-layout-1500);
   }
+  .d-box--max-bls-1550 {
+    max-block-size: var(--dt-layout-1550);
+  }
   .d-box--max-bls-1600 {
     max-block-size: var(--dt-layout-1600);
   }
@@ -3931,10 +4234,8 @@
     outline: none;
     box-shadow: var(--dt-shadow-focus);
   }
-  .d-btn--disabled,
-  .d-btn--md--disabled,
-  .d-btn:disabled,
-  .d-btn--md:disabled {
+  .d-btn:where(.d-btn--disabled, :disabled),
+  .d-btn--md:where(.d-btn--disabled, :disabled) {
     --chroma-adjust-text: 0.08;
     --chroma-adjust-background: 0.08;
     --chroma-adjust-border: 0.08;
@@ -3948,18 +4249,18 @@
     transition: none;
     pointer-events: none;
   }
-  .d-btn--disabled.d-btn--primary,
-  .d-btn--md--disabled.d-btn--primary,
-  .d-btn:disabled.d-btn--primary,
-  .d-btn--md:disabled.d-btn--primary {
+  .d-btn:where(.d-btn--disabled, :disabled):where(.d-btn--primary),
+  .d-btn--md:where(.d-btn--disabled, :disabled):where(.d-btn--primary) {
     --opacity-adjust-text: 80%;
   }
-  .d-btn--disabled.d-btn--muted,
-  .d-btn--md--disabled.d-btn--muted,
-  .d-btn:disabled.d-btn--muted,
-  .d-btn--md:disabled.d-btn--muted {
+  .d-btn:where(.d-btn--disabled, :disabled):where(.d-btn--muted),
+  .d-btn--md:where(.d-btn--disabled, :disabled):where(.d-btn--muted) {
     --opacity-adjust-text: 50%;
-    --opacity-adjust-border: 50%;
+    --opacity-adjust-border: 60%;
+  }
+  .d-btn:where(.d-btn--disabled, :disabled):where(.d-btn--active):where(.d-btn--outlined, .d-btn--muted),
+  .d-btn--md:where(.d-btn--disabled, :disabled):where(.d-btn--active):where(.d-btn--outlined, .d-btn--muted) {
+    --button-color-background: var(--dt-action-color-background-muted-active);
   }
   .d-btn--unstyled {
     /* stylelint-disable */
@@ -4798,30 +5099,6 @@
     outline: none;
     box-shadow: var(--dt-shadow-focus);
   }
-  .d-chip__close--disabled,
-  .d-chip__close:disabled {
-    --chroma-adjust-text: 0.08;
-    --chroma-adjust-background: 0.08;
-    --chroma-adjust-border: 0.08;
-    --opacity-adjust-text: 65%;
-    --opacity-adjust-background: 65%;
-    --opacity-adjust-border: 40%;
-    color: color-mix(in oklch, oklch(from var(--button-color-text) l calc(c - var(--chroma-adjust-text)) h) var(--opacity-adjust-text), transparent);
-    background-color: color-mix(in oklch, oklch(from var(--button-color-background) l calc(c - var(--chroma-adjust-background)) h) var(--opacity-adjust-background), transparent);
-    border-color: color-mix(in oklch, oklch(from var(--button-color-border) l calc(c - var(--chroma-adjust-border)) h) var(--opacity-adjust-border), transparent);
-    cursor: not-allowed;
-    transition: none;
-    pointer-events: none;
-  }
-  .d-chip__close--disabled.d-btn--primary,
-  .d-chip__close:disabled.d-btn--primary {
-    --opacity-adjust-text: 80%;
-  }
-  .d-chip__close--disabled.d-btn--muted,
-  .d-chip__close:disabled.d-btn--muted {
-    --opacity-adjust-text: 50%;
-    --opacity-adjust-border: 50%;
-  }
   .d-chip__close:hover:not(:disabled, .d-btn--disabled) {
     --button-color-text: var(--dt-action-color-foreground-muted-hover);
     --button-color-background: var(--dt-action-color-background-muted-hover);
@@ -4875,6 +5152,30 @@
   .d-chip__close.d-btn--active:active:not(:disabled, .d-btn--disabled) {
     --button-color-background: var(--dt-action-color-background-muted-active);
   }
+  .d-chip__close:where(.d-chip__close--disabled, :disabled) {
+    --chroma-adjust-text: 0.08;
+    --chroma-adjust-background: 0.08;
+    --chroma-adjust-border: 0.08;
+    --opacity-adjust-text: 65%;
+    --opacity-adjust-background: 65%;
+    --opacity-adjust-border: 40%;
+    color: color-mix(in oklch, oklch(from var(--button-color-text) l calc(c - var(--chroma-adjust-text)) h) var(--opacity-adjust-text), transparent);
+    background-color: color-mix(in oklch, oklch(from var(--button-color-background) l calc(c - var(--chroma-adjust-background)) h) var(--opacity-adjust-background), transparent);
+    border-color: color-mix(in oklch, oklch(from var(--button-color-border) l calc(c - var(--chroma-adjust-border)) h) var(--opacity-adjust-border), transparent);
+    cursor: not-allowed;
+    transition: none;
+    pointer-events: none;
+  }
+  .d-chip__close:where(.d-chip__close--disabled, :disabled):where(.d-btn--primary) {
+    --opacity-adjust-text: 80%;
+  }
+  .d-chip__close:where(.d-chip__close--disabled, :disabled):where(.d-btn--muted) {
+    --opacity-adjust-text: 50%;
+    --opacity-adjust-border: 60%;
+  }
+  .d-chip__close:where(.d-chip__close--disabled, :disabled):where(.d-btn--active):where(.d-btn--outlined, .d-btn--muted) {
+    --button-color-background: var(--dt-action-color-background-muted-active);
+  }
   .d-chip__icon {
     --chip-icon-size: calc(var(--dt-layout-25) * 1.25);
     display: inline-flex;
@@ -6423,6 +6724,7 @@
     max-block-size: 80%;
     padding: var(--dt-spacing-0);
     border-radius: var(--dt-size-radius-0);
+    box-shadow: var(--dt-shadow-modal);
   }
   .d-image-viewer__full__image {
     max-inline-size: 100%;
@@ -6788,7 +7090,7 @@
     background: var(--dt-color-surface-primary);
     border: var(--dt-size-border-100) solid var(--dt-color-border-subtle);
     border-radius: var(--dt-size-radius-300);
-    box-shadow: var(--dt-shadow-card);
+    box-shadow: var(--dt-shadow-raised);
   }
   .d-card__header {
     display: flex;
@@ -6991,7 +7293,7 @@
     --modal-dialog-color-border: var(--dt-color-border-subtle);
     --modal-dialog-color-text: var(--dt-color-foreground-primary);
     --modal-header-color-text: var(--dt-color-foreground-primary);
-    --modal-dialog-shadow: var(--dt-shadow-large);
+    --modal-dialog-shadow: var(--dt-shadow-modal);
     -webkit-app-region: no-drag;
     position: fixed;
     inset: 0;
@@ -7455,7 +7757,7 @@
   }
   .d-toast {
     --toast-color-shadow: var(--dt-color-border-subtle);
-    --toast-box-shadow: 0 0 0 var(--dt-size-border-100) var(--toast-color-shadow) inset, var(--dt-shadow-medium);
+    --toast-box-shadow: 0 0 0 var(--dt-size-border-100) var(--toast-color-shadow) inset, var(--dt-shadow-overlay);
     z-index: var(--zi-notification);
     display: block;
     max-inline-size: var(--dt-layout-700);
@@ -7508,7 +7810,7 @@
   }
   .d-toast-alternate {
     --toast-alternate-color-shadow: oklch(from var(--dt-color-black-900) l c h / 0.15);
-    --toast-alternate-box-shadow: 0 0 0 var(--dt-spacing-0) var(--toast-alternate-color-shadow) inset, var(--dt-shadow-medium);
+    --toast-alternate-box-shadow: 0 0 0 var(--dt-spacing-0) var(--toast-alternate-color-shadow) inset, var(--dt-shadow-overlay);
     --toast-alternate-color-background: var(--dt-color-surface-primary);
     --toast-alternate-color-text: var(--dt-color-foreground-primary);
     --toast-alternate-color-icon: var(--dt-color-foreground-muted);
@@ -7684,7 +7986,7 @@
     --popover-border-width: var(--dt-size-border-100);
     --popover-border-radius: var(--dt-size-radius-400);
     --popover-color-border: var(--dt-color-border-subtle);
-    --popover-shadow: var(--dt-shadow-card);
+    --popover-shadow: var(--dt-shadow-overlay);
     -webkit-app-region: no-drag;
     display: grid;
     grid-template-rows: -webkit-min-content 1fr -webkit-min-content;
@@ -11112,7 +11414,7 @@
     line-height: var(--dt-font-line-height-600);
     border: none;
     border-radius: var(--dt-size-radius-pill);
-    box-shadow: var(--dt-shadow-medium);
+    box-shadow: var(--dt-shadow-overlay);
     cursor: pointer;
   }
   .d-recipe-leftbar-unread-pill-mentions {
@@ -11839,20 +12141,14 @@
       opacity: 0;
     }
   }
-  .d-bs-sm, .h\:d-bs-sm:hover, .f\:d-bs-sm:focus, .f\:d-bs-sm:focus-within, .fv\:d-bs-sm:focus-visible {
-    box-shadow: var(--dt-shadow-small) !important;
-  }
-  .d-bs-md, .h\:d-bs-md:hover, .f\:d-bs-md:focus, .f\:d-bs-md:focus-within, .fv\:d-bs-md:focus-visible {
-    box-shadow: var(--dt-shadow-medium) !important;
-  }
-  .d-bs-lg, .h\:d-bs-lg:hover, .f\:d-bs-lg:focus, .f\:d-bs-lg:focus-within, .fv\:d-bs-lg:focus-visible {
-    box-shadow: var(--dt-shadow-large) !important;
+  .d-bs-raised, .h\:d-bs-raised:hover, .f\:d-bs-raised:focus, .f\:d-bs-raised:focus-within, .fv\:d-bs-raised:focus-visible, .d-bs-sm, .h\:d-bs-sm:hover, .f\:d-bs-sm:focus, .f\:d-bs-sm:focus-within, .fv\:d-bs-sm:focus-visible, .d-bs-card, .h\:d-bs-card:hover, .f\:d-bs-card:focus, .f\:d-bs-card:focus-within, .fv\:d-bs-card:focus-visible {
+    box-shadow: var(--dt-shadow-raised) !important;
   }
-  .d-bs-xl, .h\:d-bs-xl:hover, .f\:d-bs-xl:focus, .f\:d-bs-xl:focus-within, .fv\:d-bs-xl:focus-visible {
-    box-shadow: var(--dt-shadow-extra-large) !important;
+  .d-bs-overlay, .h\:d-bs-overlay:hover, .f\:d-bs-overlay:focus, .f\:d-bs-overlay:focus-within, .fv\:d-bs-overlay:focus-visible, .d-bs-md, .h\:d-bs-md:hover, .f\:d-bs-md:focus, .f\:d-bs-md:focus-within, .fv\:d-bs-md:focus-visible, .d-bs-lg, .h\:d-bs-lg:hover, .f\:d-bs-lg:focus, .f\:d-bs-lg:focus-within, .fv\:d-bs-lg:focus-visible {
+    box-shadow: var(--dt-shadow-overlay) !important;
   }
-  .d-bs-card, .h\:d-bs-card:hover, .f\:d-bs-card:focus, .f\:d-bs-card:focus-within, .fv\:d-bs-card:focus-visible {
-    box-shadow: var(--dt-shadow-card) !important;
+  .d-bs-modal, .h\:d-bs-modal:hover, .f\:d-bs-modal:focus, .f\:d-bs-modal:focus-within, .fv\:d-bs-modal:focus-visible, .d-bs-xl, .h\:d-bs-xl:hover, .f\:d-bs-xl:focus, .f\:d-bs-xl:focus-within, .fv\:d-bs-xl:focus-visible {
+    box-shadow: var(--dt-shadow-modal) !important;
   }
   .d-bs-none, .h\:d-bs-none:hover, .f\:d-bs-none:focus, .f\:d-bs-none:focus-within, .fv\:d-bs-none:focus-visible {
     box-shadow: none !important;
@@ -14705,20 +15001,162 @@
   --dt-shadow-focus-inset-type: dropShadow;
   --dt-shadow-focus-2-type: dropShadow;
   --dt-shadow-focus-1-type: dropShadow;
+  --dt-shadow-extra-large-4-offset-y: 3.2rem;
+  --dt-shadow-extra-large-4-offset-x: 0rem;
+  --dt-shadow-extra-large-4-type: dropShadow;
+  --dt-shadow-extra-large-4-color: oklch(0 0 0 / 0.16);
+  --dt-shadow-extra-large-4-spread: 0rem;
+  --dt-shadow-extra-large-4-blur: 3.2rem;
+  --dt-shadow-extra-large-3-offset-y: 1.2rem;
+  --dt-shadow-extra-large-3-offset-x: 0rem;
+  --dt-shadow-extra-large-3-type: dropShadow;
+  --dt-shadow-extra-large-3-color: oklch(0 0 0 / 0.08);
+  --dt-shadow-extra-large-3-spread: 0rem;
+  --dt-shadow-extra-large-3-blur: 1.6rem;
+  --dt-shadow-extra-large-2-offset-y: 0.4rem;
+  --dt-shadow-extra-large-2-offset-x: 0rem;
+  --dt-shadow-extra-large-2-type: dropShadow;
+  --dt-shadow-extra-large-2-color: oklch(0 0 0 / 0.06);
+  --dt-shadow-extra-large-2-spread: 0rem;
+  --dt-shadow-extra-large-2-blur: 0.6rem;
+  --dt-shadow-extra-large-1-offset-y: 0.2rem;
+  --dt-shadow-extra-large-1-offset-x: 0rem;
+  --dt-shadow-extra-large-1-type: dropShadow;
+  --dt-shadow-extra-large-1-color: oklch(0 0 0 / 0.02);
+  --dt-shadow-extra-large-1-spread: 0rem;
+  --dt-shadow-extra-large-1-blur: 0.2rem;
+  --dt-shadow-large-3-offset-y: 0.8rem;
+  --dt-shadow-large-3-offset-x: 0rem;
+  --dt-shadow-large-3-type: dropShadow;
+  --dt-shadow-large-3-color: oklch(0 0 0 / 0.08);
+  --dt-shadow-large-3-spread: 0rem;
+  --dt-shadow-large-3-blur: 1.2rem;
+  --dt-shadow-large-2-offset-y: 0.2rem;
+  --dt-shadow-large-2-offset-x: 0rem;
+  --dt-shadow-large-2-type: dropShadow;
+  --dt-shadow-large-2-color: oklch(0 0 0 / 0.06);
+  --dt-shadow-large-2-spread: 0rem;
+  --dt-shadow-large-2-blur: 0.8rem;
+  --dt-shadow-large-1-offset-y: 0.1rem;
+  --dt-shadow-large-1-offset-x: 0rem;
+  --dt-shadow-large-1-type: dropShadow;
+  --dt-shadow-large-1-color: oklch(0 0 0 / 0.04);
+  --dt-shadow-large-1-spread: 0rem;
+  --dt-shadow-large-1-blur: 0.2rem;
+  --dt-shadow-medium-3-offset-y: 0.8rem;
+  --dt-shadow-medium-3-offset-x: 0rem;
+  --dt-shadow-medium-3-type: dropShadow;
+  --dt-shadow-medium-3-color: oklch(0 0 0 / 0.08);
+  --dt-shadow-medium-3-spread: 0rem;
+  --dt-shadow-medium-3-blur: 1.2rem;
+  --dt-shadow-medium-2-offset-y: 0.2rem;
+  --dt-shadow-medium-2-offset-x: 0rem;
+  --dt-shadow-medium-2-type: dropShadow;
+  --dt-shadow-medium-2-color: oklch(0 0 0 / 0.06);
+  --dt-shadow-medium-2-spread: 0rem;
+  --dt-shadow-medium-2-blur: 0.8rem;
+  --dt-shadow-medium-1-offset-y: 0.1rem;
+  --dt-shadow-medium-1-offset-x: 0rem;
+  --dt-shadow-medium-1-type: dropShadow;
+  --dt-shadow-medium-1-color: oklch(0 0 0 / 0.04);
+  --dt-shadow-medium-1-spread: 0rem;
+  --dt-shadow-medium-1-blur: 0.2rem;
+  --dt-shadow-small-3-offset-y: 0.2rem;
+  --dt-shadow-small-3-offset-x: 0rem;
+  --dt-shadow-small-3-type: dropShadow;
+  --dt-shadow-small-3-color: oklch(0 0 0 / 0.12);
+  --dt-shadow-small-3-spread: 0rem;
+  --dt-shadow-small-3-blur: 0.4rem;
+  --dt-shadow-small-2-offset-y: 0.1rem;
+  --dt-shadow-small-2-offset-x: 0rem;
+  --dt-shadow-small-2-type: dropShadow;
+  --dt-shadow-small-2-color: oklch(0 0 0 / 0.06);
+  --dt-shadow-small-2-spread: 0rem;
+  --dt-shadow-small-2-blur: 0.2rem;
+  --dt-shadow-small-1-offset-y: -0.1rem;
+  --dt-shadow-small-1-offset-x: 0rem;
+  --dt-shadow-small-1-type: dropShadow;
+  --dt-shadow-small-1-color: oklch(0 0 0 / 0.04);
+  --dt-shadow-small-1-spread: 0rem;
+  --dt-shadow-small-1-blur: 0.1rem;
+  --dt-shadow-card-3-offset-y: 0.2rem;
+  --dt-shadow-card-3-offset-x: 0rem;
   --dt-shadow-card-3-type: dropShadow;
-  --dt-shadow-card-3-color: oklch(0 0 0 / 0.0784);
+  --dt-shadow-card-3-color: oklch(0 0 0 / 0.12);
+  --dt-shadow-card-3-spread: 0rem;
+  --dt-shadow-card-3-blur: 0.4rem;
+  --dt-shadow-card-2-offset-y: 0.1rem;
+  --dt-shadow-card-2-offset-x: 0rem;
   --dt-shadow-card-2-type: dropShadow;
-  --dt-shadow-card-2-color: oklch(0 0 0 / 0.0392);
+  --dt-shadow-card-2-color: oklch(0 0 0 / 0.06);
+  --dt-shadow-card-2-spread: 0rem;
+  --dt-shadow-card-2-blur: 0.2rem;
+  --dt-shadow-card-1-offset-y: -0.1rem;
+  --dt-shadow-card-1-offset-x: 0rem;
   --dt-shadow-card-1-type: dropShadow;
-  --dt-shadow-card-1-color: oklch(0 0 0 / 0.0314);
-  --dt-shadow-extra-large-type: dropShadow;
-  --dt-shadow-extra-large-color: oklch(0 0 0 / 0.302);
-  --dt-shadow-large-type: dropShadow;
-  --dt-shadow-large-color: oklch(0 0 0 / 0.302);
-  --dt-shadow-medium-type: dropShadow;
-  --dt-shadow-medium-color: oklch(0 0 0 / 0.251);
-  --dt-shadow-small-type: dropShadow;
-  --dt-shadow-small-color: oklch(0 0 0 / 0.149);
+  --dt-shadow-card-1-color: oklch(0 0 0 / 0.04);
+  --dt-shadow-card-1-spread: 0rem;
+  --dt-shadow-card-1-blur: 0.1rem;
+  --dt-shadow-modal-4-offset-y: 3.2rem;
+  --dt-shadow-modal-4-offset-x: 0rem;
+  --dt-shadow-modal-4-type: dropShadow;
+  --dt-shadow-modal-4-color: oklch(0 0 0 / 0.16);
+  --dt-shadow-modal-4-spread: 0rem;
+  --dt-shadow-modal-4-blur: 3.2rem;
+  --dt-shadow-modal-3-offset-y: 1.2rem;
+  --dt-shadow-modal-3-offset-x: 0rem;
+  --dt-shadow-modal-3-type: dropShadow;
+  --dt-shadow-modal-3-color: oklch(0 0 0 / 0.08);
+  --dt-shadow-modal-3-spread: 0rem;
+  --dt-shadow-modal-3-blur: 1.6rem;
+  --dt-shadow-modal-2-offset-y: 0.4rem;
+  --dt-shadow-modal-2-offset-x: 0rem;
+  --dt-shadow-modal-2-type: dropShadow;
+  --dt-shadow-modal-2-color: oklch(0 0 0 / 0.06);
+  --dt-shadow-modal-2-spread: 0rem;
+  --dt-shadow-modal-2-blur: 0.6rem;
+  --dt-shadow-modal-1-offset-y: 0.2rem;
+  --dt-shadow-modal-1-offset-x: 0rem;
+  --dt-shadow-modal-1-type: dropShadow;
+  --dt-shadow-modal-1-color: oklch(0 0 0 / 0.02);
+  --dt-shadow-modal-1-spread: 0rem;
+  --dt-shadow-modal-1-blur: 0.2rem;
+  --dt-shadow-overlay-3-offset-y: 0.8rem;
+  --dt-shadow-overlay-3-offset-x: 0rem;
+  --dt-shadow-overlay-3-type: dropShadow;
+  --dt-shadow-overlay-3-color: oklch(0 0 0 / 0.08);
+  --dt-shadow-overlay-3-spread: 0rem;
+  --dt-shadow-overlay-3-blur: 1.2rem;
+  --dt-shadow-overlay-2-offset-y: 0.2rem;
+  --dt-shadow-overlay-2-offset-x: 0rem;
+  --dt-shadow-overlay-2-type: dropShadow;
+  --dt-shadow-overlay-2-color: oklch(0 0 0 / 0.06);
+  --dt-shadow-overlay-2-spread: 0rem;
+  --dt-shadow-overlay-2-blur: 0.8rem;
+  --dt-shadow-overlay-1-offset-y: 0.1rem;
+  --dt-shadow-overlay-1-offset-x: 0rem;
+  --dt-shadow-overlay-1-type: dropShadow;
+  --dt-shadow-overlay-1-color: oklch(0 0 0 / 0.04);
+  --dt-shadow-overlay-1-spread: 0rem;
+  --dt-shadow-overlay-1-blur: 0.2rem;
+  --dt-shadow-raised-3-offset-y: 0.2rem;
+  --dt-shadow-raised-3-offset-x: 0rem;
+  --dt-shadow-raised-3-type: dropShadow;
+  --dt-shadow-raised-3-color: oklch(0 0 0 / 0.12);
+  --dt-shadow-raised-3-spread: 0rem;
+  --dt-shadow-raised-3-blur: 0.4rem;
+  --dt-shadow-raised-2-offset-y: 0.1rem;
+  --dt-shadow-raised-2-offset-x: 0rem;
+  --dt-shadow-raised-2-type: dropShadow;
+  --dt-shadow-raised-2-color: oklch(0 0 0 / 0.06);
+  --dt-shadow-raised-2-spread: 0rem;
+  --dt-shadow-raised-2-blur: 0.2rem;
+  --dt-shadow-raised-1-offset-y: -0.1rem;
+  --dt-shadow-raised-1-offset-x: 0rem;
+  --dt-shadow-raised-1-type: dropShadow;
+  --dt-shadow-raised-1-color: oklch(0 0 0 / 0.04);
+  --dt-shadow-raised-1-spread: 0rem;
+  --dt-shadow-raised-1-blur: 0.1rem;
   --dt-opacity-1300: 1;
   --dt-opacity-1200: 0.9;
   --dt-opacity-1100: 0.8;
@@ -15044,34 +15482,6 @@
   --dt-shadow-focus-1-offset-x: var(--dt-size-0);
   --dt-shadow-focus-1-spread: var(--dt-size-100);
   --dt-shadow-focus-1-blur: var(--dt-size-0);
-  --dt-shadow-card-3-offset-y: var(--dt-size-200);
-  --dt-shadow-card-3-offset-x: var(--dt-size-0);
-  --dt-shadow-card-3-spread: var(--dt-size-0);
-  --dt-shadow-card-3-blur: var(--dt-size-500);
-  --dt-shadow-card-2-offset-y: var(--dt-size-200);
-  --dt-shadow-card-2-offset-x: var(--dt-size-0);
-  --dt-shadow-card-2-spread: var(--dt-size-0);
-  --dt-shadow-card-2-blur: var(--dt-size-300);
-  --dt-shadow-card-1-offset-y: var(--dt-size-100);
-  --dt-shadow-card-1-offset-x: var(--dt-size-0);
-  --dt-shadow-card-1-spread: var(--dt-size-0);
-  --dt-shadow-card-1-blur: var(--dt-size-200);
-  --dt-shadow-extra-large-offset-y: var(--dt-size-200);
-  --dt-shadow-extra-large-offset-x: var(--dt-size-0);
-  --dt-shadow-extra-large-spread: var(--dt-size-0);
-  --dt-shadow-extra-large-blur: var(--dt-size-600);
-  --dt-shadow-large-offset-y: var(--dt-size-200);
-  --dt-shadow-large-offset-x: var(--dt-size-0);
-  --dt-shadow-large-spread: var(--dt-size-0);
-  --dt-shadow-large-blur: var(--dt-size-500);
-  --dt-shadow-medium-offset-y: var(--dt-size-200);
-  --dt-shadow-medium-offset-x: var(--dt-size-0);
-  --dt-shadow-medium-spread: var(--dt-size-0);
-  --dt-shadow-medium-blur: var(--dt-size-400);
-  --dt-shadow-small-offset-y: var(--dt-size-200);
-  --dt-shadow-small-offset-x: var(--dt-size-0);
-  --dt-shadow-small-spread: var(--dt-size-0);
-  --dt-shadow-small-blur: var(--dt-size-300);
   --dt-color-gradient-magenta-purple: linear-gradient(135deg, var(--dt-color-brand-magenta) 10%, var(--dt-color-brand-purple) 90%); /* Gradient for Ai-oriented treatments. */
   --dt-color-black-1000: oklch(0.1595 0.0045 84.59);
   --dt-color-black-950: oklch(0.2083 0.006 91.63);
@@ -15227,12 +15637,15 @@
   --dt-font-size-75: calc(var(--dt-font-size-root) * 1.1); /* xs / extra small */
   --dt-font-size-50: var(--dt-font-size-root); /* xxs / extra extra small */
   --dt-shadow-focus-1-color: oklch(0.9748 0.0025 48.72);
-  --dt-shadow-focus-inset: var(--dt-shadow-focus-inset-offset-x) var(--dt-shadow-focus-inset-offset-y) var(--dt-shadow-focus-inset-blur) var(--dt-shadow-focus-inset-spread) var(--dt-shadow-focus-inset-color) inset;
+  --dt-shadow-extra-large: var(--dt-shadow-extra-large-1-offset-x) var(--dt-shadow-extra-large-1-offset-y) var(--dt-shadow-extra-large-1-blur) var(--dt-shadow-extra-large-1-spread) var(--dt-shadow-extra-large-1-color), var(--dt-shadow-extra-large-2-offset-x) var(--dt-shadow-extra-large-2-offset-y) var(--dt-shadow-extra-large-2-blur) var(--dt-shadow-extra-large-2-spread) var(--dt-shadow-extra-large-2-color), var(--dt-shadow-extra-large-3-offset-x) var(--dt-shadow-extra-large-3-offset-y) var(--dt-shadow-extra-large-3-blur) var(--dt-shadow-extra-large-3-spread) var(--dt-shadow-extra-large-3-color), var(--dt-shadow-extra-large-4-offset-x) var(--dt-shadow-extra-large-4-offset-y) var(--dt-shadow-extra-large-4-blur) var(--dt-shadow-extra-large-4-spread) var(--dt-shadow-extra-large-4-color);
+  --dt-shadow-large: var(--dt-shadow-large-1-offset-x) var(--dt-shadow-large-1-offset-y) var(--dt-shadow-large-1-blur) var(--dt-shadow-large-1-spread) var(--dt-shadow-large-1-color), var(--dt-shadow-large-2-offset-x) var(--dt-shadow-large-2-offset-y) var(--dt-shadow-large-2-blur) var(--dt-shadow-large-2-spread) var(--dt-shadow-large-2-color), var(--dt-shadow-large-3-offset-x) var(--dt-shadow-large-3-offset-y) var(--dt-shadow-large-3-blur) var(--dt-shadow-large-3-spread) var(--dt-shadow-large-3-color);
+  --dt-shadow-medium: var(--dt-shadow-medium-1-offset-x) var(--dt-shadow-medium-1-offset-y) var(--dt-shadow-medium-1-blur) var(--dt-shadow-medium-1-spread) var(--dt-shadow-medium-1-color), var(--dt-shadow-medium-2-offset-x) var(--dt-shadow-medium-2-offset-y) var(--dt-shadow-medium-2-blur) var(--dt-shadow-medium-2-spread) var(--dt-shadow-medium-2-color), var(--dt-shadow-medium-3-offset-x) var(--dt-shadow-medium-3-offset-y) var(--dt-shadow-medium-3-blur) var(--dt-shadow-medium-3-spread) var(--dt-shadow-medium-3-color);
+  --dt-shadow-small: var(--dt-shadow-small-1-offset-x) var(--dt-shadow-small-1-offset-y) var(--dt-shadow-small-1-blur) var(--dt-shadow-small-1-spread) var(--dt-shadow-small-1-color), var(--dt-shadow-small-2-offset-x) var(--dt-shadow-small-2-offset-y) var(--dt-shadow-small-2-blur) var(--dt-shadow-small-2-spread) var(--dt-shadow-small-2-color), var(--dt-shadow-small-3-offset-x) var(--dt-shadow-small-3-offset-y) var(--dt-shadow-small-3-blur) var(--dt-shadow-small-3-spread) var(--dt-shadow-small-3-color);
   --dt-shadow-card: var(--dt-shadow-card-1-offset-x) var(--dt-shadow-card-1-offset-y) var(--dt-shadow-card-1-blur) var(--dt-shadow-card-1-spread) var(--dt-shadow-card-1-color), var(--dt-shadow-card-2-offset-x) var(--dt-shadow-card-2-offset-y) var(--dt-shadow-card-2-blur) var(--dt-shadow-card-2-spread) var(--dt-shadow-card-2-color), var(--dt-shadow-card-3-offset-x) var(--dt-shadow-card-3-offset-y) var(--dt-shadow-card-3-blur) var(--dt-shadow-card-3-spread) var(--dt-shadow-card-3-color);
-  --dt-shadow-extra-large: var(--dt-shadow-extra-large-offset-x) var(--dt-shadow-extra-large-offset-y) var(--dt-shadow-extra-large-blur) var(--dt-shadow-extra-large-spread) var(--dt-shadow-extra-large-color);
-  --dt-shadow-large: var(--dt-shadow-large-offset-x) var(--dt-shadow-large-offset-y) var(--dt-shadow-large-blur) var(--dt-shadow-large-spread) var(--dt-shadow-large-color);
-  --dt-shadow-medium: var(--dt-shadow-medium-offset-x) var(--dt-shadow-medium-offset-y) var(--dt-shadow-medium-blur) var(--dt-shadow-medium-spread) var(--dt-shadow-medium-color);
-  --dt-shadow-small: var(--dt-shadow-small-offset-x) var(--dt-shadow-small-offset-y) var(--dt-shadow-small-blur) var(--dt-shadow-small-spread) var(--dt-shadow-small-color);
+  --dt-shadow-modal: var(--dt-shadow-modal-1-offset-x) var(--dt-shadow-modal-1-offset-y) var(--dt-shadow-modal-1-blur) var(--dt-shadow-modal-1-spread) var(--dt-shadow-modal-1-color), var(--dt-shadow-modal-2-offset-x) var(--dt-shadow-modal-2-offset-y) var(--dt-shadow-modal-2-blur) var(--dt-shadow-modal-2-spread) var(--dt-shadow-modal-2-color), var(--dt-shadow-modal-3-offset-x) var(--dt-shadow-modal-3-offset-y) var(--dt-shadow-modal-3-blur) var(--dt-shadow-modal-3-spread) var(--dt-shadow-modal-3-color), var(--dt-shadow-modal-4-offset-x) var(--dt-shadow-modal-4-offset-y) var(--dt-shadow-modal-4-blur) var(--dt-shadow-modal-4-spread) var(--dt-shadow-modal-4-color);
+  --dt-shadow-overlay: var(--dt-shadow-overlay-1-offset-x) var(--dt-shadow-overlay-1-offset-y) var(--dt-shadow-overlay-1-blur) var(--dt-shadow-overlay-1-spread) var(--dt-shadow-overlay-1-color), var(--dt-shadow-overlay-2-offset-x) var(--dt-shadow-overlay-2-offset-y) var(--dt-shadow-overlay-2-blur) var(--dt-shadow-overlay-2-spread) var(--dt-shadow-overlay-2-color), var(--dt-shadow-overlay-3-offset-x) var(--dt-shadow-overlay-3-offset-y) var(--dt-shadow-overlay-3-blur) var(--dt-shadow-overlay-3-spread) var(--dt-shadow-overlay-3-color);
+  --dt-shadow-raised: var(--dt-shadow-raised-1-offset-x) var(--dt-shadow-raised-1-offset-y) var(--dt-shadow-raised-1-blur) var(--dt-shadow-raised-1-spread) var(--dt-shadow-raised-1-color), var(--dt-shadow-raised-2-offset-x) var(--dt-shadow-raised-2-offset-y) var(--dt-shadow-raised-2-blur) var(--dt-shadow-raised-2-spread) var(--dt-shadow-raised-2-color), var(--dt-shadow-raised-3-offset-x) var(--dt-shadow-raised-3-offset-y) var(--dt-shadow-raised-3-blur) var(--dt-shadow-raised-3-spread) var(--dt-shadow-raised-3-color);
+  --dt-shadow-focus-inset: var(--dt-shadow-focus-inset-offset-x) var(--dt-shadow-focus-inset-offset-y) var(--dt-shadow-focus-inset-blur) var(--dt-shadow-focus-inset-spread) var(--dt-shadow-focus-inset-color) inset;
   --dt-shadow-focus: var(--dt-shadow-focus-1-offset-x) var(--dt-shadow-focus-1-offset-y) var(--dt-shadow-focus-1-blur) var(--dt-shadow-focus-1-spread) var(--dt-shadow-focus-1-color), var(--dt-shadow-focus-2-offset-x) var(--dt-shadow-focus-2-offset-y) var(--dt-shadow-focus-2-blur) var(--dt-shadow-focus-2-spread) var(--dt-shadow-focus-2-color);
   --dt-layout-1600: calc(var(--dt-layout-base) * 16); /* 1024px */
   --dt-layout-1550: calc(var(--dt-layout-base) * 15.5); /* 992px */