@cirthcss/cirth 0.15.0-beta.2 → 0.15.0

package/dist/cirth.classless.scoped.css

@@ -210,7 +210,7 @@
 }
 
 .cirth :where(a:not([role="button"])), .cirth [role="link"] {
-  --cirth-color: var(--cirth-primary);
+  --cirth-color: var(--cirth-primary-text);
   --cirth-background-color: transparent;
   --cirth-underline: var(--cirth-primary-underline);
   background-color: var(--cirth-background-color);
@@ -224,8 +224,8 @@
 }
 
 .cirth :where(a:not([role="button"])):is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), .cirth [role="link"]:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
-  --cirth-color: var(--cirth-primary-hover);
-  --cirth-underline: var(--cirth-primary-hover-underline);
+  --cirth-color: var(--cirth-primary-active);
+  --cirth-underline: var(--cirth-primary-underline-active);
   --cirth-text-decoration: underline;
 }
 
@@ -257,9 +257,9 @@
 }
 
 .cirth button, .cirth [type="submit"], .cirth [type="reset"], .cirth [type="button"], .cirth [role="button"] {
-  --cirth-background-color: var(--cirth-primary-background);
+  --cirth-background-color: var(--cirth-primary-surface);
   --cirth-border-color: var(--cirth-primary-border);
-  --cirth-color: var(--cirth-primary-inverse);
+  --cirth-color: var(--cirth-primary-on-surface);
   --cirth-box-shadow: var(--cirth-button-box-shadow, 0 0 0 #0000);
   max-width: 100%;
   min-block-size: max(2.75rem, var(--cirth-font-size-md) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2);
@@ -282,9 +282,9 @@
 }
 
 .cirth [type="file"]::file-selector-button {
-  --cirth-background-color: var(--cirth-primary-background);
+  --cirth-background-color: var(--cirth-primary-surface);
   --cirth-border-color: var(--cirth-primary-border);
-  --cirth-color: var(--cirth-primary-inverse);
+  --cirth-color: var(--cirth-primary-on-surface);
   --cirth-box-shadow: var(--cirth-button-box-shadow, 0 0 0 #0000);
   max-width: 100%;
   min-block-size: max(2.75rem, var(--cirth-font-size-md) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2);
@@ -307,24 +307,24 @@
 }
 
 .cirth button[aria-current]:not([aria-current="false"]), .cirth button:is(:hover, :active, :focus), .cirth [type="submit"][aria-current]:not([aria-current="false"]), .cirth [type="submit"]:is(:hover, :active, :focus), .cirth [type="reset"][aria-current]:not([aria-current="false"]), .cirth [type="reset"]:is(:hover, :active, :focus), .cirth [type="button"][aria-current]:not([aria-current="false"]), .cirth [type="button"]:is(:hover, :active, :focus), .cirth [role="button"][aria-current]:not([aria-current="false"]), .cirth [role="button"]:is(:hover, :active, :focus) {
-  --cirth-background-color: var(--cirth-primary-hover-background);
-  --cirth-border-color: var(--cirth-primary-hover-border);
+  --cirth-background-color: var(--cirth-primary-surface-active);
+  --cirth-border-color: var(--cirth-primary-border-active);
   --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 #0000);
-  --cirth-color: var(--cirth-primary-inverse);
+  --cirth-color: var(--cirth-primary-on-surface);
 }
 
 .cirth [type="file"]::file-selector-button:is() {
-  --cirth-background-color: var(--cirth-primary-hover-background);
-  --cirth-border-color: var(--cirth-primary-hover-border);
+  --cirth-background-color: var(--cirth-primary-surface-active);
+  --cirth-border-color: var(--cirth-primary-border-active);
   --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 #0000);
-  --cirth-color: var(--cirth-primary-inverse);
+  --cirth-color: var(--cirth-primary-on-surface);
 }
 
 .cirth [type="file"]::file-selector-button:is(:hover, :active, :focus) {
-  --cirth-background-color: var(--cirth-primary-hover-background);
-  --cirth-border-color: var(--cirth-primary-hover-border);
+  --cirth-background-color: var(--cirth-primary-surface-active);
+  --cirth-border-color: var(--cirth-primary-border-active);
   --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 #0000);
-  --cirth-color: var(--cirth-primary-inverse);
+  --cirth-color: var(--cirth-primary-on-surface);
 }
 
 .cirth button:active, .cirth [type="submit"]:active, .cirth [type="reset"]:active, .cirth [type="button"]:active, .cirth [role="button"]:active {
@@ -346,29 +346,29 @@
 }
 
 .cirth [type="reset"] {
-  --cirth-background-color: var(--cirth-secondary-background);
+  --cirth-background-color: var(--cirth-secondary-surface);
   --cirth-border-color: var(--cirth-secondary-border);
-  --cirth-color: var(--cirth-secondary-inverse);
+  --cirth-color: var(--cirth-secondary-on-surface);
   cursor: pointer;
 }
 
 .cirth [type="file"]::file-selector-button {
-  --cirth-background-color: var(--cirth-secondary-background);
+  --cirth-background-color: var(--cirth-secondary-surface);
   --cirth-border-color: var(--cirth-secondary-border);
-  --cirth-color: var(--cirth-secondary-inverse);
+  --cirth-color: var(--cirth-secondary-on-surface);
   cursor: pointer;
 }
 
 .cirth [type="reset"]:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
-  --cirth-background-color: var(--cirth-secondary-hover-background);
-  --cirth-border-color: var(--cirth-secondary-hover-border);
-  --cirth-color: var(--cirth-secondary-inverse);
+  --cirth-background-color: var(--cirth-secondary-surface-active);
+  --cirth-border-color: var(--cirth-secondary-border-active);
+  --cirth-color: var(--cirth-secondary-on-surface);
 }
 
 .cirth [type="file"]::file-selector-button:is(:hover, :active, :focus) {
-  --cirth-background-color: var(--cirth-secondary-hover-background);
-  --cirth-border-color: var(--cirth-secondary-hover-border);
-  --cirth-color: var(--cirth-secondary-inverse);
+  --cirth-background-color: var(--cirth-secondary-surface-active);
+  --cirth-border-color: var(--cirth-secondary-border-active);
+  --cirth-color: var(--cirth-secondary-on-surface);
 }
 
 .cirth [type="reset"]:focus-visible {
@@ -613,6 +613,20 @@
   border-style: dashed;
 }
 
+.cirth input[type="number"][readonly] {
+  appearance: textfield;
+}
+
+.cirth input[type="number"][readonly]::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.cirth input[type="number"][readonly]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
 .cirth input:not([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [readonly]):is(:active, :focus), .cirth :where(select, textarea):not([readonly]):is(:active, :focus) {
   --cirth-background-color: var(--cirth-form-element-active-background-color);
 }
@@ -779,7 +793,7 @@
 }
 
 .cirth [type="checkbox"]:checked, .cirth [type="checkbox"]:checked:active, .cirth [type="checkbox"]:checked:focus, .cirth [type="radio"]:checked, .cirth [type="radio"]:checked:active, .cirth [type="radio"]:checked:focus {
-  --cirth-background-color: var(--cirth-primary-background);
+  --cirth-background-color: var(--cirth-primary-surface);
   --cirth-border-color: var(--cirth-primary-border);
 }
 
@@ -794,7 +808,7 @@
 }
 
 .cirth [type="checkbox"]:not([role="switch"]):checked:before, .cirth [type="checkbox"]:not([role="switch"]):indeterminate:before {
-  background-color: var(--cirth-primary-inverse);
+  background-color: var(--cirth-primary-on-surface);
   content: "";
   width: 100%;
   height: 100%;
@@ -815,7 +829,7 @@
 }
 
 .cirth [type="checkbox"]:not([role="switch"]):indeterminate {
-  --cirth-background-color: var(--cirth-primary-background);
+  --cirth-background-color: var(--cirth-primary-surface);
   --cirth-border-color: var(--cirth-primary-border);
 }
 
