@cirthcss/cirth 0.14.1 → 0.15.0-beta.2

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 (23) hide show
  1. package/NOTICE.md +9 -0
  2. package/README.md +19 -14
  3. package/dist/cirth.classless.css +481 -335
  4. package/dist/cirth.classless.min.css +1 -1
  5. package/dist/cirth.classless.scoped.css +481 -335
  6. package/dist/cirth.classless.scoped.min.css +1 -1
  7. package/dist/cirth.css +571 -355
  8. package/dist/cirth.min.css +1 -1
  9. package/dist/cirth.print.classless.css +10 -7
  10. package/dist/cirth.print.classless.min.css +1 -1
  11. package/dist/cirth.print.classless.scoped.css +10 -7
  12. package/dist/cirth.print.classless.scoped.min.css +1 -1
  13. package/dist/cirth.print.css +10 -7
  14. package/dist/cirth.print.min.css +1 -1
  15. package/dist/cirth.print.scoped.css +10 -7
  16. package/dist/cirth.print.scoped.min.css +1 -1
  17. package/dist/cirth.scoped.css +571 -355
  18. package/dist/cirth.scoped.min.css +1 -1
  19. package/dist/presets/plain.css +2 -2
  20. package/dist/presets/plain.min.css +1 -1
  21. package/dist/presets/playroom.css +5 -10
  22. package/dist/presets/playroom.min.css +1 -1
  23. package/package.json +20 -5
package/dist/cirth.classless.scoped.css CHANGED
@@ -34,19 +34,23 @@
34
34
  }
35
35
 
36
36
  .cirth > header, .cirth > main, .cirth > footer {
37
- grid-template-columns: minmax(var(--cirth-spacing), 1fr) minmax(0, var(--cirth-container-max-width)) minmax(var(--cirth-spacing), 1fr);
37
+ grid-template-columns: [full-start] minmax(var(--cirth-container-gutter), 1fr) [content-start] minmax(0, var(--cirth-container-max-width)) [content-end] minmax(var(--cirth-container-gutter), 1fr) [full-end];
38
38
  padding-block: var(--cirth-block-spacing-vertical);
39
39
  display: grid;
40
40
  }
41
41
 
42
42
  .cirth > header > *, .cirth > main > *, .cirth > footer > * {
43
- grid-column: 2;
43
+ grid-column: content;
44
44
  }
45
45
 
46
46
  .cirth section {
47
47
  margin-bottom: var(--cirth-block-spacing-vertical);
48
48
  }
49
49
 
50
+ .cirth main > section + section {
51
+ margin-block-start: var(--cirth-space-8);
52
+ }
53
+
50
54
  .cirth b, .cirth strong {
51
55
  font-weight: bolder;
52
56
  }
@@ -67,11 +71,9 @@
67
71
  }
68
72
 
69
73
  .cirth address, .cirth blockquote, .cirth dl, .cirth ol, .cirth p, .cirth pre, .cirth table, .cirth ul {
70
- margin-top: 0;
71
- margin-bottom: var(--cirth-typography-spacing-vertical);
74
+ margin-block: 0 var(--cirth-typography-spacing-vertical);
72
75
  color: var(--cirth-color);
73
76
  font-style: normal;
74
- font-weight: var(--cirth-font-weight);
75
77
  }
76
78
 
77
79
  .cirth p {
@@ -79,8 +81,7 @@
79
81
  }
80
82
 
81
83
  .cirth h1, .cirth h2, .cirth h3, .cirth h4, .cirth h5, .cirth h6 {
82
- margin-top: 0;
83
- margin-bottom: var(--cirth-typography-spacing-vertical);
84
+ margin-block: 0 calc(var(--cirth-typography-spacing-vertical) * .5);
84
85
  color: var(--cirth-color);
85
86
  font-weight: var(--cirth-font-weight);
86
87
  font-size: var(--cirth-font-size);
@@ -118,13 +119,12 @@
118
119
  margin-top: var(--cirth-typography-spacing-top);
119
120
  }
120
121
 
121
- .cirth p, .cirth hgroup {
122
+ .cirth hgroup {
122
123
  margin-bottom: var(--cirth-typography-spacing-vertical);
123
124
  }
124
125
 
125
126
  .cirth hgroup > * {
126
- margin-top: 0;
127
- margin-bottom: 0;
127
+ margin-block: 0;
128
128
  }
129
129
 
130
130
  .cirth hgroup > :not(:first-child):last-child {
@@ -146,11 +146,32 @@
146
146
  list-style: square;
147
147
  }
148
148
 
149
+ .cirth dt {
150
+ font-weight: var(--cirth-font-weight-semibold);
151
+ }
152
+
153
+ .cirth dd {
154
+ margin-inline-start: 0;
155
+ }
156
+
157
+ .cirth dl > dd + dt {
158
+ margin-top: calc(var(--cirth-typography-spacing-vertical) * .5);
159
+ }
160
+
149
161
  .cirth mark {
150
162
  padding: 0 var(--cirth-space-1);
151
163
  background-color: var(--cirth-mark-background-color);
152
164
  color: var(--cirth-mark-color);
153
165
  vertical-align: baseline;
166
+ -webkit-box-decoration-break: clone;
167
+ box-decoration-break: clone;
168
+ }
169
+
170
+ @media (forced-colors: active) {
171
+ .cirth mark {
172
+ color: marktext;
173
+ background-color: mark;
174
+ }
154
175
  }
155
176
 
156
177
  .cirth blockquote {
@@ -158,7 +179,10 @@
158
179
  padding: var(--cirth-spacing);
159
180
  border-inline-start: var(--cirth-border-width-4) solid var(--cirth-blockquote-border-color);
160
181
  border-inline-end: none;
161
- display: block;
182
+ }
183
+
184
+ .cirth blockquote > :last-child, .cirth blockquote > :has( + footer) {
185
+ margin-bottom: 0;
162
186
  }
163
187
 
164
188
  .cirth blockquote footer {
@@ -210,10 +234,14 @@
210
234
  outline: var(--cirth-outline-width) solid transparent;
211
235
  }
212
236
 
213
- .cirth :where(a:not([role="button"])):visited:not([aria-current]:not([aria-current="false"]), :hover, :active, :focus, nav a) {
237
+ .cirth :where(a:not([role="button"])):visited:not([aria-current]:not([aria-current="false"]), :hover, :active, :focus, nav a, :has(article)) {
214
238
  color: var(--cirth-link-visited-color);
215
239
  }
216
240
 
241
+ .cirth :where(a:not([role="button"])):has(article) {
242
+ --cirth-color: inherit;
243
+ }
244
+
217
245
  .cirth a[role="button"] {
218
246
  display: inline-block;
219
247
  }
@@ -234,7 +262,7 @@
234
262
  --cirth-color: var(--cirth-primary-inverse);
235
263
  --cirth-box-shadow: var(--cirth-button-box-shadow, 0 0 0 #0000);
236
264
  max-width: 100%;
237
- min-block-size: calc(var(--cirth-font-size-md) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2);
265
+ 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);
238
266
  padding: var(--cirth-form-element-spacing-vertical) var(--cirth-form-element-spacing-horizontal);
239
267
  border: var(--cirth-border-width) solid var(--cirth-border-color);
240
268
  border-radius: var(--cirth-border-radius);
@@ -259,7 +287,7 @@
259
287
  --cirth-color: var(--cirth-primary-inverse);
260
288
  --cirth-box-shadow: var(--cirth-button-box-shadow, 0 0 0 #0000);
261
289
  max-width: 100%;
262
- min-block-size: calc(var(--cirth-font-size-md) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2);
290
+ 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);
263
291
  padding: var(--cirth-form-element-spacing-vertical) var(--cirth-form-element-spacing-horizontal);
264
292
  border: var(--cirth-border-width) solid var(--cirth-border-color);
265
293
  border-radius: var(--cirth-border-radius);
@@ -300,11 +328,11 @@
300
328
  }
301
329
 
302
330
  .cirth button:active, .cirth [type="submit"]:active, .cirth [type="reset"]:active, .cirth [type="button"]:active, .cirth [role="button"]:active {
303
- transform: translateY(.0625rem);
331
+ background-image: linear-gradient(#0000001f 0 0);
304
332
  }
305
333
 
306
334
  .cirth [type="file"]::file-selector-button:active {
307
- transform: translateY(.0625rem);
335
+ background-image: linear-gradient(#0000001f 0 0);
308
336
  }
309
337
 
310
338
  .cirth button:focus-visible, .cirth button[aria-current]:not([aria-current="false"]):focus-visible, .cirth [type="submit"]:focus-visible, .cirth [type="submit"][aria-current]:not([aria-current="false"]):focus-visible, .cirth [type="reset"]:focus-visible, .cirth [type="reset"][aria-current]:not([aria-current="false"]):focus-visible, .cirth [type="button"]:focus-visible, .cirth [type="button"][aria-current]:not([aria-current="false"]):focus-visible, .cirth [role="button"]:focus-visible, .cirth [role="button"][aria-current]:not([aria-current="false"]):focus-visible {
@@ -313,18 +341,6 @@
313
341
  outline: var(--cirth-outline-width) solid transparent;
314
342
  }
315
343
 
316
- .cirth [type="file"]::file-selector-button:focus-visible {
317
- --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 #0000),
318
- 0 0 0 var(--cirth-outline-width) var(--cirth-primary-focus);
319
- outline: var(--cirth-outline-width) solid transparent;
320
- }
321
-
322
- .cirth [type="file"]::file-selector-button:is():focus-visible {
323
- --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 #0000),
324
- 0 0 0 var(--cirth-outline-width) var(--cirth-primary-focus);
325
- outline: var(--cirth-outline-width) solid transparent;
326
- }
327
-
328
344
  .cirth [type="submit"], .cirth [type="reset"], .cirth [type="button"] {
329
345
  margin-bottom: var(--cirth-spacing);
330
346
  }
@@ -360,32 +376,33 @@
360
376
  0 0 0 var(--cirth-outline-width) var(--cirth-secondary-focus);
361
377
  }
362
378
 
363
- .cirth [type="file"]::file-selector-button:focus-visible {
364
- --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 #0000),
365
- 0 0 0 var(--cirth-outline-width) var(--cirth-secondary-focus);
366
- }
367
-
368
379
  .cirth :where(button, [type="submit"], [type="reset"], [type="button"], [role="button"])[disabled], .cirth :where(fieldset[disabled]) :is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]) {
369
380
  opacity: var(--cirth-opacity-disabled);
370
381
  pointer-events: none;
371
382
  }
372
383
 
