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