@@ -828,7 +842,7 @@
 }
 
 .cirth [type="radio"]:checked, .cirth [type="radio"]:checked:active, .cirth [type="radio"]:checked:focus {
-  --cirth-background-color: var(--cirth-primary-inverse);
+  --cirth-background-color: var(--cirth-primary-on-surface);
   border-width: .42em;
 }
 
@@ -992,8 +1006,8 @@
 }
 
 .cirth [type="file"]:is(:hover, :active, :focus)::file-selector-button {
-  --cirth-background-color: var(--cirth-secondary-hover-background);
-  --cirth-border-color: var(--cirth-secondary-hover-border);
+  --cirth-background-color: var(--cirth-secondary-surface-active);
+  --cirth-border-color: var(--cirth-secondary-border-active);
 }
 
 .cirth [type="file"]:focus::file-selector-button {
@@ -1055,7 +1069,7 @@
 @media (hover: hover) and (pointer: fine) {
   .cirth [type="range"]:hover:not(:active, :focus, :disabled) {
     --cirth-range-border-color: var(--cirth-range-active-border-color);
-    --cirth-range-thumb-color: var(--cirth-secondary-hover);
+    --cirth-range-thumb-color: var(--cirth-secondary-active);
   }
 }
 
@@ -1335,7 +1349,7 @@
   --cirth-button-box-shadow: 0 0 0 var(--cirth-border-width)
     var(--cirth-primary-border);
   --cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width)