373
- .cirth form:invalid :is(button:not([type="button"], [type="reset"]), [type="submit"]) {
384
+ .cirth form:has(:user-invalid) :is(button:not([type="button"], [type="reset"]), [type="submit"]) {
374
385
  filter: grayscale();
375
386
  }
376
387
 
377
388
  .cirth :where(table) {
378
389
  border-collapse: collapse;
379
- border-spacing: 0;
380
390
  text-indent: 0;
381
391
  border-color: currentColor;
382
392
  width: 100%;
383
393
  }
384
394
 
395
+ .cirth caption {
396
+ color: var(--cirth-muted-color);
397
+ font-size: var(--cirth-font-size-sm);
398
+ line-height: var(--cirth-line-height-normal);
399
+ text-align: start;
400
+ padding-block-end: calc(var(--cirth-spacing) * .5);
401
+ }
402
+
385
403
  .cirth th, .cirth td {
386
404
  padding: calc(var(--cirth-spacing) / 2) var(--cirth-spacing);
387
405
  border-bottom: var(--cirth-border-width) solid var(--cirth-table-border-color);
388
- color: var(--cirth-color);
389
406
  font-weight: var(--cirth-font-weight);
390
407
  font-variant-numeric: tabular-nums;
391
408
  text-align: start;
@@ -447,10 +464,15 @@
447
464
 
448
465
  .cirth pre {
449
466
  margin-bottom: var(--cirth-spacing);
467
+ border: var(--cirth-border-width) solid var(--cirth-card-border-color);
450
468
  display: block;
451
469
  overflow-x: auto;
452
470
  }
453
471
 
472
+ .cirth pre:focus-visible {
473
+ outline: var(--cirth-outline-width) solid var(--cirth-primary-focus);
474
+ }
475
+
454
476
  .cirth pre > code, .cirth pre > samp {
455
477
  padding: var(--cirth-spacing);
456
478
  line-height: var(--cirth-line-height);
@@ -480,6 +502,8 @@
480
502
  .cirth figure figcaption {
481
503
  padding: calc(var(--cirth-spacing) * .5) 0;
482
504
  color: var(--cirth-muted-color);
505
+ font-size: var(--cirth-font-size-sm);
506
+ line-height: var(--cirth-line-height-normal);
483
507
  }
484
508
 
485
509
  .cirth hr {
@@ -538,11 +562,11 @@
538
562
  }
539
563
 
540
564
  .cirth input:not([type="checkbox"], [type="radio"], [type="range"]) {
541
- height: calc(var(--cirth-font-size-md) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2);
565
+ 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);
542
566
  }
543
567
 
544
568
  .cirth select, .cirth textarea {
545
- min-block-size: calc(var(--cirth-font-size-md) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2);
569
+ 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);
546
570
  }
547
571
 
548
572
  .cirth fieldset {
@@ -560,10 +584,6 @@
560
584
  display: block;
561
585
  }
562
586
 
563
- .cirth fieldset legend {
564
- margin-bottom: calc(var(--cirth-spacing) * .5);
565
- }
566
-
567
587
  .cirth input:not([type="checkbox"], [type="radio"], [size]), .cirth button[type="submit"], .cirth select, .cirth textarea {
568
588
  width: 100%;
569
589
  }
@@ -588,6 +608,11 @@
588
608
  outline: none;
589
609
  }
590
610
 
611
+ .cirth :where(input, textarea)[readonly] {
612
+ background-color: var(--cirth-card-sectioning-background-color);
613
+ border-style: dashed;
614
+ }
615
+
591
616
  .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) {
592
617
  --cirth-background-color: var(--cirth-form-element-active-background-color);
593
618
  }
@@ -596,10 +621,18 @@
596
621
  --cirth-border-color: var(--cirth-form-element-active-border-color);
597
622
  }
598
623
 
599
- .cirth input:not([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="range"], [type="file"], [readonly]):hover:not(:active, :focus, [disabled], [aria-invalid]), .cirth :where(select, textarea):not([readonly]):hover:not(:active, :focus, [disabled], [aria-invalid]) {
600
- --cirth-border-color: color-mix(in oklch,
601
- var(--cirth-form-element-border-color) 65%,
602
- var(--cirth-color));
624
+ @media (hover: hover) and (pointer: fine) {
625
+ .cirth input:not([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="range"], [type="file"], [readonly]):hover:not(:active, :focus, :disabled, [aria-invalid], :user-invalid) {
626
+ --cirth-border-color: color-mix(in oklch,
627
+ var(--cirth-form-element-border-color) 65%,
628
+ var(--cirth-color));
629
+ }
630
+
631
+ .cirth :where(select, textarea):not([readonly]):hover:not(:active, :focus, :disabled, [aria-invalid], :user-invalid) {
632
+ --cirth-border-color: color-mix(in oklch,
633
+ var(--cirth-form-element-border-color) 65%,
634
+ var(--cirth-color));
635
+ }
603
636
  }
604
637
 
605
638
  .cirth input:not([type="submit"], [type="button"], [type="reset"], [type="range"], [type="file"], [readonly]):focus, .cirth :where(select, textarea):not([readonly]):focus {
@@ -704,7 +737,7 @@
704
737
  .cirth textarea:is([aria-invalid], :user-invalid:not([aria-invalid], [type="range"]):not(select:focus)) {
705
738
  --cirth-icon-height: calc(var(--cirth-font-size-md) * var(--cirth-line-height) +
706
739
  var(--cirth-form-element-spacing-vertical) * 2 +
707
- var(--cirth-border-width) * 2);
740
+ (var(--cirth-border-width) * 2));
708
741
  background-position: top right var(--cirth-space-3);
709
742
  background-size: var(--cirth-font-size-md) var(--cirth-icon-height);
710
743
  }
@@ -970,9 +1003,9 @@
970
1003
 
971
1004
  .cirth [type="range"] {
972
1005
  appearance: none;
973
- background: none;
974
1006
  width: 100%;
975
- height: 1.25rem;
1007
+ 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);
1008
+ background: none;
976
1009
  }
977
1010
 
978
1011
  .cirth [type="range"]::-webkit-slider-runnable-track {
@@ -1019,6 +1052,18 @@
1019
1052
  --cirth-range-thumb-color: var(--cirth-range-thumb-active-color);
1020
1053
  }
1021
1054
 
1055
+ @media (hover: hover) and (pointer: fine) {
1056
+ .cirth [type="range"]:hover:not(:active, :focus, :disabled) {
1057
+ --cirth-range-border-color: var(--cirth-range-active-border-color);
1058
+ --cirth-range-thumb-color: var(--cirth-secondary-hover);
1059
+ }
1060
+ }
1061
+
1062
+ .cirth [type="range"]:focus-visible {
1063
+ outline: var(--cirth-outline-width) solid var(--cirth-primary-focus);
1064
+ outline-offset: var(--cirth-space-1);
1065
+ }
1066
+
1022
1067
  .cirth [type="range"]:active::-webkit-slider-thumb {
1023
1068
  transform: scale(1.25);
1024
1069
  }
@@ -1058,16 +1103,21 @@
1058
1103
 
1059
1104
  .cirth details {
1060
1105
  margin-bottom: var(--cirth-spacing);
1061
- display: block;
1062
1106
  }
1063
1107
 
1064
1108
  .cirth details summary {
1065
- line-height: var(--cirth-font-size-md);
1109
+ line-height: var(--cirth-line-height-normal);
1066
1110
  cursor: pointer;
1067
1111
  transition: color var(--cirth-transition);
1068
1112
  list-style-type: none;
1069
1113
  }
1070
1114
 
1115
+ @media (hover: hover) and (pointer: fine) {
1116
+ .cirth details summary:hover:not([role]) {
1117
+ color: var(--cirth-accordion-active-summary-color);
1118
+ }
1119
+ }
1120
+
1071
1121
  .cirth details summary:not([role]) {
1072
1122
  color: var(--cirth-accordion-close-summary-color);
1073
1123
  }
@@ -1081,16 +1131,16 @@
1081
1131
  }
1082
1132
 
1083
1133
  .cirth details summary:after {
1084
- width: var(--cirth-font-size-md);
1085
- height: var(--cirth-font-size-md);
1134
+ width: 1em;
1135
+ height: 1lh;
1086
1136
  float: right;
1087
- background-color: var(--cirth-muted-color);
1088
1137
  mask-image: var(--cirth-icon-chevron);
1089
- mask-position: 100%;
1090
- mask-size: var(--cirth-font-size-md) auto;
1138
+ background-color: currentColor;
1091
1139
  margin-inline-start: calc(var(--cirth-spacing, var(--cirth-space-4)) * .5);
1092
1140
  display: block;
1093
- transform: rotate(-90deg);
1141
+ transform: rotate(0);
1142
+ mask-position: 100%;
1143
+ mask-size: 1em;
1094
1144
  mask-repeat: no-repeat;
1095
1145
  }
1096
1146
 
@@ -1115,8 +1165,8 @@
1115
1165
 
1116
1166
  .cirth details summary:focus-visible:not([role]) {
1117
1167
  outline: var(--cirth-outline-width) solid var(--cirth-primary-focus);
1118
- outline-offset: calc(var(--cirth-spacing, var(--cirth-space-4)) * .5);
1119
- color: var(--cirth-primary);
1168
+ outline-offset: var(--cirth-space-1);
1169
+ color: var(--cirth-accordion-active-summary-color);
1120
1170
  }
1121
1171
 
1122
1172
  .cirth details summary[role="button"] {
@@ -1124,59 +1174,92 @@
1124
1174
  width: 100%;
1125
1175
  }
1126
1176
 
1127
- .cirth details summary[role="button"]:after {
1128
- height: calc(var(--cirth-font-size-md) * var(--cirth-line-height, var(--cirth-line-height-normal)));
1129
- }
1130
-
1131
1177
  .cirth details[open] > summary {
1132
- margin-bottom: var(--cirth-spacing);
1178
+ margin-bottom: var(--cirth-space-2);
1133
1179
  }
1134
1180
 
