@cirthcss/cirth 0.15.0-beta.1 → 0.15.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (22) hide show
  1. package/README.md +4 -4
  2. package/dist/cirth.classless.css +315 -254
  3. package/dist/cirth.classless.min.css +1 -1
  4. package/dist/cirth.classless.scoped.css +315 -254
  5. package/dist/cirth.classless.scoped.min.css +1 -1
  6. package/dist/cirth.css +397 -289
  7. package/dist/cirth.min.css +1 -1
  8. package/dist/cirth.print.classless.css +13 -10
  9. package/dist/cirth.print.classless.min.css +1 -1
  10. package/dist/cirth.print.classless.scoped.css +13 -10
  11. package/dist/cirth.print.classless.scoped.min.css +1 -1
  12. package/dist/cirth.print.css +13 -10
  13. package/dist/cirth.print.min.css +1 -1
  14. package/dist/cirth.print.scoped.css +13 -10
  15. package/dist/cirth.print.scoped.min.css +1 -1
  16. package/dist/cirth.scoped.css +397 -289
  17. package/dist/cirth.scoped.min.css +1 -1
  18. package/dist/presets/plain.css +2 -2
  19. package/dist/presets/plain.min.css +1 -1
  20. package/dist/presets/playroom.css +5 -5
  21. package/dist/presets/playroom.min.css +1 -1
  22. package/package.json +6 -4
package/dist/cirth.classless.css CHANGED
@@ -50,6 +50,10 @@ section {
50
50
  margin-bottom: var(--cirth-block-spacing-vertical);
51
51
  }
52
52
 
53
+ main > section + section {
54
+ margin-block-start: var(--cirth-space-8);
55
+ }
56
+
53
57
  b, strong {
54
58
  font-weight: bolder;
55
59
  }
@@ -162,6 +166,15 @@ mark {
162
166
  background-color: var(--cirth-mark-background-color);
163
167
  color: var(--cirth-mark-color);
164
168
  vertical-align: baseline;
169
+ -webkit-box-decoration-break: clone;
170
+ box-decoration-break: clone;
171
+ }
172
+
173
+ @media (forced-colors: active) {
174
+ mark {
175
+ color: marktext;
176
+ background-color: mark;
177
+ }
165
178
  }
166
179
 
167
180
  blockquote {
@@ -200,7 +213,7 @@ del {
200
213
  }
201
214
 
202
215
  :where(a:not([role="button"])), [role="link"] {
203
- --cirth-color: var(--cirth-primary);
216
+ --cirth-color: var(--cirth-primary-text);
204
217
  --cirth-background-color: transparent;
205
218
  --cirth-underline: var(--cirth-primary-underline);
206
219
  background-color: var(--cirth-background-color);
@@ -214,8 +227,8 @@ del {
214
227
  }
215
228
 
216
229
  :where(a:not([role="button"])):is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), [role="link"]:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
217
- --cirth-color: var(--cirth-primary-hover);
218
- --cirth-underline: var(--cirth-primary-hover-underline);
230
+ --cirth-color: var(--cirth-primary-active);
231
+ --cirth-underline: var(--cirth-primary-underline-active);
219
232
  --cirth-text-decoration: underline;
220
233
  }
221
234
 
@@ -247,9 +260,9 @@ button, [type="submit"], [type="reset"], [type="button"] {
247
260
  }
248
261
 