-    var(--cirth-primary-hover-border);
+    var(--cirth-primary-border-active);
 }
 
 .cirth [role="search"] button:focus, .cirth [role="search"] [type="submit"]:focus, .cirth [role="search"] [type="reset"]:focus, .cirth [role="search"] [type="button"]:focus, .cirth [role="search"] [role="button"]:focus, .cirth [role="group"]:not(fieldset) button:focus, .cirth [role="group"]:not(fieldset) [type="submit"]:focus, .cirth [role="group"]:not(fieldset) [type="reset"]:focus, .cirth [role="group"]:not(fieldset) [type="button"]:focus, .cirth [role="group"]:not(fieldset) [role="button"]:focus {
@@ -1666,11 +1680,11 @@
 .cirth header:not(:is(article, aside, dialog, figure, li, nav, section, td) *) > nav li :where(a:not([role="button"]), [role="link"]):is(:hover, :focus, :active) {
   --cirth-color: color-mix(in oklch,
     var(--cirth-muted-color),
-    var(--cirth-contrast));
+    var(--cirth-contrast-text));
 }
 
 .cirth header:not(:is(article, aside, dialog, figure, li, nav, section, td) *) > nav li :where(a:not([role="button"]), [role="link"]):is([aria-current]:not([aria-current="false"]), [aria-selected="true"]) {
-  --cirth-color: var(--cirth-contrast);
+  --cirth-color: var(--cirth-contrast-text);
   font-weight: var(--cirth-font-weight-semibold);
 }
 
@@ -2097,18 +2111,18 @@
   --cirth-success: light-dark(oklch(52.7% .115 153), oklch(65.7% .144 153));
   --cirth-warning: light-dark(oklch(48.3% .084 89.5), oklch(70% .122 89.5));
   --cirth-primary: light-dark(oklch(52.7% .107 44), oklch(65.7% .134 44));
-  --cirth-secondary: light-dark(oklch(52.7% .031 280), oklch(70% .021 280));
+  --cirth-secondary-text: light-dark(oklch(52.7% .031 280), oklch(70% .021 280));
   --cirth-secondary-underline: light-dark(oklch(52.7% .031 280 / .5), oklch(70% .021 280 / .5));
-  --cirth-secondary-hover: light-dark(oklch(44% .029 280), oklch(78.7% .014 280));
-  --cirth-secondary-hover-background: light-dark(oklch(44% .029 280), oklch(52.7% .031 280));
+  --cirth-secondary-active: light-dark(oklch(44% .029 280), oklch(78.7% .014 280));
+  --cirth-secondary-surface-active: light-dark(oklch(44% .029 280), oklch(52.7% .031 280));
   --cirth-secondary-focus: light-dark(oklch(48.3% .03 280 / .7), oklch(70% .021 280 / .7));
-  --cirth-contrast: light-dark(oklch(22.3% .023 280), oklch(91.7% .004 280));
-  --cirth-contrast-background: light-dark(oklch(22.3% .023 280), oklch(96% 0 280));
+  --cirth-contrast-text: light-dark(oklch(22.3% .023 280), oklch(91.7% .004 280));
+  --cirth-contrast-surface: light-dark(oklch(22.3% .023 280), oklch(96% 0 280));
   --cirth-contrast-underline: light-dark(oklch(22.3% .023 280 / .5), oklch(91.7% .004 280 / .5));
-  --cirth-contrast-hover: light-dark(oklch(0% 0 0), oklch(100% 0 0));
-  --cirth-contrast-hover-background: light-dark(oklch(0% 0 0), oklch(100% 0 0));
+  --cirth-contrast-active: light-dark(oklch(0% 0 0), oklch(100% 0 0));
+  --cirth-contrast-surface-active: light-dark(oklch(0% 0 0), oklch(100% 0 0));
   --cirth-contrast-focus: light-dark(oklch(48.3% .03 280 / .7), oklch(87.3% .007 280 / .5));