1135
- .cirth details[open] > summary:not([role]):not(:focus) {
1181
+ .cirth details[open] > summary:not([role]):not(:focus, :hover) {
1136
1182
  color: var(--cirth-accordion-open-summary-color);
1137
1183
  }
1138
1184
 
1139
1185
  .cirth details[open] > summary:after {
1140
- transform: rotate(0);
1186
+ transform: rotate(180deg);
1187
+ }
1188
+
1189
+ .cirth details {
1190
+ border-block-end: var(--cirth-border-width) solid var(--cirth-muted-border-color);
1191
+ }
1192
+
1193
+ .cirth details > summary {
1194
+ min-block-size: 2.75rem;
1195
+ padding-block: var(--cirth-space-2);
1196
+ font-weight: var(--cirth-font-weight-semibold);
1197
+ }
1198
+
1199
+ .cirth details[open] {
1200
+ padding-block-end: var(--cirth-space-4);
1201
+ }
1202
+
1203
+ .cirth details > :last-child:not(summary) {
1204
+ margin-bottom: 0;
1205
+ }
1206
+
1207
+ @media (prefers-reduced-motion: no-preference) {
1208
+ @supports selector(::details-content) {
1209
+ .cirth details::details-content {
1210
+ block-size: 0;
1211
+ transition: block-size var(--cirth-transition), content-visibility var(--cirth-transition) allow-discrete;
1212
+ interpolate-size: allow-keywords;
1213
+ overflow: hidden;
1214
+ }
1215
+
1216
+ .cirth details[open]::details-content {
1217
+ block-size: auto;
1218
+ }
1219
+ }
1141
1220
  }
1142
1221
 
1143
1222
  [dir="rtl"] .cirth details summary:after {
1144
1223
  float: left;
1145
- background-position: 0;
1146
1224
  }
1147
1225
 
1148
1226
  .cirth article {
1149
1227
  margin-bottom: var(--cirth-block-spacing-vertical);
1150
1228
  padding: var(--cirth-block-spacing-vertical) var(--cirth-block-spacing-horizontal);
1151
- border-radius: var(--cirth-border-radius);
1229
+ border: var(--cirth-border-width) solid var(--cirth-card-border-color);
1230
+ border-radius: var(--cirth-card-border-radius);
1152
1231
  background: var(--cirth-card-background-color);
1153
1232
  box-shadow: var(--cirth-card-box-shadow);
1154
1233
  }
1155
1234
 
1235
+ .cirth article > :last-child:not(header, footer), .cirth article > :is(header, footer) > :last-child {
1236
+ margin-bottom: 0;
1237
+ }
1238
+
1239
+ .cirth article > :is(header, footer) :is(h1, h2, h3, h4, h5, h6) {
1240
+ margin-top: 0;
1241
+ }
1242
+
1156
1243
  .cirth article > header, .cirth article > footer {
1157
1244
  margin-inline: calc(var(--cirth-block-spacing-horizontal) * -1);
1158
1245
  padding: calc(var(--cirth-block-spacing-vertical) - var(--cirth-space-2)) var(--cirth-block-spacing-horizontal);
1159
1246
  background-color: var(--cirth-card-sectioning-background-color);
1160
1247
  }
1161
1248
 
1162
- .cirth article > header > :last-child, .cirth article > footer > :last-child {
1163
- margin-bottom: 0;
1164
- }
1165
-
1166
1249
  .cirth article > header {
1167
1250
  margin-top: calc(var(--cirth-block-spacing-vertical) * -1);
1168
1251
  margin-bottom: var(--cirth-block-spacing-vertical);
1169
1252
  border-bottom: var(--cirth-border-width) solid var(--cirth-card-border-color);
1170
- border-top-right-radius: var(--cirth-border-radius);
1171
- border-top-left-radius: var(--cirth-border-radius);
1253
+ border-top-right-radius: var(--cirth-card-border-radius);
1254
+ border-top-left-radius: var(--cirth-card-border-radius);
1172
1255
  }
1173
1256
 
1174
1257
  .cirth article > footer {
1175
1258
  margin-top: var(--cirth-block-spacing-vertical);
1176
1259
  margin-bottom: calc(var(--cirth-block-spacing-vertical) * -1);
1177
1260
  border-top: var(--cirth-border-width) solid var(--cirth-card-border-color);
1178
- border-bottom-right-radius: var(--cirth-border-radius);
1179
- border-bottom-left-radius: var(--cirth-border-radius);
1261
+ border-bottom-right-radius: var(--cirth-card-border-radius);
1262
+ border-bottom-left-radius: var(--cirth-card-border-radius);
1180
1263
  }
1181
1264
 
1182
1265
  .cirth [role="search"], .cirth [role="group"]:not(fieldset) {
@@ -1384,37 +1467,25 @@
1384
1467
  @starting-style {
1385
1468
  .cirth dialog[open] > article {
1386
1469
  opacity: 0;
1387
- transform: translateY(-100%);
1470
+ transform: translateY(-.5rem);
1388
1471
  }
1389
1472
  }
1390
1473
 
1391
1474
  .cirth dialog > article {
1392
1475
  transition: opacity var(--cirth-transition), transform var(--cirth-transition);
1393
- width: 100%;
1476
+ width: min(100% - var(--cirth-spacing) * 2, var(--cirth-modal-max-width));
1394
1477
  max-height: calc(100vh - var(--cirth-spacing) * 2);
1395
1478
  max-height: calc(100dvh - var(--cirth-spacing) * 2);
1396
1479
  margin: var(--cirth-spacing);
1397
1480
  overflow: auto;
1398
1481
  }
1399
1482
 
1400
- @media (width >= 576px) {
1401
- .cirth dialog > article {
1402
- max-width: 510px;
1403
- }
1404
- }
1405
-
1406
- @media (width >= 768px) {
1407
- .cirth dialog > article {
1408
- max-width: 700px;
1409
- }
1410
- }
1411
-
1412
1483
  .cirth dialog > article > header > * {
1413
1484
  margin-bottom: 0;
1414
1485
  }
1415
1486
 
1416
1487
  .cirth dialog > article > header :is(a, button)[rel="prev"] {
1417
- margin: calc(calc((var(--cirth-font-size-md) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2 - var(--cirth-font-size-md)) / 2) * -1);
1488
+ margin: calc(calc((max(2.75rem, var(--cirth-font-size-md) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2) - var(--cirth-font-size-md)) / 2) * -1);
1418
1489
  float: right;
1419
1490
  margin-inline-start: var(--cirth-spacing);
1420
1491
  padding: 0;
@@ -1433,11 +1504,11 @@
1433
1504
  }
1434
1505
 
1435
1506
  .cirth dialog > article :is(a, button)[rel="prev"] {
1436
- width: calc(var(--cirth-font-size-md) + calc((var(--cirth-font-size-md) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2 - var(--cirth-font-size-md)) / 2) * 2);
1437
- height: calc(var(--cirth-font-size-md) + calc((var(--cirth-font-size-md) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2 - var(--cirth-font-size-md)) / 2) * 2);
1438
- margin-top: calc(var(--cirth-spacing) * -1 - calc((var(--cirth-font-size-md) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2 - var(--cirth-font-size-md)) / 2));
1439
- margin-right: calc(calc((var(--cirth-font-size-md) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2 - var(--cirth-font-size-md)) / 2) * -1);
1440
- margin-bottom: calc(var(--cirth-spacing) - calc((var(--cirth-font-size-md) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2 - var(--cirth-font-size-md)) / 2));
1507
+ width: calc(var(--cirth-font-size-md) + calc((max(2.75rem, var(--cirth-font-size-md) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2) - var(--cirth-font-size-md)) / 2) * 2);
1508
+ height: calc(var(--cirth-font-size-md) + calc((max(2.75rem, var(--cirth-font-size-md) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2) - var(--cirth-font-size-md)) / 2) * 2);
1509
+ margin-top: calc(var(--cirth-spacing) * -1 - calc((max(2.75rem, var(--cirth-font-size-md) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2) - var(--cirth-font-size-md)) / 2));
1510
+ margin-right: calc(calc((max(2.75rem, var(--cirth-font-size-md) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2) - var(--cirth-font-size-md)) / 2) * -1);
1511
+ margin-bottom: calc(var(--cirth-spacing) - calc((max(2.75rem, var(--cirth-font-size-md) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2) - var(--cirth-font-size-md)) / 2));
1441
1512
  opacity: .5;
1442
1513
  transition: opacity var(--cirth-transition);
1443
1514
  background-color: #0000;
@@ -1477,11 +1548,11 @@
1477
1548
  }
1478
1549
 
1479
1550
  .cirth :where(nav li):before {
1480
- float: left;
1481
1551
  content: "​";
1552
+ position: absolute;
1482
1553
  }
1483
1554
 
1484
- .cirth nav, .cirth nav ul {
1555
+ .cirth nav, .cirth nav :is(ol, ul) {
1485
1556
  display: flex;
1486
1557
  }
1487
1558
 
@@ -1512,8 +1583,11 @@
1512
1583
  }
1513
1584
 
1514
1585
  .cirth nav li :where(a:not([role="button"]), [role="link"]) {
1515
- margin: calc(var(--cirth-nav-link-spacing-vertical) * -1) calc(var(--cirth-nav-link-spacing-horizontal) * -1);
1586
+ --cirth-color: inherit;
1587
+ margin-block: calc(var(--cirth-nav-link-spacing-vertical) * -1);
1588
+ margin-inline: calc(var(--cirth-nav-element-spacing-horizontal) * -1);
1516
1589
  padding: var(--cirth-nav-link-spacing-vertical) var(--cirth-nav-link-spacing-horizontal);
1590
+ border-block-end: var(--cirth-border-width-2) solid transparent;
1517
1591
  border-radius: var(--cirth-border-radius);
1518
1592
  display: inline-block;
1519
1593
  }
@@ -1522,6 +1596,13 @@
1522
1596
  text-decoration: none;
1523
1597
  }
1524
1598
 
1599
+ .cirth nav li :where(a:not([role="button"]), [role="link"]):is([aria-current]:not([aria-current="false"]), [aria-selected="true"]) {
1600
+ --cirth-color: inherit;
1601
+ --cirth-text-decoration: none;
1602
+ border-block-end-color: var(--cirth-primary-border);
1603
+ border-radius: 0;
1604
+ }
1605
+
1525
1606
  .cirth nav li [role="group"]:not(fieldset), .cirth nav li [role="search"] {
1526
1607
  width: auto;
1527
1608
  margin-bottom: 0;
@@ -1529,7 +1610,7 @@
1529
1610
 
1530
1611
  .cirth nav li button, .cirth nav li [role="button"], .cirth nav li [type="button"], .cirth nav li input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]), .cirth nav li select {
1531
1612
  height: auto;
1532
- min-block-size: var(--cirth-space-6);
1613
+ min-block-size: var(--cirth-space-10);
1533
1614
  margin-inline: inherit;
1534
1615
  padding: calc(var(--cirth-nav-link-spacing-vertical) - var(--cirth-border-width) * 2) var(--cirth-nav-link-spacing-horizontal);
1535
1616
  margin-bottom: 0;
@@ -1540,16 +1621,16 @@
1540
1621
  align-items: center;
1541
1622
  }
1542
1623
 