249
262
  button, [type="submit"], [type="reset"], [type="button"], [role="button"] {
250
- --cirth-background-color: var(--cirth-primary-background);
263
+ --cirth-background-color: var(--cirth-primary-surface);
251
264
  --cirth-border-color: var(--cirth-primary-border);
252
- --cirth-color: var(--cirth-primary-inverse);
265
+ --cirth-color: var(--cirth-primary-on-surface);
253
266
  --cirth-box-shadow: var(--cirth-button-box-shadow, 0 0 0 #0000);
254
267
  max-width: 100%;
255
268
  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);
@@ -272,9 +285,9 @@ button, [type="submit"], [type="reset"], [type="button"], [role="button"] {
272
285
  }
273
286
 
274
287
  [type="file"]::file-selector-button {
275
- --cirth-background-color: var(--cirth-primary-background);
288
+ --cirth-background-color: var(--cirth-primary-surface);
276
289
  --cirth-border-color: var(--cirth-primary-border);
277
- --cirth-color: var(--cirth-primary-inverse);
290
+ --cirth-color: var(--cirth-primary-on-surface);
278
291
  --cirth-box-shadow: var(--cirth-button-box-shadow, 0 0 0 #0000);
279
292
  max-width: 100%;
280
293
  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);
@@ -297,24 +310,24 @@ button, [type="submit"], [type="reset"], [type="button"], [role="button"] {
297
310
  }
298
311
 
299
312
  button[aria-current]:not([aria-current="false"]), button:is(:hover, :active, :focus), [type="submit"][aria-current]:not([aria-current="false"]), [type="submit"]:is(:hover, :active, :focus), [type="reset"][aria-current]:not([aria-current="false"]), [type="reset"]:is(:hover, :active, :focus), [type="button"][aria-current]:not([aria-current="false"]), [type="button"]:is(:hover, :active, :focus), [role="button"][aria-current]:not([aria-current="false"]), [role="button"]:is(:hover, :active, :focus) {
300
- --cirth-background-color: var(--cirth-primary-hover-background);
301
- --cirth-border-color: var(--cirth-primary-hover-border);
313
+ --cirth-background-color: var(--cirth-primary-surface-active);
314
+ --cirth-border-color: var(--cirth-primary-border-active);
302
315
  --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 #0000);
303
- --cirth-color: var(--cirth-primary-inverse);
316
+ --cirth-color: var(--cirth-primary-on-surface);
304
317
  }
305
318
 
306
319
  [type="file"]::file-selector-button:is() {
307
- --cirth-background-color: var(--cirth-primary-hover-background);
308
- --cirth-border-color: var(--cirth-primary-hover-border);
320
+ --cirth-background-color: var(--cirth-primary-surface-active);
321
+ --cirth-border-color: var(--cirth-primary-border-active);
309
322
  --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 #0000);
310
- --cirth-color: var(--cirth-primary-inverse);
323
+ --cirth-color: var(--cirth-primary-on-surface);
311
324
  }
312
325
 
313
326
  [type="file"]::file-selector-button:is(:hover, :active, :focus) {
314
- --cirth-background-color: var(--cirth-primary-hover-background);
315
- --cirth-border-color: var(--cirth-primary-hover-border);
327
+ --cirth-background-color: var(--cirth-primary-surface-active);
328
+ --cirth-border-color: var(--cirth-primary-border-active);
316
329
  --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 #0000);
317
- --cirth-color: var(--cirth-primary-inverse);
330
+ --cirth-color: var(--cirth-primary-on-surface);
318
331
  }
319
332
 
320
333
  button:active, [type="submit"]:active, [type="reset"]:active, [type="button"]:active, [role="button"]:active {
@@ -336,29 +349,29 @@ button:focus-visible, button[aria-current]:not([aria-current="false"]):focus-vis
336
349
  }
337
350
 
338
351
  [type="reset"] {
339
- --cirth-background-color: var(--cirth-secondary-background);
352
+ --cirth-background-color: var(--cirth-secondary-surface);
340
353
  --cirth-border-color: var(--cirth-secondary-border);
341
- --cirth-color: var(--cirth-secondary-inverse);
354
+ --cirth-color: var(--cirth-secondary-on-surface);
342
355
  cursor: pointer;
343
356
  }
344
357
 
345
358
  [type="file"]::file-selector-button {
346
- --cirth-background-color: var(--cirth-secondary-background);
359
+ --cirth-background-color: var(--cirth-secondary-surface);
347
360
  --cirth-border-color: var(--cirth-secondary-border);
348
- --cirth-color: var(--cirth-secondary-inverse);
361
+ --cirth-color: var(--cirth-secondary-on-surface);
349
362
  cursor: pointer;
350
363
  }
351
364
 
352
365
  [type="reset"]:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
353
- --cirth-background-color: var(--cirth-secondary-hover-background);
354
- --cirth-border-color: var(--cirth-secondary-hover-border);
355
- --cirth-color: var(--cirth-secondary-inverse);
366
+ --cirth-background-color: var(--cirth-secondary-surface-active);
367
+ --cirth-border-color: var(--cirth-secondary-border-active);
368
+ --cirth-color: var(--cirth-secondary-on-surface);
356
369
  }
357
370
 
358
371
  [type="file"]::file-selector-button:is(:hover, :active, :focus) {
359
- --cirth-background-color: var(--cirth-secondary-hover-background);
360
- --cirth-border-color: var(--cirth-secondary-hover-border);
361
- --cirth-color: var(--cirth-secondary-inverse);
372
+ --cirth-background-color: var(--cirth-secondary-surface-active);
373
+ --cirth-border-color: var(--cirth-secondary-border-active);
374
+ --cirth-color: var(--cirth-secondary-on-surface);
362
375
  }
363
376
 
364
377
  [type="reset"]:focus-visible {
@@ -384,6 +397,8 @@ form:has(:user-invalid) :is(button:not([type="button"], [type="reset"]), [type="
384
397
 
385
398
  caption {
386
399
  color: var(--cirth-muted-color);
400
+ font-size: var(--cirth-font-size-sm);
401
+ line-height: var(--cirth-line-height-normal);
387
402
  text-align: start;
388
403
  padding-block-end: calc(var(--cirth-spacing) * .5);
389
404
  }
@@ -490,6 +505,8 @@ figure {
490
505
  figure figcaption {
491
506
  padding: calc(var(--cirth-spacing) * .5) 0;
492
507
  color: var(--cirth-muted-color);
508
+ font-size: var(--cirth-font-size-sm);
509
+ line-height: var(--cirth-line-height-normal);
493
510
  }
494
511
 
495
512
  hr {
@@ -599,6 +616,20 @@ input, select, textarea {
599
616
  border-style: dashed;
600
617
  }
601
618
 
619
+ input[type="number"][readonly] {
620
+ appearance: textfield;
621
+ }
622
+
623
+ input[type="number"][readonly]::-webkit-inner-spin-button {
624
+ -webkit-appearance: none;
625
+ margin: 0;
626
+ }
627
+
628
+ input[type="number"][readonly]::-webkit-outer-spin-button {
629
+ -webkit-appearance: none;
630
+ margin: 0;
631
+ }
632
+
602
633
  input:not([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [readonly]):is(:active, :focus), :where(select, textarea):not([readonly]):is(:active, :focus) {
603
634
  --cirth-background-color: var(--cirth-form-element-active-background-color);
604
635
  }
@@ -765,7 +796,7 @@ label:has([type="checkbox"], [type="radio"]) {
765
796
  }
766
797
 
767
798
  [type="checkbox"]:checked, [type="checkbox"]:checked:active, [type="checkbox"]:checked:focus, [type="radio"]:checked, [type="radio"]:checked:active, [type="radio"]:checked:focus {
768
- --cirth-background-color: var(--cirth-primary-background);
799
+ --cirth-background-color: var(--cirth-primary-surface);
769
800
  --cirth-border-color: var(--cirth-primary-border);
770
801
  }
771
802
 
@@ -780,7 +811,7 @@ label:has([type="checkbox"], [type="radio"]) {
780
811
  }
781
812
 
782
813
  [type="checkbox"]:not([role="switch"]):checked:before, [type="checkbox"]:not([role="switch"]):indeterminate:before {
783
- background-color: var(--cirth-primary-inverse);
814
+ background-color: var(--cirth-primary-on-surface);
784
815
  content: "";
785
816
  width: 100%;
786
817
  height: 100%;
@@ -801,7 +832,7 @@ label:has([type="checkbox"], [type="radio"]) {
801
832
  }
802
833
 
803
834
  [type="checkbox"]:not([role="switch"]):indeterminate {
804
- --cirth-background-color: var(--cirth-primary-background);
835
+ --cirth-background-color: var(--cirth-primary-surface);
805
836
  --cirth-border-color: var(--cirth-primary-border);
806
837
  }
807
838
 
@@ -814,7 +845,7 @@ label:has([type="checkbox"], [type="radio"]) {
814
845
  }
815
846
 
816
847
  [type="radio"]:checked, [type="radio"]:checked:active, [type="radio"]:checked:focus {
817
- --cirth-background-color: var(--cirth-primary-inverse);
848
+ --cirth-background-color: var(--cirth-primary-on-surface);
818
849
  border-width: .42em;
819
850
  }
820
851
 
@@ -978,8 +1009,8 @@ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type
978
1009
  }
979
1010
 
980
1011
  [type="file"]:is(:hover, :active, :focus)::file-selector-button {
981
- --cirth-background-color: var(--cirth-secondary-hover-background);
982
- --cirth-border-color: var(--cirth-secondary-hover-border);
1012
+ --cirth-background-color: var(--cirth-secondary-surface-active);
1013
+ --cirth-border-color: var(--cirth-secondary-border-active);
983
1014
  }
984
1015
 
985
1016
  [type="file"]:focus::file-selector-button {
@@ -989,9 +1020,9 @@ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type
989
1020
 
990
1021
  [type="range"] {
991
1022
  appearance: none;
992
- background: none;
993
1023
  width: 100%;
994
- height: 1.25rem;
1024
+ height: max(2.75rem, var(--cirth-font-size-md) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2);
1025
+ background: none;
995
1026
  }
996
1027
 
997
1028
  [type="range"]::-webkit-slider-runnable-track {
@@ -1038,6 +1069,18 @@ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type
1038
1069
  --cirth-range-thumb-color: var(--cirth-range-thumb-active-color);
1039
1070
  }
1040
1071
 
1072
+ @media (hover: hover) and (pointer: fine) {
1073
+ [type="range"]:hover:not(:active, :focus, :disabled) {
1074
+ --cirth-range-border-color: var(--cirth-range-active-border-color);
1075
+ --cirth-range-thumb-color: var(--cirth-secondary-active);
1076
+ }
1077
+ }
1078
+
1079
+ [type="range"]:focus-visible {
1080
+ outline: var(--cirth-outline-width) solid var(--cirth-primary-focus);
1081
+ outline-offset: var(--cirth-space-1);
1082
+ }
1083
+
1041
1084
  [type="range"]:active::-webkit-slider-thumb {
1042
1085
  transform: scale(1.25);
1043
1086
  }
@@ -1309,7 +1352,7 @@ article > footer {
1309
1352
  --cirth-button-box-shadow: 0 0 0 var(--cirth-border-width)
1310
1353
  var(--cirth-primary-border);
1311
1354
  --cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width)
1312
- var(--cirth-primary-hover-border);
1355
+ var(--cirth-primary-border-active);
1313
1356
  }
1314
1357
 
1315
1358
  [role="search"] button:focus, [role="search"] [type="submit"]:focus, [role="search"] [type="reset"]:focus, [role="search"] [type="button"]:focus, [role="search"] [role="button"]:focus, [role="group"]:not(fieldset) button:focus, [role="group"]:not(fieldset) [type="submit"]:focus, [role="group"]:not(fieldset) [type="reset"]:focus, [role="group"]:not(fieldset) [type="button"]:focus, [role="group"]:not(fieldset) [role="button"]:focus {
@@ -1441,7 +1484,7 @@ dialog[open] {
1441
1484
  @starting-style {
1442
1485
  dialog[open] > article {
1443
1486
  opacity: 0;
1444
- transform: translateY(-100%);
1487
+ transform: translateY(-.5rem);
1445
1488
  }
1446
1489
  }
1447
1490
 
@@ -1644,11 +1687,11 @@ header:not(:is(article, aside, dialog, figure, li, nav, section, td) *) > nav li
1644
1687
  header:not(:is(article, aside, dialog, figure, li, nav, section, td) *) > nav li :where(a:not([role="button"]), [role="link"]):is(:hover, :focus, :active) {
1645
1688
  --cirth-color: color-mix(in oklch,
1646
1689
  var(--cirth-muted-color),
1647
- var(--cirth-contrast));
1690
+ var(--cirth-contrast-text));
1648
1691
  }
1649
1692
 
1650
1693
  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"]) {
1651
- --cirth-color: var(--cirth-contrast);
1694
+ --cirth-color: var(--cirth-contrast-text);
1652
1695
  font-weight: var(--cirth-font-weight-semibold);
1653
1696
  }
1654
1697
 
@@ -1805,6 +1848,7 @@ progress::-moz-progress-bar {
1805
1848
  scroll-behavior: auto;
1806
1849
  transition-delay: var(--cirth-duration-instant);
1807
1850
  transition-duration: var(--cirth-duration-instant);
1851
+ --cirth-transition: var(--cirth-duration-instant) var(--cirth-ease-out);
1808
1852
  animation-duration: 1ms;
1809
1853
  animation-iteration-count: 1;
1810
1854
  animation-delay: -1ms;
@@ -1932,7 +1976,11 @@ progress::-moz-progress-bar {
1932
1976
  --cirth-icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
1933
1977
  --cirth-icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
1934
1978
  --cirth-icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
1935
- --cirth-icon-loading: url("data:image/svg+xml,%3Csvg fill='none' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E g %7B animation: rotate 2s linear infinite; transform-origin: center center; %7D circle %7B stroke-dasharray: 75,100; stroke-dashoffset: -5; animation: dash 1.5s ease-in-out infinite; stroke-linecap: round; %7D @keyframes rotate %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D @keyframes dash %7B 0%25 %7B stroke-dasharray: 1,100; stroke-dashoffset: 0; %7D 50%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -17.5; %7D 100%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -62; %7D %7D %3C/style%3E%3Cg%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='rgb(136, 146, 164)' stroke-width='4' /%3E%3C/g%3E%3C/svg%3E");
1979
+ --cirth-icon-loading: url("data:image/svg+xml,%3Csvg fill='none' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E g %7B animation: rotate 2s linear infinite; transform-origin: center center; %7D circle %7B stroke-dasharray: 75,100; stroke-dashoffset: -5; animation: dash 1.5s ease-in-out infinite; stroke-linecap: round; %7D @keyframes rotate %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D @keyframes dash %7B 0%25 %7B stroke-dasharray: 1,100; stroke-dashoffset: 0; %7D 50%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -17.5; %7D 100%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -62; %7D %7D %3C/style%3E%3Cg%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='rgb(142, 144, 161)' stroke-width='4' /%3E%3C/g%3E%3C/svg%3E");
1980
+ }
1981
+
1982
+ :focus-visible {
1983
+ transition-duration: var(--cirth-duration-instant);
1936
1984
  }
1937
1985
 
1938
1986
  a {
@@ -2061,47 +2109,46 @@ details summary[role="button"]:after {
2061
2109
  }
2062
2110
 
2063
2111
  :root, :host {
2064
- --cirth-canvas: light-dark(oklch(97.4% .004 69.35), oklch(20.15% .003 264));
2065
- --cirth-ink: light-dark(oklch(35.3% .021 264), oklch(83% .016 264));
2112
+ --cirth-canvas: light-dark(oklch(97.3% .006 44), oklch(20.15% .0225 280));
2113
+ --cirth-ink: light-dark(oklch(35.3% .027 280), oklch(83% .011 280));
2066
2114
  --cirth-color: var(--cirth-ink);
2067
- --cirth-text-selection-color: light-dark(oklch(65.7% .121 69.35 / .25), oklch(70% .129 69.35 / .1875));
2068
- --cirth-muted-color: light-dark(oklch(52.7% .032 264), oklch(65.7% .03 264));
2069
- --cirth-muted-border-color: light-dark(oklch(93.85% .003 264), oklch(26.7% .011 264));
2070
- --cirth-error: light-dark(oklch(44% .151 29.73), oklch(74.3% .133 29.73));
2071
- --cirth-success: light-dark(oklch(52.7% .1 160.59), oklch(65.7% .125 160.59));
2072
- --cirth-warning: light-dark(oklch(48.3% .086 78), oklch(70% .124 78));
2073
- --cirth-primary: light-dark(oklch(52.7% .097 69.35), oklch(70% .129 69.35));
2074
- --cirth-secondary: light-dark(oklch(52.7% .032 264), oklch(70% .028 264));
2075
- --cirth-secondary-underline: light-dark(oklch(52.7% .032 264 / .5), oklch(70% .028 264 / .5));
2076
- --cirth-secondary-hover: light-dark(oklch(44% .028 264), oklch(78.7% .021 264));
2077
- --cirth-secondary-hover-background: light-dark(oklch(44% .028 264), oklch(52.7% .032 264));
2078
- --cirth-secondary-focus: light-dark(oklch(48.3% .03 264 / .7), oklch(70% .028 264 / .7));
2079
- --cirth-contrast: light-dark(oklch(22.3% .006 264), oklch(91.7% .006 264));
2080
- --cirth-contrast-background: light-dark(oklch(22.3% .006 264), oklch(96% 0 264));
2081
- --cirth-contrast-underline: light-dark(oklch(22.3% .006 264 / .5), oklch(91.7% .006 264 / .5));
2082
- --cirth-contrast-hover: light-dark(oklch(0% 0 0), oklch(100% 0 0));
2083
- --cirth-contrast-hover-background: light-dark(oklch(0% 0 0), oklch(100% 0 0));
2084
- --cirth-contrast-focus: light-dark(oklch(48.3% .03 264 / .7), oklch(87.3% .011 264 / .5));
2085
- --cirth-contrast-inverse: light-dark(oklch(100% 0 0), oklch(0% 0 0));
2086
- --cirth-link-visited-color: light-dark(oklch(48.3% 0 264), oklch(65.7% 0 264));
2087
- --cirth-box-shadow: light-dark(.0145rem .029rem .174rem oklch(65.7% .03 264 / .01698), .0335rem .067rem .402rem oklch(65.7% .03 264 / .024), .0625rem .125rem .75rem oklch(65.7% .03 264 / .03), .1125rem .225rem 1.35rem oklch(65.7% .03 264 / .036), .2085rem .417rem 2.502rem oklch(65.7% .03 264 / .04302), .5rem 1rem 6rem oklch(65.7% .03 264 / .06), 0 0 0 .0625rem oklch(65.7% .03 264 / .015),
2088
- .0145rem .029rem .174rem oklch(9% 0 none / .01698), .0335rem .067rem .402rem oklch(9% 0 none / .024), .0625rem .125rem .75rem oklch(9% 0 none / .03), .1125rem .225rem 1.35rem oklch(9% 0 none / .036), .2085rem .417rem 2.502rem oklch(9% 0 none / .04302), .5rem 1rem 6rem oklch(9% 0 none / .06), 0 0 0 .0625rem oklch(9% 0 none / .015));
2089
- --cirth-h1-color: light-dark(oklch(22.3% .006 264), oklch(96% 0 264));
2090
- --cirth-h2-color: light-dark(oklch(26.7% .011 264), oklch(91.7% .006 264));
2091
- --cirth-h3-color: light-dark(oklch(31% .016 264), oklch(83% .016 264));
2092
- --cirth-h4-color: light-dark(oklch(35.3% .021 264), oklch(78.7% .021 264));
2093
- --cirth-h5-color: light-dark(oklch(39.7% .025 264), oklch(74.3% .025 264));
2094
- --cirth-h6-color: light-dark(oklch(44% .028 264), oklch(65.7% .03 264));
2095
- --cirth-mark-color: light-dark(oklch(18% 0 264), oklch(100% 0 0));
2096
- --cirth-code-color: light-dark(oklch(52.7% .032 264), oklch(65.7% .03 264));
2097
- --cirth-form-element-selected-background-color: light-dark(oklch(91.7% .006 264), oklch(31% .016 264));
2098
- --cirth-form-element-border-color: light-dark(oklch(61.3% .032 264), oklch(52.7% .032 264));
2099
- --cirth-form-element-color: light-dark(oklch(26.7% .011 264), oklch(91.7% .006 264));
2100
- --cirth-switch-background-color: light-dark(oklch(61.3% .032 264), oklch(52.7% .032 264));
2101
- --cirth-range-border-color: light-dark(oklch(91.7% .006 264), oklch(26.7% .011 264));
2102
- --cirth-range-active-border-color: light-dark(oklch(83% .016 264), oklch(31% .016 264));
2103
- --cirth-progress-background-color: light-dark(oklch(91.7% .006 264), oklch(26.7% .011 264));
2104
- --cirth-progress-border-color: light-dark(oklch(61.3% .032 264), oklch(52.7% .032 264));
2115
+ --cirth-muted-color: light-dark(oklch(52.7% .031 280), oklch(65.7% .025 280));
2116
+ --cirth-muted-border-color: light-dark(oklch(93.85% .002 280), oklch(26.7% .025 280));
2117
+ --cirth-error: light-dark(oklch(44% .151 22), oklch(74.3% .133 22));
2118
+ --cirth-success: light-dark(oklch(52.7% .115 153), oklch(65.7% .144 153));
2119
+ --cirth-warning: light-dark(oklch(48.3% .084 89.5), oklch(70% .122 89.5));
2120
+ --cirth-primary: light-dark(oklch(52.7% .107 44), oklch(65.7% .134 44));
2121
+ --cirth-secondary-text: light-dark(oklch(52.7% .031 280), oklch(70% .021 280));
2122
+ --cirth-secondary-underline: light-dark(oklch(52.7% .031 280 / .5), oklch(70% .021 280 / .5));
2123
+ --cirth-secondary-active: light-dark(oklch(44% .029 280), oklch(78.7% .014 280));
2124
+ --cirth-secondary-surface-active: light-dark(oklch(44% .029 280), oklch(52.7% .031 280));
2125
+ --cirth-secondary-focus: light-dark(oklch(48.3% .03 280 / .7), oklch(70% .021 280 / .7));
2126
+ --cirth-contrast-text: light-dark(oklch(22.3% .023 280), oklch(91.7% .004 280));
2127
+ --cirth-contrast-surface: light-dark(oklch(22.3% .023 280), oklch(96% 0 280));
2128
+ --cirth-contrast-underline: light-dark(oklch(22.3% .023 280 / .5), oklch(91.7% .004 280 / .5));
2129
+ --cirth-contrast-active: light-dark(oklch(0% 0 0), oklch(100% 0 0));
2130
+ --cirth-contrast-surface-active: light-dark(oklch(0% 0 0), oklch(100% 0 0));
2131
+ --cirth-contrast-focus: light-dark(oklch(48.3% .03 280 / .7), oklch(87.3% .007 280 / .5));
2132
+ --cirth-contrast-on-surface: light-dark(oklch(100% 0 0), oklch(0% 0 0));
2133
+ --cirth-link-visited-color: light-dark(oklch(48.3% 0 280), oklch(65.7% 0 280));
2134
+ --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),
2135
+ .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));
2136
+ --cirth-h1-color: light-dark(oklch(22.3% .023 280), oklch(96% 0 280));
2137
+ --cirth-h2-color: light-dark(oklch(26.7% .025 280), oklch(91.7% .004 280));
2138
+ --cirth-h3-color: light-dark(oklch(31% .026 280), oklch(83% .011 280));
2139
+ --cirth-h4-color: light-dark(oklch(35.3% .027 280), oklch(78.7% .014 280));
2140
+ --cirth-h5-color: light-dark(oklch(39.7% .028 280), oklch(74.3% .018 280));
2141
+ --cirth-h6-color: light-dark(oklch(44% .029 280), oklch(65.7% .025 280));
2142
+ --cirth-mark-color: light-dark(oklch(18% .022 280), oklch(100% 0 0));
2143
+ --cirth-code-color: light-dark(oklch(52.7% .031 280), oklch(65.7% .025 280));
2144
+ --cirth-form-element-selected-background-color: light-dark(oklch(91.7% .004 280), oklch(31% .026 280));
2145
+ --cirth-form-element-border-color: light-dark(oklch(61.3% .028 280), oklch(52.7% .031 280));
2146
+ --cirth-form-element-color: light-dark(oklch(26.7% .025 280), oklch(91.7% .004 280));
2147
+ --cirth-switch-background-color: light-dark(oklch(61.3% .028 280), oklch(52.7% .031 280));
2148
+ --cirth-range-border-color: light-dark(oklch(91.7% .004 280), oklch(26.7% .025 280));
2149
+ --cirth-range-active-border-color: light-dark(oklch(83% .011 280), oklch(31% .026 280));
2150
+ --cirth-progress-background-color: light-dark(oklch(91.7% .004 280), oklch(26.7% .025 280));
2151
+ --cirth-progress-border-color: light-dark(oklch(61.3% .028 280), oklch(52.7% .031 280));
2105
2152
  }
2106
2153
 
2107
2154
  :where([data-theme="light"]), :root:where(:not([data-theme="dark"])), :host(:where(:not([data-theme="dark"]))) {
@@ -2118,17 +2165,21 @@ details summary[role="button"]:after {
2118
2165
  --cirth-warning-border: oklch(from var(--cirth-warning) calc(l * 1.269) calc(c * 1.267) h);
2119
2166
  --cirth-warning-active: oklch(from var(--cirth-warning) calc(l * 1.091) calc(c * 1.081) h);
2120
2167
  --cirth-warning-surface: oklch(from var(--cirth-warning) 93% .05 h);
2121
- --cirth-primary-background: var(--cirth-primary);
2122
- --cirth-primary-border: var(--cirth-primary-background);
2168
+ --cirth-primary-text: var(--cirth-primary);
2169
+ --cirth-primary-surface: var(--cirth-primary);
2170
+ --cirth-primary-border: var(--cirth-primary-surface);
2123
2171
  --cirth-primary-underline: oklch(from var(--cirth-primary) l c h / 50%);
2124
- --cirth-primary-hover: color-mix(in oklch, var(--cirth-primary) 83.5%, black);
2125
- --cirth-primary-hover-background: color-mix(in oklch,
2172
+ --cirth-primary-active: color-mix(in oklch,
2173
+ var(--cirth-primary) 83.5%,
2174
+ black);
2175
+ --cirth-primary-surface-active: color-mix(in oklch,
2126
2176
  var(--cirth-primary) 91.7%,
2127
2177
  black);
2128
- --cirth-primary-hover-border: var(--cirth-primary-hover-background);
2129
- --cirth-primary-hover-underline: var(--cirth-primary-hover);
2178
+ --cirth-primary-border-active: var(--cirth-primary-surface-active);
2179
+ --cirth-primary-underline-active: var(--cirth-primary-active);
2130
2180
  --cirth-primary-focus: oklch(from var(--cirth-primary) l c h / 75%);
2131
- --cirth-primary-inverse: oklch(100% 0 0);
2181
+ --cirth-primary-on-surface: oklch(100% 0 0);
2182
+ --cirth-text-selection-color: oklch(from var(--cirth-primary) calc(l * 1.247) c h / 25%);
2132
2183
  --cirth-code-background-color: oklch(from var(--cirth-canvas) calc(l - .019) c h);
2133
2184
  --cirth-card-sectioning-background-color: oklch(from var(--cirth-canvas) calc(l + .009) c h);
2134
2185
  --cirth-form-element-background-color: oklch(from var(--cirth-canvas) calc(l - .008) c h);
@@ -2136,15 +2187,17 @@ details summary[role="button"]:after {
2136
2187
  --cirth-form-element-active-background-color: var(--cirth-canvas);
2137
2188
  --cirth-dropdown-background-color: var(--cirth-card-background-color);
2138
2189
  --cirth-popover-background-color: var(--cirth-card-background-color);
2139
- --cirth-secondary-background: oklch(48.3% .03 264);
2140
- --cirth-secondary-border: var(--cirth-secondary-background);
2141
- --cirth-secondary-hover-border: var(--cirth-secondary-hover-background);
2142
- --cirth-secondary-hover-underline: var(--cirth-secondary-hover);
2143
- --cirth-secondary-inverse: oklch(100% 0 0);
2144
- --cirth-contrast-border: var(--cirth-contrast-background);
2145
- --cirth-contrast-hover-border: var(--cirth-contrast-hover-background);
2146
- --cirth-contrast-hover-underline: var(--cirth-secondary-hover);
2147
- --cirth-mark-background-color: var(--cirth-warning-surface);
2190
+ --cirth-secondary-surface: oklch(48.3% .03 280);
2191
+ --cirth-secondary-border: var(--cirth-secondary-surface);
2192
+ --cirth-secondary-border-active: var(--cirth-secondary-surface-active);
2193
+ --cirth-secondary-underline-active: var(--cirth-secondary-active);
2194
+ --cirth-secondary-on-surface: oklch(100% 0 0);
2195
+ --cirth-contrast-border: var(--cirth-contrast-surface);
2196
+ --cirth-contrast-border-active: var(--cirth-contrast-surface-active);
2197
+ --cirth-contrast-underline-active: var(--cirth-secondary-active);
2198
+ --cirth-mark-background-color: color-mix(in oklab,
2199
+ var(--cirth-primary) 18%,
2200
+ var(--cirth-canvas));
2148
2201
  --cirth-ins-color: var(--cirth-success-text);
2149
2202
  --cirth-del-color: var(--cirth-error-text);
2150
2203
  --cirth-blockquote-border-color: var(--cirth-muted-border-color);
@@ -2152,7 +2205,7 @@ details summary[role="button"]:after {
2152
2205
  --cirth-button-box-shadow: 0 0 0 #0000;
2153
2206
  --cirth-button-hover-box-shadow: 0 0 0 #0000;
2154
2207
  --cirth-table-border-color: var(--cirth-card-border-color);
2155
- --cirth-table-row-stripped-background-color: oklch(57% .032 264 / .0375);
2208
+ --cirth-table-row-stripped-background-color: oklch(57% .032 280 / .0375);
2156
2209
  --cirth-code-kbd-background-color: var(--cirth-ink);
2157
2210
  --cirth-code-kbd-color: var(--cirth-background-color);
2158
2211
  --cirth-form-element-placeholder-color: var(--cirth-muted-color);
@@ -2166,28 +2219,28 @@ details summary[role="button"]:after {
2166
2219
  --cirth-form-element-valid-active-border-color: var(--cirth-success-active);
2167
2220
  --cirth-form-element-valid-focus-color: var(--cirth-form-element-valid-active-border-color);
2168
2221
  --cirth-switch-thumb-box-shadow: 0 0 0 #0000;
2169
- --cirth-switch-checked-background-color: var(--cirth-primary-background);
2170
- --cirth-switch-color: var(--cirth-primary-inverse);
2222
+ --cirth-switch-checked-background-color: var(--cirth-primary-surface);
2223
+ --cirth-switch-color: var(--cirth-primary-on-surface);
2171
2224
  --cirth-range-thumb-border-color: var(--cirth-background-color);
2172
- --cirth-range-thumb-color: var(--cirth-secondary-background);
2173
- --cirth-range-thumb-active-color: var(--cirth-primary-background);
2174
- --cirth-accordion-active-summary-color: var(--cirth-primary-hover);
2225
+ --cirth-range-thumb-color: var(--cirth-secondary-text);
2226
+ --cirth-range-thumb-active-color: var(--cirth-primary-surface);
2227
+ --cirth-accordion-active-summary-color: var(--cirth-primary-active);
2175
2228
  --cirth-accordion-close-summary-color: var(--cirth-ink);
2176
2229
  --cirth-accordion-open-summary-color: var(--cirth-ink);
2177
2230
  --cirth-card-border-color: color-mix(in oklab,
2178
2231
  var(--cirth-form-element-border-color) 38%,
2179
- var(--cirth-card-background-color));
2180
- --cirth-modal-overlay-background-color: oklch(93.85% .003 264deg / var(--cirth-opacity-overlay));
2232
+ oklch(from var(--cirth-card-background-color) l 0 h));
2233
+ --cirth-modal-overlay-background-color: oklch(93.85% .002 280deg / var(--cirth-opacity-overlay));
2181
2234
  --cirth-meter-optimum-color: var(--cirth-success);
2182
2235
  --cirth-meter-suboptimum-color: var(--cirth-warning);
2183
2236
  --cirth-meter-even-less-good-color: var(--cirth-error);
2184
- --cirth-progress-color: var(--cirth-primary-background);
2185
- --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(98, 107, 126)' 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");
2186
- --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(98, 107, 126)' 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");
2187
- --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(98, 107, 126)' 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");
2188
- --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(98, 107, 126)' 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");
2189
- --cirth-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(40, 124, 87)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
2190
- --cirth-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(189, 47, 33)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
2237
+ --cirth-progress-color: var(--cirth-primary-surface);
2238
+ --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");
2239
+ --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");
2240
+ --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");
2241
+ --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(103, 105, 125)' 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");
2242
+ --cirth-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(40, 126, 74)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
2243
+ --cirth-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(189, 44, 56)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
2191
2244
  }
2192
2245
 
2193
2246
  @media only screen and (prefers-color-scheme: dark) {
@@ -2205,19 +2258,21 @@ details summary[role="button"]:after {
2205
2258
  --cirth-warning-border: var(--cirth-warning);
2206
2259
  --cirth-warning-active: oklch(from var(--cirth-warning) calc(l * 1.124) calc(c * 1.121) h);
2207
2260
  --cirth-warning-surface: oklch(from var(--cirth-warning) 35.3% .063 h);
2208
- --cirth-primary-background: color-mix(in oklch,
2261
+ --cirth-primary-text: var(--cirth-primary);
2262
+ --cirth-primary-surface: color-mix(in oklch,
2209
2263
  var(--cirth-primary) 75.2%,
2210
2264
  black);
2211
- --cirth-primary-border: var(--cirth-primary-background);
2265
+ --cirth-primary-border: var(--cirth-primary-surface);
2212
2266
  --cirth-primary-underline: oklch(from var(--cirth-primary) l c h / 50%);
2213
- --cirth-primary-hover: oklch(from var(--cirth-primary) calc(l * 1.124) calc(c * 1.132) h);
2214
- --cirth-primary-hover-background: color-mix(in oklch,
2267
+ --cirth-primary-active: oklch(from var(--cirth-primary) calc(l * 1.124) calc(c * 1.132) h);
2268
+ --cirth-primary-surface-active: color-mix(in oklch,
2215
2269
  var(--cirth-primary) 72%,
2216
2270
  black);
2217
- --cirth-primary-hover-border: var(--cirth-primary-hover-background);
2218
- --cirth-primary-hover-underline: var(--cirth-primary-hover);
2219
- --cirth-primary-focus: oklch(from var(--cirth-primary) l c h / 70%);
2220
- --cirth-primary-inverse: oklch(100% 0 0);
2271
+ --cirth-primary-border-active: var(--cirth-primary-surface-active);
2272
+ --cirth-primary-underline-active: var(--cirth-primary-active);
2273
+ --cirth-primary-focus: oklch(from var(--cirth-primary) l c h / 80%);
2274
+ --cirth-text-selection-color: oklch(from var(--cirth-primary) calc(l * 1.065) c h / 18.75%);
2275
+ --cirth-primary-on-surface: oklch(100% 0 0);
2221
2276
  --cirth-code-background-color: oklch(from var(--cirth-canvas) calc(l - .02) c h);
2222
2277
  --cirth-card-sectioning-background-color: oklch(from var(--cirth-canvas) calc(l + .025) c h);
2223
2278
  --cirth-form-element-background-color: oklch(from var(--cirth-canvas) calc(l - .008) c h);
@@ -2225,15 +2280,17 @@ details summary[role="button"]:after {
2225
2280
  --cirth-form-element-active-background-color: var(--cirth-canvas);
2226
2281
  --cirth-dropdown-background-color: var(--cirth-card-background-color);
2227
2282
  --cirth-popover-background-color: var(--cirth-card-background-color);
2228
- --cirth-secondary-background: oklch(48.3% .03 264);
2229
- --cirth-secondary-border: var(--cirth-secondary-background);
2230
- --cirth-secondary-hover-border: var(--cirth-secondary-hover-background);
2231
- --cirth-secondary-hover-underline: var(--cirth-secondary-hover);
2232
- --cirth-secondary-inverse: oklch(100% 0 0);
2233
- --cirth-contrast-border: var(--cirth-contrast-background);
2234
- --cirth-contrast-hover-border: var(--cirth-contrast-hover-background);
2235
- --cirth-contrast-hover-underline: var(--cirth-contrast-hover);
2236
- --cirth-mark-background-color: var(--cirth-warning-surface);
2283
+ --cirth-secondary-surface: oklch(48.3% .03 280);
2284
+ --cirth-secondary-border: var(--cirth-secondary-surface);
2285
+ --cirth-secondary-border-active: var(--cirth-secondary-surface-active);
2286
+ --cirth-secondary-underline-active: var(--cirth-secondary-active);
2287
+ --cirth-secondary-on-surface: oklch(100% 0 0);
2288
+ --cirth-contrast-border: var(--cirth-contrast-surface);
2289
+ --cirth-contrast-border-active: var(--cirth-contrast-surface-active);
2290
+ --cirth-contrast-underline-active: var(--cirth-contrast-active);
2291
+ --cirth-mark-background-color: color-mix(in oklab,
2292
+ var(--cirth-primary) 24%,
2293
+ var(--cirth-canvas));
2237
2294
  --cirth-ins-color: var(--cirth-success-text);
2238
2295
  --cirth-del-color: var(--cirth-error-text);
2239
2296
  --cirth-blockquote-border-color: var(--cirth-muted-border-color);
@@ -2241,10 +2298,10 @@ details summary[role="button"]:after {
2241
2298
  --cirth-button-box-shadow: 0 0 0 #0000;
2242
2299
  --cirth-button-hover-box-shadow: 0 0 0 #0000;
2243
2300
  --cirth-table-border-color: var(--cirth-card-border-color);
2244
- --cirth-table-row-stripped-background-color: oklch(57% .032 264 / .0375);
2301
+ --cirth-table-row-stripped-background-color: oklch(57% .032 280 / .0375);
2245
2302
  --cirth-code-kbd-background-color: var(--cirth-ink);
2246
2303
  --cirth-code-kbd-color: var(--cirth-background-color);
2247
- --cirth-form-element-placeholder-color: oklch(65.7% .03 264);
2304
+ --cirth-form-element-placeholder-color: oklch(65.7% .025 280);
2248
2305
  --cirth-form-element-active-border-color: var(--cirth-primary-border);
2249
2306
  --cirth-form-element-focus-color: var(--cirth-primary-focus);
2250
2307
  --cirth-form-element-disabled-opacity: var(--cirth-opacity-disabled);
@@ -2255,28 +2312,28 @@ details summary[role="button"]:after {
2255
2312
  --cirth-form-element-valid-active-border-color: var(--cirth-success-active);
2256
2313
  --cirth-form-element-valid-focus-color: var(--cirth-form-element-valid-active-border-color);
2257
2314
  --cirth-switch-thumb-box-shadow: 0 0 0 #0000;
2258
- --cirth-switch-checked-background-color: var(--cirth-primary-background);
2259
- --cirth-switch-color: var(--cirth-primary-inverse);
2315
+ --cirth-switch-checked-background-color: var(--cirth-primary-surface);
2316
+ --cirth-switch-color: var(--cirth-primary-on-surface);
2260
2317
  --cirth-range-thumb-border-color: var(--cirth-background-color);
2261
- --cirth-range-thumb-color: var(--cirth-secondary-background);
2262
- --cirth-range-thumb-active-color: var(--cirth-primary-background);
2263
- --cirth-accordion-active-summary-color: var(--cirth-primary-hover);
2318
+ --cirth-range-thumb-color: var(--cirth-secondary-text);
2319
+ --cirth-range-thumb-active-color: var(--cirth-primary-surface);
2320
+ --cirth-accordion-active-summary-color: var(--cirth-primary-active);
2264
2321
  --cirth-accordion-close-summary-color: var(--cirth-ink);
2265
2322
  --cirth-accordion-open-summary-color: var(--cirth-ink);
2266
2323
  --cirth-card-border-color: color-mix(in oklab,
2267
2324
  var(--cirth-form-element-border-color) 46%,
2268
2325
  var(--cirth-card-background-color));
2269
- --cirth-modal-overlay-background-color: oklch(9% 0 0deg / var(--cirth-opacity-overlay));
2326
+ --cirth-modal-overlay-background-color: oklch(9% .011 280deg / var(--cirth-opacity-overlay));
2270
2327
  --cirth-meter-optimum-color: var(--cirth-success);
2271
2328
  --cirth-meter-suboptimum-color: var(--cirth-warning);
2272
2329
  --cirth-meter-even-less-good-color: var(--cirth-error);
2273
- --cirth-progress-color: var(--cirth-primary);
2274
- --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(136, 146, 164)' 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");
2275
- --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(136, 146, 164)' 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");
2276
- --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(136, 146, 164)' 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");
2277
- --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(136, 146, 164)' 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");
2278
- --cirth-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(75, 215, 153)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
2279
- --cirth-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(246, 160, 145)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
2330
+ --cirth-progress-color: var(--cirth-primary-text);
2331
+ --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");
2332
+ --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");
2333
+ --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");
2334
+ --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(142, 144, 161)' 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");
2335
+ --cirth-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(75, 216, 131)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
2336
+ --cirth-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(246, 158, 155)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
2280
2337
  }
2281
2338
  }
2282
2339
 
@@ -2294,19 +2351,21 @@ details summary[role="button"]:after {
2294
2351
  --cirth-warning-border: var(--cirth-warning);
2295
2352
  --cirth-warning-active: oklch(from var(--cirth-warning) calc(l * 1.124) calc(c * 1.121) h);
2296
2353
  --cirth-warning-surface: oklch(from var(--cirth-warning) 35.3% .063 h);
2297
- --cirth-primary-background: color-mix(in oklch,
2354
+ --cirth-primary-text: var(--cirth-primary);
2355
+ --cirth-primary-surface: color-mix(in oklch,
2298
2356
  var(--cirth-primary) 75.2%,
2299
2357
  black);
2300
- --cirth-primary-border: var(--cirth-primary-background);
2358
+ --cirth-primary-border: var(--cirth-primary-surface);
2301
2359
  --cirth-primary-underline: oklch(from var(--cirth-primary) l c h / 50%);
2302
- --cirth-primary-hover: oklch(from var(--cirth-primary) calc(l * 1.124) calc(c * 1.132) h);
2303
- --cirth-primary-hover-background: color-mix(in oklch,
2360
+ --cirth-primary-active: oklch(from var(--cirth-primary) calc(l * 1.124) calc(c * 1.132) h);
2361
+ --cirth-primary-surface-active: color-mix(in oklch,
2304
2362
  var(--cirth-primary) 72%,
2305
2363
  black);
2306
- --cirth-primary-hover-border: var(--cirth-primary-hover-background);
2307
- --cirth-primary-hover-underline: var(--cirth-primary-hover);
2308
- --cirth-primary-focus: oklch(from var(--cirth-primary) l c h / 70%);
2309
- --cirth-primary-inverse: oklch(100% 0 0);
2364
+ --cirth-primary-border-active: var(--cirth-primary-surface-active);
2365
+ --cirth-primary-underline-active: var(--cirth-primary-active);
2366
+ --cirth-primary-focus: oklch(from var(--cirth-primary) l c h / 80%);
2367
+ --cirth-text-selection-color: oklch(from var(--cirth-primary) calc(l * 1.065) c h / 18.75%);
2368
+ --cirth-primary-on-surface: oklch(100% 0 0);
2310
2369
  --cirth-code-background-color: oklch(from var(--cirth-canvas) calc(l - .02) c h);
2311
2370
  --cirth-card-sectioning-background-color: oklch(from var(--cirth-canvas) calc(l + .025) c h);
2312
2371
  --cirth-form-element-background-color: oklch(from var(--cirth-canvas) calc(l - .008) c h);
@@ -2314,15 +2373,17 @@ details summary[role="button"]:after {
2314
2373
  --cirth-form-element-active-background-color: var(--cirth-canvas);
2315
2374
  --cirth-dropdown-background-color: var(--cirth-card-background-color);
2316
2375
  --cirth-popover-background-color: var(--cirth-card-background-color);
2317
- --cirth-secondary-background: oklch(48.3% .03 264);
2318
- --cirth-secondary-border: var(--cirth-secondary-background);
2319
- --cirth-secondary-hover-border: var(--cirth-secondary-hover-background);
2320
- --cirth-secondary-hover-underline: var(--cirth-secondary-hover);
2321
- --cirth-secondary-inverse: oklch(100% 0 0);
2322
- --cirth-contrast-border: var(--cirth-contrast-background);
2323
- --cirth-contrast-hover-border: var(--cirth-contrast-hover-background);
2324
- --cirth-contrast-hover-underline: var(--cirth-contrast-hover);
2325
- --cirth-mark-background-color: var(--cirth-warning-surface);
2376
+ --cirth-secondary-surface: oklch(48.3% .03 280);
2377
+ --cirth-secondary-border: var(--cirth-secondary-surface);
2378
+ --cirth-secondary-border-active: var(--cirth-secondary-surface-active);
2379
+ --cirth-secondary-underline-active: var(--cirth-secondary-active);
2380
+ --cirth-secondary-on-surface: oklch(100% 0 0);
2381
+ --cirth-contrast-border: var(--cirth-contrast-surface);
2382
+ --cirth-contrast-border-active: var(--cirth-contrast-surface-active);
2383
+ --cirth-contrast-underline-active: var(--cirth-contrast-active);
2384
+ --cirth-mark-background-color: color-mix(in oklab,
2385
+ var(--cirth-primary) 24%,
2386
+ var(--cirth-canvas));
2326
2387
  --cirth-ins-color: var(--cirth-success-text);
2327
2388
  --cirth-del-color: var(--cirth-error-text);
2328
2389
  --cirth-blockquote-border-color: var(--cirth-muted-border-color);
@@ -2330,10 +2391,10 @@ details summary[role="button"]:after {
2330
2391
  --cirth-button-box-shadow: 0 0 0 #0000;
2331
2392
  --cirth-button-hover-box-shadow: 0 0 0 #0000;
2332
2393
  --cirth-table-border-color: var(--cirth-card-border-color);
2333
- --cirth-table-row-stripped-background-color: oklch(57% .032 264 / .0375);
2394
+ --cirth-table-row-stripped-background-color: oklch(57% .032 280 / .0375);
2334
2395
  --cirth-code-kbd-background-color: var(--cirth-ink);
2335
2396
  --cirth-code-kbd-color: var(--cirth-background-color);
2336
- --cirth-form-element-placeholder-color: oklch(65.7% .03 264);
2397
+ --cirth-form-element-placeholder-color: oklch(65.7% .025 280);
2337
2398
  --cirth-form-element-active-border-color: var(--cirth-primary-border);
2338
2399
  --cirth-form-element-focus-color: var(--cirth-primary-focus);
2339
2400
  --cirth-form-element-disabled-opacity: var(--cirth-opacity-disabled);
@@ -2344,147 +2405,147 @@ details summary[role="button"]:after {
2344
2405
  --cirth-form-element-valid-active-border-color: var(--cirth-success-active);
2345
2406
  --cirth-form-element-valid-focus-color: var(--cirth-form-element-valid-active-border-color);
2346
2407
  --cirth-switch-thumb-box-shadow: 0 0 0 #0000;
2347
- --cirth-switch-checked-background-color: var(--cirth-primary-background);
2348
- --cirth-switch-color: var(--cirth-primary-inverse);
2408
+ --cirth-switch-checked-background-color: var(--cirth-primary-surface);
2409
+ --cirth-switch-color: var(--cirth-primary-on-surface);
2349
2410
  --cirth-range-thumb-border-color: var(--cirth-background-color);
2350
- --cirth-range-thumb-color: var(--cirth-secondary-background);
2351
- --cirth-range-thumb-active-color: var(--cirth-primary-background);
2352
- --cirth-accordion-active-summary-color: var(--cirth-primary-hover);
2411
+ --cirth-range-thumb-color: var(--cirth-secondary-text);
2412
+ --cirth-range-thumb-active-color: var(--cirth-primary-surface);
2413
+ --cirth-accordion-active-summary-color: var(--cirth-primary-active);
2353
2414
  --cirth-accordion-close-summary-color: var(--cirth-ink);
2354
2415
  --cirth-accordion-open-summary-color: var(--cirth-ink);
2355
2416
  --cirth-card-border-color: color-mix(in oklab,
2356
2417
  var(--cirth-form-element-border-color) 46%,
2357
2418
  var(--cirth-card-background-color));
2358
- --cirth-modal-overlay-background-color: oklch(9% 0 0deg / var(--cirth-opacity-overlay));
2419
+ --cirth-modal-overlay-background-color: oklch(9% .011 280deg / var(--cirth-opacity-overlay));
2359
2420
  --cirth-meter-optimum-color: var(--cirth-success);
2360
2421
  --cirth-meter-suboptimum-color: var(--cirth-warning);
2361
2422
  --cirth-meter-even-less-good-color: var(--cirth-error);
2362
- --cirth-progress-color: var(--cirth-primary);
2363
- --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(136, 146, 164)' 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");
2364
- --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(136, 146, 164)' 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");
2365
- --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(136, 146, 164)' 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");
2366
- --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(136, 146, 164)' 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");
2367
- --cirth-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(75, 215, 153)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
2368
- --cirth-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(246, 160, 145)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
2423
+ --cirth-progress-color: var(--cirth-primary-text);
2424
+ --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");
2425
+ --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");
2426
+ --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");
2427
+ --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(142, 144, 161)' 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");
2428
+ --cirth-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(75, 216, 131)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
2429
+ --cirth-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(246, 158, 155)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
2369
2430
  }
2370
2431
 
2371
2432
  progress, [type="checkbox"], [type="radio"], [type="range"] {
2372
- accent-color: var(--cirth-primary);
2433
+ accent-color: var(--cirth-primary-text);
2373
2434
  }
2374
2435
 
2375
2436
  @media (prefers-contrast: more) {
2376
2437
  :where([data-theme="light"]), :root:where(:not([data-theme="dark"])), :host(:where(:not([data-theme="dark"]))) {
2377
- --cirth-ink: oklch(22.3% .006 264);
2438
+ --cirth-ink: oklch(22.3% .023 280);
2378
2439
  --cirth-h1-color: var(--cirth-color);
2379
2440
  --cirth-h2-color: var(--cirth-color);
2380
2441
  --cirth-h3-color: var(--cirth-color);
2381
2442
  --cirth-h4-color: var(--cirth-color);
2382
2443
  --cirth-h5-color: var(--cirth-color);
2383
2444
  --cirth-h6-color: var(--cirth-color);
2384
- --cirth-muted-color: oklch(39.7% .025 264);
2385
- --cirth-secondary: oklch(39.7% .025 264);
2386
- --cirth-code-color: oklch(35.3% .021 264);
2387
- --cirth-link-visited-color: oklch(35.3% .021 264);
2388
- --cirth-muted-border-color: oklch(57% .032 264);
2389
- --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(64, 71, 85)' 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");
2390
- --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(64, 71, 85)' 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");
2391
- --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(64, 71, 85)' 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");
2392
- --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(64, 71, 85)' 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");
2393
- --cirth-form-element-border-color: oklch(39.7% .025 264);
2394
- --cirth-form-element-invalid-border-color: oklch(48.3% .166 29.73);
2395
- --cirth-form-element-valid-border-color: oklch(48.3% .092 160.59);
2396
- --cirth-primary: oklch(39.7% .073 69.35);
2397
- --cirth-primary-hover: oklch(31% .057 69.35);
2445
+ --cirth-muted-color: oklch(39.7% .028 280);
2446
+ --cirth-secondary-text: oklch(39.7% .028 280);
2447
+ --cirth-code-color: oklch(35.3% .027 280);
2448
+ --cirth-link-visited-color: oklch(35.3% .027 280);
2449
+ --cirth-muted-border-color: oklch(57% .032 280);
2450
+ --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(68, 69, 86)' 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");
2451
+ --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(68, 69, 86)' 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");
2452
+ --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(68, 69, 86)' 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");
2453
+ --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(68, 69, 86)' 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");
2454
+ --cirth-form-element-border-color: oklch(39.7% .028 280);
2455
+ --cirth-form-element-invalid-border-color: oklch(48.3% .165 22);
2456
+ --cirth-form-element-valid-border-color: oklch(48.3% .106 153);
2457
+ --cirth-primary: oklch(39.7% .081 44);
2458
+ --cirth-primary-active: oklch(31% .063 44);
2398
2459
  --cirth-primary-underline: var(--cirth-primary);
2399
- --cirth-secondary-underline: var(--cirth-secondary);
2400
- --cirth-contrast-underline: var(--cirth-contrast);
2401
- --cirth-primary-focus: oklch(48.3% .089 69.35);
2402
- --cirth-secondary-focus: oklch(48.3% .03 264);
2403
- --cirth-contrast-focus: oklch(48.3% .03 264);
2404
- --cirth-switch-background-color: oklch(48.3% .03 264);
2405
- --cirth-progress-border-color: oklch(48.3% .03 264);
2406
- --cirth-meter-optimum-color: oklch(44% .084 160.59);
2407
- --cirth-meter-suboptimum-color: oklch(39.7% .07 78);
2408
- --cirth-meter-even-less-good-color: oklch(35.3% .122 29.73);
2460
+ --cirth-secondary-underline: var(--cirth-secondary-text);
2461
+ --cirth-contrast-underline: var(--cirth-contrast-text);
2462
+ --cirth-primary-focus: oklch(48.3% .098 44);
2463
+ --cirth-secondary-focus: oklch(48.3% .03 280);
2464
+ --cirth-contrast-focus: oklch(48.3% .03 280);
2465
+ --cirth-switch-background-color: oklch(48.3% .03 280);
2466
+ --cirth-progress-border-color: oklch(48.3% .03 280);
2467
+ --cirth-meter-optimum-color: oklch(44% .096 153);
2468
+ --cirth-meter-suboptimum-color: oklch(39.7% .069 89.5);
2469
+ --cirth-meter-even-less-good-color: oklch(35.3% .121 22);
2409
2470
  }
2410
2471
  }
2411
2472
 
2412
2473
  @media only screen and (prefers-contrast: more) and (prefers-color-scheme: dark) {
2413
2474
  :root:where(:not([data-theme])), :host(:where(:not([data-theme]))) {
2414
- --cirth-ink: oklch(96% 0 264);
2475
+ --cirth-ink: oklch(96% 0 280);
2415
2476
  --cirth-h1-color: var(--cirth-color);
2416
2477
  --cirth-h2-color: var(--cirth-color);
2417
2478
  --cirth-h3-color: var(--cirth-color);
2418
2479
  --cirth-h4-color: var(--cirth-color);
2419
2480
  --cirth-h5-color: var(--cirth-color);
2420
2481
  --cirth-h6-color: var(--cirth-color);
2421
- --cirth-muted-color: oklch(78.7% .021 264);
2422
- --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(179, 186, 200)' 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");
2423
- --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(179, 186, 200)' 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");
2424
- --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(179, 186, 200)' 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");
2425
- --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(179, 186, 200)' 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");
2426
- --cirth-secondary: oklch(78.7% .021 264);
2427
- --cirth-code-color: oklch(83% .016 264);
2428
- --cirth-link-visited-color: oklch(78.7% .021 264);
2429
- --cirth-muted-border-color: oklch(57% .032 264);
2482
+ --cirth-muted-color: oklch(78.7% .014 280);
2483
+ --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(183, 185, 195)' 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");
2484
+ --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");
2485
+ --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");
2486
+ --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");
2487
+ --cirth-secondary-text: oklch(78.7% .014 280);
2488
+ --cirth-code-color: oklch(83% .011 280);
2489
+ --cirth-link-visited-color: oklch(78.7% .014 280);
2490
+ --cirth-muted-border-color: oklch(57% .032 280);
2430
2491
  --cirth-card-border-color: var(--cirth-muted-border-color);
2431
- --cirth-form-element-border-color: oklch(70% .028 264);
2432
- --cirth-form-element-invalid-border-color: oklch(78.7% .106 29.73);
2433
- --cirth-form-element-valid-border-color: oklch(78.7% .15 160.59);
2434
- --cirth-primary: oklch(78.7% .146 69.35);
2435
- --cirth-primary-hover: oklch(87.3% .082 69.35);
2436
- --cirth-primary-background: oklch(44% .081 69.35);
2437
- --cirth-primary-hover-background: oklch(39.7% .073 69.35);
2492
+ --cirth-form-element-border-color: oklch(70% .021 280);
2493
+ --cirth-form-element-invalid-border-color: oklch(78.7% .105 22);
2494
+ --cirth-form-element-valid-border-color: oklch(78.7% .172 153);
2495
+ --cirth-primary: oklch(78.7% .092 44);
2496
+ --cirth-primary-active: oklch(87.3% .051 44);
2497
+ --cirth-primary-surface: oklch(44% .09 44);
2498
+ --cirth-primary-surface-active: oklch(39.7% .081 44);
2438
2499
  --cirth-primary-underline: var(--cirth-primary);
2439
- --cirth-secondary-underline: var(--cirth-secondary);
2440
- --cirth-contrast-underline: var(--cirth-contrast);
2441
- --cirth-primary-focus: oklch(70% .129 69.35);
2442
- --cirth-secondary-focus: oklch(70% .028 264);
2443
- --cirth-contrast-focus: oklch(87.3% .011 264);
2444
- --cirth-switch-background-color: oklch(65.7% .03 264);
2445
- --cirth-progress-border-color: oklch(70% .028 264);
2446
- --cirth-meter-optimum-color: oklch(74.3% .142 160.59);
2447
- --cirth-meter-suboptimum-color: oklch(78.7% .139 78);
2448
- --cirth-meter-even-less-good-color: oklch(83% .081 29.73);
2500
+ --cirth-secondary-underline: var(--cirth-secondary-text);
2501
+ --cirth-contrast-underline: var(--cirth-contrast-text);
2502
+ --cirth-primary-focus: oklch(70% .141 44);
2503
+ --cirth-secondary-focus: oklch(70% .021 280);
2504
+ --cirth-contrast-focus: oklch(87.3% .007 280);
2505
+ --cirth-switch-background-color: oklch(65.7% .025 280);
2506
+ --cirth-progress-border-color: oklch(70% .021 280);
2507
+ --cirth-meter-optimum-color: oklch(74.3% .163 153);
2508
+ --cirth-meter-suboptimum-color: oklch(78.7% .137 89.5);
2509
+ --cirth-meter-even-less-good-color: oklch(83% .08 22);
2449
2510
  }
2450
2511
  }
2451
2512
 
2452
2513
  @media (prefers-contrast: more) {
2453
2514
  :where([data-theme="dark"]) {
2454
- --cirth-ink: oklch(96% 0 264);
2515
+ --cirth-ink: oklch(96% 0 280);
2455
2516
  --cirth-h1-color: var(--cirth-color);
2456
2517
  --cirth-h2-color: var(--cirth-color);
2457
2518
  --cirth-h3-color: var(--cirth-color);
2458
2519
  --cirth-h4-color: var(--cirth-color);
2459
2520
  --cirth-h5-color: var(--cirth-color);
2460
2521
  --cirth-h6-color: var(--cirth-color);
2461
- --cirth-muted-color: oklch(78.7% .021 264);
2462
- --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(179, 186, 200)' 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");
2463
- --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(179, 186, 200)' 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");
2464
- --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(179, 186, 200)' 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");
2465
- --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(179, 186, 200)' 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");
2466
- --cirth-secondary: oklch(78.7% .021 264);
2467
- --cirth-code-color: oklch(83% .016 264);
2468
- --cirth-link-visited-color: oklch(78.7% .021 264);
2469
- --cirth-muted-border-color: oklch(57% .032 264);
2522
+ --cirth-muted-color: oklch(78.7% .014 280);
2523
+ --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(183, 185, 195)' 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");
2524
+ --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");
2525
+ --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");
2526
+ --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");
2527
+ --cirth-secondary-text: oklch(78.7% .014 280);
2528
+ --cirth-code-color: oklch(83% .011 280);
2529
+ --cirth-link-visited-color: oklch(78.7% .014 280);
2530
+ --cirth-muted-border-color: oklch(57% .032 280);
2470
2531
  --cirth-card-border-color: var(--cirth-muted-border-color);
2471
- --cirth-form-element-border-color: oklch(70% .028 264);
2472
- --cirth-form-element-invalid-border-color: oklch(78.7% .106 29.73);
2473
- --cirth-form-element-valid-border-color: oklch(78.7% .15 160.59);
2474
- --cirth-primary: oklch(78.7% .146 69.35);
2475
- --cirth-primary-hover: oklch(87.3% .082 69.35);
2476
- --cirth-primary-background: oklch(44% .081 69.35);
2477
- --cirth-primary-hover-background: oklch(39.7% .073 69.35);
2532
+ --cirth-form-element-border-color: oklch(70% .021 280);
2533
+ --cirth-form-element-invalid-border-color: oklch(78.7% .105 22);
2534
+ --cirth-form-element-valid-border-color: oklch(78.7% .172 153);
2535
+ --cirth-primary: oklch(78.7% .092 44);
2536
+ --cirth-primary-active: oklch(87.3% .051 44);
2537
+ --cirth-primary-surface: oklch(44% .09 44);
2538
+ --cirth-primary-surface-active: oklch(39.7% .081 44);
2478
2539
  --cirth-primary-underline: var(--cirth-primary);
2479
- --cirth-secondary-underline: var(--cirth-secondary);
2480
- --cirth-contrast-underline: var(--cirth-contrast);
2481
- --cirth-primary-focus: oklch(70% .129 69.35);
2482
- --cirth-secondary-focus: oklch(70% .028 264);
2483
- --cirth-contrast-focus: oklch(87.3% .011 264);
2484
- --cirth-switch-background-color: oklch(65.7% .03 264);
2485
- --cirth-progress-border-color: oklch(70% .028 264);
2486
- --cirth-meter-optimum-color: oklch(74.3% .142 160.59);
2487
- --cirth-meter-suboptimum-color: oklch(78.7% .139 78);
2488
- --cirth-meter-even-less-good-color: oklch(83% .081 29.73);
2540
+ --cirth-secondary-underline: var(--cirth-secondary-text);
2541
+ --cirth-contrast-underline: var(--cirth-contrast-text);
2542
+ --cirth-primary-focus: oklch(70% .141 44);
2543
+ --cirth-secondary-focus: oklch(70% .021 280);
2544
+ --cirth-contrast-focus: oklch(87.3% .007 280);
2545
+ --cirth-switch-background-color: oklch(65.7% .025 280);
2546
+ --cirth-progress-border-color: oklch(70% .021 280);
2547
+ --cirth-meter-optimum-color: oklch(74.3% .163 153);
2548
+ --cirth-meter-suboptimum-color: oklch(78.7% .137 89.5);
2549
+ --cirth-meter-even-less-good-color: oklch(83% .08 22);
2489
2550
  }
2490
2551
  }