@troennes/minium 0.1.1 → 0.3.0

package/dist/minium.css

@@ -1,147 +1,4 @@
-@layer tokens {
-  :root {
-    --amber-11: light-dark(#ab6400, #ffca16);
-    --amber-9: light-dark(#ffc53d, #ffc53d);
-    --amber-a2: light-dark(#f4d10016, #fd9b000d);
-    --amber-a3: light-dark(#ffde003d, #fa820022);
-    --amber-a4: light-dark(#ffd40063, #fc820032);
-    --amber-a6: light-dark(#eab5008c, #fd9b0051);
-    --amber-a7: light-dark(#dc9b009d, #ffab2567);
-    --black-a7: rgba(0, 0, 0, 0.5);
-    --blue-11: light-dark(#0d74ce, #70b8ff);
-    --blue-9: light-dark(#0090ff, #0090ff);
-    --blue-a2: light-dark(#008cff0b, #1166fb18);
-    --blue-a3: light-dark(#008ff519, #0077ff3a);
-    --blue-a4: light-dark(#009eff2a, #0075ff57);
-    --blue-a5: light-dark(#0093ff3d, #0081fd6b);
-    --blue-a6: light-dark(#0088f653, #0f89fd7f);
-    --green-11: light-dark(#218358, #3dd68c);
-    --green-7: light-dark(#8eceaa, #28684a);
-    --green-9: light-dark(#30a46c, #30a46c);
-    --green-a2: light-dark(#00a32f0b, #29f99d0b);
-    --green-a3: light-dark(#00a43319, #22ff991e);
-    --green-a4: light-dark(#00a83829, #11ff992d);
-    --green-a5: light-dark(#019c393b, #2bffa23c);
-    --green-a6: light-dark(#00963c52, #44ffaa4b);
-    --indigo-10: light-dark(#3358d4, #5472e4);
-    --indigo-11: light-dark(#3a5bc7, #9eb1ff);
-    --indigo-7: light-dark(#abbdf9, #3a4f97);
-    --indigo-9: light-dark(#3e63dd, #3e63dd);
-    --indigo-a2: light-dark(#0040ff08, #3354fa17);
-    --indigo-a3: light-dark(#0047f112, #2f62ff3c);
-    --indigo-a4: light-dark(#0044ff1e, #3566ff57);
-    --indigo-a5: light-dark(#0044ff2d, #4171fd6b);
-    --indigo-a6: light-dark(#003eff3e, #5178fd7c);
-    --orange-10: light-dark(#ef5f00, #ff801f);
-    --orange-11: light-dark(#cc4e00, #ffa057);
-    --orange-7: light-dark(#f5ae73, #7e451d);
-    --orange-9: light-dark(#f76b15, #f76b15);
-    --orange-a11: light-dark(#cc4e00, #ffa057);
-    --orange-a2: light-dark(#ff8e0012, #fe6d000e);
-    --orange-a3: light-dark(#ff9c0029, #fb6a0025);
-    --orange-a4: light-dark(#ff91014a, #ff590039);
-    --orange-a5: light-dark(#ff8b0065, #ff61004a);
-    --orange-a6: light-dark(#ff81007d, #fd75045c);
-    --red-11: light-dark(#ce2c31, #ff9592);
-    --red-7: light-dark(#f4a9aa, #8c333a);
-    --red-9: light-dark(#e5484d, #e5484d);
-    --red-a2: light-dark(#ff000008, #f22f3e11);
-    --red-a3: light-dark(#f3000d14, #ff173f2d);
-    --red-a4: light-dark(#ff000824, #fe0a3b44);
-    --red-a5: light-dark(#ff000632, #ff204756);
-    --red-a6: light-dark(#f8000442, #ff3e5668);
-    --red-a7: light-dark(#df000356, #ff536184);
-    --sand-1: light-dark(#fdfdfc, #111110);
-    --sand-11: light-dark(#63635e, #b5b3ad);
-    --sand-12: light-dark(#21201c, #eeeeec);
-    --sand-2: light-dark(#f9f9f8, #191918);
-    --sand-3: light-dark(#f1f0ef, #222221);
-    --sand-4: light-dark(#e9e8e6, #2a2a28);
-    --sand-5: light-dark(#e2e1de, #31312e);
-    --sand-8: light-dark(#bcbbb5, #62605b);
-    --sand-a2: light-dark(#25250007, #f4f4f309);
-    --sand-a3: light-dark(#20100010, #f6f6f513);
-    --sand-a4: light-dark(#1f150019, #fefef31b);
-    --sand-a5: light-dark(#1f180021, #fbfbeb23);
-    --sand-a6: light-dark(#19130029, #fffaed2d);
-    --sand-a7: light-dark(#19140035, #fffbed3c);
-    --white-a10: rgba(255, 255, 255, 0.8);
-  }
-
-  @supports (color: color(display-p3 1 1 1)) {
-    @media (color-gamut: p3) {
-      :root {
-        --amber-11: light-dark(color(display-p3 0.64 0.4 0), color(display-p3 1 0.8 0.29));
-        --amber-9: light-dark(color(display-p3 1 0.77 0.26), color(display-p3 1 0.77 0.26));
-        --amber-a2: light-dark(color(display-p3 0.902 0.804 0.008 / 0.079), color(display-p3 0.988 0.651 0 / 0.047));
-        --amber-a3: light-dark(color(display-p3 0.965 0.859 0.004 / 0.22), color(display-p3 1 0.6 0 / 0.118));
-        --amber-a4: light-dark(color(display-p3 0.969 0.82 0.004 / 0.35), color(display-p3 1 0.557 0 / 0.185));
-        --amber-a6: light-dark(color(display-p3 0.875 0.682 0.004 / 0.495), color(display-p3 1 0.659 0.094 / 0.299));
-        --amber-a7: light-dark(color(display-p3 0.804 0.573 0 / 0.557), color(display-p3 1 0.714 0.263 / 0.383));
-        --black-a7: rgba(0, 0, 0, 0.5);
-        --blue-11: light-dark(color(display-p3 0.15 0.44 0.84), color(display-p3 0.49 0.72 1));
-        --blue-9: light-dark(color(display-p3 0.247 0.556 0.969), color(display-p3 0.247 0.556 0.969));
-        --blue-a2: light-dark(color(display-p3 0.024 0.514 0.906 / 0.04), color(display-p3 0.114 0.435 0.988 / 0.085));
-        --blue-a3: light-dark(color(display-p3 0.012 0.506 0.914 / 0.087), color(display-p3 0.122 0.463 1 / 0.219));
-        --blue-a4: light-dark(color(display-p3 0.008 0.545 1 / 0.146), color(display-p3 0 0.467 1 / 0.324));
-        --blue-a5: light-dark(color(display-p3 0.004 0.502 0.984 / 0.212), color(display-p3 0.098 0.51 1 / 0.4));
-        --blue-a6: light-dark(color(display-p3 0.004 0.463 0.922 / 0.291), color(display-p3 0.224 0.557 1 / 0.475));
-        --green-11: light-dark(color(display-p3 0.19 0.5 0.32), color(display-p3 0.434 0.828 0.573));
-        --green-7: light-dark(color(display-p3 0.61 0.801 0.675), color(display-p3 0.227 0.403 0.298));
-        --green-9: light-dark(color(display-p3 0.332 0.634 0.442), color(display-p3 0.332 0.634 0.442));
-        --green-a2: light-dark(color(display-p3 0.024 0.565 0.129 / 0.036), color(display-p3 0.341 0.98 0.616 / 0.043));
-        --green-a3: light-dark(color(display-p3 0.012 0.596 0.145 / 0.087), color(display-p3 0.376 0.996 0.655 / 0.114));
-        --green-a4: light-dark(color(display-p3 0.008 0.588 0.145 / 0.142), color(display-p3 0.341 0.996 0.635 / 0.173));
-        --green-a5: light-dark(color(display-p3 0.004 0.541 0.157 / 0.204), color(display-p3 0.408 1 0.678 / 0.232));
-        --green-a6: light-dark(color(display-p3 0.004 0.518 0.157 / 0.283), color(display-p3 0.475 1 0.706 / 0.29));
-        --indigo-10: light-dark(color(display-p3 0.234 0.343 0.801), color(display-p3 0.354 0.445 0.866));
-        --indigo-11: light-dark(color(display-p3 0.256 0.354 0.755), color(display-p3 0.63 0.69 1));
-        --indigo-7: light-dark(color(display-p3 0.685 0.74 0.957), color(display-p3 0.245 0.309 0.575));
-        --indigo-9: light-dark(color(display-p3 0.276 0.384 0.837), color(display-p3 0.276 0.384 0.837));
-        --indigo-a2: light-dark(color(display-p3 0.024 0.161 0.863 / 0.028), color(display-p3 0.251 0.345 0.988 / 0.085));
-        --indigo-a3: light-dark(color(display-p3 0.008 0.239 0.886 / 0.067), color(display-p3 0.243 0.404 1 / 0.223));
-        --indigo-a4: light-dark(color(display-p3 0.004 0.247 1 / 0.114), color(display-p3 0.263 0.42 1 / 0.324));
-        --indigo-a5: light-dark(color(display-p3 0.004 0.235 1 / 0.169), color(display-p3 0.314 0.451 1 / 0.4));
-        --indigo-a6: light-dark(color(display-p3 0.004 0.208 0.984 / 0.232), color(display-p3 0.361 0.49 1 / 0.467));
-        --orange-10: light-dark(color(display-p3 0.87 0.409 0.164), color(display-p3 0.98 0.51 0.23));
-        --orange-11: light-dark(color(display-p3 0.76 0.34 0), color(display-p3 1 0.63 0.38));
-        --orange-7: light-dark(color(display-p3 0.919 0.693 0.486), color(display-p3 0.465 0.283 0.147));
-        --orange-9: light-dark(color(display-p3 0.9 0.45 0.2), color(display-p3 0.9 0.45 0.2));
-        --orange-a11: light-dark(color(display-p3 0.76 0.34 0), color(display-p3 1 0.63 0.38));
-        --orange-a2: light-dark(color(display-p3 0.886 0.533 0.008 / 0.067), color(display-p3 0.992 0.529 0 / 0.051));
-        --orange-a3: light-dark(color(display-p3 0.922 0.584 0.008 / 0.15), color(display-p3 0.996 0.486 0 / 0.131));
-        --orange-a4: light-dark(color(display-p3 1 0.604 0.004 / 0.314), color(display-p3 0.996 0.384 0 / 0.211));
-        --orange-a5: light-dark(color(display-p3 1 0.569 0.004 / 0.416), color(display-p3 1 0.455 0 / 0.265));
-        --orange-a6: light-dark(color(display-p3 0.949 0.494 0.004 / 0.455), color(display-p3 1 0.529 0.129 / 0.332));
-        --red-11: light-dark(color(display-p3 0.744 0.234 0.222), color(display-p3 1 0.57 0.55));
-        --red-7: light-dark(color(display-p3 0.915 0.675 0.672), color(display-p3 0.508 0.224 0.236));
-        --red-9: light-dark(color(display-p3 0.83 0.329 0.324), color(display-p3 0.83 0.329 0.324));
-        --red-a2: light-dark(color(display-p3 0.863 0.024 0.024 / 0.028), color(display-p3 0.996 0.282 0.282 / 0.055));
-        --red-a3: light-dark(color(display-p3 0.792 0.008 0.008 / 0.075), color(display-p3 1 0.169 0.271 / 0.156));
-        --red-a4: light-dark(color(display-p3 1 0.008 0.008 / 0.134), color(display-p3 1 0.118 0.267 / 0.236));
-        --red-a5: light-dark(color(display-p3 0.918 0.008 0.008 / 0.189), color(display-p3 1 0.212 0.314 / 0.303));
-        --red-a6: light-dark(color(display-p3 0.831 0.02 0.004 / 0.251), color(display-p3 1 0.318 0.38 / 0.374));
-        --red-a7: light-dark(color(display-p3 0.741 0.016 0.004 / 0.33), color(display-p3 1 0.4 0.424 / 0.475));
-        --sand-1: light-dark(color(display-p3 0.992 0.992 0.989), color(display-p3 0.067 0.067 0.063));
-        --sand-11: light-dark(color(display-p3 0.388 0.388 0.37), color(display-p3 0.707 0.703 0.68));
-        --sand-12: light-dark(color(display-p3 0.129 0.126 0.111), color(display-p3 0.933 0.933 0.926));
-        --sand-2: light-dark(color(display-p3 0.977 0.977 0.973), color(display-p3 0.098 0.098 0.094));
-        --sand-3: light-dark(color(display-p3 0.943 0.942 0.936), color(display-p3 0.135 0.135 0.129));
-        --sand-4: light-dark(color(display-p3 0.913 0.912 0.903), color(display-p3 0.164 0.163 0.156));
-        --sand-5: light-dark(color(display-p3 0.885 0.883 0.873), color(display-p3 0.193 0.192 0.183));
-        --sand-8: light-dark(color(display-p3 0.738 0.734 0.713), color(display-p3 0.384 0.378 0.357));
-        --sand-a2: light-dark(color(display-p3 0.161 0.161 0.024 / 0.028), color(display-p3 0.992 0.992 0.988 / 0.034));
-        --sand-a3: light-dark(color(display-p3 0.067 0.067 0.008 / 0.063), color(display-p3 0.996 0.996 0.992 / 0.072));
-        --sand-a4: light-dark(color(display-p3 0.129 0.129 0.012 / 0.099), color(display-p3 0.992 0.992 0.953 / 0.106));
-        --sand-a5: light-dark(color(display-p3 0.098 0.067 0.008 / 0.126), color(display-p3 1 1 0.965 / 0.135));
-        --sand-a6: light-dark(color(display-p3 0.102 0.075 0.004 / 0.161), color(display-p3 1 0.976 0.929 / 0.177));
-        --sand-a7: light-dark(color(display-p3 0.098 0.098 0.004 / 0.208), color(display-p3 1 0.984 0.929 / 0.236));
-        --white-a10: rgba(255, 255, 255, 0.8);
-      }
-    }
-  }
-}
-
+@layer tokens, theme, reset, base, layout, components, project, utilities;
 
 @font-face {
   font-family: Inconsolata;
@@ -156,7 +13,7 @@
   font-style: normal;
   font-weight: 700;
   font-display: swap;
-  src: local("Inconsolata"), local("Inconsolata-Bold"), url("fonts/Inconsolata-Bold.woff2") format("woff2");
+  src: local("Inconsolata Bold"), local("Inconsolata-Bold"), url("fonts/Inconsolata-Bold.woff2") format("woff2");
 }
 
 @font-face {
@@ -172,7 +29,7 @@
   font-style: italic;
   font-weight: 400;
   font-display: swap;
-  src: local("PT Sans"), local("PTSans-Italic"), url("fonts/PTSans-Italic.woff2") format("woff2");
+  src: local("PT Sans Italic"), local("PTSans-Italic"), url("fonts/PTSans-Italic.woff2") format("woff2");
 }
 
 @font-face {
@@ -180,7 +37,7 @@
   font-style: italic;
   font-weight: 700;
   font-display: swap;
-  src: local("PT Sans"), local("PTSans-BoldItalic"), url("fonts/PTSans-BoldItalic.woff2") format("woff2");
+  src: local("PT Sans Bold Italic"), local("PTSans-BoldItalic"), url("fonts/PTSans-BoldItalic.woff2") format("woff2");
 }
 
 @font-face {
@@ -188,10 +45,10 @@
   font-style: normal;
   font-weight: 700;
   font-display: swap;
-  src: local("PT Sans"), local("PTSans-Bold"), url("fonts/PTSans-Bold.woff2") format("woff2");
+  src: local("PT Sans Bold"), local("PTSans-Bold"), url("fonts/PTSans-Bold.woff2") format("woff2");
 } 
 
-@layer theme {
+@layer tokens {
   :root {
     
     --size-h1: clamp(2rem, 1.8043rem + 0.8696vw, 2.5rem);
@@ -241,7 +98,7 @@
     --line-height: 1.5;
     --font-weight: 400;
     --font-weight-bold: 700;
-    --shadow-small: 0 1px 3px -1px rgb(0 0 0 / 10%), 0 1px 2px 0 rgb(0 0 0 / 10%); 
+    --shadow-small: black 8%; 
     --shadow-medium: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -2px rgb(0 0 0 / 10%); 
     --shadow-large: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -4px rgb(0 0 0 / 10%); 
     --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 5%);
@@ -265,100 +122,100 @@
     
     color-scheme: light dark;
 
-    --color-text: var(--sand-12);
-    --color-text-muted: var(--sand-11);
-    --color-surface-sunken: light-dark(var(--sand-3), var(--sand-1));
-    --color-surface: var(--sand-2);
-    --color-surface-raised: light-dark(var(--sand-1), var(--sand-3));
-    --color-surface-overlay: light-dark(white, var(--sand-4));
-    --color-fill: var(--sand-a2);
-    --color-fill-hover: var(--sand-a3);
-    --color-fill-active: var(--sand-a4);
-    --color-border-weak: var(--sand-a5); 
-    --color-border-strong: var(--sand-a6); 
-    --color-border-hover: var(--sand-a7);
-
-    --color-primary: var(--orange-9);
-    --color-primary-inverse: white;
-    --color-primary-hover: var(--orange-10);
-    --color-primary-focus: var(--orange-7);
-    --color-primary-fill: var(--orange-a2);
-    --color-primary-fill-hover: var(--orange-a3);
-    --color-primary-fill-active: var(--orange-a4);
-    --color-primary-border-weak: var(--orange-a5);
-    --color-primary-border-strong: var(--orange-a6);
-    --color-primary-text: var(--orange-11);
-
-    --color-accent: var(--indigo-9);
-    --color-accent-inverse: white;
-    --color-accent-hover: var(--indigo-10);
-    --color-accent-focus: var(--indigo-7);
-    --color-accent-fill: var(--indigo-a2);
-    --color-accent-fill-hover: var(--indigo-a3);
-    --color-accent-fill-active: var(--indigo-a4);
-    --color-accent-border-weak: var(--indigo-a5);
-    --color-accent-border-strong: var(--indigo-a6);
-    --color-accent-text: var(--indigo-11);
-
-    --color-success: var(--green-9);
-    --color-success-inverse: white;
-    --color-success-focus: var(--green-7);
-    --color-success-fill: var(--green-a2);
-    --color-success-fill-hover: var(--green-a3);
-    --color-success-fill-active: var(--green-a4);
-    --color-success-border-weak: var(--green-a5);
-    --color-success-border-strong: var(--green-a6);
-    --color-success-text: var(--green-11);
-
-    --color-danger: var(--red-9);
-    --color-danger-inverse: white;
-    --color-danger-focus: var(--red-7);
-    --color-danger-fill: light-dark(var(--red-a2), var(--red-a3));
-    --color-danger-fill-hover: light-dark(var(--red-a3), var(--red-a4));
-    --color-danger-fill-active: light-dark(var(--red-a4), var(--red-a5));
-    --color-danger-border-weak: light-dark(var(--red-a5), var(--red-a6));
-    --color-danger-border-strong: light-dark(var(--red-a6), var(--red-a7));
-    --color-danger-text: var(--red-11);
-
-    --color-warning: var(--amber-9);
-    --color-warning-inverse: black;
-    --color-warning-fill: var(--amber-a2);
-    --color-warning-fill-hover: var(--amber-a3);
-    --color-warning-fill-active: var(--amber-a4);
-    --color-warning-border-weak: var(--amber-a6);
-    --color-warning-border-strong: var(--amber-a7);
-    --color-warning-text: var(--amber-11);
-
-    --color-info: var(--blue-9);
-    --color-info-inverse: white;
-    --color-info-fill: var(--blue-a2);
-    --color-info-fill-hover: var(--blue-a3);
-    --color-info-fill-active: var(--blue-a4);
-    --color-info-border-weak: var(--blue-a5);
-    --color-info-border-strong: var(--blue-a6);
-    --color-info-text: var(--blue-11);
-
-    --color-contrast: var(--sand-12);
-    --color-contrast-inverse: var(--sand-2);
-
-    
-    --code-inline-color-surface: var(--sand-a3);
+    --color-text: var(--neutral-12);
+    --color-text-muted: var(--neutral-11);
+    --color-surface-sunken: light-dark(var(--neutral-3), var(--neutral-1));
+    --color-surface: var(--neutral-2);
+    --color-surface-raised: light-dark(var(--neutral-1), var(--neutral-3));
+    --color-surface-overlay: light-dark(white, var(--neutral-4));
+    --color-fill: var(--neutral-a2);
+    --color-fill-hover: var(--neutral-a3);
+    --color-fill-active: var(--neutral-a4);
+    --color-border-weak: var(--neutral-a5); 
+    --color-border-strong: var(--neutral-a6); 
+    --color-border-hover: var(--neutral-a7);
+
+    --color-primary: var(--primary-9);
+    --color-primary-inverse: var(--primary-inverse);
+    --color-primary-hover: var(--primary-10);
+    --color-primary-focus: var(--primary-7);
+    --color-primary-fill: var(--primary-a2);
+    --color-primary-fill-hover: var(--primary-a3);
+    --color-primary-fill-active: var(--primary-a4);
+    --color-primary-border-weak: var(--primary-a5);
+    --color-primary-border-strong: var(--primary-a6);
+    --color-primary-text: var(--primary-text);
+
+    --color-accent: var(--accent-9);
+    --color-accent-inverse: var(--accent-inverse);
+    --color-accent-hover: var(--accent-10);
+    --color-accent-focus: var(--accent-7);
+    --color-accent-fill: var(--accent-a2);
+    --color-accent-fill-hover: var(--accent-a3);
+    --color-accent-fill-active: var(--accent-a4);
+    --color-accent-border-weak: var(--accent-a5);
+    --color-accent-border-strong: var(--accent-a6);
+    --color-accent-text: var(--accent-text);
+
+    --color-success: var(--success-9);
+    --color-success-inverse: var(--success-inverse);
+    --color-success-focus: var(--success-7);
+    --color-success-fill: var(--success-a2);
+    --color-success-fill-hover: var(--success-a3);
+    --color-success-fill-active: var(--success-a4);
+    --color-success-border-weak: var(--success-a5);
+    --color-success-border-strong: var(--success-a6);
+    --color-success-text: var(--success-text);
+
+    --color-danger: var(--danger-9);
+    --color-danger-inverse: var(--danger-inverse);
+    --color-danger-focus: var(--danger-7);
+    --color-danger-fill: light-dark(var(--danger-a2), var(--danger-a3));
+    --color-danger-fill-hover: light-dark(var(--danger-a3), var(--danger-a4));
+    --color-danger-fill-active: light-dark(var(--danger-a4), var(--danger-a5));
+    --color-danger-border-weak: light-dark(var(--danger-a5), var(--danger-a6));
+    --color-danger-border-strong: light-dark(var(--danger-a6), var(--danger-a7));
+    --color-danger-text: var(--danger-text);
+
+    --color-warning: var(--warning-9);
+    --color-warning-inverse: var(--warning-inverse);
+    --color-warning-fill: var(--warning-a2);
+    --color-warning-fill-hover: var(--warning-a3);
+    --color-warning-fill-active: var(--warning-a4);
+    --color-warning-border-weak: var(--warning-a6);
+    --color-warning-border-strong: var(--warning-a7);
+    --color-warning-text: var(--warning-text);
+
+    --color-info: var(--info-9);
+    --color-info-inverse: var(--info-inverse);
+    --color-info-fill: var(--info-a2);
+    --color-info-fill-hover: var(--info-a3);
+    --color-info-fill-active: var(--info-a4);
+    --color-info-border-weak: var(--info-a5);
+    --color-info-border-strong: var(--info-a6);
+    --color-info-text: var(--info-text);
+
+    --color-contrast: var(--neutral-12);
+    --color-contrast-inverse: var(--neutral-2);
+
+    
+    --code-inline-color-surface: var(--neutral-a3);
     --link-color: var(--color-text);
     --link-color-decoration: var(--color-primary);
     --link-decoration-thickness-hover: 1px;
     --selection-color: color-mix(in oklch, var(--color-primary-hover) 35%, transparent);
-    --mark-color: light-dark(var(--orange-a5), var(--orange-a11));
-    --header-color-surface: light-dark(var(--sand-2), var(--sand-3));
-    --header-color-border: light-dark(transparent, var(--sand-a4));
-    --code-color-surface: light-dark(var(--sand-5), var(--sand-1));
-    --kbd-surface: light-dark(var(--sand-12), var(--sand-1));
-    --kbd-text: light-dark(var(--sand-2),var(--sand-12));
-    --dropdown-color-surface-hover: var(--sand-a3);
-    --form-color-surface: light-dark( var(--white-a10), var(--sand-a2));
-    --form-color-border-disabled: var(--sand-8);
-    --switch-color-surface: light-dark(var(--sand-8), var(--color-fill));
-    --switch-color-border: light-dark(var(--sand-8), var(--color-border-strong));
-    --modal-color-backdrop: var(--black-a7);
+    --mark-color: light-dark(var(--primary-a5), var(--primary-a11));
+    --header-color-surface: light-dark(var(--neutral-2), var(--neutral-3));
+    --header-color-border: light-dark(transparent, var(--neutral-a4));
+    --code-color-surface: light-dark(var(--neutral-5), var(--neutral-1));
+    --kbd-surface: light-dark(var(--neutral-12), var(--neutral-1));
+    --kbd-text: light-dark(var(--neutral-2),var(--neutral-12));
+    --dropdown-color-surface-hover: var(--neutral-a3);
+    --form-color-surface: light-dark(rgb(255 255 255 / 80%), var(--neutral-a2));
+    --form-color-border-disabled: var(--neutral-8);
+    --switch-color-surface: light-dark(var(--neutral-8), var(--color-fill));
+    --switch-color-border: light-dark(var(--neutral-8), var(--color-border-strong));
+    --modal-color-backdrop: rgb(0 0 0 / 50%);
 
 
     
@@ -389,6 +246,217 @@
 }
 
 
+@layer tokens {
+  :root {
+    
+    --neutral-1: light-dark(#fdfdfc, #111110);
+    --neutral-2: light-dark(#f9f9f8, #191918);
+    --neutral-3: light-dark(#f1f0ef, #222221);
+    --neutral-4: light-dark(#e9e8e6, #2a2a28);
+    --neutral-5: light-dark(#e2e1de, #31312e);
+    --neutral-8: light-dark(#bcbbb5, #62605b);
+    --neutral-11: light-dark(#63635e, #b5b3ad);
+    --neutral-12: light-dark(#21201c, #eeeeec);
+    --neutral-a2: light-dark(#25250007, #f4f4f309);
+    --neutral-a3: light-dark(#20100010, #f6f6f513);
+    --neutral-a4: light-dark(#1f150019, #fefef31b);
+    --neutral-a5: light-dark(#1f180021, #fbfbeb23);
+    --neutral-a6: light-dark(#19130029, #fffaed2d);
+    --neutral-a7: light-dark(#19140035, #fffbed3c);
+
+    
+    --primary-7: light-dark(#f5ae73, #7e451d);
+    --primary-9: light-dark(#f76b15, #f76b15);
+    --primary-10: light-dark(#ef5f00, #ff801f);
+    --primary-11: light-dark(#cc4e00, #ffa057);
+    --primary-a2: light-dark(#ff8e0012, #fe6d000e);
+    --primary-a3: light-dark(#ff9c0029, #fb6a0025);
+    --primary-a4: light-dark(#ff91014a, #ff590039);
+    --primary-a5: light-dark(#ff8b0065, #ff61004a);
+    --primary-a6: light-dark(#ff81007d, #fd75045c);
+    --primary-a7: light-dark(#ed6c008c, #ff832c75);
+    --primary-a11: light-dark(#cc4e00, #ffa057);
+    --primary-text: var(--primary-11);
+    --primary-inverse: white;
+
+    
+    --accent-7: light-dark(#abbdf9, #3a4f97);
+    --accent-9: light-dark(#3e63dd, #3e63dd);
+    --accent-10: light-dark(#3358d4, #5472e4);
+    --accent-11: light-dark(#3a5bc7, #9eb1ff);
+    --accent-a2: light-dark(#0040ff08, #3354fa17);
+    --accent-a3: light-dark(#0047f112, #2f62ff3c);
+    --accent-a4: light-dark(#0044ff1e, #3566ff57);
+    --accent-a5: light-dark(#0044ff2d, #4171fd6b);
+    --accent-a6: light-dark(#003eff3e, #5178fd7c);
+    --accent-a7: light-dark(#0037ed54, #5a7fff90);
+    --accent-a11: light-dark(#002bb7c5, #9eb1ff);
+    --accent-text: var(--accent-11);
+    --accent-inverse: white;
+
+    
+    --success-7: light-dark(#8eceaa, #28684a);
+    --success-9: light-dark(#30a46c, #30a46c);
+    --success-10: light-dark(#2b9a66, #33b074);
+    --success-11: light-dark(#218358, #3dd68c);
+    --success-a2: light-dark(#00a32f0b, #29f99d0b);
+    --success-a3: light-dark(#00a43319, #22ff991e);
+    --success-a4: light-dark(#00a83829, #11ff992d);
+    --success-a5: light-dark(#019c393b, #2bffa23c);
+    --success-a6: light-dark(#00963c52, #44ffaa4b);
+    --success-a7: light-dark(#00914071, #50fdac5e);
+    --success-a11: light-dark(#00713fde, #46fea5d4);
+    --success-text: var(--success-11);
+    --success-inverse: white;
+
+    
+    --danger-7: light-dark(#f4a9aa, #8c333a);
+    --danger-9: light-dark(#e5484d, #e5484d);
+    --danger-10: light-dark(#dc3e42, #ec5d5e);
+    --danger-11: light-dark(#ce2c31, #ff9592);
+    --danger-a2: light-dark(#ff000008, #f22f3e11);
+    --danger-a3: light-dark(#f3000d14, #ff173f2d);
+    --danger-a4: light-dark(#ff000824, #fe0a3b44);
+    --danger-a5: light-dark(#ff000632, #ff204756);
+    --danger-a6: light-dark(#f8000442, #ff3e5668);
+    --danger-a7: light-dark(#df000356, #ff536184);
+    --danger-a11: light-dark(#c40006d3, #ff9592);
+    --danger-text: var(--danger-11);
+    --danger-inverse: white;
+
+    
+    --warning-7: light-dark(#e9c162, #714f19);
+    --warning-9: light-dark(#ffc53d, #ffc53d);
+    --warning-10: light-dark(#ffba18, #ffd60a);
+    --warning-11: light-dark(#ab6400, #ffca16);
+    --warning-a2: light-dark(#f4d10016, #fd9b000d);
+    --warning-a3: light-dark(#ffde003d, #fa820022);
+    --warning-a4: light-dark(#ffd40063, #fc820032);
+    --warning-a5: light-dark(#f8cf0088, #fd8b0041);
+    --warning-a6: light-dark(#eab5008c, #fd9b0051);
+    --warning-a7: light-dark(#dc9b009d, #ffab2567);
+    --warning-a11: light-dark(#ab6400, #ffca16);
+    --warning-text: light-dark(var(--neutral-12), var(--warning-11));
+    --warning-inverse: light-dark(var(--neutral-12), var(--neutral-1));
+
+    
+    --info-7: light-dark(#8ec8f6, #205d9e);
+    --info-9: light-dark(#0090ff, #0090ff);
+    --info-10: light-dark(#0588f0, #3b9eff);
+    --info-11: light-dark(#0d74ce, #70b8ff);
+    --info-a2: light-dark(#008cff0b, #1166fb18);
+    --info-a3: light-dark(#008ff519, #0077ff3a);
+    --info-a4: light-dark(#009eff2a, #0075ff57);
+    --info-a5: light-dark(#0093ff3d, #0081fd6b);
+    --info-a6: light-dark(#0088f653, #0f89fd7f);
+    --info-a7: light-dark(#0083eb71, #2a91fe98);
+    --info-a11: light-dark(#006dcbf2, #70b8ff);
+    --info-text: var(--info-11);
+    --info-inverse: white;
+  }
+
+  @supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+      :root {
+        
+        --neutral-1: light-dark(color(display-p3 0.992 0.992 0.989), color(display-p3 0.067 0.067 0.063));
+        --neutral-2: light-dark(color(display-p3 0.977 0.977 0.973), color(display-p3 0.098 0.098 0.094));
+        --neutral-3: light-dark(color(display-p3 0.943 0.942 0.936), color(display-p3 0.135 0.135 0.129));
+        --neutral-4: light-dark(color(display-p3 0.913 0.912 0.903), color(display-p3 0.164 0.163 0.156));
+        --neutral-5: light-dark(color(display-p3 0.885 0.883 0.873), color(display-p3 0.193 0.192 0.183));
+        --neutral-8: light-dark(color(display-p3 0.738 0.734 0.713), color(display-p3 0.384 0.378 0.357));
+        --neutral-11: light-dark(color(display-p3 0.388 0.388 0.37), color(display-p3 0.707 0.703 0.68));
+        --neutral-12: light-dark(color(display-p3 0.129 0.126 0.111), color(display-p3 0.933 0.933 0.926));
+        --neutral-a2: light-dark(color(display-p3 0.161 0.161 0.024 / 0.028), color(display-p3 0.992 0.992 0.988 / 0.034));
+        --neutral-a3: light-dark(color(display-p3 0.067 0.067 0.008 / 0.063), color(display-p3 0.996 0.996 0.992 / 0.072));
+        --neutral-a4: light-dark(color(display-p3 0.129 0.129 0.012 / 0.099), color(display-p3 0.992 0.992 0.953 / 0.106));
+        --neutral-a5: light-dark(color(display-p3 0.098 0.067 0.008 / 0.126), color(display-p3 1 1 0.965 / 0.135));
+        --neutral-a6: light-dark(color(display-p3 0.102 0.075 0.004 / 0.161), color(display-p3 1 0.976 0.929 / 0.177));
+        --neutral-a7: light-dark(color(display-p3 0.098 0.098 0.004 / 0.208), color(display-p3 1 0.984 0.929 / 0.236));
+
+        
+        --primary-7: light-dark(color(display-p3 0.919 0.693 0.486), color(display-p3 0.465 0.283 0.147));
+        --primary-9: light-dark(color(display-p3 0.9 0.45 0.2), color(display-p3 0.9 0.45 0.2));
+        --primary-10: light-dark(color(display-p3 0.87 0.409 0.164), color(display-p3 0.98 0.51 0.23));
+        --primary-11: light-dark(color(display-p3 0.76 0.34 0), color(display-p3 1 0.63 0.38));
+        --primary-a2: light-dark(color(display-p3 0.886 0.533 0.008 / 0.067), color(display-p3 0.992 0.529 0 / 0.051));
+        --primary-a3: light-dark(color(display-p3 0.922 0.584 0.008 / 0.15), color(display-p3 0.996 0.486 0 / 0.131));
+        --primary-a4: light-dark(color(display-p3 1 0.604 0.004 / 0.314), color(display-p3 0.996 0.384 0 / 0.211));
+        --primary-a5: light-dark(color(display-p3 1 0.569 0.004 / 0.416), color(display-p3 1 0.455 0 / 0.265));
+        --primary-a6: light-dark(color(display-p3 0.949 0.494 0.004 / 0.455), color(display-p3 1 0.529 0.129 / 0.332));
+        --primary-a7: light-dark(color(display-p3 0.839 0.408 0 / 0.514), color(display-p3 1 0.569 0.251 / 0.429));
+        --primary-a11: light-dark(color(display-p3 0.76 0.34 0), color(display-p3 1 0.63 0.38));
+
+        
+        --accent-7: light-dark(color(display-p3 0.685 0.74 0.957), color(display-p3 0.245 0.309 0.575));
+        --accent-9: light-dark(color(display-p3 0.276 0.384 0.837), color(display-p3 0.276 0.384 0.837));
+        --accent-10: light-dark(color(display-p3 0.234 0.343 0.801), color(display-p3 0.354 0.445 0.866));
+        --accent-11: light-dark(color(display-p3 0.256 0.354 0.755), color(display-p3 0.63 0.69 1));
+        --accent-a2: light-dark(color(display-p3 0.024 0.161 0.863 / 0.028), color(display-p3 0.251 0.345 0.988 / 0.085));
+        --accent-a3: light-dark(color(display-p3 0.008 0.239 0.886 / 0.067), color(display-p3 0.243 0.404 1 / 0.223));
+        --accent-a4: light-dark(color(display-p3 0.004 0.247 1 / 0.114), color(display-p3 0.263 0.42 1 / 0.324));
+        --accent-a5: light-dark(color(display-p3 0.004 0.235 1 / 0.169), color(display-p3 0.314 0.451 1 / 0.4));
+        --accent-a6: light-dark(color(display-p3 0.004 0.208 0.984 / 0.232), color(display-p3 0.361 0.49 1 / 0.467));
+        --accent-a7: light-dark(color(display-p3 0.004 0.176 0.863 / 0.314), color(display-p3 0.388 0.51 1 / 0.547));
+        --accent-a11: light-dark(color(display-p3 0.256 0.354 0.755), color(display-p3 0.63 0.69 1));
+
+        
+        --success-7: light-dark(color(display-p3 0.61 0.801 0.675), color(display-p3 0.227 0.403 0.298));
+        --success-9: light-dark(color(display-p3 0.332 0.634 0.442), color(display-p3 0.332 0.634 0.442));
+        --success-10: light-dark(color(display-p3 0.308 0.595 0.417), color(display-p3 0.357 0.682 0.474));
+        --success-11: light-dark(color(display-p3 0.19 0.5 0.32), color(display-p3 0.434 0.828 0.573));
+        --success-a2: light-dark(color(display-p3 0.024 0.565 0.129 / 0.036), color(display-p3 0.341 0.98 0.616 / 0.043));
+        --success-a3: light-dark(color(display-p3 0.012 0.596 0.145 / 0.087), color(display-p3 0.376 0.996 0.655 / 0.114));
+        --success-a4: light-dark(color(display-p3 0.008 0.588 0.145 / 0.142), color(display-p3 0.341 0.996 0.635 / 0.173));
+        --success-a5: light-dark(color(display-p3 0.004 0.541 0.157 / 0.204), color(display-p3 0.408 1 0.678 / 0.232));
+        --success-a6: light-dark(color(display-p3 0.004 0.518 0.157 / 0.283), color(display-p3 0.475 1 0.706 / 0.29));
+        --success-a7: light-dark(color(display-p3 0.004 0.486 0.165 / 0.389), color(display-p3 0.514 1 0.706 / 0.362));
+        --success-a11: light-dark(color(display-p3 0.19 0.5 0.32), color(display-p3 0.434 0.828 0.573));
+
+        
+        --danger-7: light-dark(color(display-p3 0.915 0.675 0.672), color(display-p3 0.508 0.224 0.236));
+        --danger-9: light-dark(color(display-p3 0.83 0.329 0.324), color(display-p3 0.83 0.329 0.324));
+        --danger-10: light-dark(color(display-p3 0.798 0.294 0.285), color(display-p3 0.861 0.403 0.387));
+        --danger-11: light-dark(color(display-p3 0.744 0.234 0.222), color(display-p3 1 0.57 0.55));
+        --danger-a2: light-dark(color(display-p3 0.863 0.024 0.024 / 0.028), color(display-p3 0.996 0.282 0.282 / 0.055));
+        --danger-a3: light-dark(color(display-p3 0.792 0.008 0.008 / 0.075), color(display-p3 1 0.169 0.271 / 0.156));
+        --danger-a4: light-dark(color(display-p3 1 0.008 0.008 / 0.134), color(display-p3 1 0.118 0.267 / 0.236));
+        --danger-a5: light-dark(color(display-p3 0.918 0.008 0.008 / 0.189), color(display-p3 1 0.212 0.314 / 0.303));
+        --danger-a6: light-dark(color(display-p3 0.831 0.02 0.004 / 0.251), color(display-p3 1 0.318 0.38 / 0.374));
+        --danger-a7: light-dark(color(display-p3 0.741 0.016 0.004 / 0.33), color(display-p3 1 0.4 0.424 / 0.475));
+        --danger-a11: light-dark(color(display-p3 0.744 0.234 0.222), color(display-p3 1 0.57 0.55));
+
+        
+        --warning-7: light-dark(color(display-p3 0.89 0.762 0.443), color(display-p3 0.422 0.314 0.141));
+        --warning-9: light-dark(color(display-p3 1 0.77 0.26), color(display-p3 1 0.77 0.26));
+        --warning-10: light-dark(color(display-p3 0.959 0.741 0.274), color(display-p3 1 0.87 0.15));
+        --warning-11: light-dark(color(display-p3 0.64 0.4 0), color(display-p3 1 0.8 0.29));
+        --warning-a2: light-dark(color(display-p3 0.902 0.804 0.008 / 0.079), color(display-p3 0.988 0.651 0 / 0.047));
+        --warning-a3: light-dark(color(display-p3 0.965 0.859 0.004 / 0.22), color(display-p3 1 0.6 0 / 0.118));
+        --warning-a4: light-dark(color(display-p3 0.969 0.82 0.004 / 0.35), color(display-p3 1 0.557 0 / 0.185));
+        --warning-a5: light-dark(color(display-p3 0.933 0.796 0.004 / 0.475), color(display-p3 1 0.592 0 / 0.24));
+        --warning-a6: light-dark(color(display-p3 0.875 0.682 0.004 / 0.495), color(display-p3 1 0.659 0.094 / 0.299));
+        --warning-a7: light-dark(color(display-p3 0.804 0.573 0 / 0.557), color(display-p3 1 0.714 0.263 / 0.383));
+        --warning-a11: light-dark(color(display-p3 0.64 0.4 0), color(display-p3 1 0.8 0.29));
+
+        
+        --info-7: light-dark(color(display-p3 0.606 0.777 0.947), color(display-p3 0.195 0.361 0.6));
+        --info-9: light-dark(color(display-p3 0.247 0.556 0.969), color(display-p3 0.247 0.556 0.969));
+        --info-10: light-dark(color(display-p3 0.234 0.523 0.912), color(display-p3 0.344 0.612 0.973));
+        --info-11: light-dark(color(display-p3 0.15 0.44 0.84), color(display-p3 0.49 0.72 1));
+        --info-a2: light-dark(color(display-p3 0.024 0.514 0.906 / 0.04), color(display-p3 0.114 0.435 0.988 / 0.085));
+        --info-a3: light-dark(color(display-p3 0.012 0.506 0.914 / 0.087), color(display-p3 0.122 0.463 1 / 0.219));
+        --info-a4: light-dark(color(display-p3 0.008 0.545 1 / 0.146), color(display-p3 0 0.467 1 / 0.324));
+        --info-a5: light-dark(color(display-p3 0.004 0.502 0.984 / 0.212), color(display-p3 0.098 0.51 1 / 0.4));
+        --info-a6: light-dark(color(display-p3 0.004 0.463 0.922 / 0.291), color(display-p3 0.224 0.557 1 / 0.475));
+        --info-a7: light-dark(color(display-p3 0.004 0.431 0.863 / 0.393), color(display-p3 0.294 0.584 1 / 0.572));
+        --info-a11: light-dark(color(display-p3 0.15 0.44 0.84), color(display-p3 0.49 0.72 1));
+      }
+    }
+  }
+}
+
+
 @layer reset {
   
 
@@ -396,7 +464,17 @@
   
   *,
   *::before,
-  *::after {
+  *::after,
+  *::file-selector-button {
+    box-sizing: border-box;
+  }
+
+  
+  *::-webkit-slider-thumb {
+    box-sizing: border-box;
+  }
+
+  *::-moz-range-thumb {
     box-sizing: border-box;
   }
 
@@ -466,8 +544,6 @@
 }
 
 
-@layer tokens, theme, reset, base, layout, components, project, utilities;
-
 @layer base {
   html {
     text-rendering: optimizelegibility;
@@ -963,12 +1039,13 @@
   :where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"] ) {
     --button-surface: var(--color-primary);
     --button-text: var(--color-primary-inverse);
+    --border-color: var(--button-surface);
 
     background-color: var(--button-surface);
     color: var(--button-text);
-    box-shadow: var(--shadow-small);
     padding: var(--space-2xs) var(--space-xs);
-    border: var(--border-width) solid var(--button-surface);
+    border: var(--border-width) solid var(--border-color);
+    border-bottom-color: color-mix(in oklab, var(--border-color), var(--shadow-small));
     border-radius: var(--border-radius-m);
     font-weight: var(--font-weight-bold);
     line-height: var(--line-height);
@@ -977,13 +1054,15 @@
 
     
     &:is([aria-current], :hover) {
+      --border-color: oklch(from var(--button-surface) calc(l * var(--hover-multiplier)) c h);
+
       background-color: oklch(from var(--button-surface) calc(l * var(--hover-multiplier)) c h);
-      border-color: oklch(from var(--button-surface) calc(l * var(--hover-multiplier)) c h);
     }
 
     &:active {
+      --border-color: oklch(from var(--button-surface) calc(l * var(--hover-multiplier) * var(--hover-multiplier)) c h);
+
       background-color: oklch(from var(--button-surface) calc(l * var(--hover-multiplier) * var(--hover-multiplier)) c h);
-      border-color: oklch(from var(--button-surface) calc(l * var(--hover-multiplier) * var(--hover-multiplier)) c h);
     }
 
     
@@ -1033,12 +1112,10 @@
       --button-text: var(--color-contrast-inverse);      
     }
 
-    &.neutral,
-    &.neutral.secondary {
+    &.neutral {
       --button-surface: transparent;
       --button-text: var(--color-text);
-
-      border: var(--border-width) solid var(--color-border-strong);
+      --border-color: var(--color-border-strong);
 
       &:hover {
         --button-surface: var(--color-fill);
@@ -1051,120 +1128,68 @@
   }
 
   
-  :where(button, input[type="submit"], input[type="button"], [role="button"]):is(.secondary, .tertiary),
+  :where(button, input[type="submit"], input[type="button"], [role="button"]).secondary:not(.neutral),
   input[type="reset"] {
-    &.accent {
-      --button-text: var(--color-accent);
-    }
+    --button-surface: var(--color-primary-fill-active);
+    --button-text: var(--color-primary-text);
+    --border-color: transparent;
 
-    &.danger {
-      --button-text: var(--color-danger);
-    }
-
-    &.success {
-      --button-text: var(--color-success);
-    }
-
-    &.warning {
-      --button-text: var(--color-warning);
-    }
+    
+    --button-overlay-alpha: calc(1 - var(--hover-multiplier));
+    --button-overlay: light-dark(oklch(from var(--button-text) l c h / calc(1.5 * var(--button-overlay-alpha))), rgb(0 0 0 / calc(2 * var(--button-overlay-alpha))));
 
-    &.info {
-      --button-text: var(--color-info);
-    }
+    
+    &:is([aria-current], :hover, :active) {
+      --border-color: transparent;
 
-    &.contrast {
-      --button-text: var(--color-contrast);
+      background-color: var(--button-surface);
+      background-image: linear-gradient(var(--button-overlay), var(--button-overlay));
     }
-  }
 
-  
-  :where(button, input[type="submit"], input[type="button"], [role="button"]).secondary,
-  input[type="reset"] {
-    --button-surface: transparent;
-    --button-text: var(--color-primary);
-
-    color: var(--button-text);
-    border: var(--border-width) solid var(--button-text);
-
-    &:is([aria-current], :hover) {
-      --button-surface: var(--color-primary-fill);
-    }
-    
     &:active {
-      --button-surface: var(--color-primary-fill-hover);
+      --button-overlay-alpha: calc(1 - var(--hover-multiplier) * var(--hover-multiplier));
     }
 
     &.accent {
-      &:is([aria-current], :hover) {
-        --button-surface: var(--color-accent-fill);
-      }
-
-      &:active {
-        --button-surface: var(--color-accent-fill-hover);
-      }
+      --button-surface: var(--color-accent-fill-active);
+      --button-text: var(--color-accent-text);
     }
 
     &.danger {
-      &:is([aria-current], :hover) {
-        --button-surface: var(--color-danger-fill);
-      }
-      
-      &:active {
-        --button-surface: var(--color-danger-fill-hover);
-      }
+      --button-surface: var(--color-danger-fill-active);
+      --button-text: var(--color-danger-text);
     }
 
     &.success {
-      &:is([aria-current], :hover) {
-        --button-surface: var(--color-success-fill);
-      }
-      
-      &:active {
-        --button-surface: var(--color-success-fill-hover);
-      }
+      --button-surface: var(--color-success-fill-active);
+      --button-text: var(--color-success-text);
     }
 
     &.warning {
-      &:is([aria-current], :hover) {
-        --button-surface: var(--color-warning-fill);
-      }
-      
-      &:active {
-        --button-surface: var(--color-warning-fill-hover);
-      }
+      --button-surface: var(--color-warning-fill-active);
+      --button-text: var(--color-warning-text);
     }
 
     &.info {
-      &:is([aria-current], :hover) {
-        --button-surface: var(--color-info-fill);
-      }
-      
-      &:active {
-        --button-surface: var(--color-info-fill-hover);
-      }
+      --button-surface: var(--color-info-fill-active);
+      --button-text: var(--color-info-text);
     }
 
     &.contrast {
-      &:is([aria-current], :hover) {
-        --button-surface: var(--color-fill);
-      }
-      
-      &:active {
-        --button-surface: var(--color-fill-hover);
-      }
+      --button-surface: var(--color-fill-active);
+      --button-text: var(--color-contrast);
     }
   }
 
   
-  :where(button, input[type="submit"], input[type="button"], [role="button"]).tertiary{
+  :where(button, input[type="submit"], input[type="button"], [role="button"]).tertiary {
     --button-surface: transparent;
-    --button-text: var(--color-primary); 
+    --button-text: var(--link-color);
 
     border-color: transparent;
-    box-shadow: none;
     text-decoration: underline;
     text-decoration-thickness: var(--text-decoration-thickness);
+    text-decoration-color: var(--link-color-decoration);
 
     &:not(:is(:focus, [aria-current], :hover, :active)) {
       --button-surface: transparent;
@@ -1175,7 +1200,33 @@
     }
 
     &.neutral {
-      --button-text: var(--color-text)
+      --button-text: var(--color-text);
+
+      text-decoration-color: currentcolor;
+    }
+
+    &.accent {
+      text-decoration-color: var(--color-accent);
+    }
+
+    &.danger {
+      text-decoration-color: var(--color-danger);
+    }
+
+    &.success {
+      text-decoration-color: var(--color-success);
+    }
+
+    &.warning {
+      text-decoration-color: var(--color-warning);
+    }
+
+    &.info {
+      text-decoration-color: var(--color-info);
+    }
+
+    &.contrast {
+      text-decoration-color: var(--color-contrast);
     }
   }
 
@@ -1197,7 +1248,7 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    box-shadow: none;
+    border-bottom-color: var(--border-color);
 
     &:is(:hover, :focus-visible) {
       --button-surface: var(--color-fill);
@@ -1226,8 +1277,10 @@
     display: block;
 
     &:not(:has(> summary[role="button"]), .border-none) {
-      border: var(--border-width) solid var(--color-border-strong);
-      box-shadow: var(--shadow-small);
+      --border-color: var(--color-border-strong);
+
+      border: var(--border-width) solid var(--border-color);
+      border-bottom-color: color-mix(in oklab, var(--border-color), var(--shadow-small));
     }
 
     &[open] summary::after{
@@ -1461,6 +1514,22 @@
       object-fit: cover;
     }
 
+    
+    &:has(> img) {
+      position: relative;
+      background-color: transparent; 
+
+      &::after {
+        content: "";
+        position: absolute;
+        inset: 0;
+        border-radius: inherit;
+        corner-shape: inherit;
+        box-shadow: inset 0 0 0 1px light-dark(rgb(0 0 0 / 8%), rgb(255 255 255 / 8%));
+        pointer-events: none;
+      }
+    }
+
     > :not(img) {
       color: inherit;
       overflow: hidden;
@@ -1532,6 +1601,8 @@
 @layer components {
   .badge,
   .pill {
+    --border-color: var(--color-border-weak);
+
     display: inline-flex;
     align-items: center;
     gap: var(--space-3xs);
@@ -1541,14 +1612,15 @@
     background-color: var(--color-fill);
     color: var(--color-text);
     padding: var(--space-3xs) var(--space-2xs);
-    border: var(--border-width) solid var(--color-border-weak);
-    box-shadow: var(--shadow-small);
+    border: var(--border-width) solid var(--border-color);
+    border-bottom-color: color-mix(in oklab, var(--border-color), var(--shadow-small));
     border-radius: var(--border-radius-s);
 
     &.primary {
+      --border-color: var(--color-primary-border-weak);
+
       background-color: var(--color-primary-fill);
       color: var(--color-primary-text);
-      border-color: var(--color-primary-border-weak);
     }
 
     &.muted {
@@ -1556,33 +1628,38 @@
     }
 
     &.accent {
+      --border-color: var(--color-accent-border-weak);
+
       background-color: var(--color-accent-fill);
       color: var(--color-accent-text);
-      border-color: var(--color-accent-border-weak);
     }
 
     &.danger {
+      --border-color: var(--color-danger-border-weak);
+
       background-color: var(--color-danger-fill);
       color: var(--color-danger-text);
-      border-color: var(--color-danger-border-weak);  
     }
 
     &.success {
+      --border-color: var(--color-success-border-weak);
+
       background-color: var(--color-success-fill);
       color: var(--color-success-text);
-      border-color: var(--color-success-border-weak);
     }
 
     &.warning {
+      --border-color: var(--color-warning-border-weak);
+
       background-color: var(--color-warning-fill);
       color: var(--color-warning-text);
-      border-color: var(--color-warning-border-weak);
     }
 
     &.info {
+      --border-color: var(--color-info-border-weak);
+
       background-color: var(--color-info-fill);
       color: var(--color-info-text);
-      border-color: var(--color-info-border-weak);
     }
   }
 
@@ -1713,7 +1790,7 @@
     gap: var(--space-3xs);
 
     
-    &:where(:not(.primary, .accent, .danger, .success, .warning, .info, .contrast, .neutral, .secondary, .tertiary, .icon-only, .close)) {
+    &:where(:not(.primary, .accent, .danger, .success, .warning, .info, .contrast, .neutral, .secondary, .tertiary, .icon-only, .close, [role="group"] > .dropdown > *)) {
       --button-surface: transparent;
       --button-text: var(--color-text);
 
@@ -2237,17 +2314,20 @@
   
   input:is([type="checkbox"], [type="radio"]) {
     --size: 1em;
+    --border-color: var(--color-border-strong);
 
     appearance: none;
-    height: var(--size);
-    width: var(--size);
+    
+    height: round(var(--size), 1px);
+    width: round(var(--size), 1px);
     position: relative;
     cursor: pointer;
     font-size: inherit;
     margin: 0;
     margin-block-end: -0.15em;
     margin-inline-end: var(--space-3xs);
-    border: var(--border-width) solid var(--color-border-strong);
+    border: var(--border-width) solid var(--border-color);
+    border-bottom-color: color-mix(in oklab, var(--border-color), var(--shadow-small));
 
     &:focus {
       outline-offset: var(--outline-offset, 1px);
@@ -2277,29 +2357,30 @@
     }
   }
 
-  input:is([type="checkbox"]:not([role="switch"]), [type="radio"]):checked,
-  input[type="checkbox"]:indeterminate {
-    background-color: var(--color-primary);
-    border-color: var(--color-primary);
+  input:is([type="checkbox"]:not([role="switch"])):is(:checked, :indeterminate) {
+    --border-color: var(--color-primary);
+    --inverse-color: var(--color-primary-inverse);
+
+    background-color: var(--border-color);
 
     &::after {
       content: "";
       position: absolute;
       inset: 0;
-      background-color: var(--color-primary-inverse);
+      background-color: var(--inverse-color);
       mask-position: center;
       mask-repeat: no-repeat;
       mask-size: 100%;
     }
 
     &[aria-invalid="false"] {
-      background-color: var(--color-success);
-      border-color: var(--color-success);
+      --border-color: var(--color-success);
+      --inverse-color: var(--color-success-inverse);
     }
 
     &[aria-invalid="true"] {
-      background-color: var(--color-danger);
-      border-color: var(--color-danger);
+      --border-color: var(--color-danger);
+      --inverse-color: var(--color-danger-inverse);
     }
   }
 
@@ -2318,51 +2399,75 @@
   input[type="radio"] {
     border-radius: var(--border-radius-f);
 
-    &:checked::after {
+    &:checked {
+      --border-color: var(--color-primary);
+      --inverse-color: var(--color-primary-inverse);
+
       
-      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='4' fill='currentColor'/%3E%3C/svg%3E");
+      border-width: calc(var(--size) * 0.3);
+      border-bottom-color: var(--border-color);
+      background-color: var(--inverse-color);
+      background-clip: padding-box;
+
+      &[aria-invalid="false"] {
+        --border-color: var(--color-success);
+        --inverse-color: var(--color-success-inverse);
+      }
+
+      &[aria-invalid="true"] {
+        --border-color: var(--color-danger);
+        --inverse-color: var(--color-danger-inverse);
+      }
     }
   }
 
   
   input[type="checkbox"][role="switch"] {
     --width: 1.85;
+    --border-color: var(--switch-color-border);
 
     background-color: var(--switch-color-surface); 
-    inline-size: calc(var(--width) * var(--size));
+    inline-size: round(var(--width) * var(--size), 1px);
     transition: 0.1s ease-in-out;
-    border: var(--border-width) solid var(--switch-color-border);
     border-radius: var(--border-radius-f);
-    padding: 1px;
+    
+    border: none;
+    box-shadow:
+      inset 0 calc(-1 * var(--border-width)) 0 color-mix(in oklab, transparent, var(--shadow-small)),
+      inset 0 0 0 var(--border-width) var(--border-color);
 
     &::before {
       content: "";
       display: block;
       aspect-ratio: 1;
-      block-size: calc(var(--size) - (2 * var(--border-width)) - 2px);
+      block-size: 100%;
+      border: var(--border-width) solid rgb(0 0 0 / 10%);
       border-radius: var(--border-radius-f);
-      background-color: var(--color-primary-inverse);
-      box-shadow: var(--shadow-small);
+      background-color: white;
+      background-clip: padding-box;
       transition: margin 0.1s ease-in-out;
     }
 
     &:checked {
-      background-color: var(--color-primary);
-      border-color: var(--color-primary);
       
+      --border-color: oklch(from var(--color-primary) min(l, 0.72) c h);
+
+      background-color: var(--border-color);
+
       &::before {
-        margin-inline-start: calc((var(--width) * var(--size)) - var(--size));
-        background-color: var(--color-primary-inverse);
+        margin-inline-start: calc(round(var(--width) * var(--size), 1px) - round(var(--size), 1px));
       }
 
       &[aria-invalid="false"] {
+        --border-color: var(--color-success);
+
         background-color: var(--color-success);
-        border-color: var(--color-success);
       }
 
       &[aria-invalid="true"] {
+        --border-color: var(--color-danger);
+
         background-color: var(--color-danger);
-        border-color: var(--color-danger);
       }
     }
 
@@ -2377,10 +2482,12 @@
 @layer base {
   
   :where(input, select, textarea) {
+    --border-color: var(--color-border-strong);
+
     background-color: var(--form-color-surface);
-    border: var(--border-width) solid var(--color-border-strong);
+    border: var(--border-width) solid var(--border-color);
+    border-bottom-color: color-mix(in oklab, var(--border-color), var(--shadow-small));
     border-radius: var(--border-radius-m);
-    box-shadow: var(--shadow-small);
     line-height: var(--line-height);
   }
 
@@ -2425,7 +2532,7 @@
 
   :is(input, select, textarea) {
     &[aria-invalid="false"] {
-      border-color: var(--color-success-border-strong);
+      --border-color: var(--color-success-border-strong);
 
       + small {
         color: var(--color-success-text);
@@ -2433,7 +2540,7 @@
     }
 
     &[aria-invalid="true"] {
-      border-color: var(--color-danger-border-strong);
+      --border-color: var(--color-danger-border-strong);
 
       + small {
         color: var(--color-danger-text);
@@ -2480,8 +2587,9 @@
   select[disabled],
   textarea[disabled],
   :where(fieldset[disabled]) :is(input:not([type="submit"], [type="button"], [type="reset"]), select, textarea) {
+    --border-color: var(--form-color-border-disabled);
+
     background-color: transparent;
-    border-color: var(--form-color-border-disabled); 
     opacity: 0.5;
     pointer-events: none;
   }
@@ -2530,65 +2638,90 @@
   }
 
   input[type="file"] {
+    
+    border: none;
+    box-shadow:
+      inset 0 calc(-1 * var(--border-width)) 0 color-mix(in oklab, transparent, var(--shadow-small)),
+      inset 0 0 0 var(--border-width) var(--border-color);
+
     &::file-selector-button {
+      --border-color: var(--color-primary);
+
       background-color: var(--color-primary);
       color: var(--color-primary-inverse);
-      box-shadow: var(--shadow-small);
       padding: var(--space-2xs) var(--space-xs);
-      border: var(--border-width) solid var(--color-primary);
+      border: var(--border-width) solid var(--border-color);
+      border-bottom-color: color-mix(in oklab, var(--border-color), var(--shadow-small));
+      
+      block-size: 100%;
       font-weight: bold;
       line-height: var(--line-height);
       text-align: center;
       margin-inline-end: var(--space-xs);
       border-radius: 0;
+      border-start-start-radius: var(--border-radius-m);
+      border-end-start-radius: var(--border-radius-m);
       font-family: inherit;
+      font-size: inherit;
     }
 
     &:is([aria-current], :hover)::file-selector-button {
-      background-color: oklch(from var(--color-primary) calc(l * var(--hover-multiplier)) c h);
-      border-color: oklch(from var(--color-primary) calc(l * var(--hover-multiplier)) c h);
+      --border-color: oklch(from var(--color-primary) calc(l * var(--hover-multiplier)) c h);
+
+      background-color: var(--border-color);
     }
 
     &:active::file-selector-button {
-      background-color: oklch(from var(--color-primary) calc(l * var(--hover-multiplier) * var(--hover-multiplier)) c h);
-      border-color: oklch(from var(--color-primary) calc(l * var(--hover-multiplier) * var(--hover-multiplier)) c h);
+      --border-color: oklch(from var(--color-primary) calc(l * var(--hover-multiplier) * var(--hover-multiplier)) c h);
+
+      background-color: var(--border-color);
     }
 
-    &.small::file-selector-button {
-      padding: var(--space-3xs) var(--space-2xs);
+    
+    &.small {
       font-size: var(--size-small);
+
+      &::file-selector-button {
+        padding: var(--space-3xs) var(--space-2xs);
+      }
     }
 
-    &.large::file-selector-button {
-      padding: var(--space-xs) var(--space-s);
+    &.large {
       font-size: var(--size-h4);
+
+      &::file-selector-button {
+        padding: var(--space-xs) var(--space-s);
+      }
     }
   }
 
   input[type="range"] {
     background-color: var(--color-fill);
     border-color: var(--color-border-weak);
-    height: 0.33em;
+    
+    height: round(0.33em, 2px);
     appearance: none;
     cursor: pointer;
     box-shadow: var(--shadow-inner);
 
     &::-moz-range-thumb {
-      width: 1em;
-      height: 1em;
-      background-color: var(--color-text);
+      width: round(1em, 2px);
+      height: round(1em, 2px);
+      
+      background-color: white;
+      background-clip: padding-box;
+      border: var(--border-width) solid rgb(0 0 0 / 20%);
       border-radius: var(--border-radius-f);
-      border: none;
-      box-shadow: var(--shadow-small);
     }
 
     &::-webkit-slider-thumb {
       appearance: none;
-      width: 1em;
-      height: 1em;
-      background-color: var(--color-text);
+      width: round(1em, 2px);
+      height: round(1em, 2px);
+      background-color: white;
+      background-clip: padding-box;
+      border: var(--border-width) solid rgb(0 0 0 / 20%);
       border-radius: var(--border-radius-f);
-      box-shadow: var(--shadow-small);
     }
 
     &:active {
@@ -2614,7 +2747,17 @@
     background-image: var(--icon-search);
     background-size: 1em auto;
     background-position: center left var(--space-xs);
-    background-repeat: no-repeat; 
+    background-repeat: no-repeat;
+
+    &.small {
+      padding-inline-start: calc(var(--space-2xs) + var(--space-2xs) + 1em);
+      background-position: center left var(--space-2xs);
+    }
+
+    &.large {
+      padding-inline-start: calc(var(--space-s) + var(--space-2xs) + 1em);
+      background-position: center left var(--space-s);
+    }
   }
 
   input:not([type="checkbox"], [type="radio"], [type="date"], [type="datetime-local"], 
@@ -2645,10 +2788,21 @@
   }
 
   select:not([multiple], [size]) {
+    padding-inline-end: calc(var(--space-xs) + var(--space-2xs) + 1.125em);
     background-image: var(--icon-select);
     background-position: center right var(--space-xs);
-    background-size: 1.125rem;
+    background-size: 1.125em;
     background-repeat: no-repeat;
+
+    &.small {
+      padding-inline-end: calc(var(--space-2xs) + var(--space-2xs) + 1.125em);
+      background-position: center right var(--space-2xs);
+    }
+
+    &.large {
+      padding-inline-end: calc(var(--space-s) + var(--space-2xs) + 1.125em);
+      background-position: center right var(--space-s);
+    }
   }
 
   select[multiple] option:checked {
@@ -2707,11 +2861,31 @@
   }
 
   [dir="rtl"] { 
-    input[type="search"],
     select:not([multiple], [size]),
     input:not([type="checkbox"], [type="radio"], [type="date"], [type="datetime-local"], 
     [type="month"], [type="time"], [type="week"], [type="range"])[aria-invalid] {
       background-position: center left var(--space-xs);
+
+      &.small {
+        background-position: center left var(--space-2xs);
+      }
+
+      &.large {
+        background-position: center left var(--space-s);
+      }
+    }
+
+    
+    input[type="search"] {
+      background-position: center right var(--space-xs);
+
+      &.small {
+        background-position: center right var(--space-2xs);
+      }
+
+      &.large {
+        background-position: center right var(--space-s);
+      }
     }
 
     textarea[aria-invalid] {
@@ -2730,25 +2904,44 @@
       border-radius: 0;
     }
 
-    :not(:first-child, button, input:is([type="submit"], [type="button"], [type="reset"])) {
+    
+    > :not(:first-child, button, [role="button"], input:is([type="submit"], [type="button"], [type="reset"])) {
       border-inline-start: 0;
     }
+
+    > :first-child {
+      border-start-start-radius: var(--border-radius-m);
+      border-end-start-radius: var(--border-radius-m);
+    }
+
+    > :last-child {
+      border-start-end-radius: var(--border-radius-m);
+      border-end-end-radius: var(--border-radius-m);
+    }
+
     
-    :last-child {
-      border-bottom-right-radius: var(--border-radius-m);
-      border-top-right-radius: var(--border-radius-m);
+    > .dropdown {
+      display: flex;
+      align-self: stretch;
+
+      > button[popovertarget] {
+        border-radius: inherit;
+      }
     }
 
-    :first-child {
-      border-bottom-left-radius: var(--border-radius-m);
-      border-top-left-radius: var(--border-radius-m);
+    
+    > :is(button, [role="button"], input:is([type="submit"], [type="button"], [type="reset"]), .dropdown)
+      + :is(button, [role="button"], input:is([type="submit"], [type="button"], [type="reset"])),
+    > :is(button, [role="button"], input:is([type="submit"], [type="button"], [type="reset"]))
+      + .dropdown > button[popovertarget] {
+      border-inline-start-color: color-mix(in oklab, var(--button-surface), var(--button-text) 20%);
     }
 
     button,
     input:is([type="submit"], [type="button"], [type="reset"]) {
       width: unset;
     }
-  }  
+  }
 }
 
 
@@ -2854,12 +3047,13 @@
   
   nav.tabs > ul {
     inline-size: 100%;
-    border-bottom: var(--border-width) solid var(--color-border-weak);
+    box-shadow: inset 0 calc(-1 * var(--border-width)) var(--color-border-weak);
     color: var(--color-text-muted);
     font-size: var(--size-small);
 
     li {
       padding: var(--space-3xs) var(--space-2xs);
+      border-bottom: calc(var(--border-width) + 1px) solid transparent;
 
       &:is(:hover, :active) {
         color: var(--color-text);
@@ -2868,7 +3062,7 @@
       &:is([aria-current], :has([aria-current])) {
         color: var(--color-text);
         font-weight: var(--font-weight-bold);
-        border-bottom: calc(var(--border-width) + 1px) solid var(--color-primary);
+        border-bottom-color: var(--color-primary);
       }
 
       button,
@@ -2881,11 +3075,13 @@
 
   
   nav[aria-label="pagination" i] > :is(ol,ul) {
+    --border-color: var(--color-border-strong);
+
     inline-size: fit-content;
     max-inline-size: 100%;
-    border: var(--border-width) solid var(--color-border-strong);
+    border: var(--border-width) solid var(--border-color);
+    border-bottom-color: color-mix(in oklab, var(--border-color), var(--shadow-small));
     border-radius: var(--border-radius-s);
-    box-shadow: var(--shadow-small);
 
     li {
       
@@ -2964,11 +3160,18 @@
   meter {
     appearance: none;
     block-size: 0.5em;
-    border: var(--border-width) solid var(--color-border-weak);
+    border: 0;
     border-radius: var(--border-radius-f);
-    box-shadow: var(--shadow-inner);
+
+    
+    box-shadow:
+      inset 0 0 0 var(--border-width) var(--color-border-weak),
+      var(--shadow-inner);
     overflow: hidden;
     inline-size: 100%;
+
+    --progress-edge-color: light-dark(rgb(0 0 0 / 13%), rgb(0 0 0 / 35%));
+    --progress-edge: inset 0 0 0 var(--border-width) var(--progress-edge-color);
   }
 
   progress {
@@ -2981,11 +3184,15 @@
 
     &::-webkit-progress-value {
       background-color: var(--color-primary);
+      border-radius: var(--border-radius-f);
+      box-shadow: var(--progress-edge);
       transition: width 0.1s ease-in-out;
     }
 
     &::-moz-progress-bar {
       background-color: var(--color-primary);
+      border-radius: var(--border-radius-f);
+      box-shadow: var(--progress-edge);
     }
   }
 
@@ -2997,10 +3204,12 @@
 
     &::-webkit-progress-value {
       background-color: transparent;
+      box-shadow: none;
     }
 
     &::-moz-progress-bar {
       background-color: transparent;
+      box-shadow: none;
     }
   }
 
@@ -3026,6 +3235,8 @@
 
     &::-moz-meter-bar {
       background: var(--color-success);
+      border-radius: var(--border-radius-f);
+      box-shadow: var(--progress-edge);
     }
 
     &:-moz-meter-sub-optimum::-moz-meter-bar {
@@ -3039,7 +3250,14 @@
     &::-webkit-meter-bar {
       background: transparent;
       border-radius: var(--border-radius-f);
-      block-size: 0.5em;
+      block-size: 100%;
+    }
+
+    &::-webkit-meter-optimum-value,
+    &::-webkit-meter-suboptimum-value,
+    &::-webkit-meter-even-less-good-value {
+      border-radius: var(--border-radius-f);
+      box-shadow: var(--progress-edge);
     }
 
     &::-webkit-meter-optimum-value {
@@ -3088,7 +3306,7 @@
 
   
   .shadow-none  {box-shadow: none}
-  .shadow-s     {box-shadow: var(--shadow-small)}
+  .shadow-s     {border-bottom: var(--border-width) solid color-mix(in oklab, var(--border-color, var(--color-border-weak)), var(--shadow-small))}
   .shadow-m     {box-shadow: var(--shadow-medium)}
   .shadow-l     {box-shadow: var(--shadow-large)}
   .shadow-inner {box-shadow: var(--shadow-inner)}