1543
- .cirth nav[aria-label="breadcrumb"] ul li:not(:first-child) {
1624
+ .cirth nav[aria-label="breadcrumb"] :is(ol, ul) li:not(:first-child) {
1544
1625
  margin-inline-start: var(--cirth-nav-link-spacing-horizontal);
1545
1626
  }
1546
1627
 
1547
- .cirth nav[aria-label="breadcrumb"] ul li a {
1628
+ .cirth nav[aria-label="breadcrumb"] :is(ol, ul) li a {
1548
1629
  margin: calc(var(--cirth-nav-link-spacing-vertical) * -1) 0;
1549
- margin-inline-start: calc(var(--cirth-nav-link-spacing-horizontal) * -1);
1630
+ margin-inline-start: calc(var(--cirth-nav-element-spacing-horizontal) * -1);
1550
1631
  }
1551
1632
 
1552
- .cirth nav[aria-label="breadcrumb"] ul li:not(:last-child):after {
1633
+ .cirth nav[aria-label="breadcrumb"] :is(ol, ul) li:not(:last-child):after {
1553
1634
  width: calc(var(--cirth-nav-link-spacing-horizontal) * 4);
1554
1635
  margin: 0 calc(var(--cirth-nav-link-spacing-horizontal) * -1);
1555
1636
  content: var(--cirth-nav-breadcrumb-divider);
@@ -1565,22 +1646,65 @@
1565
1646
  color: inherit;
1566
1647
  pointer-events: none;
1567
1648
  background-color: #0000;
1649
+ border-block-end-color: #0000;
1568
1650
  text-decoration: none;
1569
1651
  }
1570
1652
 
1571
- .cirth aside nav, .cirth aside ol, .cirth aside ul, .cirth aside li {
1653
+ .cirth header:not(:is(article, aside, dialog, figure, li, nav, section, td) *) > nav {
1654
+ --cirth-nav-element-spacing-vertical: var(--cirth-space-2);
1655
+ flex-wrap: wrap;
1656
+ align-items: center;
1657
+ }
1658
+
1659
+ .cirth header:not(:is(article, aside, dialog, figure, li, nav, section, td) *) > nav li :where(a:not([role="button"]), [role="link"]) {
1660
+ --cirth-color: var(--cirth-muted-color);
1661
+ --cirth-text-decoration: none;
1662
+ border-block-end: 0;
1663
+ border-radius: 0;
1664
+ }
1665
+
1666
+ .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) {
1667
+ --cirth-color: color-mix(in oklch,
1668
+ var(--cirth-muted-color),
1669
+ var(--cirth-contrast));
1670
+ }
1671
+
1672
+ .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"]) {
1673
+ --cirth-color: var(--cirth-contrast);
1674
+ font-weight: var(--cirth-font-weight-semibold);
1675
+ }
1676
+
1677
+ .cirth header:not(:is(article, aside, dialog, figure, li, nav, section, td) *) > nav li :where(a:not([role="button"]), [role="link"])[aria-disabled="true"] {
1678
+ --cirth-color: color-mix(in oklch,
1679
+ var(--cirth-muted-color) 55%,
1680
+ transparent);
1681
+ pointer-events: none;
1682
+ }
1683
+
1684
+ .cirth aside nav {
1685
+ --cirth-nav-element-spacing-horizontal: 0;
1686
+ display: block;
1687
+ }
1688
+
1689
+ .cirth aside nav ol, .cirth aside nav ul, .cirth aside nav li {
1572
1690
  display: block;
1573
1691
  }
1574
1692
 
1575
- .cirth aside li {
1576
- padding: calc(var(--cirth-nav-element-spacing-vertical) * .5) var(--cirth-nav-element-spacing-horizontal);
1693
+ .cirth aside nav li {
1694
+ padding: calc(var(--cirth-nav-element-spacing-vertical) * .5) 0;
1577
1695
  }
1578
1696
 
1579
- .cirth aside li a {
1697
+ .cirth aside nav li a {
1698
+ border-inline-start: var(--cirth-border-width-2) solid transparent;
1580
1699
  display: block;
1581
1700
  }
1582
1701
 
1583
- .cirth aside li [role="button"] {
1702
+ .cirth aside nav li a:is([aria-current]:not([aria-current="false"]), [aria-selected="true"]) {
1703
+ border-block-end-color: #0000;
1704
+ border-inline-start-color: var(--cirth-primary-border);
1705
+ }
1706
+
1707
+ .cirth aside nav li [role="button"] {
1584
1708
  margin: inherit;
1585
1709
  }
1586
1710
 
@@ -1598,11 +1722,18 @@
1598
1722
  background-color: var(--cirth-popover-background-color);
1599
1723
  box-shadow: var(--cirth-popover-box-shadow);
1600
1724
  color: var(--cirth-popover-color);
1601
- transition: opacity var(--cirth-transition), display var(--cirth-transition) allow-discrete, overlay var(--cirth-transition) allow-discrete;
1602
1725
  margin: auto;
1603
1726
  inset: 0;
1604
1727
  }
1605
1728
 
1729
+ .cirth :is([popover=""], [popover="auto"], [popover="hint"]):not(dialog):popover-open > :last-child {
1730
+ margin-bottom: 0;
1731
+ }
1732
+
1733
+ .cirth :is([popover=""], [popover="auto"], [popover="hint"]):not(dialog):popover-open {
1734
+ transition: opacity var(--cirth-transition), display var(--cirth-transition) allow-discrete, overlay var(--cirth-transition) allow-discrete;
1735
+ }
1736
+
1606
1737
  @starting-style {
1607
1738
  .cirth :is([popover=""], [popover="auto"], [popover="hint"]):not(dialog):popover-open {
1608
1739
  opacity: 0;
@@ -1696,6 +1827,7 @@
1696
1827
  scroll-behavior: auto;
1697
1828
  transition-delay: var(--cirth-duration-instant);
1698
1829
  transition-duration: var(--cirth-duration-instant);
1830
+ --cirth-transition: var(--cirth-duration-instant) var(--cirth-ease-out);
1699
1831
  animation-duration: 1ms;
1700
1832
  animation-iteration-count: 1;
1701
1833
  animation-delay: -1ms;
@@ -1725,7 +1857,7 @@
1725
1857
  --cirth-font-weight-medium: 500;
1726
1858
  --cirth-font-weight-semibold: 600;
1727
1859
  --cirth-font-weight-bold: 700;
1728
- --cirth-letter-spacing-tight: -.02em;
1860
+ --cirth-letter-spacing-tight: -.03em;
1729
1861
  --cirth-letter-spacing-snug: -.01em;
1730
1862
  --cirth-line-height-none: 1;
1731
1863
  --cirth-line-height-tight: 1.125;
@@ -1775,12 +1907,12 @@
1775
1907
  --cirth-z-index-modal-backdrop: 1040;
1776
1908
  --cirth-z-index-modal: 1050;
1777
1909
  --cirth-font-family: var(--cirth-font-family-sans);
1778
- --cirth-font-family-display: var(--cirth-font-family-serif);
1910
+ --cirth-font-family-display: var(--cirth-font-family-sans);
1779
1911
  --cirth-line-height: var(--cirth-line-height-normal);
1780
1912
  --cirth-font-weight: var(--cirth-font-weight-regular);
1781
1913
  --cirth-font-size: 100%;
1782
1914
  --cirth-text-underline-offset: .15em;
1783
- --cirth-border-radius: var(--cirth-radius-lg);
1915
+ --cirth-border-radius: var(--cirth-radius-sm);
1784
1916
  --cirth-card-border-radius: calc(var(--cirth-border-radius) * 1.5);
1785
1917
  --cirth-checkbox-border-radius: min(var(--cirth-border-radius),
1786
1918
  var(--cirth-radius-sm));
@@ -1791,25 +1923,29 @@
1791
1923
  --cirth-background-color: var(--cirth-canvas);
1792
1924
  --cirth-transition: var(--cirth-duration-normal) var(--cirth-ease-out);
1793
1925
  --cirth-spacing: var(--cirth-space-4);
1794
- --cirth-typography-spacing-vertical: var(--cirth-space-4);
1926
+ --cirth-typography-spacing-vertical: var(--cirth-spacing);
1795
1927
  --cirth-block-spacing-vertical: var(--cirth-spacing);
1796
1928
  --cirth-block-spacing-horizontal: var(--cirth-spacing);
1929
+ --cirth-container-gutter: clamp(var(--cirth-space-4),
1930
+ 4%,
1931
+ var(--cirth-space-12));
1797
1932
  --cirth-container-max-width: 60rem;
1798
1933
  --cirth-form-element-spacing-vertical: var(--cirth-space-2);
1799
1934
  --cirth-form-element-spacing-horizontal: var(--cirth-space-4);
1800
- --cirth-form-label-font-weight: var(--cirth-font-weight);
1935
+ --cirth-form-label-font-weight: var(--cirth-font-weight-medium);
1801
1936
  --cirth-group-box-shadow: 0 0 0 #0000;
1802
1937
  --cirth-group-box-shadow-focus-with-button: 0 0 0 var(--cirth-outline-width)
1803
1938
  var(--cirth-primary-focus);
1804
1939
  --cirth-group-box-shadow-focus-with-input: 0 0 0 var(--cirth-border-width-1)
1805
1940
  var(--cirth-form-element-border-color);
1941
+ --cirth-card-box-shadow: none;
1806
1942
  --cirth-meter-background-color: var(--cirth-progress-background-color);
1807
1943
  --cirth-meter-border-color: var(--cirth-progress-border-color);
1808
- --cirth-popover-background-color: var(--cirth-card-background-color);
1809
1944
  --cirth-popover-border-color: var(--cirth-muted-border-color);
1810
- --cirth-popover-color: var(--cirth-color);
1945
+ --cirth-popover-color: var(--cirth-ink);
1811
1946
  --cirth-popover-box-shadow: var(--cirth-box-shadow);
1812
1947
  --cirth-popover-max-width: min(30rem, 100% - var(--cirth-spacing) * 2);
1948
+ --cirth-modal-max-width: 43.75rem;
1813
1949
  --cirth-modal-overlay-backdrop-filter: blur(.375rem);
1814
1950
  --cirth-nav-element-spacing-vertical: var(--cirth-space-4);
1815
1951
  --cirth-nav-element-spacing-horizontal: var(--cirth-space-2);
@@ -1819,7 +1955,11 @@
1819
1955
  --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");
1820
1956
  --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");
1821
1957
  --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");
1822
- --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");
1958
+ --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");
1959
+ }
1960
+
1961
+ .cirth :focus-visible {
1962
+ transition-duration: var(--cirth-duration-instant);
1823
1963
  }
1824
1964
 
1825
1965
  .cirth a {
@@ -1839,30 +1979,35 @@
1839
1979
  --cirth-font-weight: var(--cirth-font-weight-semibold);
1840
1980
  }
1841
1981
 
1982
+ .cirth h1, .cirth h2 {
1983
+ --cirth-letter-spacing: var(--cirth-letter-spacing-tight);
1984
+ }
1985
+
1986
+ .cirth h3, .cirth h4 {
1987
+ --cirth-letter-spacing: var(--cirth-letter-spacing-snug);
1988
+ }
1989
+
1842
1990
  .cirth h1 {
1843
- --cirth-font-size: clamp(var(--cirth-font-size-5xl),
1844
- 1.7rem + 2.2vw,
1845
- var(--cirth-font-size-7xl));
1991
+ --cirth-font-size: clamp(var(--cirth-font-size-3xl),
1992
+ 1.31rem + 1.8vw,
1993
+ var(--cirth-font-size-6xl));
1846
1994
  --cirth-line-height: var(--cirth-line-height-tight);
1847
- --cirth-letter-spacing: var(--cirth-letter-spacing-tight);
1848
1995
  --cirth-typography-spacing-top: var(--cirth-space-12);
1849
1996
  }
1850
1997
 
1851
1998
  .cirth h2 {
1852
1999
  --cirth-font-size: clamp(var(--cirth-font-size-2xl),
1853
- 1.3rem + 1vw,
2000
+ 1.28rem + .9vw,
1854
2001
  var(--cirth-font-size-4xl));
1855
- --cirth-line-height: 1.15;
1856
- --cirth-letter-spacing: var(--cirth-letter-spacing-tight);
2002
+ --cirth-line-height: var(--cirth-line-height-snug);
1857
2003
  --cirth-typography-spacing-top: var(--cirth-space-12);
1858
2004
  }
1859
2005
 
1860
2006
  .cirth h3 {
1861
2007
  --cirth-font-size: clamp(var(--cirth-font-size-xl),
1862
- 1.15rem + .5vw,
2008
+ 1.14rem + .45vw,
1863
2009
  var(--cirth-font-size-2xl));
1864
- --cirth-line-height: 1.2;
1865
- --cirth-letter-spacing: var(--cirth-letter-spacing-snug);
2010
+ --cirth-line-height: var(--cirth-line-height-snug);
1866
2011
  --cirth-typography-spacing-top: var(--cirth-space-10);
1867
2012
  }
1868
2013
 
@@ -1885,14 +2030,12 @@
1885
2030
  }
1886
2031
 
1887
2032
  .cirth article {
1888
- --cirth-border-radius: var(--cirth-card-border-radius);
1889
- --cirth-block-spacing-vertical: var(--cirth-space-6);
1890
- --cirth-block-spacing-horizontal: var(--cirth-space-6);
2033
+ --cirth-block-spacing-vertical: var(--cirth-space-5);
2034
+ --cirth-block-spacing-horizontal: var(--cirth-space-5);
1891
2035
  }
1892
2036
 
1893
2037
  .cirth thead th, .cirth thead td, .cirth tfoot th, .cirth tfoot td {
1894
2038
  --cirth-font-weight: var(--cirth-font-weight-semibold);
1895
- --cirth-border-width: .1875rem;
1896
2039
  }
1897
2040
 
1898
2041
  .cirth pre, .cirth code, .cirth kbd, .cirth samp, .cirth var {
@@ -1907,11 +2050,6 @@
1907
2050
  --cirth-font-weight: bolder;
1908
2051
  }
1909
2052
 
1910
- .cirth input:not([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]), .cirth :where(select, textarea) {
1911
- --cirth-outline-width: var(--cirth-border-width-1);
1912
- --cirth-line-height: var(--cirth-line-height-relaxed);
1913
- }
1914
-
1915
2053
  .cirth [type="search"] {
1916
2054
  --cirth-border-radius: var(--cirth-radius-pill);
1917
2055
  }
@@ -1922,12 +2060,7 @@
1922
2060
 
1923
2061
  .cirth button, .cirth [type="submit"], .cirth [type="reset"], .cirth [type="button"], .cirth [role="button"] {
1924
2062
  --cirth-font-weight: var(--cirth-font-weight-semibold);
1925
- --cirth-line-height: var(--cirth-line-height-relaxed);
1926
- --cirth-form-element-spacing-horizontal: var(--cirth-space-5);
1927
- }
1928
-
1929
- .cirth [type="file"] {
1930
- --cirth-line-height: var(--cirth-line-height-relaxed);
2063
+ --cirth-form-element-spacing-horizontal: var(--cirth-space-4);
1931
2064
  }
1932
2065
 
1933
2066
  .cirth [type="checkbox"], .cirth [type="radio"] {
@@ -1955,54 +2088,46 @@
1955
2088
  }
1956
2089
 
1957
2090
  .cirth {
1958
- --cirth-canvas: light-dark(oklch(97.4% .004 69.35), oklch(20.15% .003 264));
1959
- --cirth-color: light-dark(oklch(35.3% .021 264), oklch(83% .016 264));
1960
- --cirth-text-selection-color: light-dark(oklch(65.7% .121 69.35 / .25), oklch(70% .129 69.35 / .1875));
1961
- --cirth-muted-color: light-dark(oklch(52.7% .032 264), oklch(61.3% .032 264));
1962
- --cirth-muted-border-color: light-dark(oklch(93.85% .003 264), oklch(26.7% .011 264));
1963
- --cirth-error: light-dark(oklch(44% .151 29.73), oklch(74.3% .133 29.73));
1964
- --cirth-success: light-dark(oklch(52.7% .1 160.59), oklch(65.7% .125 160.59));
1965
- --cirth-warning: light-dark(oklch(48.3% .086 78), oklch(70% .124 78));
1966
- --cirth-primary: light-dark(oklch(52.7% .097 69.35), oklch(70% .129 69.35));
1967
- --cirth-secondary: light-dark(oklch(52.7% .032 264), oklch(70% .028 264));
1968
- --cirth-secondary-underline: light-dark(oklch(52.7% .032 264 / .5), oklch(70% .028 264 / .5));
1969
- --cirth-secondary-hover: light-dark(oklch(44% .028 264), oklch(78.7% .021 264));
1970
- --cirth-secondary-hover-background: light-dark(oklch(44% .028 264), oklch(52.7% .032 264));
1971
- --cirth-secondary-focus: light-dark(oklch(48.3% .03 264 / .7), oklch(70% .028 264 / .7));
1972
- --cirth-contrast: light-dark(oklch(22.3% .006 264), oklch(91.7% .006 264));
1973
- --cirth-contrast-background: light-dark(oklch(22.3% .006 264), oklch(96% 0 264));
1974
- --cirth-contrast-underline: light-dark(oklch(22.3% .006 264 / .5), oklch(91.7% .006 264 / .5));
2091
+ --cirth-canvas: light-dark(oklch(97.3% .006 44), oklch(20.15% .0225 280));
2092
+ --cirth-ink: light-dark(oklch(35.3% .027 280), oklch(83% .011 280));
2093
+ --cirth-color: var(--cirth-ink);
2094
+ --cirth-muted-color: light-dark(oklch(52.7% .031 280), oklch(65.7% .025 280));
2095
+ --cirth-muted-border-color: light-dark(oklch(93.85% .002 280), oklch(26.7% .025 280));
2096
+ --cirth-error: light-dark(oklch(44% .151 22), oklch(74.3% .133 22));
2097
+ --cirth-success: light-dark(oklch(52.7% .115 153), oklch(65.7% .144 153));
2098
+ --cirth-warning: light-dark(oklch(48.3% .084 89.5), oklch(70% .122 89.5));
2099
+ --cirth-primary: light-dark(oklch(52.7% .107 44), oklch(65.7% .134 44));
2100
+ --cirth-secondary: light-dark(oklch(52.7% .031 280), oklch(70% .021 280));
2101
+ --cirth-secondary-underline: light-dark(oklch(52.7% .031 280 / .5), oklch(70% .021 280 / .5));
2102
+ --cirth-secondary-hover: light-dark(oklch(44% .029 280), oklch(78.7% .014 280));
2103
+ --cirth-secondary-hover-background: light-dark(oklch(44% .029 280), oklch(52.7% .031 280));
2104
+ --cirth-secondary-focus: light-dark(oklch(48.3% .03 280 / .7), oklch(70% .021 280 / .7));
2105
+ --cirth-contrast: light-dark(oklch(22.3% .023 280), oklch(91.7% .004 280));
2106
+ --cirth-contrast-background: light-dark(oklch(22.3% .023 280), oklch(96% 0 280));
2107
+ --cirth-contrast-underline: light-dark(oklch(22.3% .023 280 / .5), oklch(91.7% .004 280 / .5));
1975
2108
  --cirth-contrast-hover: light-dark(oklch(0% 0 0), oklch(100% 0 0));
1976
2109
  --cirth-contrast-hover-background: light-dark(oklch(0% 0 0), oklch(100% 0 0));
1977
- --cirth-contrast-focus: light-dark(oklch(48.3% .03 264 / .7), oklch(87.3% .011 264 / .5));
2110
+ --cirth-contrast-focus: light-dark(oklch(48.3% .03 280 / .7), oklch(87.3% .007 280 / .5));
1978
2111
  --cirth-contrast-inverse: light-dark(oklch(100% 0 0), oklch(0% 0 0));
1979
- --cirth-link-visited-color: light-dark(oklch(48.3% .03 264), oklch(65.7% .03 264));
1980
- --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),
1981
- .0145rem .029rem .174rem oklch(9% 0 312 / .01698), .0335rem .067rem .402rem oklch(9% 0 312 / .024), .0625rem .125rem .75rem oklch(9% 0 312 / .03), .1125rem .225rem 1.35rem oklch(9% 0 312 / .036), .2085rem .417rem 2.502rem oklch(9% 0 312 / .04302), .5rem 1rem 6rem oklch(9% 0 312 / .06), 0 0 0 .0625rem oklch(9% 0 312 / .015));
1982
- --cirth-h1-color: light-dark(oklch(22.3% .006 264), oklch(96% 0 264));
1983
- --cirth-h2-color: light-dark(oklch(26.7% .011 264), oklch(91.7% .006 264));
1984
- --cirth-h3-color: light-dark(oklch(31% .016 264), oklch(83% .016 264));
1985
- --cirth-h4-color: light-dark(oklch(35.3% .021 264), oklch(78.7% .021 264));
1986
- --cirth-h5-color: light-dark(oklch(39.7% .025 264), oklch(74.3% .025 264));
1987
- --cirth-h6-color: light-dark(oklch(44% .028 264), oklch(65.7% .03 264));
1988
- --cirth-mark-color: light-dark(oklch(18% 0 264), oklch(100% 0 0));
1989
- --cirth-code-background-color: light-dark(oklch(97% 0 288), oklch(23.4% .00725 264));
1990
- --cirth-code-color: light-dark(oklch(52.7% .032 264), oklch(65.7% .03 264));
1991
- --cirth-form-element-background-color: light-dark(oklch(99% 0 336), oklch(24.5% .0085 264));
1992
- --cirth-form-element-selected-background-color: light-dark(oklch(91.7% .006 264), oklch(31% .016 264));
1993
- --cirth-form-element-border-color: light-dark(oklch(61.3% .032 264), oklch(52.7% .032 264));
1994
- --cirth-form-element-color: light-dark(oklch(26.7% .011 264), oklch(91.7% .006 264));
1995
- --cirth-form-element-active-background-color: light-dark(oklch(100% 0 0), oklch(23.4% .00725 264));
1996
- --cirth-switch-background-color: light-dark(oklch(61.3% .032 264), oklch(52.7% .032 264));
1997
- --cirth-range-border-color: light-dark(oklch(91.7% .006 264), oklch(26.7% .011 264));
1998
- --cirth-range-active-border-color: light-dark(oklch(83% .016 264), oklch(31% .016 264));
1999
- --cirth-card-background-color: light-dark(oklch(100% 0 0), oklch(22.3% .006 264));
2000
- --cirth-card-sectioning-background-color: light-dark(oklch(99% 0 336), oklch(23.4% .00725 264));
2001
- --cirth-dropdown-background-color: light-dark(oklch(100% 0 0), oklch(22.3% .006 264));
2002
- --cirth-dropdown-border-color: light-dark(oklch(96% 0 264), oklch(26.7% .011 264));
2003
- --cirth-dropdown-hover-background-color: light-dark(oklch(96% 0 264), oklch(26.7% .011 264));
2004
- --cirth-progress-background-color: light-dark(oklch(91.7% .006 264), oklch(26.7% .011 264));
2005
- --cirth-progress-border-color: light-dark(oklch(61.3% .032 264), oklch(52.7% .032 264));
2112
+ --cirth-link-visited-color: light-dark(oklch(48.3% 0 280), oklch(65.7% 0 280));
2113
+ --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),
2114
+ .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));
2115
+ --cirth-h1-color: light-dark(oklch(22.3% .023 280), oklch(96% 0 280));
2116
+ --cirth-h2-color: light-dark(oklch(26.7% .025 280), oklch(91.7% .004 280));
2117
+ --cirth-h3-color: light-dark(oklch(31% .026 280), oklch(83% .011 280));
2118
+ --cirth-h4-color: light-dark(oklch(35.3% .027 280), oklch(78.7% .014 280));
2119
+ --cirth-h5-color: light-dark(oklch(39.7% .028 280), oklch(74.3% .018 280));
2120
+ --cirth-h6-color: light-dark(oklch(44% .029 280), oklch(65.7% .025 280));
2121
+ --cirth-mark-color: light-dark(oklch(18% .022 280), oklch(100% 0 0));
2122
+ --cirth-code-color: light-dark(oklch(52.7% .031 280), oklch(65.7% .025 280));
2123
+ --cirth-form-element-selected-background-color: light-dark(oklch(91.7% .004 280), oklch(31% .026 280));
2124
+ --cirth-form-element-border-color: light-dark(oklch(61.3% .028 280), oklch(52.7% .031 280));
2125
+ --cirth-form-element-color: light-dark(oklch(26.7% .025 280), oklch(91.7% .004 280));
2126
+ --cirth-switch-background-color: light-dark(oklch(61.3% .028 280), oklch(52.7% .031 280));
2127
+ --cirth-range-border-color: light-dark(oklch(91.7% .004 280), oklch(26.7% .025 280));
2128
+ --cirth-range-active-border-color: light-dark(oklch(83% .011 280), oklch(31% .026 280));
2129
+ --cirth-progress-background-color: light-dark(oklch(91.7% .004 280), oklch(26.7% .025 280));
2130
+ --cirth-progress-border-color: light-dark(oklch(61.3% .028 280), oklch(52.7% .031 280));
2006
2131
  }