-  --cirth-contrast-inverse: light-dark(oklch(100% 0 0), oklch(0% 0 0));
+  --cirth-contrast-on-surface: light-dark(oklch(100% 0 0), oklch(0% 0 0));
   --cirth-link-visited-color: light-dark(oklch(48.3% 0 280), oklch(65.7% 0 280));
   --cirth-box-shadow: light-dark(.0145rem .029rem .174rem oklch(65.7% .025 280 / .01698), .0335rem .067rem .402rem oklch(65.7% .025 280 / .024), .0625rem .125rem .75rem oklch(65.7% .025 280 / .03), .1125rem .225rem 1.35rem oklch(65.7% .025 280 / .036), .2085rem .417rem 2.502rem oklch(65.7% .025 280 / .04302), .5rem 1rem 6rem oklch(65.7% .025 280 / .06), 0 0 0 .0625rem oklch(65.7% .025 280 / .015),
     .0145rem .029rem .174rem oklch(9% .011 280 / .01698), .0335rem .067rem .402rem oklch(9% .011 280 / .024), .0625rem .125rem .75rem oklch(9% .011 280 / .03), .1125rem .225rem 1.35rem oklch(9% .011 280 / .036), .2085rem .417rem 2.502rem oklch(9% .011 280 / .04302), .5rem 1rem 6rem oklch(9% .011 280 / .06), 0 0 0 .0625rem oklch(9% .011 280 / .015));
@@ -2144,17 +2158,20 @@
   --cirth-warning-border: oklch(from var(--cirth-warning) calc(l * 1.269) calc(c * 1.267) h);
   --cirth-warning-active: oklch(from var(--cirth-warning) calc(l * 1.091) calc(c * 1.081) h);
   --cirth-warning-surface: oklch(from var(--cirth-warning) 93% .05 h);
-  --cirth-primary-background: var(--cirth-primary);
-  --cirth-primary-border: var(--cirth-primary-background);
+  --cirth-primary-text: var(--cirth-primary);
+  --cirth-primary-surface: var(--cirth-primary);
+  --cirth-primary-border: var(--cirth-primary-surface);
   --cirth-primary-underline: oklch(from var(--cirth-primary) l c h / 50%);