2007
2132
 
2008
2133
  .cirth:where([data-theme="light"]), .cirth :where([data-theme="light"]), .cirth:where(:not([data-theme="dark"])) {
@@ -2030,7 +2155,15 @@
2030
2155
  --cirth-primary-hover-underline: var(--cirth-primary-hover);
2031
2156
  --cirth-primary-focus: oklch(from var(--cirth-primary) l c h / 75%);
2032
2157
  --cirth-primary-inverse: oklch(100% 0 0);
2033
- --cirth-secondary-background: oklch(48.3% .03 264);
2158
+ --cirth-text-selection-color: oklch(from var(--cirth-primary) calc(l * 1.247) c h / 25%);
2159
+ --cirth-code-background-color: oklch(from var(--cirth-canvas) calc(l - .019) c h);
2160
+ --cirth-card-sectioning-background-color: oklch(from var(--cirth-canvas) calc(l + .009) c h);
2161
+ --cirth-form-element-background-color: oklch(from var(--cirth-canvas) calc(l - .008) c h);
2162
+ --cirth-card-background-color: oklch(from var(--cirth-canvas) calc(l + .018) c h);
2163
+ --cirth-form-element-active-background-color: var(--cirth-canvas);
2164
+ --cirth-dropdown-background-color: var(--cirth-card-background-color);
2165
+ --cirth-popover-background-color: var(--cirth-card-background-color);
2166
+ --cirth-secondary-background: oklch(48.3% .03 280);
2034
2167
  --cirth-secondary-border: var(--cirth-secondary-background);
2035
2168
  --cirth-secondary-hover-border: var(--cirth-secondary-hover-background);
2036
2169
  --cirth-secondary-hover-underline: var(--cirth-secondary-hover);
@@ -2038,20 +2171,22 @@
2038
2171
  --cirth-contrast-border: var(--cirth-contrast-background);
2039
2172
  --cirth-contrast-hover-border: var(--cirth-contrast-hover-background);
2040
2173
  --cirth-contrast-hover-underline: var(--cirth-secondary-hover);
2041
- --cirth-mark-background-color: var(--cirth-warning-surface);
2174
+ --cirth-mark-background-color: color-mix(in oklab,
2175
+ var(--cirth-primary) 18%,
2176
+ var(--cirth-canvas));
2042
2177
  --cirth-ins-color: var(--cirth-success-text);
2043
2178
  --cirth-del-color: var(--cirth-error-text);
2044
2179
  --cirth-blockquote-border-color: var(--cirth-muted-border-color);
2045
2180
  --cirth-blockquote-footer-color: var(--cirth-muted-color);
2046
2181
  --cirth-button-box-shadow: 0 0 0 #0000;
2047
2182
  --cirth-button-hover-box-shadow: 0 0 0 #0000;
2048
- --cirth-table-border-color: var(--cirth-muted-border-color);
2049
- --cirth-table-row-stripped-background-color: oklch(57% .032 264 / .0375);
2050
- --cirth-code-kbd-background-color: var(--cirth-color);
2183
+ --cirth-table-border-color: var(--cirth-card-border-color);
2184
+ --cirth-table-row-stripped-background-color: oklch(57% .032 280 / .0375);
2185
+ --cirth-code-kbd-background-color: var(--cirth-ink);
2051
2186
  --cirth-code-kbd-color: var(--cirth-background-color);
2052
2187
  --cirth-form-element-placeholder-color: var(--cirth-muted-color);
2053
2188
  --cirth-form-element-active-border-color: var(--cirth-primary-border);
2054
- --cirth-form-element-focus-color: var(--cirth-primary-border);
2189
+ --cirth-form-element-focus-color: var(--cirth-primary-focus);
2055
2190
  --cirth-form-element-disabled-opacity: var(--cirth-opacity-disabled);
2056
2191
  --cirth-form-element-invalid-border-color: var(--cirth-error-border);
2057
2192
  --cirth-form-element-invalid-active-border-color: var(--cirth-error-active);
@@ -2063,28 +2198,25 @@
2063
2198
  --cirth-switch-checked-background-color: var(--cirth-primary-background);
2064
2199
  --cirth-switch-color: var(--cirth-primary-inverse);
2065
2200
  --cirth-range-thumb-border-color: var(--cirth-background-color);
2066
- --cirth-range-thumb-color: var(--cirth-secondary-background);
2201
+ --cirth-range-thumb-color: var(--cirth-secondary);
2067
2202
  --cirth-range-thumb-active-color: var(--cirth-primary-background);
2068
2203
  --cirth-accordion-active-summary-color: var(--cirth-primary-hover);
2069
- --cirth-accordion-close-summary-color: var(--cirth-color);
2070
- --cirth-accordion-open-summary-color: var(--cirth-muted-color);
2071
- --cirth-card-border-color: var(--cirth-muted-border-color);
2072
- --cirth-card-box-shadow: var(--cirth-box-shadow);
2073
- --cirth-modal-overlay-background-color: oklch(93.85% .003 264deg / var(--cirth-opacity-overlay));
2204
+ --cirth-accordion-close-summary-color: var(--cirth-ink);
2205
+ --cirth-accordion-open-summary-color: var(--cirth-ink);
2206
+ --cirth-card-border-color: color-mix(in oklab,
2207
+ var(--cirth-form-element-border-color) 38%,
2208
+ oklch(from var(--cirth-card-background-color) l 0 h));
2209
+ --cirth-modal-overlay-background-color: oklch(93.85% .002 280deg / var(--cirth-opacity-overlay));
2074
2210
  --cirth-meter-optimum-color: var(--cirth-success);
2075
2211
  --cirth-meter-suboptimum-color: var(--cirth-warning);
2076
2212
  --cirth-meter-even-less-good-color: var(--cirth-error);
2077
2213
  --cirth-progress-color: var(--cirth-primary-background);
2078
- --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");
2079
- --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");
2080
- --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");
2081
- --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");
2082
- --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");
2083
- --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");
2084
- }
2085
-
2086
- .cirth:where([data-theme="light"]) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]), .cirth :where([data-theme="light"]) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]), .cirth:where(:not([data-theme="dark"])) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]) {
2087
- --cirth-form-element-focus-color: var(--cirth-primary-focus);
2214
+ --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");
2215
+ --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");
2216
+ --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");
2217
+ --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");
2218
+ --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");
2219
+ --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");
2088
2220
  }
2089
2221
 
2090
2222
  @media only screen and (prefers-color-scheme: dark) {
@@ -2109,13 +2241,21 @@
2109
2241
  --cirth-primary-underline: oklch(from var(--cirth-primary) l c h / 50%);
2110
2242
  --cirth-primary-hover: oklch(from var(--cirth-primary) calc(l * 1.124) calc(c * 1.132) h);
2111
2243
  --cirth-primary-hover-background: color-mix(in oklch,
2112
- var(--cirth-primary) 81.4%,
2244
+ var(--cirth-primary) 72%,
2113
2245
  black);
2114
2246
  --cirth-primary-hover-border: var(--cirth-primary-hover-background);
2115
2247
  --cirth-primary-hover-underline: var(--cirth-primary-hover);
2116
- --cirth-primary-focus: oklch(from var(--cirth-primary) l c h / 70%);
2248
+ --cirth-primary-focus: oklch(from var(--cirth-primary) l c h / 80%);
2249
+ --cirth-text-selection-color: oklch(from var(--cirth-primary) calc(l * 1.065) c h / 18.75%);
2117
2250
  --cirth-primary-inverse: oklch(100% 0 0);
2118
- --cirth-secondary-background: oklch(48.3% .03 264);
2251
+ --cirth-code-background-color: oklch(from var(--cirth-canvas) calc(l - .02) c h);
2252
+ --cirth-card-sectioning-background-color: oklch(from var(--cirth-canvas) calc(l + .025) c h);
2253
+ --cirth-form-element-background-color: oklch(from var(--cirth-canvas) calc(l - .008) c h);
2254
+ --cirth-card-background-color: oklch(from var(--cirth-canvas) calc(l + .04) c h);
2255
+ --cirth-form-element-active-background-color: var(--cirth-canvas);
2256
+ --cirth-dropdown-background-color: var(--cirth-card-background-color);
2257
+ --cirth-popover-background-color: var(--cirth-card-background-color);
2258
+ --cirth-secondary-background: oklch(48.3% .03 280);
2119
2259
  --cirth-secondary-border: var(--cirth-secondary-background);
2120
2260
  --cirth-secondary-hover-border: var(--cirth-secondary-hover-background);
2121
2261
  --cirth-secondary-hover-underline: var(--cirth-secondary-hover);
@@ -2123,20 +2263,22 @@
2123
2263
  --cirth-contrast-border: var(--cirth-contrast-background);
2124
2264
  --cirth-contrast-hover-border: var(--cirth-contrast-hover-background);
2125
2265
  --cirth-contrast-hover-underline: var(--cirth-contrast-hover);
2126
- --cirth-mark-background-color: var(--cirth-warning-surface);
2266
+ --cirth-mark-background-color: color-mix(in oklab,
2267
+ var(--cirth-primary) 24%,
2268
+ var(--cirth-canvas));
2127
2269
  --cirth-ins-color: var(--cirth-success-text);
2128
2270
  --cirth-del-color: var(--cirth-error-text);
2129
2271
  --cirth-blockquote-border-color: var(--cirth-muted-border-color);
2130
2272
  --cirth-blockquote-footer-color: var(--cirth-muted-color);
2131
2273
  --cirth-button-box-shadow: 0 0 0 #0000;
2132
2274
  --cirth-button-hover-box-shadow: 0 0 0 #0000;
2133
- --cirth-table-border-color: var(--cirth-muted-border-color);
2134
- --cirth-table-row-stripped-background-color: oklch(57% .032 264 / .0375);
2135
- --cirth-code-kbd-background-color: var(--cirth-color);
2275
+ --cirth-table-border-color: var(--cirth-card-border-color);
2276
+ --cirth-table-row-stripped-background-color: oklch(57% .032 280 / .0375);
2277
+ --cirth-code-kbd-background-color: var(--cirth-ink);
2136
2278
  --cirth-code-kbd-color: var(--cirth-background-color);
2137
- --cirth-form-element-placeholder-color: oklch(65.7% .03 264);
2279
+ --cirth-form-element-placeholder-color: oklch(65.7% .025 280);
2138
2280
  --cirth-form-element-active-border-color: var(--cirth-primary-border);
2139
- --cirth-form-element-focus-color: var(--cirth-primary-border);
2281
+ --cirth-form-element-focus-color: var(--cirth-primary-focus);
2140
2282
  --cirth-form-element-disabled-opacity: var(--cirth-opacity-disabled);
2141
2283
  --cirth-form-element-invalid-border-color: var(--cirth-error-border);
2142
2284
  --cirth-form-element-invalid-active-border-color: var(--cirth-error-active);
@@ -2148,28 +2290,25 @@
2148
2290
  --cirth-switch-checked-background-color: var(--cirth-primary-background);
2149
2291
  --cirth-switch-color: var(--cirth-primary-inverse);
2150
2292
  --cirth-range-thumb-border-color: var(--cirth-background-color);
2151
- --cirth-range-thumb-color: var(--cirth-secondary-background);
2293
+ --cirth-range-thumb-color: var(--cirth-secondary);
2152
2294
  --cirth-range-thumb-active-color: var(--cirth-primary-background);
2153
2295
  --cirth-accordion-active-summary-color: var(--cirth-primary-hover);
2154
- --cirth-accordion-close-summary-color: var(--cirth-color);
2155
- --cirth-accordion-open-summary-color: var(--cirth-muted-color);
2156
- --cirth-card-border-color: var(--cirth-card-background-color);
2157
- --cirth-card-box-shadow: var(--cirth-box-shadow);
2158
- --cirth-modal-overlay-background-color: oklch(9% 0 312deg / var(--cirth-opacity-overlay));
2296
+ --cirth-accordion-close-summary-color: var(--cirth-ink);
2297
+ --cirth-accordion-open-summary-color: var(--cirth-ink);
2298
+ --cirth-card-border-color: color-mix(in oklab,
2299
+ var(--cirth-form-element-border-color) 46%,
2300
+ var(--cirth-card-background-color));
2301
+ --cirth-modal-overlay-background-color: oklch(9% .011 280deg / var(--cirth-opacity-overlay));
2159
2302
  --cirth-meter-optimum-color: var(--cirth-success);
2160
2303
  --cirth-meter-suboptimum-color: var(--cirth-warning);
2161
2304
  --cirth-meter-even-less-good-color: var(--cirth-error);
2162
- --cirth-progress-color: oklch(61.3% .113 69.35);
2163
- --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(122, 132, 152)' 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");
2164
- --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(122, 132, 152)' 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");
2165
- --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(122, 132, 152)' 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");
2166
- --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(122, 132, 152)' 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");
2167
- --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");
2168
- --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");
2169
- }
2170
-
2171
- .cirth:where(:not([data-theme])) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]) {
2172
- --cirth-form-element-focus-color: var(--cirth-primary-focus);
2305
+ --cirth-progress-color: var(--cirth-primary);
2306
+ --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");
2307
+ --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");
2308
+ --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");
2309
+ --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");
2310
+ --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");
2311
+ --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");
2173
2312
  }