-  --cirth-primary-hover: color-mix(in oklch, var(--cirth-primary) 83.5%, black);
-  --cirth-primary-hover-background: color-mix(in oklch,
+  --cirth-primary-active: color-mix(in oklch,
+    var(--cirth-primary) 83.5%,
+    black);
+  --cirth-primary-surface-active: color-mix(in oklch,
     var(--cirth-primary) 91.7%,
     black);
-  --cirth-primary-hover-border: var(--cirth-primary-hover-background);
-  --cirth-primary-hover-underline: var(--cirth-primary-hover);
+  --cirth-primary-border-active: var(--cirth-primary-surface-active);
+  --cirth-primary-underline-active: var(--cirth-primary-active);
   --cirth-primary-focus: oklch(from var(--cirth-primary) l c h / 75%);
-  --cirth-primary-inverse: oklch(100% 0 0);
+  --cirth-primary-on-surface: oklch(100% 0 0);
   --cirth-text-selection-color: oklch(from var(--cirth-primary) calc(l * 1.247) c h / 25%);
   --cirth-code-background-color: oklch(from var(--cirth-canvas) calc(l - .019) c h);
   --cirth-card-sectioning-background-color: oklch(from var(--cirth-canvas) calc(l + .009) c h);
@@ -2163,14 +2180,14 @@
   --cirth-form-element-active-background-color: var(--cirth-canvas);
   --cirth-dropdown-background-color: var(--cirth-card-background-color);
   --cirth-popover-background-color: var(--cirth-card-background-color);
-  --cirth-secondary-background: oklch(48.3% .03 280);
-  --cirth-secondary-border: var(--cirth-secondary-background);
-  --cirth-secondary-hover-border: var(--cirth-secondary-hover-background);
-  --cirth-secondary-hover-underline: var(--cirth-secondary-hover);
-  --cirth-secondary-inverse: oklch(100% 0 0);
-  --cirth-contrast-border: var(--cirth-contrast-background);
-  --cirth-contrast-hover-border: var(--cirth-contrast-hover-background);
-  --cirth-contrast-hover-underline: var(--cirth-secondary-hover);
+  --cirth-secondary-surface: oklch(48.3% .03 280);
+  --cirth-secondary-border: var(--cirth-secondary-surface);
+  --cirth-secondary-border-active: var(--cirth-secondary-surface-active);
+  --cirth-secondary-underline-active: var(--cirth-secondary-active);
+  --cirth-secondary-on-surface: oklch(100% 0 0);
+  --cirth-contrast-border: var(--cirth-contrast-surface);
+  --cirth-contrast-border-active: var(--cirth-contrast-surface-active);
+  --cirth-contrast-underline-active: var(--cirth-secondary-active);
   --cirth-mark-background-color: color-mix(in oklab,
     var(--cirth-primary) 18%,
     var(--cirth-canvas));
@@ -2195,12 +2212,12 @@
   --cirth-form-element-valid-active-border-color: var(--cirth-success-active);
   --cirth-form-element-valid-focus-color: var(--cirth-form-element-valid-active-border-color);
   --cirth-switch-thumb-box-shadow: 0 0 0 #0000;
-  --cirth-switch-checked-background-color: var(--cirth-primary-background);
-  --cirth-switch-color: var(--cirth-primary-inverse);
+  --cirth-switch-checked-background-color: var(--cirth-primary-surface);
+  --cirth-switch-color: var(--cirth-primary-on-surface);
   --cirth-range-thumb-border-color: var(--cirth-background-color);
-  --cirth-range-thumb-color: var(--cirth-secondary);
-  --cirth-range-thumb-active-color: var(--cirth-primary-background);
-  --cirth-accordion-active-summary-color: var(--cirth-primary-hover);
+  --cirth-range-thumb-color: var(--cirth-secondary-text);
+  --cirth-range-thumb-active-color: var(--cirth-primary-surface);
+  --cirth-accordion-active-summary-color: var(--cirth-primary-active);
   --cirth-accordion-close-summary-color: var(--cirth-ink);
   --cirth-accordion-open-summary-color: var(--cirth-ink);
   --cirth-card-border-color: color-mix(in oklab,
@@ -2210,7 +2227,7 @@
   --cirth-meter-optimum-color: var(--cirth-success);
   --cirth-meter-suboptimum-color: var(--cirth-warning);
   --cirth-meter-even-less-good-color: var(--cirth-error);
-  --cirth-progress-color: var(--cirth-primary-background);
+  --cirth-progress-color: var(--cirth-primary-surface);
   --cirth-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(103, 105, 125)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
   --cirth-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(103, 105, 125)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
   --cirth-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(103, 105, 125)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
@@ -2234,20 +2251,21 @@
     --cirth-warning-border: var(--cirth-warning);
     --cirth-warning-active: oklch(from var(--cirth-warning) calc(l * 1.124) calc(c * 1.121) h);
     --cirth-warning-surface: oklch(from var(--cirth-warning) 35.3% .063 h);
-    --cirth-primary-background: color-mix(in oklch,
+    --cirth-primary-text: var(--cirth-primary);
+    --cirth-primary-surface: color-mix(in oklch,
       var(--cirth-primary) 75.2%,
       black);
-    --cirth-primary-border: var(--cirth-primary-background);
+    --cirth-primary-border: var(--cirth-primary-surface);
     --cirth-primary-underline: oklch(from var(--cirth-primary) l c h / 50%);
-    --cirth-primary-hover: oklch(from var(--cirth-primary) calc(l * 1.124) calc(c * 1.132) h);
-    --cirth-primary-hover-background: color-mix(in oklch,
+    --cirth-primary-active: oklch(from var(--cirth-primary) calc(l * 1.124) calc(c * 1.132) h);
+    --cirth-primary-surface-active: color-mix(in oklch,
       var(--cirth-primary) 72%,
       black);
-    --cirth-primary-hover-border: var(--cirth-primary-hover-background);
-    --cirth-primary-hover-underline: var(--cirth-primary-hover);
+    --cirth-primary-border-active: var(--cirth-primary-surface-active);
+    --cirth-primary-underline-active: var(--cirth-primary-active);
     --cirth-primary-focus: oklch(from var(--cirth-primary) l c h / 80%);
     --cirth-text-selection-color: oklch(from var(--cirth-primary) calc(l * 1.065) c h / 18.75%);
-    --cirth-primary-inverse: oklch(100% 0 0);
+    --cirth-primary-on-surface: oklch(100% 0 0);
     --cirth-code-background-color: oklch(from var(--cirth-canvas) calc(l - .02) c h);
     --cirth-card-sectioning-background-color: oklch(from var(--cirth-canvas) calc(l + .025) c h);
     --cirth-form-element-background-color: oklch(from var(--cirth-canvas) calc(l - .008) c h);
@@ -2255,14 +2273,14 @@
     --cirth-form-element-active-background-color: var(--cirth-canvas);
     --cirth-dropdown-background-color: var(--cirth-card-background-color);
     --cirth-popover-background-color: var(--cirth-card-background-color);
-    --cirth-secondary-background: oklch(48.3% .03 280);
-    --cirth-secondary-border: var(--cirth-secondary-background);
-    --cirth-secondary-hover-border: var(--cirth-secondary-hover-background);
-    --cirth-secondary-hover-underline: var(--cirth-secondary-hover);
-    --cirth-secondary-inverse: oklch(100% 0 0);
-    --cirth-contrast-border: var(--cirth-contrast-background);
-    --cirth-contrast-hover-border: var(--cirth-contrast-hover-background);
-    --cirth-contrast-hover-underline: var(--cirth-contrast-hover);
+    --cirth-secondary-surface: oklch(48.3% .03 280);
+    --cirth-secondary-border: var(--cirth-secondary-surface);
+    --cirth-secondary-border-active: var(--cirth-secondary-surface-active);
+    --cirth-secondary-underline-active: var(--cirth-secondary-active);
+    --cirth-secondary-on-surface: oklch(100% 0 0);
+    --cirth-contrast-border: var(--cirth-contrast-surface);
+    --cirth-contrast-border-active: var(--cirth-contrast-surface-active);
+    --cirth-contrast-underline-active: var(--cirth-contrast-active);
     --cirth-mark-background-color: color-mix(in oklab,
       var(--cirth-primary) 24%,
       var(--cirth-canvas));
@@ -2287,12 +2305,12 @@
     --cirth-form-element-valid-active-border-color: var(--cirth-success-active);
     --cirth-form-element-valid-focus-color: var(--cirth-form-element-valid-active-border-color);
     --cirth-switch-thumb-box-shadow: 0 0 0 #0000;
-    --cirth-switch-checked-background-color: var(--cirth-primary-background);
-    --cirth-switch-color: var(--cirth-primary-inverse);
+    --cirth-switch-checked-background-color: var(--cirth-primary-surface);
+    --cirth-switch-color: var(--cirth-primary-on-surface);
     --cirth-range-thumb-border-color: var(--cirth-background-color);
-    --cirth-range-thumb-color: var(--cirth-secondary);
-    --cirth-range-thumb-active-color: var(--cirth-primary-background);
-    --cirth-accordion-active-summary-color: var(--cirth-primary-hover);
+    --cirth-range-thumb-color: var(--cirth-secondary-text);
+    --cirth-range-thumb-active-color: var(--cirth-primary-surface);
+    --cirth-accordion-active-summary-color: var(--cirth-primary-active);
     --cirth-accordion-close-summary-color: var(--cirth-ink);
     --cirth-accordion-open-summary-color: var(--cirth-ink);
     --cirth-card-border-color: color-mix(in oklab,
@@ -2302,7 +2320,7 @@
     --cirth-meter-optimum-color: var(--cirth-success);
     --cirth-meter-suboptimum-color: var(--cirth-warning);
     --cirth-meter-even-less-good-color: var(--cirth-error);
-    --cirth-progress-color: var(--cirth-primary);
+    --cirth-progress-color: var(--cirth-primary-text);
     --cirth-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(142, 144, 161)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
     --cirth-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(142, 144, 161)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
     --cirth-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(142, 144, 161)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
@@ -2326,20 +2344,21 @@
   --cirth-warning-border: var(--cirth-warning);
   --cirth-warning-active: oklch(from var(--cirth-warning) calc(l * 1.124) calc(c * 1.121) h);
   --cirth-warning-surface: oklch(from var(--cirth-warning) 35.3% .063 h);
-  --cirth-primary-background: color-mix(in oklch,
+  --cirth-primary-text: var(--cirth-primary);
+  --cirth-primary-surface: color-mix(in oklch,
     var(--cirth-primary) 75.2%,
     black);
-  --cirth-primary-border: var(--cirth-primary-background);
+  --cirth-primary-border: var(--cirth-primary-surface);
   --cirth-primary-underline: oklch(from var(--cirth-primary) l c h / 50%);
-  --cirth-primary-hover: oklch(from var(--cirth-primary) calc(l * 1.124) calc(c * 1.132) h);
-  --cirth-primary-hover-background: color-mix(in oklch,
+  --cirth-primary-active: oklch(from var(--cirth-primary) calc(l * 1.124) calc(c * 1.132) h);
+  --cirth-primary-surface-active: color-mix(in oklch,
     var(--cirth-primary) 72%,
     black);
-  --cirth-primary-hover-border: var(--cirth-primary-hover-background);
-  --cirth-primary-hover-underline: var(--cirth-primary-hover);
+  --cirth-primary-border-active: var(--cirth-primary-surface-active);
+  --cirth-primary-underline-active: var(--cirth-primary-active);
   --cirth-primary-focus: oklch(from var(--cirth-primary) l c h / 80%);
   --cirth-text-selection-color: oklch(from var(--cirth-primary) calc(l * 1.065) c h / 18.75%);
-  --cirth-primary-inverse: oklch(100% 0 0);
+  --cirth-primary-on-surface: oklch(100% 0 0);
   --cirth-code-background-color: oklch(from var(--cirth-canvas) calc(l - .02) c h);
   --cirth-card-sectioning-background-color: oklch(from var(--cirth-canvas) calc(l + .025) c h);
   --cirth-form-element-background-color: oklch(from var(--cirth-canvas) calc(l - .008) c h);
@@ -2347,14 +2366,14 @@
   --cirth-form-element-active-background-color: var(--cirth-canvas);
   --cirth-dropdown-background-color: var(--cirth-card-background-color);
   --cirth-popover-background-color: var(--cirth-card-background-color);
-  --cirth-secondary-background: oklch(48.3% .03 280);
-  --cirth-secondary-border: var(--cirth-secondary-background);
-  --cirth-secondary-hover-border: var(--cirth-secondary-hover-background);
-  --cirth-secondary-hover-underline: var(--cirth-secondary-hover);
-  --cirth-secondary-inverse: oklch(100% 0 0);
-  --cirth-contrast-border: var(--cirth-contrast-background);
-  --cirth-contrast-hover-border: var(--cirth-contrast-hover-background);
-  --cirth-contrast-hover-underline: var(--cirth-contrast-hover);
+  --cirth-secondary-surface: oklch(48.3% .03 280);
+  --cirth-secondary-border: var(--cirth-secondary-surface);
+  --cirth-secondary-border-active: var(--cirth-secondary-surface-active);
+  --cirth-secondary-underline-active: var(--cirth-secondary-active);
+  --cirth-secondary-on-surface: oklch(100% 0 0);
+  --cirth-contrast-border: var(--cirth-contrast-surface);
+  --cirth-contrast-border-active: var(--cirth-contrast-surface-active);
+  --cirth-contrast-underline-active: var(--cirth-contrast-active);
   --cirth-mark-background-color: color-mix(in oklab,
     var(--cirth-primary) 24%,
     var(--cirth-canvas));
@@ -2379,12 +2398,12 @@
   --cirth-form-element-valid-active-border-color: var(--cirth-success-active);
   --cirth-form-element-valid-focus-color: var(--cirth-form-element-valid-active-border-color);
   --cirth-switch-thumb-box-shadow: 0 0 0 #0000;
-  --cirth-switch-checked-background-color: var(--cirth-primary-background);
-  --cirth-switch-color: var(--cirth-primary-inverse);
+  --cirth-switch-checked-background-color: var(--cirth-primary-surface);
+  --cirth-switch-color: var(--cirth-primary-on-surface);
   --cirth-range-thumb-border-color: var(--cirth-background-color);
-  --cirth-range-thumb-color: var(--cirth-secondary);
-  --cirth-range-thumb-active-color: var(--cirth-primary-background);
-  --cirth-accordion-active-summary-color: var(--cirth-primary-hover);
+  --cirth-range-thumb-color: var(--cirth-secondary-text);
+  --cirth-range-thumb-active-color: var(--cirth-primary-surface);
+  --cirth-accordion-active-summary-color: var(--cirth-primary-active);
   --cirth-accordion-close-summary-color: var(--cirth-ink);
   --cirth-accordion-open-summary-color: var(--cirth-ink);
   --cirth-card-border-color: color-mix(in oklab,
@@ -2394,7 +2413,7 @@
   --cirth-meter-optimum-color: var(--cirth-success);
   --cirth-meter-suboptimum-color: var(--cirth-warning);
   --cirth-meter-even-less-good-color: var(--cirth-error);
-  --cirth-progress-color: var(--cirth-primary);
+  --cirth-progress-color: var(--cirth-primary-text);
   --cirth-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(142, 144, 161)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
   --cirth-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(142, 144, 161)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
   --cirth-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(142, 144, 161)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
@@ -2404,7 +2423,7 @@
 }
 
 .cirth progress, .cirth [type="checkbox"], .cirth [type="radio"], .cirth [type="range"] {
-  accent-color: var(--cirth-primary);
+  accent-color: var(--cirth-primary-text);
 }
 
 @media (prefers-contrast: more) {
@@ -2417,7 +2436,7 @@
     --cirth-h5-color: var(--cirth-color);
     --cirth-h6-color: var(--cirth-color);
     --cirth-muted-color: oklch(39.7% .028 280);
-    --cirth-secondary: oklch(39.7% .028 280);
+    --cirth-secondary-text: oklch(39.7% .028 280);
     --cirth-code-color: oklch(35.3% .027 280);
     --cirth-link-visited-color: oklch(35.3% .027 280);
     --cirth-muted-border-color: oklch(57% .032 280);
@@ -2429,10 +2448,10 @@
     --cirth-form-element-invalid-border-color: oklch(48.3% .165 22);
     --cirth-form-element-valid-border-color: oklch(48.3% .106 153);
     --cirth-primary: oklch(39.7% .081 44);
-    --cirth-primary-hover: oklch(31% .063 44);
+    --cirth-primary-active: oklch(31% .063 44);
     --cirth-primary-underline: var(--cirth-primary);
-    --cirth-secondary-underline: var(--cirth-secondary);
-    --cirth-contrast-underline: var(--cirth-contrast);
+    --cirth-secondary-underline: var(--cirth-secondary-text);
+    --cirth-contrast-underline: var(--cirth-contrast-text);
     --cirth-primary-focus: oklch(48.3% .098 44);
     --cirth-secondary-focus: oklch(48.3% .03 280);
     --cirth-contrast-focus: oklch(48.3% .03 280);
@@ -2458,7 +2477,7 @@
     --cirth-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(183, 185, 195)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
     --cirth-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(183, 185, 195)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
     --cirth-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(183, 185, 195)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
-    --cirth-secondary: oklch(78.7% .014 280);
+    --cirth-secondary-text: oklch(78.7% .014 280);
     --cirth-code-color: oklch(83% .011 280);
     --cirth-link-visited-color: oklch(78.7% .014 280);
     --cirth-muted-border-color: oklch(57% .032 280);
@@ -2467,12 +2486,12 @@
     --cirth-form-element-invalid-border-color: oklch(78.7% .105 22);
     --cirth-form-element-valid-border-color: oklch(78.7% .172 153);
     --cirth-primary: oklch(78.7% .092 44);
-    --cirth-primary-hover: oklch(87.3% .051 44);
-    --cirth-primary-background: oklch(44% .09 44);
-    --cirth-primary-hover-background: oklch(39.7% .081 44);
+    --cirth-primary-active: oklch(87.3% .051 44);
+    --cirth-primary-surface: oklch(44% .09 44);
+    --cirth-primary-surface-active: oklch(39.7% .081 44);
     --cirth-primary-underline: var(--cirth-primary);
-    --cirth-secondary-underline: var(--cirth-secondary);
-    --cirth-contrast-underline: var(--cirth-contrast);
+    --cirth-secondary-underline: var(--cirth-secondary-text);
+    --cirth-contrast-underline: var(--cirth-contrast-text);
     --cirth-primary-focus: oklch(70% .141 44);
     --cirth-secondary-focus: oklch(70% .021 280);
     --cirth-contrast-focus: oklch(87.3% .007 280);
@@ -2498,7 +2517,7 @@
     --cirth-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(183, 185, 195)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
     --cirth-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(183, 185, 195)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
     --cirth-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(183, 185, 195)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
-    --cirth-secondary: oklch(78.7% .014 280);
+    --cirth-secondary-text: oklch(78.7% .014 280);
     --cirth-code-color: oklch(83% .011 280);
     --cirth-link-visited-color: oklch(78.7% .014 280);
     --cirth-muted-border-color: oklch(57% .032 280);
@@ -2507,12 +2526,12 @@
     --cirth-form-element-invalid-border-color: oklch(78.7% .105 22);
     --cirth-form-element-valid-border-color: oklch(78.7% .172 153);
     --cirth-primary: oklch(78.7% .092 44);
-    --cirth-primary-hover: oklch(87.3% .051 44);
-    --cirth-primary-background: oklch(44% .09 44);
-    --cirth-primary-hover-background: oklch(39.7% .081 44);
+    --cirth-primary-active: oklch(87.3% .051 44);
+    --cirth-primary-surface: oklch(44% .09 44);
+    --cirth-primary-surface-active: oklch(39.7% .081 44);
     --cirth-primary-underline: var(--cirth-primary);
-    --cirth-secondary-underline: var(--cirth-secondary);
-    --cirth-contrast-underline: var(--cirth-contrast);
+    --cirth-secondary-underline: var(--cirth-secondary-text);
+    --cirth-contrast-underline: var(--cirth-contrast-text);
     --cirth-primary-focus: oklch(70% .141 44);
     --cirth-secondary-focus: oklch(70% .021 280);
     --cirth-contrast-focus: oklch(87.3% .007 280);