2174
2313
  }
2175
2314
 
@@ -2194,13 +2333,21 @@
2194
2333
  --cirth-primary-underline: oklch(from var(--cirth-primary) l c h / 50%);
2195
2334
  --cirth-primary-hover: oklch(from var(--cirth-primary) calc(l * 1.124) calc(c * 1.132) h);
2196
2335
  --cirth-primary-hover-background: color-mix(in oklch,
2197
- var(--cirth-primary) 81.4%,
2336
+ var(--cirth-primary) 72%,
2198
2337
  black);
2199
2338
  --cirth-primary-hover-border: var(--cirth-primary-hover-background);
2200
2339
  --cirth-primary-hover-underline: var(--cirth-primary-hover);
2201
- --cirth-primary-focus: oklch(from var(--cirth-primary) l c h / 70%);
2340
+ --cirth-primary-focus: oklch(from var(--cirth-primary) l c h / 80%);
2341
+ --cirth-text-selection-color: oklch(from var(--cirth-primary) calc(l * 1.065) c h / 18.75%);
2202
2342
  --cirth-primary-inverse: oklch(100% 0 0);
2203
- --cirth-secondary-background: oklch(48.3% .03 264);
2343
+ --cirth-code-background-color: oklch(from var(--cirth-canvas) calc(l - .02) c h);
2344
+ --cirth-card-sectioning-background-color: oklch(from var(--cirth-canvas) calc(l + .025) c h);
2345
+ --cirth-form-element-background-color: oklch(from var(--cirth-canvas) calc(l - .008) c h);
2346
+ --cirth-card-background-color: oklch(from var(--cirth-canvas) calc(l + .04) c h);
2347
+ --cirth-form-element-active-background-color: var(--cirth-canvas);
2348
+ --cirth-dropdown-background-color: var(--cirth-card-background-color);
2349
+ --cirth-popover-background-color: var(--cirth-card-background-color);
2350
+ --cirth-secondary-background: oklch(48.3% .03 280);
2204
2351
  --cirth-secondary-border: var(--cirth-secondary-background);
2205
2352
  --cirth-secondary-hover-border: var(--cirth-secondary-hover-background);
2206
2353
  --cirth-secondary-hover-underline: var(--cirth-secondary-hover);
@@ -2208,20 +2355,22 @@
2208
2355
  --cirth-contrast-border: var(--cirth-contrast-background);
2209
2356
  --cirth-contrast-hover-border: var(--cirth-contrast-hover-background);
2210
2357
  --cirth-contrast-hover-underline: var(--cirth-contrast-hover);
2211
- --cirth-mark-background-color: var(--cirth-warning-surface);
2358
+ --cirth-mark-background-color: color-mix(in oklab,
2359
+ var(--cirth-primary) 24%,
2360
+ var(--cirth-canvas));
2212
2361
  --cirth-ins-color: var(--cirth-success-text);
2213
2362
  --cirth-del-color: var(--cirth-error-text);
2214
2363
  --cirth-blockquote-border-color: var(--cirth-muted-border-color);
2215
2364
  --cirth-blockquote-footer-color: var(--cirth-muted-color);
2216
2365
  --cirth-button-box-shadow: 0 0 0 #0000;
2217
2366
  --cirth-button-hover-box-shadow: 0 0 0 #0000;
2218
- --cirth-table-border-color: var(--cirth-muted-border-color);
2219
- --cirth-table-row-stripped-background-color: oklch(57% .032 264 / .0375);
2220
- --cirth-code-kbd-background-color: var(--cirth-color);
2367
+ --cirth-table-border-color: var(--cirth-card-border-color);
2368
+ --cirth-table-row-stripped-background-color: oklch(57% .032 280 / .0375);
2369
+ --cirth-code-kbd-background-color: var(--cirth-ink);
2221
2370
  --cirth-code-kbd-color: var(--cirth-background-color);
2222
- --cirth-form-element-placeholder-color: oklch(65.7% .03 264);
2371
+ --cirth-form-element-placeholder-color: oklch(65.7% .025 280);
2223
2372
  --cirth-form-element-active-border-color: var(--cirth-primary-border);
2224
- --cirth-form-element-focus-color: var(--cirth-primary-border);
2373
+ --cirth-form-element-focus-color: var(--cirth-primary-focus);
2225
2374
  --cirth-form-element-disabled-opacity: var(--cirth-opacity-disabled);
2226
2375
  --cirth-form-element-invalid-border-color: var(--cirth-error-border);
2227
2376
  --cirth-form-element-invalid-active-border-color: var(--cirth-error-active);
@@ -2233,28 +2382,25 @@
2233
2382
  --cirth-switch-checked-background-color: var(--cirth-primary-background);
2234
2383
  --cirth-switch-color: var(--cirth-primary-inverse);
2235
2384
  --cirth-range-thumb-border-color: var(--cirth-background-color);
2236
- --cirth-range-thumb-color: var(--cirth-secondary-background);
2385
+ --cirth-range-thumb-color: var(--cirth-secondary);
2237
2386
  --cirth-range-thumb-active-color: var(--cirth-primary-background);
2238
2387
  --cirth-accordion-active-summary-color: var(--cirth-primary-hover);
2239
- --cirth-accordion-close-summary-color: var(--cirth-color);
2240
- --cirth-accordion-open-summary-color: var(--cirth-muted-color);
2241
- --cirth-card-border-color: var(--cirth-card-background-color);
2242
- --cirth-card-box-shadow: var(--cirth-box-shadow);
2243
- --cirth-modal-overlay-background-color: oklch(9% 0 312deg / var(--cirth-opacity-overlay));
2388
+ --cirth-accordion-close-summary-color: var(--cirth-ink);
2389
+ --cirth-accordion-open-summary-color: var(--cirth-ink);
2390
+ --cirth-card-border-color: color-mix(in oklab,
2391
+ var(--cirth-form-element-border-color) 46%,
2392
+ var(--cirth-card-background-color));
2393
+ --cirth-modal-overlay-background-color: oklch(9% .011 280deg / var(--cirth-opacity-overlay));
2244
2394
  --cirth-meter-optimum-color: var(--cirth-success);
2245
2395
  --cirth-meter-suboptimum-color: var(--cirth-warning);
2246
2396
  --cirth-meter-even-less-good-color: var(--cirth-error);
2247
- --cirth-progress-color: oklch(61.3% .113 69.35);
2248
- --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(122, 132, 152)' 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");
2249
- --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(122, 132, 152)' 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");
2250
- --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(122, 132, 152)' 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");
2251
- --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(122, 132, 152)' 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");
2252
- --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");
2253
- --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");
2254
- }
2255
-
2256
- .cirth:where([data-theme="dark"]) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]), .cirth :where([data-theme="dark"]) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]) {
2257
- --cirth-form-element-focus-color: var(--cirth-primary-focus);
2397
+ --cirth-progress-color: var(--cirth-primary);
2398
+ --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");
2399
+ --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");
2400
+ --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");
2401
+ --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");
2402
+ --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");
2403
+ --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");
2258
2404
  }
2259
2405
 
2260
2406
  .cirth progress, .cirth [type="checkbox"], .cirth [type="radio"], .cirth [type="range"] {
@@ -2263,117 +2409,117 @@
2263
2409
 
2264
2410
  @media (prefers-contrast: more) {
2265
2411
  .cirth:where([data-theme="light"]), .cirth :where([data-theme="light"]), .cirth:where(:not([data-theme="dark"])) {
2266
- --cirth-color: oklch(22.3% .006 264);
2412
+ --cirth-ink: oklch(22.3% .023 280);
2267
2413
  --cirth-h1-color: var(--cirth-color);
2268
2414
  --cirth-h2-color: var(--cirth-color);
2269
2415
  --cirth-h3-color: var(--cirth-color);
2270
2416
  --cirth-h4-color: var(--cirth-color);
2271
2417
  --cirth-h5-color: var(--cirth-color);
2272
2418
  --cirth-h6-color: var(--cirth-color);
2273
- --cirth-muted-color: oklch(39.7% .025 264);
2274
- --cirth-secondary: oklch(39.7% .025 264);
2275
- --cirth-code-color: oklch(35.3% .021 264);
2276
- --cirth-link-visited-color: oklch(35.3% .021 264);
2277
- --cirth-muted-border-color: oklch(57% .032 264);
2278
- --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");
2279
- --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");
2280
- --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");
2281
- --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");
2282
- --cirth-form-element-border-color: oklch(39.7% .025 264);
2283
- --cirth-form-element-invalid-border-color: oklch(48.3% .166 29.73);
2284
- --cirth-form-element-valid-border-color: oklch(48.3% .092 160.59);
2285
- --cirth-primary: oklch(39.7% .073 69.35);
2286
- --cirth-primary-hover: oklch(31% .057 69.35);
2419
+ --cirth-muted-color: oklch(39.7% .028 280);
2420
+ --cirth-secondary: oklch(39.7% .028 280);
2421
+ --cirth-code-color: oklch(35.3% .027 280);
2422
+ --cirth-link-visited-color: oklch(35.3% .027 280);
2423
+ --cirth-muted-border-color: oklch(57% .032 280);
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(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");
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(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");
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(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");
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(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");
2428
+ --cirth-form-element-border-color: oklch(39.7% .028 280);
2429
+ --cirth-form-element-invalid-border-color: oklch(48.3% .165 22);
2430
+ --cirth-form-element-valid-border-color: oklch(48.3% .106 153);
2431
+ --cirth-primary: oklch(39.7% .081 44);
2432
+ --cirth-primary-hover: oklch(31% .063 44);
2287
2433
  --cirth-primary-underline: var(--cirth-primary);
2288
2434
  --cirth-secondary-underline: var(--cirth-secondary);
2289
2435
  --cirth-contrast-underline: var(--cirth-contrast);
2290
- --cirth-primary-focus: oklch(48.3% .089 69.35);
2291
- --cirth-secondary-focus: oklch(48.3% .03 264);
2292
- --cirth-contrast-focus: oklch(48.3% .03 264);
2293
- --cirth-switch-background-color: oklch(48.3% .03 264);
2294
- --cirth-progress-border-color: oklch(48.3% .03 264);
2295
- --cirth-meter-optimum-color: oklch(44% .084 160.59);
2296
- --cirth-meter-suboptimum-color: oklch(39.7% .07 78);
2297
- --cirth-meter-even-less-good-color: oklch(35.3% .122 29.73);
2436
+ --cirth-primary-focus: oklch(48.3% .098 44);
2437
+ --cirth-secondary-focus: oklch(48.3% .03 280);
2438
+ --cirth-contrast-focus: oklch(48.3% .03 280);
2439
+ --cirth-switch-background-color: oklch(48.3% .03 280);
2440
+ --cirth-progress-border-color: oklch(48.3% .03 280);
2441
+ --cirth-meter-optimum-color: oklch(44% .096 153);
2442
+ --cirth-meter-suboptimum-color: oklch(39.7% .069 89.5);
2443
+ --cirth-meter-even-less-good-color: oklch(35.3% .121 22);
2298
2444
  }
2299
2445
  }
2300
2446
 
2301
2447
  @media only screen and (prefers-contrast: more) and (prefers-color-scheme: dark) {
2302
2448
  .cirth:where(:not([data-theme])) {
2303
- --cirth-color: oklch(96% 0 264);
2449
+ --cirth-ink: oklch(96% 0 280);
2304
2450
  --cirth-h1-color: var(--cirth-color);
2305
2451
  --cirth-h2-color: var(--cirth-color);
2306
2452
  --cirth-h3-color: var(--cirth-color);
2307
2453
  --cirth-h4-color: var(--cirth-color);
2308
2454
  --cirth-h5-color: var(--cirth-color);
2309
2455
  --cirth-h6-color: var(--cirth-color);
2310
- --cirth-muted-color: oklch(78.7% .021 264);
2311
- --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");
2312
- --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");
2313
- --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");
2314
- --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");
2315
- --cirth-secondary: oklch(78.7% .021 264);
2316
- --cirth-code-color: oklch(83% .016 264);
2317
- --cirth-link-visited-color: oklch(78.7% .021 264);
2318
- --cirth-muted-border-color: oklch(57% .032 264);
2456
+ --cirth-muted-color: oklch(78.7% .014 280);
2457
+ --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");
2458
+ --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");
2459
+ --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");
2460
+ --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");
2461
+ --cirth-secondary: oklch(78.7% .014 280);
2462
+ --cirth-code-color: oklch(83% .011 280);
2463
+ --cirth-link-visited-color: oklch(78.7% .014 280);
2464
+ --cirth-muted-border-color: oklch(57% .032 280);
2319
2465
  --cirth-card-border-color: var(--cirth-muted-border-color);
2320
- --cirth-form-element-border-color: oklch(70% .028 264);
2321
- --cirth-form-element-invalid-border-color: oklch(78.7% .106 29.73);
2322
- --cirth-form-element-valid-border-color: oklch(78.7% .15 160.59);
2323
- --cirth-primary: oklch(78.7% .146 69.35);
2324
- --cirth-primary-hover: oklch(87.3% .082 69.35);
2325
- --cirth-primary-background: oklch(44% .081 69.35);
2326
- --cirth-primary-hover-background: oklch(39.7% .073 69.35);
2466
+ --cirth-form-element-border-color: oklch(70% .021 280);
2467
+ --cirth-form-element-invalid-border-color: oklch(78.7% .105 22);
2468
+ --cirth-form-element-valid-border-color: oklch(78.7% .172 153);
2469
+ --cirth-primary: oklch(78.7% .092 44);
2470
+ --cirth-primary-hover: oklch(87.3% .051 44);
2471
+ --cirth-primary-background: oklch(44% .09 44);
2472
+ --cirth-primary-hover-background: oklch(39.7% .081 44);
2327
2473
  --cirth-primary-underline: var(--cirth-primary);
2328
2474
  --cirth-secondary-underline: var(--cirth-secondary);
2329
2475
  --cirth-contrast-underline: var(--cirth-contrast);
2330
- --cirth-primary-focus: oklch(70% .129 69.35);
2331
- --cirth-secondary-focus: oklch(70% .028 264);
2332
- --cirth-contrast-focus: oklch(87.3% .011 264);
2333
- --cirth-switch-background-color: oklch(65.7% .03 264);
2334
- --cirth-progress-border-color: oklch(70% .028 264);
2335
- --cirth-meter-optimum-color: oklch(74.3% .142 160.59);
2336
- --cirth-meter-suboptimum-color: oklch(78.7% .139 78);
2337
- --cirth-meter-even-less-good-color: oklch(83% .081 29.73);
2476
+ --cirth-primary-focus: oklch(70% .141 44);
2477
+ --cirth-secondary-focus: oklch(70% .021 280);
2478
+ --cirth-contrast-focus: oklch(87.3% .007 280);
2479
+ --cirth-switch-background-color: oklch(65.7% .025 280);
2480
+ --cirth-progress-border-color: oklch(70% .021 280);
2481
+ --cirth-meter-optimum-color: oklch(74.3% .163 153);
2482
+ --cirth-meter-suboptimum-color: oklch(78.7% .137 89.5);
2483
+ --cirth-meter-even-less-good-color: oklch(83% .08 22);
2338
2484
  }
2339
2485
  }
2340
2486
 
2341
2487
  @media (prefers-contrast: more) {
2342
2488
  .cirth:where([data-theme="dark"]), .cirth :where([data-theme="dark"]) {
2343
- --cirth-color: oklch(96% 0 264);
2489
+ --cirth-ink: oklch(96% 0 280);
2344
2490
  --cirth-h1-color: var(--cirth-color);
2345
2491
  --cirth-h2-color: var(--cirth-color);
2346
2492
  --cirth-h3-color: var(--cirth-color);
2347
2493
  --cirth-h4-color: var(--cirth-color);
2348
2494
  --cirth-h5-color: var(--cirth-color);
2349
2495
  --cirth-h6-color: var(--cirth-color);
2350
- --cirth-muted-color: oklch(78.7% .021 264);
2351
- --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");
2352
- --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");
2353
- --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");
2354
- --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");
2355
- --cirth-secondary: oklch(78.7% .021 264);
2356
- --cirth-code-color: oklch(83% .016 264);
2357
- --cirth-link-visited-color: oklch(78.7% .021 264);
2358
- --cirth-muted-border-color: oklch(57% .032 264);
2496
+ --cirth-muted-color: oklch(78.7% .014 280);
2497
+ --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");
2498
+ --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");
2499
+ --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");
2500
+ --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");
2501
+ --cirth-secondary: oklch(78.7% .014 280);
2502
+ --cirth-code-color: oklch(83% .011 280);
2503
+ --cirth-link-visited-color: oklch(78.7% .014 280);
2504
+ --cirth-muted-border-color: oklch(57% .032 280);
2359
2505
  --cirth-card-border-color: var(--cirth-muted-border-color);
2360
- --cirth-form-element-border-color: oklch(70% .028 264);
2361
- --cirth-form-element-invalid-border-color: oklch(78.7% .106 29.73);
2362
- --cirth-form-element-valid-border-color: oklch(78.7% .15 160.59);
2363
- --cirth-primary: oklch(78.7% .146 69.35);
2364
- --cirth-primary-hover: oklch(87.3% .082 69.35);
2365
- --cirth-primary-background: oklch(44% .081 69.35);
2366
- --cirth-primary-hover-background: oklch(39.7% .073 69.35);
2506
+ --cirth-form-element-border-color: oklch(70% .021 280);
2507
+ --cirth-form-element-invalid-border-color: oklch(78.7% .105 22);
2508
+ --cirth-form-element-valid-border-color: oklch(78.7% .172 153);
2509
+ --cirth-primary: oklch(78.7% .092 44);
2510
+ --cirth-primary-hover: oklch(87.3% .051 44);
2511
+ --cirth-primary-background: oklch(44% .09 44);
2512
+ --cirth-primary-hover-background: oklch(39.7% .081 44);
2367
2513
  --cirth-primary-underline: var(--cirth-primary);
2368
2514
  --cirth-secondary-underline: var(--cirth-secondary);
2369
2515
  --cirth-contrast-underline: var(--cirth-contrast);
2370
- --cirth-primary-focus: oklch(70% .129 69.35);
2371
- --cirth-secondary-focus: oklch(70% .028 264);
2372
- --cirth-contrast-focus: oklch(87.3% .011 264);
2373
- --cirth-switch-background-color: oklch(65.7% .03 264);
2374
- --cirth-progress-border-color: oklch(70% .028 264);
2375
- --cirth-meter-optimum-color: oklch(74.3% .142 160.59);
2376
- --cirth-meter-suboptimum-color: oklch(78.7% .139 78);
2377
- --cirth-meter-even-less-good-color: oklch(83% .081 29.73);
2516
+ --cirth-primary-focus: oklch(70% .141 44);
2517
+ --cirth-secondary-focus: oklch(70% .021 280);
2518
+ --cirth-contrast-focus: oklch(87.3% .007 280);
2519
+ --cirth-switch-background-color: oklch(65.7% .025 280);
2520
+ --cirth-progress-border-color: oklch(70% .021 280);
2521
+ --cirth-meter-optimum-color: oklch(74.3% .163 153);
2522
+ --cirth-meter-suboptimum-color: oklch(78.7% .137 89.5);
2523
+ --cirth-meter-even-less-good-color: oklch(83% .08 22);
2378
2524
  }
2379
2525
  }