@cirthcss/cirth 0.3.0 → 0.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/cirth.css CHANGED
@@ -9,24 +9,7 @@
9
9
  vertical-align: inherit;
10
10
  }
11
11
 
12
- :where(:root) {
13
- -webkit-tap-highlight-color: transparent;
14
- -webkit-text-size-adjust: 100%;
15
- -moz-text-size-adjust: 100%;
16
- text-size-adjust: 100%;
17
- background-color: var(--cirth-background-color);
18
- color: var(--cirth-color);
19
- font-weight: var(--cirth-font-weight);
20
- font-size: var(--cirth-font-size);
21
- line-height: var(--cirth-line-height);
22
- font-family: var(--cirth-font-family);
23
- text-underline-offset: var(--cirth-text-underline-offset);
24
- text-rendering: optimizelegibility;
25
- overflow-wrap: break-word;
26
- tab-size: 4;
27
- }
28
-
29
- :where(:host) {
12
+ :where(:root), :where(:host) {
30
13
  -webkit-tap-highlight-color: transparent;
31
14
  -webkit-text-size-adjust: 100%;
32
15
  -moz-text-size-adjust: 100%;
@@ -68,7 +51,7 @@ section {
68
51
  margin-right: auto;
69
52
  }
70
53
 
71
- @media (width >= 576px) {
54
+ @media (min-width: 576px) {
72
55
  .container {
73
56
  max-width: 510px;
74
57
  padding-left: 0;
@@ -76,25 +59,25 @@ section {
76
59
  }
77
60
  }
78
61
 
79
- @media (width >= 768px) {
62
+ @media (min-width: 768px) {
80
63
  .container {
81
64
  max-width: 700px;
82
65
  }
83
66
  }
84
67
 
85
- @media (width >= 1024px) {
68
+ @media (min-width: 1024px) {
86
69
  .container {
87
70
  max-width: 950px;
88
71
  }
89
72
  }
90
73
 
91
- @media (width >= 1280px) {
74
+ @media (min-width: 1280px) {
92
75
  .container {
93
76
  max-width: 1200px;
94
77
  }
95
78
  }
96
79
 
97
- @media (width >= 1536px) {
80
+ @media (min-width: 1536px) {
98
81
  .container {
99
82
  max-width: 1450px;
100
83
  }
@@ -107,7 +90,7 @@ section {
107
90
  display: grid;
108
91
  }
109
92
 
110
- @media (width >= 768px) {
93
+ @media (min-width: 768px) {
111
94
  .grid {
112
95
  grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
113
96
  }
@@ -148,6 +131,10 @@ address, blockquote, dl, ol, p, pre, table, ul {
148
131
  font-weight: var(--cirth-font-weight);
149
132
  }
150
133
 
134
+ p {
135
+ text-wrap: pretty;
136
+ }
137
+
151
138
  h1, h2, h3, h4, h5, h6 {
152
139
  margin-top: 0;
153
140
  margin-bottom: var(--cirth-typography-spacing-vertical);
@@ -155,7 +142,9 @@ h1, h2, h3, h4, h5, h6 {
155
142
  font-weight: var(--cirth-font-weight);
156
143
  font-size: var(--cirth-font-size);
157
144
  line-height: var(--cirth-line-height);
158
- font-family: var(--cirth-font-family);
145
+ font-family: var(--cirth-font-family-display);
146
+ letter-spacing: var(--cirth-letter-spacing, normal);
147
+ text-wrap: balance;
159
148
  }
160
149
 
161
150
  h1 {
@@ -215,10 +204,10 @@ ul li {
215
204
  }
216
205
 
217
206
  mark {
207
+ padding: 0 var(--cirth-space-1);
218
208
  background-color: var(--cirth-mark-background-color);
219
209
  color: var(--cirth-mark-color);
220
210
  vertical-align: baseline;
221
- padding: .125rem .25rem;
222
211
  }
223
212
 
224
213
  blockquote {
@@ -255,22 +244,7 @@ del {
255
244
  background-color: var(--cirth-text-selection-color);
256
245
  }
257
246
 
258
- [role="link"] {
259
- --cirth-color: var(--cirth-primary);
260
- --cirth-background-color: transparent;
261
- --cirth-underline: var(--cirth-primary-underline);
262
- background-color: var(--cirth-background-color);
263
- color: var(--cirth-color);
264
- -webkit-text-decoration: var(--cirth-text-decoration);
265
- text-decoration: var(--cirth-text-decoration);
266
- -webkit-text-decoration-color: var(--cirth-underline);
267
- text-decoration-color: var(--cirth-underline);
268
- text-underline-offset: .125em;
269
- transition: background-color var(--cirth-transition), color var(--cirth-transition), text-decoration var(--cirth-transition), box-shadow var(--cirth-transition);
270
- outline: none;
271
- }
272
-
273
- :where(a:not([role="button"])) {
247
+ :where(a:not([role="button"])), [role="link"] {
274
248
  --cirth-color: var(--cirth-primary);
275
249
  --cirth-background-color: transparent;
276
250
  --cirth-underline: var(--cirth-primary-underline);
@@ -285,62 +259,33 @@ del {
285
259
  outline: none;
286
260
  }
287
261
 
288
- :where(a:not([role="button"])):is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
289
- --cirth-color: var(--cirth-primary-hover);
290
- --cirth-underline: var(--cirth-primary-hover-underline);
291
- --cirth-text-decoration: underline;
292
- }
293
-
294
- [role="link"]:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
262
+ :where(a:not([role="button"])):is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), [role="link"]:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
295
263
  --cirth-color: var(--cirth-primary-hover);
296
264
  --cirth-underline: var(--cirth-primary-hover-underline);
297
265
  --cirth-text-decoration: underline;
298
266
  }
299
267
 
300
- :where(a:not([role="button"])):focus-visible {
301
- box-shadow: 0 0 0 var(--cirth-outline-width) var(--cirth-primary-focus);
302
- }
303
-
304
- [role="link"]:focus-visible {
268
+ :where(a:not([role="button"])):focus-visible, [role="link"]:focus-visible {
305
269
  box-shadow: 0 0 0 var(--cirth-outline-width) var(--cirth-primary-focus);
270
+ outline: var(--cirth-outline-width) solid transparent;
306
271
  }
307
272
 
308
- [role="link"].secondary {
309
- --cirth-color: var(--cirth-secondary);
310
- --cirth-underline: var(--cirth-secondary-underline);
311
- }
312
-
313
- :where(a:not([role="button"])).secondary {
273
+ :where(a:not([role="button"])).secondary, [role="link"].secondary {
314
274
  --cirth-color: var(--cirth-secondary);
315
275
  --cirth-underline: var(--cirth-secondary-underline);
316
276
  }
317
277
 
318
- :where(a:not([role="button"])).secondary:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
319
- --cirth-color: var(--cirth-secondary-hover);
320
- --cirth-underline: var(--cirth-secondary-hover-underline);
321
- }
322
-
323
- [role="link"].secondary:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
278
+ :where(a:not([role="button"])).secondary:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), [role="link"].secondary:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
324
279
  --cirth-color: var(--cirth-secondary-hover);
325
280
  --cirth-underline: var(--cirth-secondary-hover-underline);
326
281
  }
327
282
 
328
- [role="link"].contrast {
329
- --cirth-color: var(--cirth-contrast);
330
- --cirth-underline: var(--cirth-contrast-underline);
331
- }
332
-
333
- :where(a:not([role="button"])).contrast {
283
+ :where(a:not([role="button"])).contrast, [role="link"].contrast {
334
284
  --cirth-color: var(--cirth-contrast);
335
285
  --cirth-underline: var(--cirth-contrast-underline);
336
286
  }
337
287
 
338
- :where(a:not([role="button"])).contrast:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
339
- --cirth-color: var(--cirth-contrast-hover);
340
- --cirth-underline: var(--cirth-contrast-hover-underline);
341
- }
342
-
343
- [role="link"].contrast:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
288
+ :where(a:not([role="button"])).contrast:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), [role="link"].contrast:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
344
289
  --cirth-color: var(--cirth-contrast-hover);
345
290
  --cirth-underline: var(--cirth-contrast-hover-underline);
346
291
  }
@@ -351,86 +296,20 @@ a[role="button"] {
351
296
 
352
297
  button {
353
298
  text-transform: none;
354
- -webkit-appearance: button;
355
299
  margin: 0;
356
300
  font-family: inherit;
357
301
  overflow: visible;
358
302
  }
359
303
 
360
- button, [role="button"] {
361
- --cirth-background-color: var(--cirth-primary-background);
362
- --cirth-border-color: var(--cirth-primary-border);
363
- --cirth-color: var(--cirth-primary-inverse);
364
- --cirth-box-shadow: var(--cirth-button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
365
- padding: var(--cirth-form-element-spacing-vertical) var(--cirth-form-element-spacing-horizontal);
366
- border: var(--cirth-border-width) solid var(--cirth-border-color);
367
- border-radius: var(--cirth-border-radius);
368
- background-color: var(--cirth-background-color);
369
- box-shadow: var(--cirth-box-shadow);
370
- color: var(--cirth-color);
371
- font-weight: var(--cirth-font-weight);
372
- font-size: var(--cirth-font-size-md);
373
- line-height: var(--cirth-line-height);
374
- text-align: center;
375
- cursor: pointer;
376
- -webkit-user-select: none;
377
- user-select: none;
378
- transition: background-color var(--cirth-transition), border-color var(--cirth-transition), color var(--cirth-transition), box-shadow var(--cirth-transition);
379
- outline: none;
380
- text-decoration: none;
381
- }
382
-
383
- [type="submit"] {
384
- --cirth-background-color: var(--cirth-primary-background);
385
- --cirth-border-color: var(--cirth-primary-border);
386
- --cirth-color: var(--cirth-primary-inverse);
387
- --cirth-box-shadow: var(--cirth-button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
388
- padding: var(--cirth-form-element-spacing-vertical) var(--cirth-form-element-spacing-horizontal);
389
- border: var(--cirth-border-width) solid var(--cirth-border-color);
390
- border-radius: var(--cirth-border-radius);
391
- background-color: var(--cirth-background-color);
392
- box-shadow: var(--cirth-box-shadow);
393
- color: var(--cirth-color);
394
- font-weight: var(--cirth-font-weight);
395
- font-size: var(--cirth-font-size-md);
396
- line-height: var(--cirth-line-height);
397
- text-align: center;
398
- cursor: pointer;
399
- -webkit-user-select: none;
400
- user-select: none;
401
- transition: background-color var(--cirth-transition), border-color var(--cirth-transition), color var(--cirth-transition), box-shadow var(--cirth-transition);
402
- outline: none;
403
- text-decoration: none;
404
- }
405
-
406
- [type="reset"] {
407
- --cirth-background-color: var(--cirth-primary-background);
408
- --cirth-border-color: var(--cirth-primary-border);
409
- --cirth-color: var(--cirth-primary-inverse);
410
- --cirth-box-shadow: var(--cirth-button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
411
- padding: var(--cirth-form-element-spacing-vertical) var(--cirth-form-element-spacing-horizontal);
412
- border: var(--cirth-border-width) solid var(--cirth-border-color);
413
- border-radius: var(--cirth-border-radius);
414
- background-color: var(--cirth-background-color);
415
- box-shadow: var(--cirth-box-shadow);
416
- color: var(--cirth-color);
417
- font-weight: var(--cirth-font-weight);
418
- font-size: var(--cirth-font-size-md);
419
- line-height: var(--cirth-line-height);
420
- text-align: center;
421
- cursor: pointer;
422
- -webkit-user-select: none;
423
- user-select: none;
424
- transition: background-color var(--cirth-transition), border-color var(--cirth-transition), color var(--cirth-transition), box-shadow var(--cirth-transition);
425
- outline: none;
426
- text-decoration: none;
304
+ button, [type="submit"], [type="reset"], [type="button"] {
305
+ -webkit-appearance: button;
427
306
  }
428
307
 
429
- [type="button"] {
308
+ button, [type="submit"], [type="reset"], [type="button"], [role="button"] {
430
309
  --cirth-background-color: var(--cirth-primary-background);
431
310
  --cirth-border-color: var(--cirth-primary-border);
432
311
  --cirth-color: var(--cirth-primary-inverse);
433
- --cirth-box-shadow: var(--cirth-button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
312
+ --cirth-box-shadow: var(--cirth-button-box-shadow, 0 0 0 #0000);
434
313
  padding: var(--cirth-form-element-spacing-vertical) var(--cirth-form-element-spacing-horizontal);
435
314
  border: var(--cirth-border-width) solid var(--cirth-border-color);
436
315
  border-radius: var(--cirth-border-radius);
@@ -453,7 +332,7 @@ button, [role="button"] {
453
332
  --cirth-background-color: var(--cirth-primary-background);
454
333
  --cirth-border-color: var(--cirth-primary-border);
455
334
  --cirth-color: var(--cirth-primary-inverse);
456
- --cirth-box-shadow: var(--cirth-button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
335
+ --cirth-box-shadow: var(--cirth-button-box-shadow, 0 0 0 #0000);
457
336
  padding: var(--cirth-form-element-spacing-vertical) var(--cirth-form-element-spacing-horizontal);
458
337
  border: var(--cirth-border-width) solid var(--cirth-border-color);
459
338
  border-radius: var(--cirth-border-radius);
@@ -472,148 +351,58 @@ button, [role="button"] {
472
351
  text-decoration: none;
473
352
  }
474
353
 
475
- button[aria-current]:not([aria-current="false"]), [role="button"][aria-current]:not([aria-current="false"]) {
476
- --cirth-background-color: var(--cirth-primary-hover-background);
477
- --cirth-border-color: var(--cirth-primary-hover-border);
478
- --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
479
- --cirth-color: var(--cirth-primary-inverse);
480
- }
481
-
482
- button:is(:hover, :active, :focus) {
483
- --cirth-background-color: var(--cirth-primary-hover-background);
484
- --cirth-border-color: var(--cirth-primary-hover-border);
485
- --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
486
- --cirth-color: var(--cirth-primary-inverse);
487
- }
488
-
489
- [type="submit"][aria-current]:not([aria-current="false"]) {
490
- --cirth-background-color: var(--cirth-primary-hover-background);
491
- --cirth-border-color: var(--cirth-primary-hover-border);
492
- --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
493
- --cirth-color: var(--cirth-primary-inverse);
494
- }
495
-
496
- [type="submit"]:is(:hover, :active, :focus) {
497
- --cirth-background-color: var(--cirth-primary-hover-background);
498
- --cirth-border-color: var(--cirth-primary-hover-border);
499
- --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
500
- --cirth-color: var(--cirth-primary-inverse);
501
- }
502
-
503
- [type="reset"][aria-current]:not([aria-current="false"]) {
504
- --cirth-background-color: var(--cirth-primary-hover-background);
505
- --cirth-border-color: var(--cirth-primary-hover-border);
506
- --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
507
- --cirth-color: var(--cirth-primary-inverse);
508
- }
509
-
510
- [type="reset"]:is(:hover, :active, :focus) {
511
- --cirth-background-color: var(--cirth-primary-hover-background);
512
- --cirth-border-color: var(--cirth-primary-hover-border);
513
- --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
514
- --cirth-color: var(--cirth-primary-inverse);
515
- }
516
-
517
- [type="button"][aria-current]:not([aria-current="false"]) {
518
- --cirth-background-color: var(--cirth-primary-hover-background);
519
- --cirth-border-color: var(--cirth-primary-hover-border);
520
- --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
521
- --cirth-color: var(--cirth-primary-inverse);
522
- }
523
-
524
- [type="button"]:is(:hover, :active, :focus) {
354
+ button[aria-current]:not([aria-current="false"]), button:is(:hover, :active, :focus), [type="submit"][aria-current]:not([aria-current="false"]), [type="submit"]:is(:hover, :active, :focus), [type="reset"][aria-current]:not([aria-current="false"]), [type="reset"]:is(:hover, :active, :focus), [type="button"][aria-current]:not([aria-current="false"]), [type="button"]:is(:hover, :active, :focus), [role="button"][aria-current]:not([aria-current="false"]), [role="button"]:is(:hover, :active, :focus) {
525
355
  --cirth-background-color: var(--cirth-primary-hover-background);
526
356
  --cirth-border-color: var(--cirth-primary-hover-border);
527
- --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
357
+ --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 #0000);
528
358
  --cirth-color: var(--cirth-primary-inverse);
529
359
  }
530
360
 
531
361
  [type="file"]::file-selector-button:is() {
532
362
  --cirth-background-color: var(--cirth-primary-hover-background);
533
363
  --cirth-border-color: var(--cirth-primary-hover-border);
534
- --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
364
+ --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 #0000);
535
365
  --cirth-color: var(--cirth-primary-inverse);
536
366
  }
537
367
 
538
368
  [type="file"]::file-selector-button:is(:hover, :active, :focus) {
539
369
  --cirth-background-color: var(--cirth-primary-hover-background);
540
370
  --cirth-border-color: var(--cirth-primary-hover-border);
541
- --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
542
- --cirth-color: var(--cirth-primary-inverse);
543
- }
544
-
545
- [role="button"]:is(:hover, :active, :focus) {
546
- --cirth-background-color: var(--cirth-primary-hover-background);
547
- --cirth-border-color: var(--cirth-primary-hover-border);
548
- --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
371
+ --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 #0000);
549
372
  --cirth-color: var(--cirth-primary-inverse);
550
373
  }
551
374
 
552
- button:focus, button[aria-current]:not([aria-current="false"]):focus, [role="button"]:focus, [role="button"][aria-current]:not([aria-current="false"]):focus {
553
- --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
554
- 0 0 0 var(--cirth-outline-width) var(--cirth-primary-focus);
555
- }
556
-
557
- [type="submit"]:focus {
558
- --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
559
- 0 0 0 var(--cirth-outline-width) var(--cirth-primary-focus);
560
- }
561
-
562
- [type="submit"][aria-current]:not([aria-current="false"]):focus {
563
- --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
564
- 0 0 0 var(--cirth-outline-width) var(--cirth-primary-focus);
565
- }
566
-
567
- [type="reset"]:focus {
568
- --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
569
- 0 0 0 var(--cirth-outline-width) var(--cirth-primary-focus);
570
- }
571
-
572
- [type="reset"][aria-current]:not([aria-current="false"]):focus {
573
- --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
574
- 0 0 0 var(--cirth-outline-width) var(--cirth-primary-focus);
375
+ button:active, [type="submit"]:active, [type="reset"]:active, [type="button"]:active, [role="button"]:active {
376
+ transform: translateY(.0625rem);
575
377
  }
576
378
 
577
- [type="button"]:focus {
578
- --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
579
- 0 0 0 var(--cirth-outline-width) var(--cirth-primary-focus);
379
+ [type="file"]::file-selector-button:active {
380
+ transform: translateY(.0625rem);
580
381
  }
581
382
 
582
- [type="button"][aria-current]:not([aria-current="false"]):focus {
583
- --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
383
+ 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 {
384
+ --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 #0000),
584
385
  0 0 0 var(--cirth-outline-width) var(--cirth-primary-focus);
386
+ outline: var(--cirth-outline-width) solid transparent;
585
387
  }
586
388
 
587
- [type="file"]::file-selector-button:focus {
588
- --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
389
+ [type="file"]::file-selector-button:focus-visible {
390
+ --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 #0000),
589
391
  0 0 0 var(--cirth-outline-width) var(--cirth-primary-focus);
392
+ outline: var(--cirth-outline-width) solid transparent;
590
393
  }
591
394
 
592
- [type="file"]::file-selector-button:is():focus {
593
- --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
395
+ [type="file"]::file-selector-button:is():focus-visible {
396
+ --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 #0000),
594
397
  0 0 0 var(--cirth-outline-width) var(--cirth-primary-focus);
398
+ outline: var(--cirth-outline-width) solid transparent;
595
399
  }
596
400
 
597
- [type="submit"] {
598
- margin-bottom: var(--cirth-spacing);
599
- }
600
-
601
- [type="reset"] {
602
- margin-bottom: var(--cirth-spacing);
603
- }
604
-
605
- [type="button"] {
401
+ [type="submit"], [type="reset"], [type="button"] {
606
402
  margin-bottom: var(--cirth-spacing);
607
403
  }
608
404
 
609
- :is(button, [type="submit"], [type="button"], [role="button"]).secondary {
610
- --cirth-background-color: var(--cirth-secondary-background);
611
- --cirth-border-color: var(--cirth-secondary-border);
612
- --cirth-color: var(--cirth-secondary-inverse);
613
- cursor: pointer;
614
- }
615
-
616
- [type="reset"] {
405
+ :is(button, [type="submit"], [type="button"], [role="button"]).secondary, [type="reset"] {
617
406
  --cirth-background-color: var(--cirth-secondary-background);
618
407
  --cirth-border-color: var(--cirth-secondary-border);
619
408
  --cirth-color: var(--cirth-secondary-inverse);
@@ -627,13 +416,7 @@ button:focus, button[aria-current]:not([aria-current="false"]):focus, [role="but
627
416
  cursor: pointer;
628
417
  }
629
418
 
630
- :is(button, [type="submit"], [type="button"], [role="button"]).secondary:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
631
- --cirth-background-color: var(--cirth-secondary-hover-background);
632
- --cirth-border-color: var(--cirth-secondary-hover-border);
633
- --cirth-color: var(--cirth-secondary-inverse);
634
- }
635
-
636
- [type="reset"]:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
419
+ :is(button, [type="submit"], [type="button"], [role="button"]).secondary:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), [type="reset"]:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
637
420
  --cirth-background-color: var(--cirth-secondary-hover-background);
638
421
  --cirth-border-color: var(--cirth-secondary-hover-border);
639
422
  --cirth-color: var(--cirth-secondary-inverse);
@@ -645,33 +428,18 @@ button:focus, button[aria-current]:not([aria-current="false"]):focus, [role="but
645
428
  --cirth-color: var(--cirth-secondary-inverse);
646
429
  }
647
430
 
648
- :is(button, [type="submit"], [type="button"], [role="button"]).secondary:focus {
649
- --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
650
- 0 0 0 var(--cirth-outline-width) var(--cirth-secondary-focus);
651
- }
652
-
653
- :is(button, [type="submit"], [type="button"], [role="button"]).secondary[aria-current]:not([aria-current="false"]):focus {
654
- --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
655
- 0 0 0 var(--cirth-outline-width) var(--cirth-secondary-focus);
656
- }
657
-
658
- [type="reset"]:focus {
659
- --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
660
- 0 0 0 var(--cirth-outline-width) var(--cirth-secondary-focus);
661
- }
662
-
663
- [type="reset"][aria-current]:not([aria-current="false"]):focus {
664
- --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
431
+ :is(button, [type="submit"], [type="button"], [role="button"]).secondary:focus-visible, :is(button, [type="submit"], [type="button"], [role="button"]).secondary[aria-current]:not([aria-current="false"]):focus-visible, [type="reset"]:focus-visible, [type="reset"][aria-current]:not([aria-current="false"]):focus-visible {
432
+ --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 #0000),
665
433
  0 0 0 var(--cirth-outline-width) var(--cirth-secondary-focus);
666
434
  }
667
435
 
668
- [type="file"]::file-selector-button:focus {
669
- --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
436
+ [type="file"]::file-selector-button:focus-visible {
437
+ --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 #0000),
670
438
  0 0 0 var(--cirth-outline-width) var(--cirth-secondary-focus);
671
439
  }
672
440
 
673
- [type="file"]::file-selector-button:is():focus {
674
- --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
441
+ [type="file"]::file-selector-button:is():focus-visible {
442
+ --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 #0000),
675
443
  0 0 0 var(--cirth-outline-width) var(--cirth-secondary-focus);
676
444
  }
677
445
 
@@ -687,56 +455,29 @@ button:focus, button[aria-current]:not([aria-current="false"]):focus, [role="but
687
455
  --cirth-color: var(--cirth-contrast-inverse);
688
456
  }
689
457
 
690
- :is(button, [type="submit"], [type="button"], [role="button"]).contrast:focus {
691
- --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
458
+ :is(button, [type="submit"], [type="button"], [role="button"]).contrast:focus-visible, :is(button, [type="submit"], [type="button"], [role="button"]).contrast[aria-current]:not([aria-current="false"]):focus-visible {
459
+ --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 #0000),
692
460
  0 0 0 var(--cirth-outline-width) var(--cirth-contrast-focus);
693
461
  }
694
462
 
695
- :is(button, [type="submit"], [type="button"], [role="button"]).contrast[aria-current]:not([aria-current="false"]):focus {
696
- --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
697
- 0 0 0 var(--cirth-outline-width) var(--cirth-contrast-focus);
698
- }
699
-
700
- :is(button, [type="submit"], [type="button"], [role="button"]).outline {
701
- --cirth-background-color: transparent;
702
- --cirth-color: var(--cirth-primary);
703
- --cirth-border-color: var(--cirth-primary);
704
- }
705
-
706
- [type="reset"].outline {
463
+ :is(button, [type="submit"], [type="button"], [role="button"]).outline, [type="reset"].outline {
707
464
  --cirth-background-color: transparent;
708
465
  --cirth-color: var(--cirth-primary);
709
466
  --cirth-border-color: var(--cirth-primary);
710
467
  }
711
468
 
712
- :is(button, [type="submit"], [type="button"], [role="button"]).outline:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
469
+ :is(button, [type="submit"], [type="button"], [role="button"]).outline:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), [type="reset"].outline:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
713
470
  --cirth-background-color: transparent;
714
471
  --cirth-color: var(--cirth-primary-hover);
715
472
  --cirth-border-color: var(--cirth-primary-hover);
716
473
  }
717
474
 
718
- [type="reset"].outline:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
719
- --cirth-background-color: transparent;
720
- --cirth-color: var(--cirth-primary-hover);
721
- --cirth-border-color: var(--cirth-primary-hover);
722
- }
723
-
724
- :is(button, [type="submit"], [type="button"], [role="button"]).outline.secondary {
725
- --cirth-color: var(--cirth-secondary);
726
- --cirth-border-color: var(--cirth-secondary);
727
- }
728
-
729
- [type="reset"].outline {
475
+ :is(button, [type="submit"], [type="button"], [role="button"]).outline.secondary, [type="reset"].outline {
730
476
  --cirth-color: var(--cirth-secondary);
731
477
  --cirth-border-color: var(--cirth-secondary);
732
478
  }
733
479
 
734
- :is(button, [type="submit"], [type="button"], [role="button"]).outline.secondary:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
735
- --cirth-color: var(--cirth-secondary-hover);
736
- --cirth-border-color: var(--cirth-secondary-hover);
737
- }
738
-
739
- [type="reset"].outline:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
480
+ :is(button, [type="submit"], [type="button"], [role="button"]).outline.secondary:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), [type="reset"].outline:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
740
481
  --cirth-color: var(--cirth-secondary-hover);
741
482
  --cirth-border-color: var(--cirth-secondary-hover);
742
483
  }
@@ -751,12 +492,7 @@ button:focus, button[aria-current]:not([aria-current="false"]):focus, [role="but
751
492
  --cirth-border-color: var(--cirth-contrast-hover);
752
493
  }
753
494
 
754
- :where(button, [type="submit"], [type="reset"], [type="button"], [role="button"])[disabled] {
755
- opacity: var(--cirth-opacity-disabled);
756
- pointer-events: none;
757
- }
758
-
759
- :where(fieldset[disabled]) :is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]) {
495
+ :where(button, [type="submit"], [type="reset"], [type="button"], [role="button"])[disabled], :where(fieldset[disabled]) :is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]) {
760
496
  opacity: var(--cirth-opacity-disabled);
761
497
  pointer-events: none;
762
498
  }
@@ -774,6 +510,7 @@ th, td {
774
510
  background-color: var(--cirth-background-color);
775
511
  color: var(--cirth-color);
776
512
  font-weight: var(--cirth-font-weight);
513
+ font-variant-numeric: tabular-nums;
777
514
  text-align: left;
778
515
  text-align: start;
779
516
  }
@@ -814,11 +551,7 @@ img {
814
551
  fill: currentColor;
815
552
  }
816
553
 
817
- svg:not(:root) {
818
- overflow: hidden;
819
- }
820
-
821
- svg:not(:host) {
554
+ svg:not(:root), svg:not(:host) {
822
555
  overflow: hidden;
823
556
  }
824
557
 
@@ -846,7 +579,7 @@ pre, code, kbd, samp {
846
579
  }
847
580
 
848
581
  code, kbd, samp {
849
- padding: .375rem;
582
+ padding: var(--cirth-space-1) var(--cirth-space-2);
850
583
  display: inline-block;
851
584
  }
852
585
 
@@ -923,11 +656,7 @@ textarea {
923
656
  overflow: auto;
924
657
  }
925
658
 
926
- [type="checkbox"] {
927
- padding: 0;
928
- }
929
-
930
- [type="radio"] {
659
+ [type="checkbox"], [type="radio"] {
931
660
  padding: 0;
932
661
  }
933
662
 
@@ -970,17 +699,12 @@ textarea {
970
699
  display: none;
971
700
  }
972
701
 
973
- [type="file"] {
974
- border-width: 0;
975
- padding: 0;
976
- }
977
-
978
- [type="range"] {
702
+ [type="file"], [type="range"] {
979
703
  border-width: 0;
980
704
  padding: 0;
981
705
  }
982
706
 
983
- input:not(:is([type="checkbox"], [type="radio"], [type="range"])) {
707
+ input:not([type="checkbox"], [type="radio"], [type="range"]) {
984
708
  height: calc(var(--cirth-size-4) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2);
985
709
  }
986
710
 
@@ -993,7 +717,7 @@ fieldset {
993
717
  }
994
718
 
995
719
  label, fieldset legend {
996
- margin-bottom: calc(var(--cirth-spacing) * .375);
720
+ margin-bottom: calc(var(--cirth-spacing) * .5);
997
721
  color: var(--cirth-color);
998
722
  font-weight: var(--cirth-form-label-font-weight, var(--cirth-font-weight));
999
723
  display: block;
@@ -1003,24 +727,11 @@ fieldset legend {
1003
727
  margin-bottom: calc(var(--cirth-spacing) * .5);
1004
728
  }
1005
729
 
1006
- select, textarea {
1007
- width: 100%;
1008
- }
1009
-
1010
- input:not(:is([type="checkbox"], [type="radio"])) {
730
+ input:not([type="checkbox"], [type="radio"]), button[type="submit"], select, textarea {
1011
731
  width: 100%;
1012
732
  }
1013
733
 
1014
- button[type="submit"] {
1015
- width: 100%;
1016
- }
1017
-
1018
- select, textarea {
1019
- appearance: none;
1020
- padding: var(--cirth-form-element-spacing-vertical) var(--cirth-form-element-spacing-horizontal);
1021
- }
1022
-
1023
- input:not(:is([type="checkbox"], [type="radio"], [type="range"], [type="file"])) {
734
+ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]), select, textarea {
1024
735
  appearance: none;
1025
736
  padding: var(--cirth-form-element-spacing-vertical) var(--cirth-form-element-spacing-horizontal);
1026
737
  }
@@ -1040,43 +751,21 @@ input, select, textarea {
1040
751
  outline: none;
1041
752
  }
1042
753
 
1043
- input:not(:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [readonly])):is(:active, :focus) {
754
+ input:not([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [readonly]):is(:active, :focus), :where(select, textarea):not([readonly]):is(:active, :focus) {
1044
755
  --cirth-background-color: var(--cirth-form-element-active-background-color);
1045
756
  }
1046
757
 
1047
- :where(select, textarea):not([readonly]):is(:active, :focus) {
1048
- --cirth-background-color: var(--cirth-form-element-active-background-color);
758
+ input:not([type="submit"], [type="button"], [type="reset"], [role="switch"], [readonly]):is(:active, :focus), :where(select, textarea):not([readonly]):is(:active, :focus) {
759
+ --cirth-border-color: var(--cirth-form-element-active-border-color);
1049
760
  }
1050
761
 
1051
- input:not(:is([type="submit"], [type="button"], [type="reset"], [role="switch"], [readonly])):is(:active, :focus) {
1052
- --cirth-border-color: var(--cirth-form-element-active-border-color);
762
+ input:not([type="submit"], [type="button"], [type="reset"], [type="range"], [type="file"], [readonly]):focus, :where(select, textarea):not([readonly]):focus {
763
+ --cirth-box-shadow: 0 0 0 var(--cirth-outline-width)
764
+ var(--cirth-form-element-focus-color);
765
+ outline: var(--cirth-outline-width) solid transparent;
1053
766
  }
1054
767
 
1055
- :where(select, textarea):not([readonly]):is(:active, :focus) {
1056
- --cirth-border-color: var(--cirth-form-element-active-border-color);
1057
- }
1058
-
1059
- input:not(:is([type="submit"], [type="button"], [type="reset"], [type="range"], [type="file"], [readonly])):focus {
1060
- --cirth-box-shadow: 0 0 0 var(--cirth-outline-width)
1061
- var(--cirth-form-element-focus-color);
1062
- }
1063
-
1064
- :where(select, textarea):not([readonly]):focus {
1065
- --cirth-box-shadow: 0 0 0 var(--cirth-outline-width)
1066
- var(--cirth-form-element-focus-color);
1067
- }
1068
-
1069
- select[disabled], textarea[disabled], label[aria-disabled="true"] {
1070
- opacity: var(--cirth-form-element-disabled-opacity);
1071
- pointer-events: none;
1072
- }
1073
-
1074
- input:not(:is([type="submit"], [type="button"], [type="reset"]))[disabled] {
1075
- opacity: var(--cirth-form-element-disabled-opacity);
1076
- pointer-events: none;
1077
- }
1078
-
1079
- :where(fieldset[disabled]) :is(input:not(:is([type="submit"], [type="button"], [type="reset"])), select, textarea) {
768
+ input:not([type="submit"], [type="button"], [type="reset"])[disabled], select[disabled], textarea[disabled], label[aria-disabled="true"], :where(fieldset[disabled]) :is(input:not([type="submit"], [type="button"], [type="reset"]), select, textarea) {
1080
769
  opacity: var(--cirth-form-element-disabled-opacity);
1081
770
  pointer-events: none;
1082
771
  }
@@ -1085,7 +774,7 @@ label[aria-disabled="true"] input[disabled] {
1085
774
  opacity: 1;
1086
775
  }
1087
776
 
1088
- :where(input, select, textarea):not(:is([type="checkbox"], [type="radio"], [type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"], [type="range"]))[aria-invalid] {
777
+ :where(input, select, textarea):not([type="checkbox"], [type="radio"], [type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"], [type="range"])[aria-invalid] {
1089
778
  padding-right: calc(var(--cirth-form-element-spacing-horizontal) + var(--cirth-space-6));
1090
779
  padding-left: var(--cirth-form-element-spacing-horizontal);
1091
780
  background-position: center right var(--cirth-space-3);
@@ -1095,11 +784,11 @@ label[aria-disabled="true"] input[disabled] {
1095
784
  padding-inline-end: calc(var(--cirth-form-element-spacing-horizontal) + var(--cirth-space-6));
1096
785
  }
1097
786
 
1098
- :where(input, select, textarea):not(:is([type="checkbox"], [type="radio"], [type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"], [type="range"]))[aria-invalid="false"]:not(select) {
787
+ :where(input, select, textarea):not([type="checkbox"], [type="radio"], [type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"], [type="range"])[aria-invalid="false"]:not(select) {
1099
788
  background-image: var(--cirth-icon-valid);
1100
789
  }
1101
790
 
1102
- :where(input, select, textarea):not(:is([type="checkbox"], [type="radio"], [type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"], [type="range"]))[aria-invalid="true"]:not(select) {
791
+ :where(input, select, textarea):not([type="checkbox"], [type="radio"], [type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"], [type="range"])[aria-invalid="true"]:not(select) {
1103
792
  background-image: var(--cirth-icon-invalid);
1104
793
  }
1105
794
 
@@ -1111,7 +800,7 @@ label[aria-disabled="true"] input[disabled] {
1111
800
  --cirth-border-color: var(--cirth-form-element-valid-active-border-color);
1112
801
  }
1113
802
 
1114
- :where(input, select, textarea)[aria-invalid="false"]:is(:active, :focus):not(:is([type="checkbox"], [type="radio"])) {
803
+ :where(input, select, textarea)[aria-invalid="false"]:is(:active, :focus):not([type="checkbox"], [type="radio"]) {
1115
804
  --cirth-box-shadow: 0 0 0 var(--cirth-outline-width)
1116
805
  var(--cirth-form-element-valid-focus-color);
1117
806
  }
@@ -1124,21 +813,16 @@ label[aria-disabled="true"] input[disabled] {
1124
813
  --cirth-border-color: var(--cirth-form-element-invalid-active-border-color);
1125
814
  }
1126
815
 
1127
- :where(input, select, textarea)[aria-invalid="true"]:is(:active, :focus):not(:is([type="checkbox"], [type="radio"])) {
816
+ :where(input, select, textarea)[aria-invalid="true"]:is(:active, :focus):not([type="checkbox"], [type="radio"]) {
1128
817
  --cirth-box-shadow: 0 0 0 var(--cirth-outline-width)
1129
818
  var(--cirth-form-element-invalid-focus-color);
1130
819
  }
1131
820
 
1132
- [dir="rtl"] :where(input, select, textarea):not(:is([type="checkbox"], [type="radio"])):is([aria-invalid], [aria-invalid="true"], [aria-invalid="false"]) {
821
+ [dir="rtl"] :where(input, select, textarea):not([type="checkbox"], [type="radio"]):is([aria-invalid], [aria-invalid="true"], [aria-invalid="false"]) {
1133
822
  background-position: center left var(--cirth-space-3);
1134
823
  }
1135
824
 
1136
- select:invalid {
1137
- color: var(--cirth-form-element-placeholder-color);
1138
- opacity: 1;
1139
- }
1140
-
1141
- input::placeholder {
825
+ input::placeholder, textarea::placeholder, select:invalid {
1142
826
  color: var(--cirth-form-element-placeholder-color);
1143
827
  opacity: 1;
1144
828
  }
@@ -1148,30 +832,21 @@ input::-webkit-input-placeholder {
1148
832
  opacity: 1;
1149
833
  }
1150
834
 
1151
- textarea::placeholder {
1152
- color: var(--cirth-form-element-placeholder-color);
1153
- opacity: 1;
1154
- }
1155
-
1156
835
  textarea::-webkit-input-placeholder {
1157
836
  color: var(--cirth-form-element-placeholder-color);
1158
837
  opacity: 1;
1159
838
  }
1160
839
 
1161
- select, textarea {
1162
- margin-bottom: var(--cirth-spacing);
1163
- }
1164
-
1165
- input:not(:is([type="checkbox"], [type="radio"])) {
840
+ input:not([type="checkbox"], [type="radio"]), select, textarea {
1166
841
  margin-bottom: var(--cirth-spacing);
1167
842
  }
1168
843
 
1169
844
  select::-ms-expand {
1170
- background-color: rgba(0, 0, 0, 0);
845
+ background-color: #0000;
1171
846
  border: 0;
1172
847
  }
1173
848
 
1174
- select:not(:is([multiple], [size])) {
849
+ select:not([multiple], [size]) {
1175
850
  padding-right: calc(var(--cirth-form-element-spacing-horizontal) + var(--cirth-space-6));
1176
851
  padding-left: var(--cirth-form-element-spacing-horizontal);
1177
852
  background-image: var(--cirth-icon-chevron);
@@ -1187,7 +862,7 @@ select[multiple] option:checked {
1187
862
  color: var(--cirth-form-element-color);
1188
863
  }
1189
864
 
1190
- [dir="rtl"] select:not(:is([multiple], [size])) {
865
+ [dir="rtl"] select:not([multiple], [size]) {
1191
866
  background-position: center left var(--cirth-space-3);
1192
867
  }
1193
868
 
@@ -1229,25 +904,14 @@ label:has([type="checkbox"], [type="radio"]) {
1229
904
  width: fit-content;
1230
905
  }
1231
906
 
1232
- [type="checkbox"] {
1233
- appearance: none;
1234
- margin-top: -.125em;
1235
- border-width: var(--cirth-border-width);
1236
- vertical-align: middle;
1237
- cursor: pointer;
1238
- width: 1.25em;
1239
- height: 1.25em;
1240
- margin-inline-end: .5em;
1241
- }
1242
-
1243
- [type="radio"] {
907
+ [type="checkbox"], [type="radio"] {
1244
908
  appearance: none;
1245
909
  margin-top: -.125em;
1246
910
  border-width: var(--cirth-border-width);
1247
911
  vertical-align: middle;
1248
912
  cursor: pointer;
1249
- width: 1.25em;
1250
- height: 1.25em;
913
+ width: 1.5em;
914
+ height: 1.5em;
1251
915
  margin-inline-end: .5em;
1252
916
  }
1253
917
 
@@ -1259,77 +923,22 @@ label:has([type="checkbox"], [type="radio"]) {
1259
923
  display: none;
1260
924
  }
1261
925
 
1262
- [type="checkbox"]:checked {
1263
- --cirth-background-color: var(--cirth-primary-background);
1264
- --cirth-border-color: var(--cirth-primary-border);
1265
- background-image: var(--cirth-icon-checkbox);
1266
- background-position: center;
1267
- background-repeat: no-repeat;
1268
- background-size: .75em;
1269
- }
1270
-
1271
- [type="checkbox"]:checked:active {
1272
- --cirth-background-color: var(--cirth-primary-background);
1273
- --cirth-border-color: var(--cirth-primary-border);
1274
- background-image: var(--cirth-icon-checkbox);
1275
- background-position: center;
1276
- background-repeat: no-repeat;
1277
- background-size: .75em;
1278
- }
1279
-
1280
- [type="checkbox"]:checked:focus {
1281
- --cirth-background-color: var(--cirth-primary-background);
1282
- --cirth-border-color: var(--cirth-primary-border);
1283
- background-image: var(--cirth-icon-checkbox);
1284
- background-position: center;
1285
- background-repeat: no-repeat;
1286
- background-size: .75em;
1287
- }
1288
-
1289
- [type="radio"]:checked {
1290
- --cirth-background-color: var(--cirth-primary-background);
1291
- --cirth-border-color: var(--cirth-primary-border);
1292
- background-image: var(--cirth-icon-checkbox);
1293
- background-position: center;
1294
- background-repeat: no-repeat;
1295
- background-size: .75em;
1296
- }
1297
-
1298
- [type="radio"]:checked:active {
1299
- --cirth-background-color: var(--cirth-primary-background);
1300
- --cirth-border-color: var(--cirth-primary-border);
1301
- background-image: var(--cirth-icon-checkbox);
1302
- background-position: center;
1303
- background-repeat: no-repeat;
1304
- background-size: .75em;
1305
- }
1306
-
1307
- [type="radio"]:checked:focus {
926
+ [type="checkbox"]:checked, [type="checkbox"]:checked:active, [type="checkbox"]:checked:focus, [type="radio"]:checked, [type="radio"]:checked:active, [type="radio"]:checked:focus {
1308
927
  --cirth-background-color: var(--cirth-primary-background);
1309
928
  --cirth-border-color: var(--cirth-primary-border);
1310
929
  background-image: var(--cirth-icon-checkbox);
1311
930
  background-position: center;
1312
931
  background-repeat: no-repeat;
1313
- background-size: .75em;
1314
- }
1315
-
1316
- [type="checkbox"] ~ label {
1317
- cursor: pointer;
1318
- margin-bottom: 0;
1319
- display: inline-block;
932
+ background-size: .9em;
1320
933
  }
1321
934
 
1322
- [type="radio"] ~ label {
935
+ [type="checkbox"] ~ label, [type="radio"] ~ label {
1323
936
  cursor: pointer;
1324
937
  margin-bottom: 0;
1325
938
  display: inline-block;
1326
939
  }
1327
940
 
1328
- [type="checkbox"] ~ label:not(:last-of-type) {
1329
- margin-inline-end: 1em;
1330
- }
1331
-
1332
- [type="radio"] ~ label:not(:last-of-type) {
941
+ [type="checkbox"] ~ label:not(:last-of-type), [type="radio"] ~ label:not(:last-of-type) {
1333
942
  margin-inline-end: 1em;
1334
943
  }
1335
944
 
@@ -1339,29 +948,17 @@ label:has([type="checkbox"], [type="radio"]) {
1339
948
  background-image: var(--cirth-icon-minus);
1340
949
  background-position: center;
1341
950
  background-repeat: no-repeat;
1342
- background-size: .75em;
951
+ background-size: .9em;
1343
952
  }
1344
953
 
1345
954
  [type="radio"] {
1346
955
  border-radius: 50%;
1347
956
  }
1348
957
 
1349
- [type="radio"]:checked {
1350
- --cirth-background-color: var(--cirth-primary-inverse);
1351
- background-image: none;
1352
- border-width: .35em;
1353
- }
1354
-
1355
- [type="radio"]:checked:active {
1356
- --cirth-background-color: var(--cirth-primary-inverse);
1357
- background-image: none;
1358
- border-width: .35em;
1359
- }
1360
-
1361
- [type="radio"]:checked:focus {
958
+ [type="radio"]:checked, [type="radio"]:checked:active, [type="radio"]:checked:focus {
1362
959
  --cirth-background-color: var(--cirth-primary-inverse);
1363
960
  background-image: none;
1364
- border-width: .35em;
961
+ border-width: .42em;
1365
962
  }
1366
963
 
1367
964
  [type="checkbox"][role="switch"] {
@@ -1369,10 +966,10 @@ label:has([type="checkbox"], [type="radio"]) {
1369
966
  --cirth-color: var(--cirth-switch-color);
1370
967
  border: var(--cirth-border-width) solid var(--cirth-border-color);
1371
968
  background-color: var(--cirth-background-color);
1372
- border-radius: 1.25em;
1373
- width: 2.25em;
1374
- height: 1.25em;
1375
- line-height: 1.25em;
969
+ border-radius: 1.5em;
970
+ width: 2.7em;
971
+ height: 1.5em;
972
+ line-height: 1.5em;
1376
973
  }
1377
974
 
1378
975
  [type="checkbox"][role="switch"]:not([aria-invalid]) {
@@ -1402,130 +999,26 @@ label:has([type="checkbox"], [type="radio"]) {
1402
999
  }
1403
1000
 
1404
1001
  [type="checkbox"][role="switch"]:checked:before {
1405
- margin-inline-start: 1em;
1002
+ margin-inline-start: 1.2em;
1406
1003
  }
1407
1004
 
1408
1005
  [type="checkbox"][role="switch"][disabled] {
1409
1006
  --cirth-background-color: var(--cirth-border-color);
1410
1007
  }
1411
1008
 
1412
- [type="checkbox"][aria-invalid="false"]:checked {
1413
- --cirth-background-color: var(--cirth-form-element-valid-border-color);
1414
- }
1415
-
1416
- [type="checkbox"][aria-invalid="false"]:checked:active {
1417
- --cirth-background-color: var(--cirth-form-element-valid-border-color);
1418
- }
1419
-
1420
- [type="checkbox"][aria-invalid="false"]:checked:focus {
1421
- --cirth-background-color: var(--cirth-form-element-valid-border-color);
1422
- }
1423
-
1424
- [type="checkbox"][role="switch"][aria-invalid="false"]:checked {
1425
- --cirth-background-color: var(--cirth-form-element-valid-border-color);
1426
- }
1427
-
1428
- [type="checkbox"][role="switch"][aria-invalid="false"]:checked:active {
1429
- --cirth-background-color: var(--cirth-form-element-valid-border-color);
1430
- }
1431
-
1432
- [type="checkbox"][role="switch"][aria-invalid="false"]:checked:focus {
1009
+ [type="checkbox"][aria-invalid="false"]:checked, [type="checkbox"][aria-invalid="false"]:checked:active, [type="checkbox"][aria-invalid="false"]:checked:focus, [type="checkbox"][role="switch"][aria-invalid="false"]:checked, [type="checkbox"][role="switch"][aria-invalid="false"]:checked:active, [type="checkbox"][role="switch"][aria-invalid="false"]:checked:focus {
1433
1010
  --cirth-background-color: var(--cirth-form-element-valid-border-color);
1434
1011
  }
1435
1012
 
1436
- [type="checkbox"]:checked[aria-invalid="true"] {
1437
- --cirth-background-color: var(--cirth-form-element-invalid-border-color);
1438
- }
1439
-
1440
- [type="checkbox"]:checked:active[aria-invalid="true"] {
1441
- --cirth-background-color: var(--cirth-form-element-invalid-border-color);
1442
- }
1443
-
1444
- [type="checkbox"]:checked:focus[aria-invalid="true"] {
1013
+ [type="checkbox"]:checked[aria-invalid="true"], [type="checkbox"]:checked:active[aria-invalid="true"], [type="checkbox"]:checked:focus[aria-invalid="true"], [type="checkbox"][role="switch"]:checked[aria-invalid="true"], [type="checkbox"][role="switch"]:checked:active[aria-invalid="true"], [type="checkbox"][role="switch"]:checked:focus[aria-invalid="true"] {
1445
1014
  --cirth-background-color: var(--cirth-form-element-invalid-border-color);
1446
1015
  }
1447
1016
 
1448
- [type="checkbox"][role="switch"]:checked[aria-invalid="true"] {
1449
- --cirth-background-color: var(--cirth-form-element-invalid-border-color);
1450
- }
1451
-
1452
- [type="checkbox"][role="switch"]:checked:active[aria-invalid="true"] {
1453
- --cirth-background-color: var(--cirth-form-element-invalid-border-color);
1454
- }
1455
-
1456
- [type="checkbox"][role="switch"]:checked:focus[aria-invalid="true"] {
1457
- --cirth-background-color: var(--cirth-form-element-invalid-border-color);
1458
- }
1459
-
1460
- [type="checkbox"][aria-invalid="false"]:checked {
1461
- --cirth-border-color: var(--cirth-form-element-valid-border-color);
1462
- }
1463
-
1464
- [type="checkbox"][aria-invalid="false"]:checked:active {
1465
- --cirth-border-color: var(--cirth-form-element-valid-border-color);
1466
- }
1467
-
1468
- [type="checkbox"][aria-invalid="false"]:checked:focus {
1469
- --cirth-border-color: var(--cirth-form-element-valid-border-color);
1470
- }
1471
-
1472
- [type="radio"][aria-invalid="false"]:checked {
1473
- --cirth-border-color: var(--cirth-form-element-valid-border-color);
1474
- }
1475
-
1476
- [type="radio"][aria-invalid="false"]:checked:active {
1477
- --cirth-border-color: var(--cirth-form-element-valid-border-color);
1478
- }
1479
-
1480
- [type="radio"][aria-invalid="false"]:checked:focus {
1481
- --cirth-border-color: var(--cirth-form-element-valid-border-color);
1482
- }
1483
-
1484
- [type="checkbox"][role="switch"][aria-invalid="false"]:checked {
1485
- --cirth-border-color: var(--cirth-form-element-valid-border-color);
1486
- }
1487
-
1488
- [type="checkbox"][role="switch"][aria-invalid="false"]:checked:active {
1489
- --cirth-border-color: var(--cirth-form-element-valid-border-color);
1490
- }
1491
-
1492
- [type="checkbox"][role="switch"][aria-invalid="false"]:checked:focus {
1017
+ [type="checkbox"][aria-invalid="false"]:checked, [type="checkbox"][aria-invalid="false"]:checked:active, [type="checkbox"][aria-invalid="false"]:checked:focus, [type="radio"][aria-invalid="false"]:checked, [type="radio"][aria-invalid="false"]:checked:active, [type="radio"][aria-invalid="false"]:checked:focus, [type="checkbox"][role="switch"][aria-invalid="false"]:checked, [type="checkbox"][role="switch"][aria-invalid="false"]:checked:active, [type="checkbox"][role="switch"][aria-invalid="false"]:checked:focus {
1493
1018
  --cirth-border-color: var(--cirth-form-element-valid-border-color);
1494
1019
  }
1495
1020
 
1496
- [type="checkbox"]:checked[aria-invalid="true"] {
1497
- --cirth-border-color: var(--cirth-form-element-invalid-border-color);
1498
- }
1499
-
1500
- [type="checkbox"]:checked:active[aria-invalid="true"] {
1501
- --cirth-border-color: var(--cirth-form-element-invalid-border-color);
1502
- }
1503
-
1504
- [type="checkbox"]:checked:focus[aria-invalid="true"] {
1505
- --cirth-border-color: var(--cirth-form-element-invalid-border-color);
1506
- }
1507
-
1508
- [type="radio"]:checked[aria-invalid="true"] {
1509
- --cirth-border-color: var(--cirth-form-element-invalid-border-color);
1510
- }
1511
-
1512
- [type="radio"]:checked:active[aria-invalid="true"] {
1513
- --cirth-border-color: var(--cirth-form-element-invalid-border-color);
1514
- }
1515
-
1516
- [type="radio"]:checked:focus[aria-invalid="true"] {
1517
- --cirth-border-color: var(--cirth-form-element-invalid-border-color);
1518
- }
1519
-
1520
- [type="checkbox"][role="switch"]:checked[aria-invalid="true"] {
1521
- --cirth-border-color: var(--cirth-form-element-invalid-border-color);
1522
- }
1523
-
1524
- [type="checkbox"][role="switch"]:checked:active[aria-invalid="true"] {
1525
- --cirth-border-color: var(--cirth-form-element-invalid-border-color);
1526
- }
1527
-
1528
- [type="checkbox"][role="switch"]:checked:focus[aria-invalid="true"] {
1021
+ [type="checkbox"]:checked[aria-invalid="true"], [type="checkbox"]:checked:active[aria-invalid="true"], [type="checkbox"]:checked:focus[aria-invalid="true"], [type="radio"]:checked[aria-invalid="true"], [type="radio"]:checked:active[aria-invalid="true"], [type="radio"]:checked:focus[aria-invalid="true"], [type="checkbox"][role="switch"]:checked[aria-invalid="true"], [type="checkbox"][role="switch"]:checked:active[aria-invalid="true"], [type="checkbox"][role="switch"]:checked:focus[aria-invalid="true"] {
1529
1022
  --cirth-border-color: var(--cirth-form-element-invalid-border-color);
1530
1023
  }
1531
1024
 
@@ -1547,7 +1040,7 @@ label:has([type="checkbox"], [type="radio"]) {
1547
1040
  border: 0;
1548
1041
  }
1549
1042
 
1550
- input:not(:is([type="checkbox"], [type="radio"], [type="range"], [type="file"])):is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
1043
+ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]):is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
1551
1044
  --cirth-icon-position: var(--cirth-space-3);
1552
1045
  --cirth-icon-width: var(--cirth-size-4);
1553
1046
  padding-right: calc(var(--cirth-icon-width) + var(--cirth-icon-position));
@@ -1557,7 +1050,7 @@ input:not(:is([type="checkbox"], [type="radio"], [type="range"], [type="file"]))
1557
1050
  background-repeat: no-repeat;
1558
1051
  }
1559
1052
 
1560
- input:not(:is([type="checkbox"], [type="radio"], [type="range"], [type="file"]))[type="time"] {
1053
+ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="time"] {
1561
1054
  background-image: var(--cirth-icon-time);
1562
1055
  }
1563
1056
 
@@ -1597,27 +1090,7 @@ input:not(:is([type="checkbox"], [type="radio"], [type="range"], [type="file"]))
1597
1090
  }
1598
1091
 
1599
1092
  @-moz-document url-prefix() {
1600
- [type="date"] {
1601
- padding-right: var(--cirth-form-element-spacing-horizontal);
1602
- background-image: none;
1603
- }
1604
-
1605
- [type="datetime-local"] {
1606
- padding-right: var(--cirth-form-element-spacing-horizontal);
1607
- background-image: none;
1608
- }
1609
-
1610
- [type="month"] {
1611
- padding-right: var(--cirth-form-element-spacing-horizontal);
1612
- background-image: none;
1613
- }
1614
-
1615
- [type="time"] {
1616
- padding-right: var(--cirth-form-element-spacing-horizontal);
1617
- background-image: none;
1618
- }
1619
-
1620
- [type="week"] {
1093
+ [type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"] {
1621
1094
  padding-right: var(--cirth-form-element-spacing-horizontal);
1622
1095
  background-image: none;
1623
1096
  }
@@ -1648,7 +1121,7 @@ input:not(:is([type="checkbox"], [type="radio"], [type="range"], [type="file"]))
1648
1121
  }
1649
1122
 
1650
1123
  [type="file"]:focus::file-selector-button {
1651
- --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
1124
+ --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 #0000),
1652
1125
  0 0 0 var(--cirth-outline-width) var(--cirth-secondary-focus);
1653
1126
  }
1654
1127
 
@@ -1719,12 +1192,7 @@ input:not(:is([type="checkbox"], [type="radio"], [type="range"], [type="file"]))
1719
1192
  margin-top: -.4375rem;
1720
1193
  }
1721
1194
 
1722
- [type="range"]:active {
1723
- --cirth-range-border-color: var(--cirth-range-active-border-color);
1724
- --cirth-range-thumb-color: var(--cirth-range-thumb-active-color);
1725
- }
1726
-
1727
- [type="range"]:focus-within {
1195
+ [type="range"]:active, [type="range"]:focus-within {
1728
1196
  --cirth-range-border-color: var(--cirth-range-active-border-color);
1729
1197
  --cirth-range-thumb-color: var(--cirth-range-thumb-active-color);
1730
1198
  }
@@ -1741,33 +1209,33 @@ input:not(:is([type="checkbox"], [type="radio"], [type="range"], [type="file"]))
1741
1209
  transform: scale(1.25);
1742
1210
  }
1743
1211
 
1744
- input:not(:is([type="checkbox"], [type="radio"], [type="range"], [type="file"]))[type="search"] {
1212
+ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"] {
1745
1213
  background-image: var(--cirth-icon-search);
1746
- background-position: center left calc(var(--cirth-form-element-spacing-horizontal) + .125rem);
1214
+ background-position: center left var(--cirth-form-element-spacing-horizontal);
1747
1215
  background-repeat: no-repeat;
1748
1216
  background-size: 1rem;
1749
- padding-inline-start: calc(var(--cirth-form-element-spacing-horizontal) + 1.75rem);
1217
+ padding-inline-start: calc(var(--cirth-form-element-spacing-horizontal) + var(--cirth-space-6));
1750
1218
  }
1751
1219
 
1752
- input:not(:is([type="checkbox"], [type="radio"], [type="range"], [type="file"]))[type="search"][aria-invalid] {
1753
- background-position: 1.125rem, right .75rem center;
1754
- padding-inline-start: calc(var(--cirth-form-element-spacing-horizontal) + 1.75rem);
1220
+ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"][aria-invalid] {
1221
+ background-position: center left var(--cirth-form-element-spacing-horizontal), center right var(--cirth-space-3);
1222
+ padding-inline-start: calc(var(--cirth-form-element-spacing-horizontal) + var(--cirth-space-6));
1755
1223
  }
1756
1224
 
1757
- input:not(:is([type="checkbox"], [type="radio"], [type="range"], [type="file"]))[type="search"][aria-invalid="false"] {
1225
+ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"][aria-invalid="false"] {
1758
1226
  background-image: var(--cirth-icon-search), var(--cirth-icon-valid);
1759
1227
  }
1760
1228
 
1761
- input:not(:is([type="checkbox"], [type="radio"], [type="range"], [type="file"]))[type="search"][aria-invalid="true"] {
1229
+ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"][aria-invalid="true"] {
1762
1230
  background-image: var(--cirth-icon-search), var(--cirth-icon-invalid);
1763
1231
  }
1764
1232
 
1765
- [dir="rtl"] :where(input):not(:is([type="checkbox"], [type="radio"], [type="range"], [type="file"]))[type="search"] {
1766
- background-position: right 1.125rem center;
1233
+ [dir="rtl"] :where(input):not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"] {
1234
+ background-position: center right var(--cirth-form-element-spacing-horizontal);
1767
1235
  }
1768
1236
 
1769
- [dir="rtl"] :where(input):not(:is([type="checkbox"], [type="radio"], [type="range"], [type="file"]))[type="search"][aria-invalid] {
1770
- background-position: right 1.125rem center, .75rem;
1237
+ [dir="rtl"] :where(input):not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"][aria-invalid] {
1238
+ background-position: center right var(--cirth-form-element-spacing-horizontal), center left var(--cirth-space-3);
1771
1239
  }
1772
1240
 
1773
1241
  details {
@@ -1868,7 +1336,7 @@ article {
1868
1336
  article > header, article > footer {
1869
1337
  margin-right: calc(var(--cirth-block-spacing-horizontal) * -1);
1870
1338
  margin-left: calc(var(--cirth-block-spacing-horizontal) * -1);
1871
- padding: calc(var(--cirth-block-spacing-vertical) * .66) var(--cirth-block-spacing-horizontal);
1339
+ padding: calc(var(--cirth-block-spacing-vertical) - var(--cirth-space-2)) var(--cirth-block-spacing-horizontal);
1872
1340
  background-color: var(--cirth-card-sectioning-background-color);
1873
1341
  }
1874
1342
 
@@ -1897,6 +1365,7 @@ details.dropdown > summary:after, details.dropdown > button:after, details.dropd
1897
1365
  width: var(--cirth-size-4);
1898
1366
  height: calc(var(--cirth-size-4) * var(--cirth-line-height, var(--cirth-line-height-normal)));
1899
1367
  float: right;
1368
+ transform: rotate(0deg) translateX(calc(var(--cirth-form-element-spacing-horizontal) - var(--cirth-space-3)));
1900
1369
  background-image: var(--cirth-icon-chevron);
1901
1370
  background-position: 100%;
1902
1371
  background-size: var(--cirth-size-4) auto;
@@ -1904,7 +1373,6 @@ details.dropdown > summary:after, details.dropdown > button:after, details.dropd
1904
1373
  background-repeat: no-repeat;
1905
1374
  margin-inline-start: var(--cirth-space-1);
1906
1375
  display: block;
1907
- transform: rotate(0) translateX(.2rem);
1908
1376
  }
1909
1377
 
1910
1378
  nav details.dropdown {
@@ -1935,7 +1403,7 @@ details.dropdown > summary:not([role]):focus {
1935
1403
  }
1936
1404
 
1937
1405
  details.dropdown > summary:not([role]):focus-visible {
1938
- outline: none;
1406
+ outline: var(--cirth-outline-width) solid transparent;
1939
1407
  }
1940
1408
 
1941
1409
  details.dropdown > summary:not([role])[aria-invalid="false"] {
@@ -2020,11 +1488,7 @@ details.dropdown > summary + ul li a {
2020
1488
  overflow: hidden;
2021
1489
  }
2022
1490
 
2023
- details.dropdown > summary + ul li a:hover, details.dropdown > summary + ul li a:focus, details.dropdown > summary + ul li a:active, details.dropdown > summary + ul li a[aria-current]:not([aria-current="false"]) {
2024
- background-color: var(--cirth-dropdown-hover-background-color);
2025
- }
2026
-
2027
- details.dropdown > summary + ul li a:focus-visible {
1491
+ details.dropdown > summary + ul li a:hover, details.dropdown > summary + ul li a:focus, details.dropdown > summary + ul li a:active, details.dropdown > summary + ul li a:focus-visible, details.dropdown > summary + ul li a[aria-current]:not([aria-current="false"]) {
2028
1492
  background-color: var(--cirth-dropdown-hover-background-color);
2029
1493
  }
2030
1494
 
@@ -2066,254 +1530,124 @@ label > details.dropdown {
2066
1530
  width: 100%;
2067
1531
  margin-bottom: var(--cirth-spacing);
2068
1532
  border-radius: var(--cirth-border-radius);
2069
- box-shadow: var(--cirth-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
1533
+ box-shadow: var(--cirth-group-box-shadow, 0 0 0 #0000);
2070
1534
  vertical-align: middle;
2071
1535
  transition: box-shadow var(--cirth-transition);
2072
1536
  display: inline-flex;
2073
1537
  position: relative;
2074
1538
  }
2075
1539
 
2076
- [role="search"] > *, [role="search"] select, [role="group"] > *, [role="group"] select {
2077
- flex: auto;
2078
- margin-bottom: 0;
2079
- position: relative;
2080
- }
2081
-
2082
- [role="search"] input:not(:is([type="checkbox"], [type="radio"])) {
2083
- flex: auto;
2084
- margin-bottom: 0;
2085
- position: relative;
2086
- }
2087
-
2088
- [role="group"] input:not(:is([type="checkbox"], [type="radio"])) {
1540
+ [role="search"] > *, [role="search"] input:not([type="checkbox"], [type="radio"]), [role="search"] select, [role="group"] > *, [role="group"] input:not([type="checkbox"], [type="radio"]), [role="group"] select {
2089
1541
  flex: auto;
2090
1542
  margin-bottom: 0;
2091
1543
  position: relative;
2092
1544
  }
2093
1545
 
2094
- [role="search"] > :not(:first-child), [role="search"] select:not(:first-child), [role="group"] > :not(:first-child), [role="group"] select:not(:first-child) {
2095
- border-top-left-radius: 0;
2096
- border-bottom-left-radius: 0;
2097
- margin-left: 0;
2098
- }
2099
-
2100
- [role="search"] input:not(:is([type="checkbox"], [type="radio"])):not(:first-child) {
1546
+ [role="search"] > :not(:first-child), [role="search"] input:not([type="checkbox"], [type="radio"]):not(:first-child), [role="search"] select:not(:first-child), [role="group"] > :not(:first-child), [role="group"] input:not([type="checkbox"], [type="radio"]):not(:first-child), [role="group"] select:not(:first-child) {
2101
1547
  border-top-left-radius: 0;
2102
1548
  border-bottom-left-radius: 0;
2103
1549
  margin-left: 0;
2104
1550
  }
2105
1551
 
2106
- [role="group"] input:not(:is([type="checkbox"], [type="radio"])):not(:first-child) {
2107
- border-top-left-radius: 0;
2108
- border-bottom-left-radius: 0;
2109
- margin-left: 0;
2110
- }
2111
-
2112
- [role="search"] > :not(:last-child), [role="search"] select:not(:last-child), [role="group"] > :not(:last-child), [role="group"] select:not(:last-child) {
2113
- border-top-right-radius: 0;
2114
- border-bottom-right-radius: 0;
2115
- }
2116
-
2117
- [role="search"] input:not(:is([type="checkbox"], [type="radio"])):not(:last-child) {
2118
- border-top-right-radius: 0;
2119
- border-bottom-right-radius: 0;
2120
- }
2121
-
2122
- [role="group"] input:not(:is([type="checkbox"], [type="radio"])):not(:last-child) {
1552
+ [role="search"] > :not(:last-child), [role="search"] input:not([type="checkbox"], [type="radio"]):not(:last-child), [role="search"] select:not(:last-child), [role="group"] > :not(:last-child), [role="group"] input:not([type="checkbox"], [type="radio"]):not(:last-child), [role="group"] select:not(:last-child) {
2123
1553
  border-top-right-radius: 0;
2124
1554
  border-bottom-right-radius: 0;
2125
1555
  }
2126
1556
 
2127
- [role="search"] > :focus, [role="search"] select:focus, [role="group"] > :focus, [role="group"] select:focus {
2128
- z-index: 2;
2129
- }
2130
-
2131
- [role="search"] input:not(:is([type="checkbox"], [type="radio"])):focus {
1557
+ [role="search"] > :focus, [role="search"] input:not([type="checkbox"], [type="radio"]):focus, [role="search"] select:focus, [role="group"] > :focus, [role="group"] input:not([type="checkbox"], [type="radio"]):focus, [role="group"] select:focus {
2132
1558
  z-index: 2;
2133
1559
  }
2134
1560
 
2135
- [role="group"] input:not(:is([type="checkbox"], [type="radio"])):focus {
2136
- z-index: 2;
2137
- }
2138
-
2139
- [role="search"] button:not(:first-child), [role="search"] [role="button"]:not(:first-child), [role="search"] select:not(:first-child), [role="group"] button:not(:first-child), [role="group"] [role="button"]:not(:first-child), [role="group"] select:not(:first-child) {
2140
- margin-left: calc(var(--cirth-border-width) * -1);
2141
- }
2142
-
2143
- [role="search"] [type="submit"]:not(:first-child) {
1561
+ [role="search"] button:not(:first-child), [role="search"] [type="submit"]:not(:first-child), [role="search"] [type="reset"]:not(:first-child), [role="search"] [type="button"]:not(:first-child), [role="search"] [role="button"]:not(:first-child), [role="search"] input:not([type="checkbox"], [type="radio"]):not(:first-child), [role="search"] select:not(:first-child), [role="group"] button:not(:first-child), [role="group"] [type="submit"]:not(:first-child), [role="group"] [type="reset"]:not(:first-child), [role="group"] [type="button"]:not(:first-child), [role="group"] [role="button"]:not(:first-child), [role="group"] input:not([type="checkbox"], [type="radio"]):not(:first-child), [role="group"] select:not(:first-child) {
2144
1562
  margin-left: calc(var(--cirth-border-width) * -1);
2145
1563
  }
2146
1564
 
2147
- [role="search"] [type="reset"]:not(:first-child) {
2148
- margin-left: calc(var(--cirth-border-width) * -1);
1565
+ [role="search"] button, [role="search"] [type="submit"], [role="search"] [type="reset"], [role="search"] [type="button"], [role="search"] [role="button"], [role="group"] button, [role="group"] [type="submit"], [role="group"] [type="reset"], [role="group"] [type="button"], [role="group"] [role="button"] {
1566
+ width: auto;
2149
1567
  }
2150
1568
 
2151
- [role="search"] [type="button"]:not(:first-child) {
2152
- margin-left: calc(var(--cirth-border-width) * -1);
2153
- }
1569
+ @supports selector(:has(*)) {
1570
+ :is([role="search"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus), [role="group"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus)) {
1571
+ --cirth-group-box-shadow: var(--cirth-group-box-shadow-focus-with-button);
1572
+ }
2154
1573
 
2155
- [role="search"] input:not(:is([type="checkbox"], [type="radio"])):not(:first-child) {
2156
- margin-left: calc(var(--cirth-border-width) * -1);
2157
- }
1574
+ [role="search"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) input:not([type="checkbox"], [type="radio"]) {
1575
+ border-color: #0000;
1576
+ }
2158
1577
 
2159
- [role="group"] [type="submit"]:not(:first-child) {
2160
- margin-left: calc(var(--cirth-border-width) * -1);
2161
- }
1578
+ [role="search"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) select {
1579
+ border-color: #0000;
1580
+ }
2162
1581
 
2163
- [role="group"] [type="reset"]:not(:first-child) {
2164
- margin-left: calc(var(--cirth-border-width) * -1);
2165
- }
1582
+ [role="group"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) input:not([type="checkbox"], [type="radio"]) {
1583
+ border-color: #0000;
1584
+ }
2166
1585
 
2167
- [role="group"] [type="button"]:not(:first-child) {
2168
- margin-left: calc(var(--cirth-border-width) * -1);
2169
- }
1586
+ [role="group"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) select {
1587
+ border-color: #0000;
1588
+ }
2170
1589
 
2171
- [role="group"] input:not(:is([type="checkbox"], [type="radio"])):not(:first-child) {
2172
- margin-left: calc(var(--cirth-border-width) * -1);
2173
- }
1590
+ :is([role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus), [role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus)) {
1591
+ --cirth-group-box-shadow: var(--cirth-group-box-shadow-focus-with-input);
1592
+ }
2174
1593
 
2175
- [role="search"] button, [role="search"] [role="button"], [role="group"] button, [role="group"] [role="button"] {
2176
- width: auto;
2177
- }
2178
-
2179
- [role="search"] [type="submit"] {
2180
- width: auto;
2181
- }
2182
-
2183
- [role="search"] [type="reset"] {
2184
- width: auto;
2185
- }
2186
-
2187
- [role="search"] [type="button"] {
2188
- width: auto;
2189
- }
2190
-
2191
- [role="group"] [type="submit"] {
2192
- width: auto;
2193
- }
2194
-
2195
- [role="group"] [type="reset"] {
2196
- width: auto;
2197
- }
2198
-
2199
- [role="group"] [type="button"] {
2200
- width: auto;
2201
- }
2202
-
2203
- @supports selector(:has(*)) {
2204
- [role="search"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) {
2205
- --cirth-group-box-shadow: var(--cirth-group-box-shadow-focus-with-button);
2206
- }
2207
-
2208
- [role="group"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) {
2209
- --cirth-group-box-shadow: var(--cirth-group-box-shadow-focus-with-button);
2210
- }
2211
-
2212
- [role="search"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) input:not(:is([type="checkbox"], [type="radio"])) {
2213
- border-color: rgba(0, 0, 0, 0);
2214
- }
2215
-
2216
- [role="search"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) select {
2217
- border-color: rgba(0, 0, 0, 0);
2218
- }
2219
-
2220
- [role="group"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) input:not(:is([type="checkbox"], [type="radio"])) {
2221
- border-color: rgba(0, 0, 0, 0);
2222
- }
2223
-
2224
- [role="group"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) select {
2225
- border-color: rgba(0, 0, 0, 0);
2226
- }
2227
-
2228
- [role="search"]:has(input:not(:is([type="submit"], [type="button"])):focus, select:focus) {
2229
- --cirth-group-box-shadow: var(--cirth-group-box-shadow-focus-with-input);
2230
- }
2231
-
2232
- [role="group"]:has(input:not(:is([type="submit"], [type="button"])):focus, select:focus) {
2233
- --cirth-group-box-shadow: var(--cirth-group-box-shadow-focus-with-input);
2234
- }
2235
-
2236
- [role="search"]:has(input:not(:is([type="submit"], [type="button"])):focus, select:focus) button {
1594
+ [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) button {
2237
1595
  --cirth-button-box-shadow: 0 0 0 var(--cirth-border-width)
2238
1596
  var(--cirth-primary-border);
2239
1597
  --cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width)
2240
1598
  var(--cirth-primary-hover-border);
2241
1599
  }
2242
1600
 
2243
- [role="search"]:has(input:not(:is([type="submit"], [type="button"])):focus, select:focus) [type="submit"] {
1601
+ [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="submit"] {
2244
1602
  --cirth-button-box-shadow: 0 0 0 var(--cirth-border-width)
2245
1603
  var(--cirth-primary-border);
2246
1604
  --cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width)
2247
1605
  var(--cirth-primary-hover-border);
2248
1606
  }
2249
1607
 
2250
- [role="search"]:has(input:not(:is([type="submit"], [type="button"])):focus, select:focus) [type="button"] {
1608
+ [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="button"] {
2251
1609
  --cirth-button-box-shadow: 0 0 0 var(--cirth-border-width)
2252
1610
  var(--cirth-primary-border);
2253
1611
  --cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width)
2254
1612
  var(--cirth-primary-hover-border);
2255
1613
  }
2256
1614
 
2257
- [role="search"]:has(input:not(:is([type="submit"], [type="button"])):focus, select:focus) [role="button"] {
1615
+ [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [role="button"] {
2258
1616
  --cirth-button-box-shadow: 0 0 0 var(--cirth-border-width)
2259
1617
  var(--cirth-primary-border);
2260
1618
  --cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width)
2261
1619
  var(--cirth-primary-hover-border);
2262
1620
  }
2263
1621
 
2264
- [role="group"]:has(input:not(:is([type="submit"], [type="button"])):focus, select:focus) button {
1622
+ [role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) button {
2265
1623
  --cirth-button-box-shadow: 0 0 0 var(--cirth-border-width)
2266
1624
  var(--cirth-primary-border);
2267
1625
  --cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width)
2268
1626
  var(--cirth-primary-hover-border);
2269
1627
  }
2270
1628
 
2271
- [role="group"]:has(input:not(:is([type="submit"], [type="button"])):focus, select:focus) [type="submit"] {
1629
+ [role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="submit"] {
2272
1630
  --cirth-button-box-shadow: 0 0 0 var(--cirth-border-width)
2273
1631
  var(--cirth-primary-border);
2274
1632
  --cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width)
2275
1633
  var(--cirth-primary-hover-border);
2276
1634
  }
2277
1635
 
2278
- [role="group"]:has(input:not(:is([type="submit"], [type="button"])):focus, select:focus) [type="button"] {
1636
+ [role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="button"] {
2279
1637
  --cirth-button-box-shadow: 0 0 0 var(--cirth-border-width)
2280
1638
  var(--cirth-primary-border);
2281
1639
  --cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width)
2282
1640
  var(--cirth-primary-hover-border);
2283
1641
  }
2284
1642
 
2285
- [role="group"]:has(input:not(:is([type="submit"], [type="button"])):focus, select:focus) [role="button"] {
1643
+ [role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [role="button"] {
2286
1644
  --cirth-button-box-shadow: 0 0 0 var(--cirth-border-width)
2287
1645
  var(--cirth-primary-border);
2288
1646
  --cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width)
2289
1647
  var(--cirth-primary-hover-border);
2290
1648
  }
2291
1649
 
2292
- [role="search"] button:focus, [role="search"] [role="button"]:focus, [role="group"] button:focus, [role="group"] [role="button"]:focus {
2293
- box-shadow: none;
2294
- }
2295
-
2296
- [role="search"] [type="submit"]:focus {
2297
- box-shadow: none;
2298
- }
2299
-
2300
- [role="search"] [type="reset"]:focus {
2301
- box-shadow: none;
2302
- }
2303
-
2304
- [role="search"] [type="button"]:focus {
2305
- box-shadow: none;
2306
- }
2307
-
2308
- [role="group"] [type="submit"]:focus {
2309
- box-shadow: none;
2310
- }
2311
-
2312
- [role="group"] [type="reset"]:focus {
2313
- box-shadow: none;
2314
- }
2315
-
2316
- [role="group"] [type="button"]:focus {
1650
+ [role="search"] button:focus, [role="search"] [type="submit"]:focus, [role="search"] [type="reset"]:focus, [role="search"] [type="button"]:focus, [role="search"] [role="button"]:focus, [role="group"] button:focus, [role="group"] [type="submit"]:focus, [role="group"] [type="reset"]:focus, [role="group"] [type="button"]:focus, [role="group"] [role="button"]:focus {
2317
1651
  box-shadow: none;
2318
1652
  }
2319
1653
  }
@@ -2328,11 +1662,11 @@ label > details.dropdown {
2328
1662
  border-bottom-right-radius: var(--cirth-radius-pill);
2329
1663
  }
2330
1664
 
2331
- [aria-busy="true"]:not(:is(input, select, textarea, html, form)) {
1665
+ [aria-busy="true"]:not(input, select, textarea, html, form) {
2332
1666
  white-space: nowrap;
2333
1667
  }
2334
1668
 
2335
- [aria-busy="true"]:not(:is(input, select, textarea, html, form)):before {
1669
+ [aria-busy="true"]:not(input, select, textarea, html, form):before {
2336
1670
  background-image: var(--cirth-icon-loading);
2337
1671
  content: "";
2338
1672
  vertical-align: -.125em;
@@ -2343,35 +1677,19 @@ label > details.dropdown {
2343
1677
  display: inline-block;
2344
1678
  }
2345
1679
 
2346
- [aria-busy="true"]:not(:is(input, select, textarea, html, form)):not(:empty):before {
1680
+ [aria-busy="true"]:not(input, select, textarea, html, form):not(:empty):before {
2347
1681
  margin-inline-end: calc(var(--cirth-spacing) * .5);
2348
1682
  }
2349
1683
 
2350
- [aria-busy="true"]:not(:is(input, select, textarea, html, form)):empty {
1684
+ [aria-busy="true"]:not(input, select, textarea, html, form):empty {
2351
1685
  text-align: center;
2352
1686
  }
2353
1687
 
2354
- button[aria-busy="true"], [role="button"][aria-busy="true"], a[aria-busy="true"] {
2355
- pointer-events: none;
2356
- }
2357
-
2358
- [type="submit"][aria-busy="true"] {
2359
- pointer-events: none;
2360
- }
2361
-
2362
- [type="button"][aria-busy="true"] {
2363
- pointer-events: none;
2364
- }
2365
-
2366
- [type="reset"][aria-busy="true"] {
1688
+ button[aria-busy="true"], [type="submit"][aria-busy="true"], [type="button"][aria-busy="true"], [type="reset"][aria-busy="true"], [role="button"][aria-busy="true"], a[aria-busy="true"] {
2367
1689
  pointer-events: none;
2368
1690
  }
2369
1691
 
2370
- :root {
2371
- --cirth-scrollbar-width: 0px;
2372
- }
2373
-
2374
- :host {
1692
+ :root, :host {
2375
1693
  --cirth-scrollbar-width: 0px;
2376
1694
  }
2377
1695
 
@@ -2401,13 +1719,13 @@ dialog > article {
2401
1719
  overflow: auto;
2402
1720
  }
2403
1721
 
2404
- @media (width >= 576px) {
1722
+ @media (min-width: 576px) {
2405
1723
  dialog > article {
2406
1724
  max-width: 510px;
2407
1725
  }
2408
1726
  }
2409
1727
 
2410
- @media (width >= 768px) {
1728
+ @media (min-width: 768px) {
2411
1729
  dialog > article {
2412
1730
  max-width: 700px;
2413
1731
  }
@@ -2417,14 +1735,7 @@ dialog > article > header > * {
2417
1735
  margin-bottom: 0;
2418
1736
  }
2419
1737
 
2420
- dialog > article > header .close {
2421
- margin: 0;
2422
- margin-left: var(--cirth-spacing);
2423
- float: right;
2424
- padding: 0;
2425
- }
2426
-
2427
- dialog > article > header :is(a, button)[rel="prev"] {
1738
+ dialog > article > header .close, dialog > article > header :is(a, button)[rel="prev"] {
2428
1739
  margin: 0;
2429
1740
  margin-left: var(--cirth-spacing);
2430
1741
  float: right;
@@ -2443,7 +1754,7 @@ dialog > article > footer button:not(:first-of-type), dialog > article > footer
2443
1754
  margin-left: calc(var(--cirth-spacing) * .5);
2444
1755
  }
2445
1756
 
2446
- dialog > article .close {
1757
+ dialog > article .close, dialog > article :is(a, button)[rel="prev"] {
2447
1758
  width: var(--cirth-size-4);
2448
1759
  height: var(--cirth-size-4);
2449
1760
  margin-top: calc(var(--cirth-spacing) * -1);
@@ -2453,35 +1764,14 @@ dialog > article .close {
2453
1764
  background-size: auto var(--cirth-size-4);
2454
1765
  opacity: .5;
2455
1766
  transition: opacity var(--cirth-transition);
2456
- background-color: rgba(0, 0, 0, 0);
1767
+ background-color: #0000;
2457
1768
  background-repeat: no-repeat;
2458
1769
  border: none;
2459
1770
  margin-left: auto;
2460
1771
  display: block;
2461
1772
  }
2462
1773
 
2463
- dialog > article :is(a, button)[rel="prev"] {
2464
- width: var(--cirth-size-4);
2465
- height: var(--cirth-size-4);
2466
- margin-top: calc(var(--cirth-spacing) * -1);
2467
- margin-bottom: var(--cirth-spacing);
2468
- background-image: var(--cirth-icon-close);
2469
- background-position: center;
2470
- background-size: auto var(--cirth-size-4);
2471
- opacity: .5;
2472
- transition: opacity var(--cirth-transition);
2473
- background-color: rgba(0, 0, 0, 0);
2474
- background-repeat: no-repeat;
2475
- border: none;
2476
- margin-left: auto;
2477
- display: block;
2478
- }
2479
-
2480
- dialog > article .close:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
2481
- opacity: 1;
2482
- }
2483
-
2484
- dialog > article :is(a, button)[rel="prev"]:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
1774
+ dialog > article .close:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), dialog > article :is(a, button)[rel="prev"]:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
2485
1775
  opacity: 1;
2486
1776
  }
2487
1777
 
@@ -2501,13 +1791,7 @@ dialog:not([open]), dialog[open="false"] {
2501
1791
  touch-action: auto;
2502
1792
  }
2503
1793
 
2504
- :where(.modal-is-opening, .modal-is-closing) dialog {
2505
- animation-duration: var(--cirth-duration-normal);
2506
- animation-timing-function: var(--cirth-ease-in-out);
2507
- animation-fill-mode: both;
2508
- }
2509
-
2510
- :where(.modal-is-opening, .modal-is-closing) dialog > article {
1794
+ :where(.modal-is-opening, .modal-is-closing) dialog, :where(.modal-is-opening, .modal-is-closing) dialog > article {
2511
1795
  animation-duration: var(--cirth-duration-normal);
2512
1796
  animation-timing-function: var(--cirth-ease-in-out);
2513
1797
  animation-fill-mode: both;
@@ -2532,7 +1816,7 @@ dialog:not([open]), dialog[open="false"] {
2532
1816
  from {
2533
1817
  -webkit-backdrop-filter: none;
2534
1818
  backdrop-filter: none;
2535
- background-color: rgba(0, 0, 0, 0);
1819
+ background-color: #0000;
2536
1820
  }
2537
1821
  }
2538
1822
 
@@ -2589,23 +1873,7 @@ nav li :where(a, [role="link"]):not(:hover) {
2589
1873
  text-decoration: none;
2590
1874
  }
2591
1875
 
2592
- nav li button, nav li [role="button"], nav li select {
2593
- height: auto;
2594
- margin-right: inherit;
2595
- margin-bottom: 0;
2596
- margin-left: inherit;
2597
- padding: calc(var(--cirth-nav-link-spacing-vertical) - var(--cirth-border-width) * 2) var(--cirth-nav-link-spacing-horizontal);
2598
- }
2599
-
2600
- nav li [type="button"] {
2601
- height: auto;
2602
- margin-right: inherit;
2603
- margin-bottom: 0;
2604
- margin-left: inherit;
2605
- padding: calc(var(--cirth-nav-link-spacing-vertical) - var(--cirth-border-width) * 2) var(--cirth-nav-link-spacing-horizontal);
2606
- }
2607
-
2608
- nav li input:not(:is([type="checkbox"], [type="radio"], [type="range"], [type="file"])) {
1876
+ 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 {
2609
1877
  height: auto;
2610
1878
  margin-right: inherit;
2611
1879
  margin-bottom: 0;
@@ -2642,7 +1910,7 @@ nav[aria-label="breadcrumb"] ul li:not(:last-child):after {
2642
1910
  nav[aria-label="breadcrumb"] a[aria-current]:not([aria-current="false"]) {
2643
1911
  color: inherit;
2644
1912
  pointer-events: none;
2645
- background-color: rgba(0, 0, 0, 0);
1913
+ background-color: #0000;
2646
1914
  text-decoration: none;
2647
1915
  }
2648
1916
 
@@ -2672,10 +1940,10 @@ progress {
2672
1940
  width: 100%;
2673
1941
  height: var(--cirth-size-2);
2674
1942
  margin-bottom: calc(var(--cirth-spacing) * .5);
1943
+ border: var(--cirth-border-width-1) solid var(--cirth-progress-border-color);
2675
1944
  border-radius: var(--cirth-border-radius);
2676
1945
  background-color: var(--cirth-progress-background-color);
2677
1946
  color: var(--cirth-progress-color);
2678
- border: 0;
2679
1947
  display: inline-block;
2680
1948
  overflow: hidden;
2681
1949
  }
@@ -2701,11 +1969,11 @@ progress::-moz-progress-bar {
2701
1969
  }
2702
1970
 
2703
1971
  progress:indeterminate[value]::-webkit-progress-value {
2704
- background-color: rgba(0, 0, 0, 0);
1972
+ background-color: #0000;
2705
1973
  }
2706
1974
 
2707
1975
  progress:indeterminate::-moz-progress-bar {
2708
- background-color: rgba(0, 0, 0, 0);
1976
+ background-color: #0000;
2709
1977
  }
2710
1978
 
2711
1979
  [dir="rtl"] progress:indeterminate {
@@ -2727,7 +1995,7 @@ progress::-moz-progress-bar {
2727
1995
  position: relative;
2728
1996
  }
2729
1997
 
2730
- [data-tooltip]:not(:is(a, button, input, [role="button"])) {
1998
+ [data-tooltip]:not(a, button, input, [role="button"]) {
2731
1999
  border-bottom: var(--cirth-border-width-1) dotted;
2732
2000
  cursor: help;
2733
2001
  text-decoration: none;
@@ -2759,10 +2027,10 @@ progress::-moz-progress-bar {
2759
2027
  [data-tooltip][data-placement="top"]:after, [data-tooltip]:after {
2760
2028
  content: "";
2761
2029
  color: var(--cirth-tooltip-background-color);
2762
- background-color: rgba(0, 0, 0, 0);
2030
+ background-color: #0000;
2763
2031
  border-top: .3rem solid;
2764
- border-left: .3rem solid rgba(0, 0, 0, 0);
2765
- border-right: .3rem solid rgba(0, 0, 0, 0);
2032
+ border-left: .3rem solid #0000;
2033
+ border-right: .3rem solid #0000;
2766
2034
  border-radius: 0;
2767
2035
  padding: 0;
2768
2036
  transform: translate(-50%);
@@ -2775,7 +2043,7 @@ progress::-moz-progress-bar {
2775
2043
  }
2776
2044
 
2777
2045
  [data-tooltip][data-placement="bottom"]:after {
2778
- border: .3rem solid rgba(0, 0, 0, 0);
2046
+ border: .3rem solid #0000;
2779
2047
  border-bottom-color: currentColor;
2780
2048
  transform: translate(-50%, -.3rem);
2781
2049
  }
@@ -2786,7 +2054,7 @@ progress::-moz-progress-bar {
2786
2054
  }
2787
2055
 
2788
2056
  [data-tooltip][data-placement="left"]:after {
2789
- border: .3rem solid rgba(0, 0, 0, 0);
2057
+ border: .3rem solid #0000;
2790
2058
  border-left-color: currentColor;
2791
2059
  transform: translate(.3rem, -50%);
2792
2060
  }
@@ -2797,7 +2065,7 @@ progress::-moz-progress-bar {
2797
2065
  }
2798
2066
 
2799
2067
  [data-tooltip][data-placement="right"]:after {
2800
- border: .3rem solid rgba(0, 0, 0, 0);
2068
+ border: .3rem solid #0000;
2801
2069
  border-right-color: currentColor;
2802
2070
  transform: translate(-.3rem, -50%);
2803
2071
  }
@@ -2914,128 +2182,18 @@ a, area, button, input, label, select, summary, textarea, [tabindex] {
2914
2182
  }
2915
2183
  }
2916
2184
 
2917
- :root {
2918
- --cirth-color-black: #000;
2919
- --cirth-color-white: #fff;
2920
- --cirth-color-transparent: transparent;
2921
- --cirth-color-current: currentColor;
2922
- --cirth-font-family-ui: system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, Helvetica, Arial,
2923
- "Helvetica Neue", sans-serif;
2924
- --cirth-font-family-sans: var(--cirth-font-family-ui), "Apple Color Emoji", "Segoe UI Emoji",
2925
- "Segoe UI Symbol", "Noto Color Emoji";
2926
- --cirth-font-family-serif: Georgia, Cambria, "Times New Roman", Times, serif;
2927
- --cirth-font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono",
2928
- monospace;
2929
- --cirth-font-family-display: var(--cirth-font-family-sans);
2930
- --cirth-font-size-xs: .75rem;
2931
- --cirth-font-size-sm: .875rem;
2932
- --cirth-font-size-md: 1rem;
2933
- --cirth-font-size-lg: 1.125rem;
2934
- --cirth-font-size-xl: 1.25rem;
2935
- --cirth-font-size-2xl: 1.425rem;
2936
- --cirth-font-size-3xl: 1.6rem;
2937
- --cirth-font-size-4xl: 1.8rem;
2938
- --cirth-font-size-5xl: 2rem;
2939
- --cirth-font-size-6xl: 2.3rem;
2940
- --cirth-font-weight-light: 300;
2941
- --cirth-font-weight-regular: 400;
2942
- --cirth-font-weight-medium: 500;
2943
- --cirth-font-weight-semibold: 600;
2944
- --cirth-font-weight-bold: 700;
2945
- --cirth-line-height-none: 1;
2946
- --cirth-line-height-tight: 1.125;
2947
- --cirth-line-height-snug: 1.25;
2948
- --cirth-line-height-normal: 1.5;
2949
- --cirth-line-height-relaxed: 1.625;
2950
- --cirth-line-height-loose: 2;
2951
- --cirth-letter-spacing-tight: 0;
2952
- --cirth-letter-spacing-normal: 0;
2953
- --cirth-letter-spacing-wide: .025em;
2954
- --cirth-space-0: 0;
2955
- --cirth-space-1: .25rem;
2956
- --cirth-space-2: .5rem;
2957
- --cirth-space-3: .75rem;
2958
- --cirth-space-4: 1rem;
2959
- --cirth-space-5: 1.25rem;
2960
- --cirth-space-6: 1.5rem;
2961
- --cirth-space-8: 2rem;
2962
- --cirth-space-10: 2.5rem;
2963
- --cirth-space-12: 3rem;
2964
- --cirth-space-16: 4rem;
2965
- --cirth-space-20: 5rem;
2966
- --cirth-space-24: 6rem;
2967
- --cirth-size-0: 0;
2968
- --cirth-size-1: .25rem;
2969
- --cirth-size-2: .5rem;
2970
- --cirth-size-3: .75rem;
2971
- --cirth-size-4: 1rem;
2972
- --cirth-size-5: 1.25rem;
2973
- --cirth-size-6: 1.5rem;
2974
- --cirth-size-8: 2rem;
2975
- --cirth-size-10: 2.5rem;
2976
- --cirth-size-12: 3rem;
2977
- --cirth-size-16: 4rem;
2978
- --cirth-size-20: 5rem;
2979
- --cirth-size-24: 6rem;
2980
- --cirth-radius-none: 0;
2981
- --cirth-radius-xs: .125rem;
2982
- --cirth-radius-sm: .25rem;
2983
- --cirth-radius-md: .375rem;
2984
- --cirth-radius-lg: .5rem;
2985
- --cirth-radius-xl: .75rem;
2986
- --cirth-radius-2xl: 1rem;
2987
- --cirth-radius-pill: 9999px;
2988
- --cirth-border-width-0: 0;
2989
- --cirth-border-width-1: .0625rem;
2990
- --cirth-border-width-2: .125rem;
2991
- --cirth-border-width-4: .25rem;
2992
- --cirth-outline-width-1: .0625rem;
2993
- --cirth-outline-width-2: .125rem;
2994
- --cirth-outline-width-4: .25rem;
2995
- --cirth-shadow-none: none;
2996
- --cirth-shadow-xs: 0 .0625rem .125rem rgba(0, 0, 0, .05);
2997
- --cirth-shadow-sm: 0 .0625rem .1875rem rgba(0, 0, 0, .1),
2998
- 0 .0625rem .125rem rgba(0, 0, 0, .06);
2999
- --cirth-shadow-md: 0 .25rem .375rem rgba(0, 0, 0, .07),
3000
- 0 .125rem .25rem rgba(0, 0, 0, .06);
3001
- --cirth-shadow-lg: 0 .625rem .9375rem rgba(0, 0, 0, .1),
3002
- 0 .25rem .375rem rgba(0, 0, 0, .05);
3003
- --cirth-shadow-xl: 0 1.25rem 1.5625rem rgba(0, 0, 0, .1),
3004
- 0 .625rem .625rem rgba(0, 0, 0, .04);
3005
- --cirth-shadow-inner: inset 0 .125rem .25rem rgba(0, 0, 0, .06);
3006
- --cirth-duration-instant: 0s;
3007
- --cirth-duration-fast: .1s;
3008
- --cirth-duration-normal: .2s;
3009
- --cirth-duration-slow: .3s;
3010
- --cirth-duration-slower: .5s;
3011
- --cirth-ease-linear: linear;
3012
- --cirth-ease-in: cubic-bezier(.4, 0, 1, 1);
3013
- --cirth-ease-out: cubic-bezier(0, 0, .2, 1);
3014
- --cirth-ease-in-out: cubic-bezier(.4, 0, .2, 1);
3015
- --cirth-opacity-disabled: .5;
3016
- --cirth-opacity-muted: .72;
3017
- --cirth-opacity-overlay: .75;
3018
- --cirth-z-index-dropdown: 1000;
3019
- --cirth-z-index-sticky: 1020;
3020
- --cirth-z-index-fixed: 1030;
3021
- --cirth-z-index-modal-backdrop: 1040;
3022
- --cirth-z-index-modal: 1050;
3023
- --cirth-z-index-tooltip: 1070;
3024
- }
3025
-
3026
- :host {
2185
+ :root, :host {
3027
2186
  --cirth-color-black: #000;
3028
2187
  --cirth-color-white: #fff;
3029
2188
  --cirth-color-transparent: transparent;
3030
2189
  --cirth-color-current: currentColor;
3031
- --cirth-font-family-ui: system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, Helvetica, Arial,
3032
- "Helvetica Neue", sans-serif;
3033
- --cirth-font-family-sans: var(--cirth-font-family-ui), "Apple Color Emoji", "Segoe UI Emoji",
3034
- "Segoe UI Symbol", "Noto Color Emoji";
2190
+ --cirth-font-family-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
2191
+ --cirth-font-family-sans: system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, Helvetica, Arial,
2192
+ "Helvetica Neue", sans-serif, var(--cirth-font-family-emoji);
3035
2193
  --cirth-font-family-serif: Georgia, Cambria, "Times New Roman", Times, serif;
3036
2194
  --cirth-font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono",
3037
- monospace;
3038
- --cirth-font-family-display: var(--cirth-font-family-sans);
2195
+ monospace, var(--cirth-font-family-emoji);
2196
+ --cirth-font-family-display: var(--cirth-font-family-serif);
3039
2197
  --cirth-font-size-xs: .75rem;
3040
2198
  --cirth-font-size-sm: .875rem;
3041
2199
  --cirth-font-size-md: 1rem;
@@ -3051,15 +2209,14 @@ a, area, button, input, label, select, summary, textarea, [tabindex] {
3051
2209
  --cirth-font-weight-medium: 500;
3052
2210
  --cirth-font-weight-semibold: 600;
3053
2211
  --cirth-font-weight-bold: 700;
2212
+ --cirth-letter-spacing-tight: -.02em;
2213
+ --cirth-letter-spacing-snug: -.01em;
3054
2214
  --cirth-line-height-none: 1;
3055
2215
  --cirth-line-height-tight: 1.125;
3056
2216
  --cirth-line-height-snug: 1.25;
3057
2217
  --cirth-line-height-normal: 1.5;
3058
2218
  --cirth-line-height-relaxed: 1.625;
3059
2219
  --cirth-line-height-loose: 2;
3060
- --cirth-letter-spacing-tight: 0;
3061
- --cirth-letter-spacing-normal: 0;
3062
- --cirth-letter-spacing-wide: .025em;
3063
2220
  --cirth-space-0: 0;
3064
2221
  --cirth-space-1: .25rem;
3065
2222
  --cirth-space-2: .5rem;
@@ -3101,17 +2258,6 @@ a, area, button, input, label, select, summary, textarea, [tabindex] {
3101
2258
  --cirth-outline-width-1: .0625rem;
3102
2259
  --cirth-outline-width-2: .125rem;
3103
2260
  --cirth-outline-width-4: .25rem;
3104
- --cirth-shadow-none: none;
3105
- --cirth-shadow-xs: 0 .0625rem .125rem rgba(0, 0, 0, .05);
3106
- --cirth-shadow-sm: 0 .0625rem .1875rem rgba(0, 0, 0, .1),
3107
- 0 .0625rem .125rem rgba(0, 0, 0, .06);
3108
- --cirth-shadow-md: 0 .25rem .375rem rgba(0, 0, 0, .07),
3109
- 0 .125rem .25rem rgba(0, 0, 0, .06);
3110
- --cirth-shadow-lg: 0 .625rem .9375rem rgba(0, 0, 0, .1),
3111
- 0 .25rem .375rem rgba(0, 0, 0, .05);
3112
- --cirth-shadow-xl: 0 1.25rem 1.5625rem rgba(0, 0, 0, .1),
3113
- 0 .625rem .625rem rgba(0, 0, 0, .04);
3114
- --cirth-shadow-inner: inset 0 .125rem .25rem rgba(0, 0, 0, .06);
3115
2261
  --cirth-duration-instant: 0s;
3116
2262
  --cirth-duration-fast: .1s;
3117
2263
  --cirth-duration-normal: .2s;
@@ -3130,78 +2276,30 @@ a, area, button, input, label, select, summary, textarea, [tabindex] {
3130
2276
  --cirth-z-index-modal-backdrop: 1040;
3131
2277
  --cirth-z-index-modal: 1050;
3132
2278
  --cirth-z-index-tooltip: 1070;
3133
- }
3134
-
3135
- :root {
3136
- --cirth-font-family-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
3137
- --cirth-font-family-sans-serif: system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, Helvetica, Arial,
3138
- "Helvetica Neue", sans-serif, var(--cirth-font-family-emoji);
3139
- --cirth-font-family-monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono",
3140
- monospace, var(--cirth-font-family-emoji);
3141
- --cirth-font-family: var(--cirth-font-family-sans-serif);
3142
- --cirth-line-height: var(--cirth-line-height-normal);
3143
- --cirth-font-weight: var(--cirth-font-weight-regular);
3144
- --cirth-font-size: 100%;
3145
- --cirth-text-underline-offset: .1rem;
3146
- --cirth-border-radius: var(--cirth-radius-sm);
3147
- --cirth-border-width: var(--cirth-border-width-1);
3148
- --cirth-outline-width: var(--cirth-outline-width-2);
3149
- --cirth-transition: var(--cirth-duration-normal) var(--cirth-ease-in-out);
3150
- --cirth-spacing: var(--cirth-space-4);
3151
- --cirth-typography-spacing-vertical: var(--cirth-space-4);
3152
- --cirth-block-spacing-vertical: var(--cirth-spacing);
3153
- --cirth-block-spacing-horizontal: var(--cirth-spacing);
3154
- --cirth-grid-column-gap: var(--cirth-spacing);
3155
- --cirth-grid-row-gap: var(--cirth-spacing);
3156
- --cirth-form-element-spacing-vertical: var(--cirth-space-3);
3157
- --cirth-form-element-spacing-horizontal: var(--cirth-space-4);
3158
- --cirth-form-label-font-weight: var(--cirth-font-weight);
3159
- --cirth-group-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
3160
- --cirth-group-box-shadow-focus-with-button: 0 0 0 var(--cirth-outline-width)
3161
- var(--cirth-primary-focus);
3162
- --cirth-group-box-shadow-focus-with-input: 0 0 0 var(--cirth-border-width-1)
3163
- var(--cirth-form-element-border-color);
3164
- --cirth-modal-overlay-backdrop-filter: blur(.375rem);
3165
- --cirth-nav-element-spacing-vertical: var(--cirth-space-4);
3166
- --cirth-nav-element-spacing-horizontal: var(--cirth-space-2);
3167
- --cirth-nav-link-spacing-vertical: var(--cirth-space-2);
3168
- --cirth-nav-link-spacing-horizontal: var(--cirth-space-2);
3169
- --cirth-nav-breadcrumb-divider: ">";
3170
- --cirth-icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' 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");
3171
- --cirth-icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' 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");
3172
- --cirth-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
3173
- --cirth-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
3174
- --cirth-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
3175
- --cirth-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
3176
- --cirth-icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' 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");
3177
- --cirth-icon-loading: url("data:image/svg+xml,%3Csvg fill='none' height='24' width='24' 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, 145, 164)' stroke-width='4' /%3E%3C/g%3E%3C/svg%3E");
3178
- }
3179
-
3180
- :host {
3181
- --cirth-font-family-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
3182
- --cirth-font-family-sans-serif: system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, Helvetica, Arial,
3183
- "Helvetica Neue", sans-serif, var(--cirth-font-family-emoji);
3184
- --cirth-font-family-monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono",
3185
- monospace, var(--cirth-font-family-emoji);
3186
- --cirth-font-family: var(--cirth-font-family-sans-serif);
2279
+ --cirth-font-family: var(--cirth-font-family-sans);
3187
2280
  --cirth-line-height: var(--cirth-line-height-normal);
3188
2281
  --cirth-font-weight: var(--cirth-font-weight-regular);
3189
2282
  --cirth-font-size: 100%;
3190
- --cirth-text-underline-offset: .1rem;
3191
- --cirth-border-radius: var(--cirth-radius-sm);
2283
+ --cirth-text-underline-offset: .15em;
2284
+ --cirth-border-radius: var(--cirth-radius-lg);
2285
+ --cirth-card-border-radius: calc(var(--cirth-border-radius) * 1.5);
2286
+ --cirth-checkbox-border-radius: min(var(--cirth-border-radius),
2287
+ var(--cirth-radius-sm));
2288
+ --cirth-code-border-radius: min(var(--cirth-border-radius),
2289
+ var(--cirth-radius-sm));
3192
2290
  --cirth-border-width: var(--cirth-border-width-1);
3193
2291
  --cirth-outline-width: var(--cirth-outline-width-2);
3194
- --cirth-transition: var(--cirth-duration-normal) var(--cirth-ease-in-out);
2292
+ --cirth-transition: var(--cirth-duration-normal) var(--cirth-ease-out);
3195
2293
  --cirth-spacing: var(--cirth-space-4);
3196
2294
  --cirth-typography-spacing-vertical: var(--cirth-space-4);
3197
2295
  --cirth-block-spacing-vertical: var(--cirth-spacing);
3198
2296
  --cirth-block-spacing-horizontal: var(--cirth-spacing);
3199
2297
  --cirth-grid-column-gap: var(--cirth-spacing);
3200
2298
  --cirth-grid-row-gap: var(--cirth-spacing);
3201
- --cirth-form-element-spacing-vertical: var(--cirth-space-3);
2299
+ --cirth-form-element-spacing-vertical: var(--cirth-space-2);
3202
2300
  --cirth-form-element-spacing-horizontal: var(--cirth-space-4);
3203
2301
  --cirth-form-label-font-weight: var(--cirth-font-weight);
3204
- --cirth-group-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
2302
+ --cirth-group-box-shadow: 0 0 0 #0000;
3205
2303
  --cirth-group-box-shadow-focus-with-button: 0 0 0 var(--cirth-outline-width)
3206
2304
  var(--cirth-primary-focus);
3207
2305
  --cirth-group-box-shadow-focus-with-input: 0 0 0 var(--cirth-border-width-1)
@@ -3214,62 +2312,12 @@ a, area, button, input, label, select, summary, textarea, [tabindex] {
3214
2312
  --cirth-nav-breadcrumb-divider: ">";
3215
2313
  --cirth-icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' 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");
3216
2314
  --cirth-icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' 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");
3217
- --cirth-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
3218
- --cirth-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
3219
- --cirth-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
3220
- --cirth-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
3221
- --cirth-icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' 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");
3222
- --cirth-icon-loading: url("data:image/svg+xml,%3Csvg fill='none' height='24' width='24' 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, 145, 164)' stroke-width='4' /%3E%3C/g%3E%3C/svg%3E");
3223
- }
3224
-
3225
- @media (width >= 576px) {
3226
- :root {
3227
- --cirth-font-size: 106.25%;
3228
- }
3229
-
3230
- :host {
3231
- --cirth-font-size: 106.25%;
3232
- }
3233
- }
3234
-
3235
- @media (width >= 768px) {
3236
- :root {
3237
- --cirth-font-size: 112.5%;
3238
- }
3239
-
3240
- :host {
3241
- --cirth-font-size: 112.5%;
3242
- }
3243
- }
3244
-
3245
- @media (width >= 1024px) {
3246
- :root {
3247
- --cirth-font-size: 118.75%;
3248
- }
3249
-
3250
- :host {
3251
- --cirth-font-size: 118.75%;
3252
- }
3253
- }
3254
-
3255
- @media (width >= 1280px) {
3256
- :root {
3257
- --cirth-font-size: 125%;
3258
- }
3259
-
3260
- :host {
3261
- --cirth-font-size: 125%;
3262
- }
3263
- }
3264
-
3265
- @media (width >= 1536px) {
3266
- :root {
3267
- --cirth-font-size: 131.25%;
3268
- }
3269
-
3270
- :host {
3271
- --cirth-font-size: 131.25%;
3272
- }
2315
+ --cirth-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 146, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
2316
+ --cirth-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 146, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
2317
+ --cirth-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 146, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
2318
+ --cirth-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 146, 164)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
2319
+ --cirth-icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 146, 164)' 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");
2320
+ --cirth-icon-loading: url("data:image/svg+xml,%3Csvg fill='none' height='24' width='24' 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");
3273
2321
  }
3274
2322
 
3275
2323
  a, a.secondary, a.contrast {
@@ -3280,44 +2328,57 @@ small {
3280
2328
  --cirth-font-size: .875em;
3281
2329
  }
3282
2330
 
3283
- h1, h2, h3, h4, h5, h6 {
2331
+ h1, h2, h3 {
3284
2332
  --cirth-font-weight: var(--cirth-font-weight-bold);
3285
2333
  }
3286
2334
 
2335
+ h4, h5, h6 {
2336
+ --cirth-font-weight: var(--cirth-font-weight-semibold);
2337
+ }
2338
+
3287
2339
  h1 {
3288
- --cirth-font-size: var(--cirth-font-size-5xl);
2340
+ --cirth-font-size: clamp(2.25rem, 1.7rem + 2.2vw, 3.5rem);
3289
2341
  --cirth-line-height: var(--cirth-line-height-tight);
2342
+ --cirth-letter-spacing: var(--cirth-letter-spacing-tight);
3290
2343
  --cirth-typography-spacing-top: var(--cirth-space-12);
3291
2344
  }
3292
2345
 
3293
2346
  h2 {
3294
- --cirth-font-size: 1.75rem;
2347
+ --cirth-font-size: clamp(1.5rem, 1.3rem + 1vw, 2rem);
3295
2348
  --cirth-line-height: 1.15;
3296
- --cirth-typography-spacing-top: 2.625rem;
2349
+ --cirth-letter-spacing: var(--cirth-letter-spacing-tight);
2350
+ --cirth-typography-spacing-top: var(--cirth-space-12);
3297
2351
  }
3298
2352
 
3299
2353
  h3 {
3300
- --cirth-font-size: 1.5rem;
3301
- --cirth-line-height: 1.175;
3302
- --cirth-typography-spacing-top: 2.25rem;
2354
+ --cirth-font-size: clamp(1.25rem, 1.15rem + .5vw, 1.5rem);
2355
+ --cirth-line-height: 1.2;
2356
+ --cirth-letter-spacing: var(--cirth-letter-spacing-snug);
2357
+ --cirth-typography-spacing-top: var(--cirth-space-10);
3303
2358
  }
3304
2359
 
3305
2360
  h4 {
3306
2361
  --cirth-font-size: var(--cirth-font-size-xl);
3307
- --cirth-line-height: 1.2;
3308
- --cirth-typography-spacing-top: 1.874rem;
2362
+ --cirth-line-height: var(--cirth-line-height-snug);
2363
+ --cirth-typography-spacing-top: var(--cirth-space-8);
3309
2364
  }
3310
2365
 
3311
2366
  h5 {
3312
2367
  --cirth-font-size: var(--cirth-font-size-lg);
3313
- --cirth-line-height: 1.225;
3314
- --cirth-typography-spacing-top: 1.6875rem;
2368
+ --cirth-line-height: var(--cirth-line-height-snug);
2369
+ --cirth-typography-spacing-top: var(--cirth-space-8);
3315
2370
  }
3316
2371
 
3317
2372
  h6 {
3318
2373
  --cirth-font-size: var(--cirth-font-size-md);
3319
2374
  --cirth-line-height: var(--cirth-line-height-snug);
3320
- --cirth-typography-spacing-top: var(--cirth-space-6);
2375
+ --cirth-typography-spacing-top: var(--cirth-space-8);
2376
+ }
2377
+
2378
+ article {
2379
+ --cirth-border-radius: var(--cirth-card-border-radius);
2380
+ --cirth-block-spacing-vertical: var(--cirth-space-6);
2381
+ --cirth-block-spacing-horizontal: var(--cirth-space-6);
3321
2382
  }
3322
2383
 
3323
2384
  thead th, thead td, tfoot th, tfoot td {
@@ -3326,33 +2387,44 @@ thead th, thead td, tfoot th, tfoot td {
3326
2387
  }
3327
2388
 
3328
2389
  pre, code, kbd, samp {
3329
- --cirth-font-family: var(--cirth-font-family-monospace);
2390
+ --cirth-font-family: var(--cirth-font-family-mono);
3330
2391
  }
3331
2392
 
3332
- kbd {
3333
- --cirth-font-weight: bolder;
2393
+ code, kbd, samp {
2394
+ --cirth-border-radius: var(--cirth-code-border-radius);
3334
2395
  }
3335
2396
 
3336
- input:not(:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"])) {
3337
- --cirth-outline-width: var(--cirth-outline-width-1);
2397
+ kbd {
2398
+ --cirth-font-weight: bolder;
3338
2399
  }
3339
2400
 
3340
- :where(select, textarea) {
2401
+ input:not([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]), :where(select, textarea) {
3341
2402
  --cirth-outline-width: var(--cirth-outline-width-1);
2403
+ --cirth-line-height: var(--cirth-line-height-relaxed);
3342
2404
  }
3343
2405
 
3344
2406
  [type="search"] {
3345
2407
  --cirth-border-radius: var(--cirth-radius-pill);
3346
2408
  }
3347
2409
 
3348
- [type="checkbox"] {
3349
- --cirth-border-width: var(--cirth-border-width-2);
2410
+ button, [type="submit"], [type="reset"], [type="button"], [role="button"] {
2411
+ --cirth-font-weight: var(--cirth-font-weight-semibold);
2412
+ --cirth-line-height: var(--cirth-line-height-relaxed);
2413
+ --cirth-form-element-spacing-horizontal: var(--cirth-space-5);
3350
2414
  }
3351
2415
 
3352
- [type="radio"] {
2416
+ [type="file"] {
2417
+ --cirth-line-height: var(--cirth-line-height-relaxed);
2418
+ }
2419
+
2420
+ [type="checkbox"], [type="radio"] {
3353
2421
  --cirth-border-width: var(--cirth-border-width-2);
3354
2422
  }
3355
2423
 
2424
+ [type="checkbox"] {
2425
+ --cirth-border-radius: var(--cirth-checkbox-border-radius);
2426
+ }
2427
+
3356
2428
  [type="checkbox"][role="switch"] {
3357
2429
  --cirth-border-width: .1875rem;
3358
2430
  }
@@ -3369,15 +2441,7 @@ nav details.dropdown summary:focus-visible {
3369
2441
  --cirth-border-radius: var(--cirth-radius-pill);
3370
2442
  }
3371
2443
 
3372
- [role="search"]:has(button.secondary:focus, [type="submit"].secondary:focus, [type="button"].secondary:focus, [role="button"].secondary:focus) {
3373
- --cirth-group-box-shadow-focus-with-button: 0
3374
- 0
3375
- 0
3376
- var(--cirth-outline-width)
3377
- var(--cirth-secondary-focus);
3378
- }
3379
-
3380
- [role="group"]:has(button.secondary:focus, [type="submit"].secondary:focus, [type="button"].secondary:focus, [role="button"].secondary:focus) {
2444
+ :is([role="search"]:has(button.secondary:focus, [type="submit"].secondary:focus, [type="button"].secondary:focus, [role="button"].secondary:focus), [role="group"]:has(button.secondary:focus, [type="submit"].secondary:focus, [type="button"].secondary:focus, [role="button"].secondary:focus)) {
3381
2445
  --cirth-group-box-shadow-focus-with-button: 0
3382
2446
  0
3383
2447
  0
@@ -3385,7 +2449,7 @@ nav details.dropdown summary:focus-visible {
3385
2449
  var(--cirth-secondary-focus);
3386
2450
  }
3387
2451
 
3388
- [role="search"]:has(button.contrast:focus, [type="submit"].contrast:focus, [type="button"].contrast:focus, [role="button"].contrast:focus) {
2452
+ :is([role="search"]:has(button.contrast:focus, [type="submit"].contrast:focus, [type="button"].contrast:focus, [role="button"].contrast:focus), [role="group"]:has(button.contrast:focus, [type="submit"].contrast:focus, [type="button"].contrast:focus, [role="button"].contrast:focus)) {
3389
2453
  --cirth-group-box-shadow-focus-with-button: 0
3390
2454
  0
3391
2455
  0
@@ -3393,123 +2457,95 @@ nav details.dropdown summary:focus-visible {
3393
2457
  var(--cirth-contrast-focus);
3394
2458
  }
3395
2459
 
3396
- [role="group"]:has(button.contrast:focus, [type="submit"].contrast:focus, [type="button"].contrast:focus, [role="button"].contrast:focus) {
3397
- --cirth-group-box-shadow-focus-with-button: 0
3398
- 0
3399
- 0
3400
- var(--cirth-outline-width)
3401
- var(--cirth-contrast-focus);
3402
- }
3403
-
3404
- [role="search"] button, [role="search"] [role="button"], [role="group"] button, [role="group"] [role="button"] {
2460
+ [role="search"] button, [role="search"] [type="submit"], [role="search"] [type="button"], [role="search"] [role="button"], [role="group"] button, [role="group"] [type="submit"], [role="group"] [type="button"], [role="group"] [role="button"] {
3405
2461
  --cirth-form-element-spacing-horizontal: var(--cirth-space-8);
3406
2462
  }
3407
2463
 
3408
- [role="search"] [type="submit"] {
3409
- --cirth-form-element-spacing-horizontal: var(--cirth-space-8);
3410
- }
3411
-
3412
- [role="search"] [type="button"] {
3413
- --cirth-form-element-spacing-horizontal: var(--cirth-space-8);
3414
- }
3415
-
3416
- [role="group"] [type="submit"] {
3417
- --cirth-form-element-spacing-horizontal: var(--cirth-space-8);
3418
- }
3419
-
3420
- [role="group"] [type="button"] {
3421
- --cirth-form-element-spacing-horizontal: var(--cirth-space-8);
3422
- }
3423
-
3424
- details summary[role="button"]:not(.outline):after {
2464
+ details summary[role="button"]:not(.outline):after, [aria-busy="true"]:not(input, select, textarea):is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]):not(.outline):before {
3425
2465
  filter: brightness(0) invert();
3426
2466
  }
3427
2467
 
3428
- [aria-busy="true"]:not(:is(input, select, textarea)):is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]):not(.outline):before {
3429
- filter: brightness(0) invert();
3430
- }
3431
-
3432
- [data-theme="light"], :root:not([data-theme="dark"]) {
2468
+ [data-theme="light"], :root:not([data-theme="dark"]), :host(:not([data-theme="dark"])) {
3433
2469
  --lightningcss-light: initial;
3434
2470
  --lightningcss-dark: ;
3435
2471
  color-scheme: light;
3436
- --cirth-background-color: #fff;
3437
- --cirth-color: #373c44;
3438
- --cirth-text-selection-color: rgba(2, 154, 232, .25);
3439
- --cirth-muted-color: #646b79;
3440
- --cirth-muted-border-color: #e7eaf0;
3441
- --cirth-primary: #0172ad;
3442
- --cirth-primary-background: #0172ad;
2472
+ --cirth-background-color: oklch(97.4% .008 69.35);
2473
+ --cirth-color: oklch(35.3% .021 264);
2474
+ --cirth-text-selection-color: oklch(65.7% .121 69.35 / .25);
2475
+ --cirth-muted-color: oklch(52.7% .032 264);
2476
+ --cirth-muted-border-color: oklch(93.85% .003 264);
2477
+ --cirth-primary: oklch(52.7% .097 69.35);
2478
+ --cirth-primary-background: oklch(52.7% .097 69.35);
3443
2479
  --cirth-primary-border: var(--cirth-primary-background);
3444
- --cirth-primary-underline: rgba(1, 114, 173, .5);
3445
- --cirth-primary-hover: #015887;
3446
- --cirth-primary-hover-background: #02659a;
2480
+ --cirth-primary-underline: oklch(52.7% .097 69.35 / .5);
2481
+ --cirth-primary-hover: oklch(44% .081 69.35);
2482
+ --cirth-primary-hover-background: oklch(48.3% .089 69.35);
3447
2483
  --cirth-primary-hover-border: var(--cirth-primary-hover-background);
3448
2484
  --cirth-primary-hover-underline: var(--cirth-primary-hover);
3449
- --cirth-primary-focus: rgba(2, 154, 232, .5);
3450
- --cirth-primary-inverse: #fff;
3451
- --cirth-secondary: #5d6b89;
3452
- --cirth-secondary-background: #525f7a;
2485
+ --cirth-primary-focus: oklch(52.7% .097 69.35 / .75);
2486
+ --cirth-primary-inverse: oklch(100% 0 0);
2487
+ --cirth-secondary: oklch(52.7% .032 264);
2488
+ --cirth-secondary-background: oklch(48.3% .03 264);
3453
2489
  --cirth-secondary-border: var(--cirth-secondary-background);
3454
- --cirth-secondary-underline: rgba(93, 107, 137, .5);
3455
- --cirth-secondary-hover: #48536b;
3456
- --cirth-secondary-hover-background: #48536b;
2490
+ --cirth-secondary-underline: oklch(52.7% .032 264 / .5);
2491
+ --cirth-secondary-hover: oklch(44% .028 264);
2492
+ --cirth-secondary-hover-background: oklch(44% .028 264);
3457
2493
  --cirth-secondary-hover-border: var(--cirth-secondary-hover-background);
3458
2494
  --cirth-secondary-hover-underline: var(--cirth-secondary-hover);
3459
- --cirth-secondary-focus: rgba(93, 107, 137, .25);
3460
- --cirth-secondary-inverse: #fff;
3461
- --cirth-contrast: #181c25;
3462
- --cirth-contrast-background: #181c25;
2495
+ --cirth-secondary-focus: oklch(48.3% .03 264 / .7);
2496
+ --cirth-secondary-inverse: oklch(100% 0 0);
2497
+ --cirth-contrast: oklch(22.3% .006 264);
2498
+ --cirth-contrast-background: oklch(22.3% .006 264);
3463
2499
  --cirth-contrast-border: var(--cirth-contrast-background);
3464
- --cirth-contrast-underline: rgba(24, 28, 37, .5);
3465
- --cirth-contrast-hover: #000;
3466
- --cirth-contrast-hover-background: #000;
2500
+ --cirth-contrast-underline: oklch(22.3% .006 264 / .5);
2501
+ --cirth-contrast-hover: oklch(0% 0 0);
2502
+ --cirth-contrast-hover-background: oklch(0% 0 0);
3467
2503
  --cirth-contrast-hover-border: var(--cirth-contrast-hover-background);
3468
2504
  --cirth-contrast-hover-underline: var(--cirth-secondary-hover);
3469
- --cirth-contrast-focus: rgba(93, 107, 137, .25);
3470
- --cirth-contrast-inverse: #fff;
3471
- --cirth-box-shadow: .0145rem .029rem .174rem rgba(129, 145, 181, .016), .0335rem .067rem .402rem rgba(129, 145, 181, .024), .0625rem .125rem .75rem rgba(129, 145, 181, .03), .1125rem .225rem 1.35rem rgba(129, 145, 181, .035), .2085rem .417rem 2.502rem rgba(129, 145, 181, .043), .5rem 1rem 6rem rgba(129, 145, 181, .06), 0 0 0 .0625rem rgba(129, 145, 181, .016);
3472
- --cirth-h1-color: #2d3138;
3473
- --cirth-h2-color: #373c44;
3474
- --cirth-h3-color: #424751;
3475
- --cirth-h4-color: #4d535e;
3476
- --cirth-h5-color: #5c6370;
3477
- --cirth-h6-color: #646b79;
3478
- --cirth-mark-background-color: #fde7c0;
3479
- --cirth-mark-color: #0f1114;
3480
- --cirth-ins-color: #1d6a54;
3481
- --cirth-del-color: #883935;
2505
+ --cirth-contrast-focus: oklch(48.3% .03 264 / .7);
2506
+ --cirth-contrast-inverse: oklch(100% 0 0);
2507
+ --cirth-box-shadow: .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);
2508
+ --cirth-h1-color: oklch(31% .016 264);
2509
+ --cirth-h2-color: oklch(35.3% .021 264);
2510
+ --cirth-h3-color: oklch(39.7% .025 264);
2511
+ --cirth-h4-color: oklch(44% .028 264);
2512
+ --cirth-h5-color: oklch(48.3% .03 264);
2513
+ --cirth-h6-color: oklch(52.7% .032 264);
2514
+ --cirth-mark-background-color: oklch(93% .05 78);
2515
+ --cirth-mark-color: oklch(18% 0 264);
2516
+ --cirth-ins-color: oklch(35.3% .067 160.59);
2517
+ --cirth-del-color: oklch(35.3% .122 29.73);
3482
2518
  --cirth-blockquote-border-color: var(--cirth-muted-border-color);
3483
2519
  --cirth-blockquote-footer-color: var(--cirth-muted-color);
3484
- --cirth-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
3485
- --cirth-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
2520
+ --cirth-button-box-shadow: 0 0 0 #0000;
2521
+ --cirth-button-hover-box-shadow: 0 0 0 #0000;
3486
2522
  --cirth-table-border-color: var(--cirth-muted-border-color);
3487
- --cirth-table-row-stripped-background-color: rgba(111, 120, 135, .04);
3488
- --cirth-code-background-color: #f3f5f7;
3489
- --cirth-code-color: #646b79;
2523
+ --cirth-table-row-stripped-background-color: oklch(57% .032 264 / .0375);
2524
+ --cirth-code-background-color: oklch(97% 0 288);
2525
+ --cirth-code-color: oklch(52.7% .032 264);
3490
2526
  --cirth-code-kbd-background-color: var(--cirth-color);
3491
2527
  --cirth-code-kbd-color: var(--cirth-background-color);
3492
- --cirth-form-element-background-color: #fbfcfc;
3493
- --cirth-form-element-selected-background-color: #dfe3eb;
3494
- --cirth-form-element-border-color: #cfd5e2;
3495
- --cirth-form-element-color: #23262c;
2528
+ --cirth-form-element-background-color: oklch(99% 0 336);
2529
+ --cirth-form-element-selected-background-color: oklch(91.7% .006 264);
2530
+ --cirth-form-element-border-color: oklch(61.3% .032 264);
2531
+ --cirth-form-element-color: oklch(26.7% .011 264);
3496
2532
  --cirth-form-element-placeholder-color: var(--cirth-muted-color);
3497
- --cirth-form-element-active-background-color: #fff;
2533
+ --cirth-form-element-active-background-color: oklch(100% 0 0);
3498
2534
  --cirth-form-element-active-border-color: var(--cirth-primary-border);
3499
2535
  --cirth-form-element-focus-color: var(--cirth-primary-border);
3500
2536
  --cirth-form-element-disabled-opacity: var(--cirth-opacity-disabled);
3501
- --cirth-form-element-invalid-border-color: #b86a6b;
3502
- --cirth-form-element-invalid-active-border-color: #c84f48;
2537
+ --cirth-form-element-invalid-border-color: oklch(65.7% .196 29.73);
2538
+ --cirth-form-element-invalid-active-border-color: oklch(52.7% .181 29.73);
3503
2539
  --cirth-form-element-invalid-focus-color: var(--cirth-form-element-invalid-active-border-color);
3504
- --cirth-form-element-valid-border-color: #4c9b8a;
3505
- --cirth-form-element-valid-active-border-color: #279977;
2540
+ --cirth-form-element-valid-border-color: oklch(61.3% .117 160.59);
2541
+ --cirth-form-element-valid-active-border-color: oklch(52.7% .1 160.59);
3506
2542
  --cirth-form-element-valid-focus-color: var(--cirth-form-element-valid-active-border-color);
3507
- --cirth-switch-background-color: #bfc7d9;
2543
+ --cirth-switch-background-color: oklch(61.3% .032 264);
3508
2544
  --cirth-switch-checked-background-color: var(--cirth-primary-background);
3509
- --cirth-switch-color: #fff;
3510
- --cirth-switch-thumb-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
3511
- --cirth-range-border-color: #dfe3eb;
3512
- --cirth-range-active-border-color: #bfc7d9;
2545
+ --cirth-switch-color: oklch(100% 0 0);
2546
+ --cirth-switch-thumb-box-shadow: 0 0 0 #0000;
2547
+ --cirth-range-border-color: oklch(91.7% .006 264);
2548
+ --cirth-range-active-border-color: oklch(83% .016 264);
3513
2549
  --cirth-range-thumb-border-color: var(--cirth-background-color);
3514
2550
  --cirth-range-thumb-color: var(--cirth-secondary-background);
3515
2551
  --cirth-range-thumb-active-color: var(--cirth-primary-background);
@@ -3517,333 +2553,112 @@ details summary[role="button"]:not(.outline):after {
3517
2553
  --cirth-accordion-active-summary-color: var(--cirth-primary-hover);
3518
2554
  --cirth-accordion-close-summary-color: var(--cirth-color);
3519
2555
  --cirth-accordion-open-summary-color: var(--cirth-muted-color);
3520
- --cirth-card-background-color: var(--cirth-background-color);
2556
+ --cirth-card-background-color: oklch(100% 0 0);
3521
2557
  --cirth-card-border-color: var(--cirth-muted-border-color);
3522
2558
  --cirth-card-box-shadow: var(--cirth-box-shadow);
3523
- --cirth-card-sectioning-background-color: #fbfcfc;
3524
- --cirth-dropdown-background-color: #fff;
3525
- --cirth-dropdown-border-color: #eff1f4;
2559
+ --cirth-card-sectioning-background-color: oklch(99% 0 336);
2560
+ --cirth-dropdown-background-color: oklch(100% 0 0);
2561
+ --cirth-dropdown-border-color: oklch(96% 0 264);
3526
2562
  --cirth-dropdown-box-shadow: var(--cirth-box-shadow);
3527
2563
  --cirth-dropdown-color: var(--cirth-color);
3528
- --cirth-dropdown-hover-background-color: #eff1f4;
2564
+ --cirth-dropdown-hover-background-color: oklch(96% 0 264);
3529
2565
  --cirth-loading-spinner-opacity: var(--cirth-opacity-disabled);
3530
- --cirth-modal-overlay-background-color: rgba(232, 234, 237, var(--cirth-opacity-overlay));
3531
- --cirth-progress-background-color: #dfe3eb;
2566
+ --cirth-modal-overlay-background-color: oklch(93.85% .003 264deg / var(--cirth-opacity-overlay));
2567
+ --cirth-progress-background-color: oklch(91.7% .006 264);
2568
+ --cirth-progress-border-color: oklch(61.3% .032 264);
3532
2569
  --cirth-progress-color: var(--cirth-primary-background);
3533
2570
  --cirth-tooltip-background-color: var(--cirth-contrast-background);
3534
2571
  --cirth-tooltip-color: var(--cirth-contrast-inverse);
3535
- --cirth-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(76, 154.5, 137.5)' 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");
3536
- --cirth-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(200.25, 79.25, 72.25)' 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");
2572
+ --cirth-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' 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");
2573
+ --cirth-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' 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");
3537
2574
  }
3538
2575
 
3539
- :host(:not([data-theme="dark"])) {
3540
- --lightningcss-light: initial;
3541
- --lightningcss-dark: ;
3542
- color-scheme: light;
3543
- --cirth-background-color: #fff;
3544
- --cirth-color: #373c44;
3545
- --cirth-text-selection-color: rgba(2, 154, 232, .25);
3546
- --cirth-muted-color: #646b79;
3547
- --cirth-muted-border-color: #e7eaf0;
3548
- --cirth-primary: #0172ad;
3549
- --cirth-primary-background: #0172ad;
3550
- --cirth-primary-border: var(--cirth-primary-background);
3551
- --cirth-primary-underline: rgba(1, 114, 173, .5);
3552
- --cirth-primary-hover: #015887;
3553
- --cirth-primary-hover-background: #02659a;
3554
- --cirth-primary-hover-border: var(--cirth-primary-hover-background);
3555
- --cirth-primary-hover-underline: var(--cirth-primary-hover);
3556
- --cirth-primary-focus: rgba(2, 154, 232, .5);
3557
- --cirth-primary-inverse: #fff;
3558
- --cirth-secondary: #5d6b89;
3559
- --cirth-secondary-background: #525f7a;
3560
- --cirth-secondary-border: var(--cirth-secondary-background);
3561
- --cirth-secondary-underline: rgba(93, 107, 137, .5);
3562
- --cirth-secondary-hover: #48536b;
3563
- --cirth-secondary-hover-background: #48536b;
3564
- --cirth-secondary-hover-border: var(--cirth-secondary-hover-background);
3565
- --cirth-secondary-hover-underline: var(--cirth-secondary-hover);
3566
- --cirth-secondary-focus: rgba(93, 107, 137, .25);
3567
- --cirth-secondary-inverse: #fff;
3568
- --cirth-contrast: #181c25;
3569
- --cirth-contrast-background: #181c25;
3570
- --cirth-contrast-border: var(--cirth-contrast-background);
3571
- --cirth-contrast-underline: rgba(24, 28, 37, .5);
3572
- --cirth-contrast-hover: #000;
3573
- --cirth-contrast-hover-background: #000;
3574
- --cirth-contrast-hover-border: var(--cirth-contrast-hover-background);
3575
- --cirth-contrast-hover-underline: var(--cirth-secondary-hover);
3576
- --cirth-contrast-focus: rgba(93, 107, 137, .25);
3577
- --cirth-contrast-inverse: #fff;
3578
- --cirth-box-shadow: .0145rem .029rem .174rem rgba(129, 145, 181, .016), .0335rem .067rem .402rem rgba(129, 145, 181, .024), .0625rem .125rem .75rem rgba(129, 145, 181, .03), .1125rem .225rem 1.35rem rgba(129, 145, 181, .035), .2085rem .417rem 2.502rem rgba(129, 145, 181, .043), .5rem 1rem 6rem rgba(129, 145, 181, .06), 0 0 0 .0625rem rgba(129, 145, 181, .016);
3579
- --cirth-h1-color: #2d3138;
3580
- --cirth-h2-color: #373c44;
3581
- --cirth-h3-color: #424751;
3582
- --cirth-h4-color: #4d535e;
3583
- --cirth-h5-color: #5c6370;
3584
- --cirth-h6-color: #646b79;
3585
- --cirth-mark-background-color: #fde7c0;
3586
- --cirth-mark-color: #0f1114;
3587
- --cirth-ins-color: #1d6a54;
3588
- --cirth-del-color: #883935;
3589
- --cirth-blockquote-border-color: var(--cirth-muted-border-color);
3590
- --cirth-blockquote-footer-color: var(--cirth-muted-color);
3591
- --cirth-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
3592
- --cirth-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
3593
- --cirth-table-border-color: var(--cirth-muted-border-color);
3594
- --cirth-table-row-stripped-background-color: rgba(111, 120, 135, .04);
3595
- --cirth-code-background-color: #f3f5f7;
3596
- --cirth-code-color: #646b79;
3597
- --cirth-code-kbd-background-color: var(--cirth-color);
3598
- --cirth-code-kbd-color: var(--cirth-background-color);
3599
- --cirth-form-element-background-color: #fbfcfc;
3600
- --cirth-form-element-selected-background-color: #dfe3eb;
3601
- --cirth-form-element-border-color: #cfd5e2;
3602
- --cirth-form-element-color: #23262c;
3603
- --cirth-form-element-placeholder-color: var(--cirth-muted-color);
3604
- --cirth-form-element-active-background-color: #fff;
3605
- --cirth-form-element-active-border-color: var(--cirth-primary-border);
3606
- --cirth-form-element-focus-color: var(--cirth-primary-border);
3607
- --cirth-form-element-disabled-opacity: var(--cirth-opacity-disabled);
3608
- --cirth-form-element-invalid-border-color: #b86a6b;
3609
- --cirth-form-element-invalid-active-border-color: #c84f48;
3610
- --cirth-form-element-invalid-focus-color: var(--cirth-form-element-invalid-active-border-color);
3611
- --cirth-form-element-valid-border-color: #4c9b8a;
3612
- --cirth-form-element-valid-active-border-color: #279977;
3613
- --cirth-form-element-valid-focus-color: var(--cirth-form-element-valid-active-border-color);
3614
- --cirth-switch-background-color: #bfc7d9;
3615
- --cirth-switch-checked-background-color: var(--cirth-primary-background);
3616
- --cirth-switch-color: #fff;
3617
- --cirth-switch-thumb-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
3618
- --cirth-range-border-color: #dfe3eb;
3619
- --cirth-range-active-border-color: #bfc7d9;
3620
- --cirth-range-thumb-border-color: var(--cirth-background-color);
3621
- --cirth-range-thumb-color: var(--cirth-secondary-background);
3622
- --cirth-range-thumb-active-color: var(--cirth-primary-background);
3623
- --cirth-accordion-border-color: var(--cirth-muted-border-color);
3624
- --cirth-accordion-active-summary-color: var(--cirth-primary-hover);
3625
- --cirth-accordion-close-summary-color: var(--cirth-color);
3626
- --cirth-accordion-open-summary-color: var(--cirth-muted-color);
3627
- --cirth-card-background-color: var(--cirth-background-color);
3628
- --cirth-card-border-color: var(--cirth-muted-border-color);
3629
- --cirth-card-box-shadow: var(--cirth-box-shadow);
3630
- --cirth-card-sectioning-background-color: #fbfcfc;
3631
- --cirth-dropdown-background-color: #fff;
3632
- --cirth-dropdown-border-color: #eff1f4;
3633
- --cirth-dropdown-box-shadow: var(--cirth-box-shadow);
3634
- --cirth-dropdown-color: var(--cirth-color);
3635
- --cirth-dropdown-hover-background-color: #eff1f4;
3636
- --cirth-loading-spinner-opacity: var(--cirth-opacity-disabled);
3637
- --cirth-modal-overlay-background-color: rgba(232, 234, 237, var(--cirth-opacity-overlay));
3638
- --cirth-progress-background-color: #dfe3eb;
3639
- --cirth-progress-color: var(--cirth-primary-background);
3640
- --cirth-tooltip-background-color: var(--cirth-contrast-background);
3641
- --cirth-tooltip-color: var(--cirth-contrast-inverse);
3642
- --cirth-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(76, 154.5, 137.5)' 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");
3643
- --cirth-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(200.25, 79.25, 72.25)' 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");
3644
- }
3645
-
3646
- [data-theme="light"] input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]) {
3647
- --cirth-form-element-focus-color: var(--cirth-primary-focus);
3648
- }
3649
-
3650
- :root:not([data-theme="dark"]) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]) {
3651
- --cirth-form-element-focus-color: var(--cirth-primary-focus);
3652
- }
3653
-
3654
- :host(:not([data-theme="dark"])) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]) {
2576
+ [data-theme="light"] input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]), :root:not([data-theme="dark"]) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]), :host(:not([data-theme="dark"])) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]) {
3655
2577
  --cirth-form-element-focus-color: var(--cirth-primary-focus);
3656
2578
  }
3657
2579
 
3658
2580
  @media only screen and (prefers-color-scheme: dark) {
3659
- :root:not([data-theme]) {
3660
- --lightningcss-light: ;
3661
- --lightningcss-dark: initial;
3662
- color-scheme: dark;
3663
- --cirth-background-color: #13171f;
3664
- --cirth-color: #c2c7d0;
3665
- --cirth-text-selection-color: rgba(1, 170, 255, .19);
3666
- --cirth-muted-color: #7b8495;
3667
- --cirth-muted-border-color: #202632;
3668
- --cirth-primary: #01aaff;
3669
- --cirth-primary-background: #0172ad;
3670
- --cirth-primary-border: var(--cirth-primary-background);
3671
- --cirth-primary-underline: rgba(1, 170, 255, .5);
3672
- --cirth-primary-hover: #79c0ff;
3673
- --cirth-primary-hover-background: #017fc0;
3674
- --cirth-primary-hover-border: var(--cirth-primary-hover-background);
3675
- --cirth-primary-hover-underline: var(--cirth-primary-hover);
3676
- --cirth-primary-focus: rgba(1, 170, 255, .376);
3677
- --cirth-primary-inverse: #fff;
3678
- --cirth-secondary: #969eaf;
3679
- --cirth-secondary-background: #525f7a;
3680
- --cirth-secondary-border: var(--cirth-secondary-background);
3681
- --cirth-secondary-underline: rgba(150, 158, 175, .5);
3682
- --cirth-secondary-hover: #b3b9c5;
3683
- --cirth-secondary-hover-background: #5d6b89;
3684
- --cirth-secondary-hover-border: var(--cirth-secondary-hover-background);
3685
- --cirth-secondary-hover-underline: var(--cirth-secondary-hover);
3686
- --cirth-secondary-focus: rgba(144, 158, 190, .25);
3687
- --cirth-secondary-inverse: #fff;
3688
- --cirth-contrast: #dfe3eb;
3689
- --cirth-contrast-background: #eff1f4;
3690
- --cirth-contrast-border: var(--cirth-contrast-background);
3691
- --cirth-contrast-underline: rgba(223, 227, 235, .5);
3692
- --cirth-contrast-hover: #fff;
3693
- --cirth-contrast-hover-background: #fff;
3694
- --cirth-contrast-hover-border: var(--cirth-contrast-hover-background);
3695
- --cirth-contrast-hover-underline: var(--cirth-contrast-hover);
3696
- --cirth-contrast-focus: rgba(207, 213, 226, .25);
3697
- --cirth-contrast-inverse: #000;
3698
- --cirth-box-shadow: .0145rem .029rem .174rem rgba(7, 9, 12, .016), .0335rem .067rem .402rem rgba(7, 9, 12, .024), .0625rem .125rem .75rem rgba(7, 9, 12, .03), .1125rem .225rem 1.35rem rgba(7, 9, 12, .035), .2085rem .417rem 2.502rem rgba(7, 9, 12, .043), .5rem 1rem 6rem rgba(7, 9, 12, .06), 0 0 0 .0625rem rgba(7, 9, 12, .016);
3699
- --cirth-h1-color: #f0f1f3;
3700
- --cirth-h2-color: #e0e3e7;
3701
- --cirth-h3-color: #c2c7d0;
3702
- --cirth-h4-color: #b3b9c5;
3703
- --cirth-h5-color: #a4acba;
3704
- --cirth-h6-color: #8891a4;
3705
- --cirth-mark-background-color: #014063;
3706
- --cirth-mark-color: #fff;
3707
- --cirth-ins-color: #62af9a;
3708
- --cirth-del-color: #ce7e7b;
3709
- --cirth-blockquote-border-color: var(--cirth-muted-border-color);
3710
- --cirth-blockquote-footer-color: var(--cirth-muted-color);
3711
- --cirth-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
3712
- --cirth-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
3713
- --cirth-table-border-color: var(--cirth-muted-border-color);
3714
- --cirth-table-row-stripped-background-color: rgba(111, 120, 135, .04);
3715
- --cirth-code-background-color: #1a1f28;
3716
- --cirth-code-color: #8891a4;
3717
- --cirth-code-kbd-background-color: var(--cirth-color);
3718
- --cirth-code-kbd-color: var(--cirth-background-color);
3719
- --cirth-form-element-background-color: #1c212c;
3720
- --cirth-form-element-selected-background-color: #2a3140;
3721
- --cirth-form-element-border-color: #2a3140;
3722
- --cirth-form-element-color: #e0e3e7;
3723
- --cirth-form-element-placeholder-color: #8891a4;
3724
- --cirth-form-element-active-background-color: #1a1f28;
3725
- --cirth-form-element-active-border-color: var(--cirth-primary-border);
3726
- --cirth-form-element-focus-color: var(--cirth-primary-border);
3727
- --cirth-form-element-disabled-opacity: var(--cirth-opacity-disabled);
3728
- --cirth-form-element-invalid-border-color: #964a50;
3729
- --cirth-form-element-invalid-active-border-color: #b7403b;
3730
- --cirth-form-element-invalid-focus-color: var(--cirth-form-element-invalid-active-border-color);
3731
- --cirth-form-element-valid-border-color: #2a7b6f;
3732
- --cirth-form-element-valid-active-border-color: #16896a;
3733
- --cirth-form-element-valid-focus-color: var(--cirth-form-element-valid-active-border-color);
3734
- --cirth-switch-background-color: #333c4e;
3735
- --cirth-switch-checked-background-color: var(--cirth-primary-background);
3736
- --cirth-switch-color: #fff;
3737
- --cirth-switch-thumb-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
3738
- --cirth-range-border-color: #202632;
3739
- --cirth-range-active-border-color: #2a3140;
3740
- --cirth-range-thumb-border-color: var(--cirth-background-color);
3741
- --cirth-range-thumb-color: var(--cirth-secondary-background);
3742
- --cirth-range-thumb-active-color: var(--cirth-primary-background);
3743
- --cirth-accordion-border-color: var(--cirth-muted-border-color);
3744
- --cirth-accordion-active-summary-color: var(--cirth-primary-hover);
3745
- --cirth-accordion-close-summary-color: var(--cirth-color);
3746
- --cirth-accordion-open-summary-color: var(--cirth-muted-color);
3747
- --cirth-card-background-color: #181c25;
3748
- --cirth-card-border-color: var(--cirth-card-background-color);
3749
- --cirth-card-box-shadow: var(--cirth-box-shadow);
3750
- --cirth-card-sectioning-background-color: #1a1f28;
3751
- --cirth-dropdown-background-color: #181c25;
3752
- --cirth-dropdown-border-color: #202632;
3753
- --cirth-dropdown-box-shadow: var(--cirth-box-shadow);
3754
- --cirth-dropdown-color: var(--cirth-color);
3755
- --cirth-dropdown-hover-background-color: #202632;
3756
- --cirth-loading-spinner-opacity: var(--cirth-opacity-disabled);
3757
- --cirth-modal-overlay-background-color: rgba(7.5, 8.5, 10, var(--cirth-opacity-overlay));
3758
- --cirth-progress-background-color: #202632;
3759
- --cirth-progress-color: var(--cirth-primary-background);
3760
- --cirth-tooltip-background-color: var(--cirth-contrast-background);
3761
- --cirth-tooltip-color: var(--cirth-contrast-inverse);
3762
- --cirth-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(42, 123, 111)' 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");
3763
- --cirth-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(149.5, 74, 80)' 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");
3764
- }
3765
-
3766
- :host(:not([data-theme])) {
2581
+ :root:not([data-theme]), :host(:not([data-theme])) {
3767
2582
  --lightningcss-light: ;
3768
2583
  --lightningcss-dark: initial;
3769
2584
  color-scheme: dark;
3770
- --cirth-background-color: #13171f;
3771
- --cirth-color: #c2c7d0;
3772
- --cirth-text-selection-color: rgba(1, 170, 255, .19);
3773
- --cirth-muted-color: #7b8495;
3774
- --cirth-muted-border-color: #202632;
3775
- --cirth-primary: #01aaff;
3776
- --cirth-primary-background: #0172ad;
2585
+ --cirth-background-color: oklch(20.15% .003 264);
2586
+ --cirth-color: oklch(83% .016 264);
2587
+ --cirth-text-selection-color: oklch(70% .129 69.35 / .1875);
2588
+ --cirth-muted-color: oklch(61.3% .032 264);
2589
+ --cirth-muted-border-color: oklch(26.7% .011 264);
2590
+ --cirth-primary: oklch(70% .129 69.35);
2591
+ --cirth-primary-background: oklch(52.7% .097 69.35);
3777
2592
  --cirth-primary-border: var(--cirth-primary-background);
3778
- --cirth-primary-underline: rgba(1, 170, 255, .5);
3779
- --cirth-primary-hover: #79c0ff;
3780
- --cirth-primary-hover-background: #017fc0;
2593
+ --cirth-primary-underline: oklch(70% .129 69.35 / .5);
2594
+ --cirth-primary-hover: oklch(78.7% .146 69.35);
2595
+ --cirth-primary-hover-background: oklch(57% .105 69.35);
3781
2596
  --cirth-primary-hover-border: var(--cirth-primary-hover-background);
3782
2597
  --cirth-primary-hover-underline: var(--cirth-primary-hover);
3783
- --cirth-primary-focus: rgba(1, 170, 255, .376);
3784
- --cirth-primary-inverse: #fff;
3785
- --cirth-secondary: #969eaf;
3786
- --cirth-secondary-background: #525f7a;
2598
+ --cirth-primary-focus: oklch(70% .129 69.35 / .7);
2599
+ --cirth-primary-inverse: oklch(100% 0 0);
2600
+ --cirth-secondary: oklch(70% .028 264);
2601
+ --cirth-secondary-background: oklch(48.3% .03 264);
3787
2602
  --cirth-secondary-border: var(--cirth-secondary-background);
3788
- --cirth-secondary-underline: rgba(150, 158, 175, .5);
3789
- --cirth-secondary-hover: #b3b9c5;
3790
- --cirth-secondary-hover-background: #5d6b89;
2603
+ --cirth-secondary-underline: oklch(70% .028 264 / .5);
2604
+ --cirth-secondary-hover: oklch(78.7% .021 264);
2605
+ --cirth-secondary-hover-background: oklch(52.7% .032 264);
3791
2606
  --cirth-secondary-hover-border: var(--cirth-secondary-hover-background);
3792
2607
  --cirth-secondary-hover-underline: var(--cirth-secondary-hover);
3793
- --cirth-secondary-focus: rgba(144, 158, 190, .25);
3794
- --cirth-secondary-inverse: #fff;
3795
- --cirth-contrast: #dfe3eb;
3796
- --cirth-contrast-background: #eff1f4;
2608
+ --cirth-secondary-focus: oklch(70% .028 264 / .7);
2609
+ --cirth-secondary-inverse: oklch(100% 0 0);
2610
+ --cirth-contrast: oklch(91.7% .006 264);
2611
+ --cirth-contrast-background: oklch(96% 0 264);
3797
2612
  --cirth-contrast-border: var(--cirth-contrast-background);
3798
- --cirth-contrast-underline: rgba(223, 227, 235, .5);
3799
- --cirth-contrast-hover: #fff;
3800
- --cirth-contrast-hover-background: #fff;
2613
+ --cirth-contrast-underline: oklch(91.7% .006 264 / .5);
2614
+ --cirth-contrast-hover: oklch(100% 0 0);
2615
+ --cirth-contrast-hover-background: oklch(100% 0 0);
3801
2616
  --cirth-contrast-hover-border: var(--cirth-contrast-hover-background);
3802
2617
  --cirth-contrast-hover-underline: var(--cirth-contrast-hover);
3803
- --cirth-contrast-focus: rgba(207, 213, 226, .25);
3804
- --cirth-contrast-inverse: #000;
3805
- --cirth-box-shadow: .0145rem .029rem .174rem rgba(7, 9, 12, .016), .0335rem .067rem .402rem rgba(7, 9, 12, .024), .0625rem .125rem .75rem rgba(7, 9, 12, .03), .1125rem .225rem 1.35rem rgba(7, 9, 12, .035), .2085rem .417rem 2.502rem rgba(7, 9, 12, .043), .5rem 1rem 6rem rgba(7, 9, 12, .06), 0 0 0 .0625rem rgba(7, 9, 12, .016);
3806
- --cirth-h1-color: #f0f1f3;
3807
- --cirth-h2-color: #e0e3e7;
3808
- --cirth-h3-color: #c2c7d0;
3809
- --cirth-h4-color: #b3b9c5;
3810
- --cirth-h5-color: #a4acba;
3811
- --cirth-h6-color: #8891a4;
3812
- --cirth-mark-background-color: #014063;
3813
- --cirth-mark-color: #fff;
3814
- --cirth-ins-color: #62af9a;
3815
- --cirth-del-color: #ce7e7b;
2618
+ --cirth-contrast-focus: oklch(87.3% .011 264 / .5);
2619
+ --cirth-contrast-inverse: oklch(0% 0 0);
2620
+ --cirth-box-shadow: .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);
2621
+ --cirth-h1-color: oklch(96% 0 264);
2622
+ --cirth-h2-color: oklch(91.7% .006 264);
2623
+ --cirth-h3-color: oklch(83% .016 264);
2624
+ --cirth-h4-color: oklch(78.7% .021 264);
2625
+ --cirth-h5-color: oklch(74.3% .025 264);
2626
+ --cirth-h6-color: oklch(65.7% .03 264);
2627
+ --cirth-mark-background-color: oklch(35.3% .063 78);
2628
+ --cirth-mark-color: oklch(100% 0 0);
2629
+ --cirth-ins-color: oklch(78.7% .15 160.59);
2630
+ --cirth-del-color: oklch(78.7% .106 29.73);
3816
2631
  --cirth-blockquote-border-color: var(--cirth-muted-border-color);
3817
2632
  --cirth-blockquote-footer-color: var(--cirth-muted-color);
3818
- --cirth-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
3819
- --cirth-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
2633
+ --cirth-button-box-shadow: 0 0 0 #0000;
2634
+ --cirth-button-hover-box-shadow: 0 0 0 #0000;
3820
2635
  --cirth-table-border-color: var(--cirth-muted-border-color);
3821
- --cirth-table-row-stripped-background-color: rgba(111, 120, 135, .04);
3822
- --cirth-code-background-color: #1a1f28;
3823
- --cirth-code-color: #8891a4;
2636
+ --cirth-table-row-stripped-background-color: oklch(57% .032 264 / .0375);
2637
+ --cirth-code-background-color: oklch(23.4% .00725 264);
2638
+ --cirth-code-color: oklch(65.7% .03 264);
3824
2639
  --cirth-code-kbd-background-color: var(--cirth-color);
3825
2640
  --cirth-code-kbd-color: var(--cirth-background-color);
3826
- --cirth-form-element-background-color: #1c212c;
3827
- --cirth-form-element-selected-background-color: #2a3140;
3828
- --cirth-form-element-border-color: #2a3140;
3829
- --cirth-form-element-color: #e0e3e7;
3830
- --cirth-form-element-placeholder-color: #8891a4;
3831
- --cirth-form-element-active-background-color: #1a1f28;
2641
+ --cirth-form-element-background-color: oklch(24.5% .0085 264);
2642
+ --cirth-form-element-selected-background-color: oklch(31% .016 264);
2643
+ --cirth-form-element-border-color: oklch(52.7% .032 264);
2644
+ --cirth-form-element-color: oklch(91.7% .006 264);
2645
+ --cirth-form-element-placeholder-color: oklch(65.7% .03 264);
2646
+ --cirth-form-element-active-background-color: oklch(23.4% .00725 264);
3832
2647
  --cirth-form-element-active-border-color: var(--cirth-primary-border);
3833
2648
  --cirth-form-element-focus-color: var(--cirth-primary-border);
3834
2649
  --cirth-form-element-disabled-opacity: var(--cirth-opacity-disabled);
3835
- --cirth-form-element-invalid-border-color: #964a50;
3836
- --cirth-form-element-invalid-active-border-color: #b7403b;
2650
+ --cirth-form-element-invalid-border-color: oklch(70% .163 29.73);
2651
+ --cirth-form-element-invalid-active-border-color: oklch(78.7% .106 29.73);
3837
2652
  --cirth-form-element-invalid-focus-color: var(--cirth-form-element-invalid-active-border-color);
3838
- --cirth-form-element-valid-border-color: #2a7b6f;
3839
- --cirth-form-element-valid-active-border-color: #16896a;
2653
+ --cirth-form-element-valid-border-color: oklch(70% .133 160.59);
2654
+ --cirth-form-element-valid-active-border-color: oklch(78.7% .15 160.59);
3840
2655
  --cirth-form-element-valid-focus-color: var(--cirth-form-element-valid-active-border-color);
3841
- --cirth-switch-background-color: #333c4e;
2656
+ --cirth-switch-background-color: oklch(52.7% .032 264);
3842
2657
  --cirth-switch-checked-background-color: var(--cirth-primary-background);
3843
- --cirth-switch-color: #fff;
3844
- --cirth-switch-thumb-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
3845
- --cirth-range-border-color: #202632;
3846
- --cirth-range-active-border-color: #2a3140;
2658
+ --cirth-switch-color: oklch(100% 0 0);
2659
+ --cirth-switch-thumb-box-shadow: 0 0 0 #0000;
2660
+ --cirth-range-border-color: oklch(26.7% .011 264);
2661
+ --cirth-range-active-border-color: oklch(31% .016 264);
3847
2662
  --cirth-range-thumb-border-color: var(--cirth-background-color);
3848
2663
  --cirth-range-thumb-color: var(--cirth-secondary-background);
3849
2664
  --cirth-range-thumb-active-color: var(--cirth-primary-background);
@@ -3851,46 +2666,31 @@ details summary[role="button"]:not(.outline):after {
3851
2666
  --cirth-accordion-active-summary-color: var(--cirth-primary-hover);
3852
2667
  --cirth-accordion-close-summary-color: var(--cirth-color);
3853
2668
  --cirth-accordion-open-summary-color: var(--cirth-muted-color);
3854
- --cirth-card-background-color: #181c25;
2669
+ --cirth-card-background-color: oklch(22.3% .006 264);
3855
2670
  --cirth-card-border-color: var(--cirth-card-background-color);
3856
2671
  --cirth-card-box-shadow: var(--cirth-box-shadow);
3857
- --cirth-card-sectioning-background-color: #1a1f28;
3858
- --cirth-dropdown-background-color: #181c25;
3859
- --cirth-dropdown-border-color: #202632;
2672
+ --cirth-card-sectioning-background-color: oklch(23.4% .00725 264);
2673
+ --cirth-dropdown-background-color: oklch(22.3% .006 264);
2674
+ --cirth-dropdown-border-color: oklch(26.7% .011 264);
3860
2675
  --cirth-dropdown-box-shadow: var(--cirth-box-shadow);
3861
2676
  --cirth-dropdown-color: var(--cirth-color);
3862
- --cirth-dropdown-hover-background-color: #202632;
2677
+ --cirth-dropdown-hover-background-color: oklch(26.7% .011 264);
3863
2678
  --cirth-loading-spinner-opacity: var(--cirth-opacity-disabled);
3864
- --cirth-modal-overlay-background-color: rgba(7.5, 8.5, 10, var(--cirth-opacity-overlay));
3865
- --cirth-progress-background-color: #202632;
3866
- --cirth-progress-color: var(--cirth-primary-background);
2679
+ --cirth-modal-overlay-background-color: oklch(9% 0 312deg / var(--cirth-opacity-overlay));
2680
+ --cirth-progress-background-color: oklch(26.7% .011 264);
2681
+ --cirth-progress-border-color: oklch(52.7% .032 264);
2682
+ --cirth-progress-color: oklch(61.3% .113 69.35);
3867
2683
  --cirth-tooltip-background-color: var(--cirth-contrast-background);
3868
2684
  --cirth-tooltip-color: var(--cirth-contrast-inverse);
3869
- --cirth-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(42, 123, 111)' 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");
3870
- --cirth-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(149.5, 74, 80)' 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");
2685
+ --cirth-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' 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");
2686
+ --cirth-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' 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");
3871
2687
  }
3872
2688
 
3873
- :root:not([data-theme]) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]) {
2689
+ :root:not([data-theme]) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]), :host(:not([data-theme])) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]) {
3874
2690
  --cirth-form-element-focus-color: var(--cirth-primary-focus);
3875
2691
  }
3876
2692
 
3877
- :host(:not([data-theme])) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]) {
3878
- --cirth-form-element-focus-color: var(--cirth-primary-focus);
3879
- }
3880
-
3881
- :root:not([data-theme]) details summary[role="button"].contrast:not(.outline):after {
3882
- filter: brightness(0);
3883
- }
3884
-
3885
- :host(:not([data-theme])) details summary[role="button"].contrast:not(.outline):after {
3886
- filter: brightness(0);
3887
- }
3888
-
3889
- :root:not([data-theme]) [aria-busy="true"]:not(:is(input, select, textarea)).contrast:is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]):not(.outline):before {
3890
- filter: brightness(0);
3891
- }
3892
-
3893
- :host(:not([data-theme])) [aria-busy="true"]:not(:is(input, select, textarea)).contrast:is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]):not(.outline):before {
2693
+ :root:not([data-theme]) details summary[role="button"].contrast:not(.outline):after, :host(:not([data-theme])) details summary[role="button"].contrast:not(.outline):after, :root:not([data-theme]) [aria-busy="true"]:not(input, select, textarea).contrast:is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]):not(.outline):before, :host(:not([data-theme])) [aria-busy="true"]:not(input, select, textarea).contrast:is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]):not(.outline):before {
3894
2694
  filter: brightness(0);
3895
2695
  }
3896
2696
  }
@@ -3899,83 +2699,83 @@ details summary[role="button"]:not(.outline):after {
3899
2699
  --lightningcss-light: ;
3900
2700
  --lightningcss-dark: initial;
3901
2701
  color-scheme: dark;
3902
- --cirth-background-color: #13171f;
3903
- --cirth-color: #c2c7d0;
3904
- --cirth-text-selection-color: rgba(1, 170, 255, .19);
3905
- --cirth-muted-color: #7b8495;
3906
- --cirth-muted-border-color: #202632;
3907
- --cirth-primary: #01aaff;
3908
- --cirth-primary-background: #0172ad;
2702
+ --cirth-background-color: oklch(20.15% .003 264);
2703
+ --cirth-color: oklch(83% .016 264);
2704
+ --cirth-text-selection-color: oklch(70% .129 69.35 / .1875);
2705
+ --cirth-muted-color: oklch(61.3% .032 264);
2706
+ --cirth-muted-border-color: oklch(26.7% .011 264);
2707
+ --cirth-primary: oklch(70% .129 69.35);
2708
+ --cirth-primary-background: oklch(52.7% .097 69.35);
3909
2709
  --cirth-primary-border: var(--cirth-primary-background);
3910
- --cirth-primary-underline: rgba(1, 170, 255, .5);
3911
- --cirth-primary-hover: #79c0ff;
3912
- --cirth-primary-hover-background: #017fc0;
2710
+ --cirth-primary-underline: oklch(70% .129 69.35 / .5);
2711
+ --cirth-primary-hover: oklch(78.7% .146 69.35);
2712
+ --cirth-primary-hover-background: oklch(57% .105 69.35);
3913
2713
  --cirth-primary-hover-border: var(--cirth-primary-hover-background);
3914
2714
  --cirth-primary-hover-underline: var(--cirth-primary-hover);
3915
- --cirth-primary-focus: rgba(1, 170, 255, .376);
3916
- --cirth-primary-inverse: #fff;
3917
- --cirth-secondary: #969eaf;
3918
- --cirth-secondary-background: #525f7a;
2715
+ --cirth-primary-focus: oklch(70% .129 69.35 / .7);
2716
+ --cirth-primary-inverse: oklch(100% 0 0);
2717
+ --cirth-secondary: oklch(70% .028 264);
2718
+ --cirth-secondary-background: oklch(48.3% .03 264);
3919
2719
  --cirth-secondary-border: var(--cirth-secondary-background);
3920
- --cirth-secondary-underline: rgba(150, 158, 175, .5);
3921
- --cirth-secondary-hover: #b3b9c5;
3922
- --cirth-secondary-hover-background: #5d6b89;
2720
+ --cirth-secondary-underline: oklch(70% .028 264 / .5);
2721
+ --cirth-secondary-hover: oklch(78.7% .021 264);
2722
+ --cirth-secondary-hover-background: oklch(52.7% .032 264);
3923
2723
  --cirth-secondary-hover-border: var(--cirth-secondary-hover-background);
3924
2724
  --cirth-secondary-hover-underline: var(--cirth-secondary-hover);
3925
- --cirth-secondary-focus: rgba(144, 158, 190, .25);
3926
- --cirth-secondary-inverse: #fff;
3927
- --cirth-contrast: #dfe3eb;
3928
- --cirth-contrast-background: #eff1f4;
2725
+ --cirth-secondary-focus: oklch(70% .028 264 / .7);
2726
+ --cirth-secondary-inverse: oklch(100% 0 0);
2727
+ --cirth-contrast: oklch(91.7% .006 264);
2728
+ --cirth-contrast-background: oklch(96% 0 264);
3929
2729
  --cirth-contrast-border: var(--cirth-contrast-background);
3930
- --cirth-contrast-underline: rgba(223, 227, 235, .5);
3931
- --cirth-contrast-hover: #fff;
3932
- --cirth-contrast-hover-background: #fff;
2730
+ --cirth-contrast-underline: oklch(91.7% .006 264 / .5);
2731
+ --cirth-contrast-hover: oklch(100% 0 0);
2732
+ --cirth-contrast-hover-background: oklch(100% 0 0);
3933
2733
  --cirth-contrast-hover-border: var(--cirth-contrast-hover-background);
3934
2734
  --cirth-contrast-hover-underline: var(--cirth-contrast-hover);
3935
- --cirth-contrast-focus: rgba(207, 213, 226, .25);
3936
- --cirth-contrast-inverse: #000;
3937
- --cirth-box-shadow: .0145rem .029rem .174rem rgba(7, 9, 12, .016), .0335rem .067rem .402rem rgba(7, 9, 12, .024), .0625rem .125rem .75rem rgba(7, 9, 12, .03), .1125rem .225rem 1.35rem rgba(7, 9, 12, .035), .2085rem .417rem 2.502rem rgba(7, 9, 12, .043), .5rem 1rem 6rem rgba(7, 9, 12, .06), 0 0 0 .0625rem rgba(7, 9, 12, .016);
3938
- --cirth-h1-color: #f0f1f3;
3939
- --cirth-h2-color: #e0e3e7;
3940
- --cirth-h3-color: #c2c7d0;
3941
- --cirth-h4-color: #b3b9c5;
3942
- --cirth-h5-color: #a4acba;
3943
- --cirth-h6-color: #8891a4;
3944
- --cirth-mark-background-color: #014063;
3945
- --cirth-mark-color: #fff;
3946
- --cirth-ins-color: #62af9a;
3947
- --cirth-del-color: #ce7e7b;
2735
+ --cirth-contrast-focus: oklch(87.3% .011 264 / .5);
2736
+ --cirth-contrast-inverse: oklch(0% 0 0);
2737
+ --cirth-box-shadow: .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);
2738
+ --cirth-h1-color: oklch(96% 0 264);
2739
+ --cirth-h2-color: oklch(91.7% .006 264);
2740
+ --cirth-h3-color: oklch(83% .016 264);
2741
+ --cirth-h4-color: oklch(78.7% .021 264);
2742
+ --cirth-h5-color: oklch(74.3% .025 264);
2743
+ --cirth-h6-color: oklch(65.7% .03 264);
2744
+ --cirth-mark-background-color: oklch(35.3% .063 78);
2745
+ --cirth-mark-color: oklch(100% 0 0);
2746
+ --cirth-ins-color: oklch(78.7% .15 160.59);
2747
+ --cirth-del-color: oklch(78.7% .106 29.73);
3948
2748
  --cirth-blockquote-border-color: var(--cirth-muted-border-color);
3949
2749
  --cirth-blockquote-footer-color: var(--cirth-muted-color);
3950
- --cirth-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
3951
- --cirth-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
2750
+ --cirth-button-box-shadow: 0 0 0 #0000;
2751
+ --cirth-button-hover-box-shadow: 0 0 0 #0000;
3952
2752
  --cirth-table-border-color: var(--cirth-muted-border-color);
3953
- --cirth-table-row-stripped-background-color: rgba(111, 120, 135, .04);
3954
- --cirth-code-background-color: #1a1f28;
3955
- --cirth-code-color: #8891a4;
2753
+ --cirth-table-row-stripped-background-color: oklch(57% .032 264 / .0375);
2754
+ --cirth-code-background-color: oklch(23.4% .00725 264);
2755
+ --cirth-code-color: oklch(65.7% .03 264);
3956
2756
  --cirth-code-kbd-background-color: var(--cirth-color);
3957
2757
  --cirth-code-kbd-color: var(--cirth-background-color);
3958
- --cirth-form-element-background-color: #1c212c;
3959
- --cirth-form-element-selected-background-color: #2a3140;
3960
- --cirth-form-element-border-color: #2a3140;
3961
- --cirth-form-element-color: #e0e3e7;
3962
- --cirth-form-element-placeholder-color: #8891a4;
3963
- --cirth-form-element-active-background-color: #1a1f28;
2758
+ --cirth-form-element-background-color: oklch(24.5% .0085 264);
2759
+ --cirth-form-element-selected-background-color: oklch(31% .016 264);
2760
+ --cirth-form-element-border-color: oklch(52.7% .032 264);
2761
+ --cirth-form-element-color: oklch(91.7% .006 264);
2762
+ --cirth-form-element-placeholder-color: oklch(65.7% .03 264);
2763
+ --cirth-form-element-active-background-color: oklch(23.4% .00725 264);
3964
2764
  --cirth-form-element-active-border-color: var(--cirth-primary-border);
3965
2765
  --cirth-form-element-focus-color: var(--cirth-primary-border);
3966
2766
  --cirth-form-element-disabled-opacity: var(--cirth-opacity-disabled);
3967
- --cirth-form-element-invalid-border-color: #964a50;
3968
- --cirth-form-element-invalid-active-border-color: #b7403b;
2767
+ --cirth-form-element-invalid-border-color: oklch(70% .163 29.73);
2768
+ --cirth-form-element-invalid-active-border-color: oklch(78.7% .106 29.73);
3969
2769
  --cirth-form-element-invalid-focus-color: var(--cirth-form-element-invalid-active-border-color);
3970
- --cirth-form-element-valid-border-color: #2a7b6f;
3971
- --cirth-form-element-valid-active-border-color: #16896a;
2770
+ --cirth-form-element-valid-border-color: oklch(70% .133 160.59);
2771
+ --cirth-form-element-valid-active-border-color: oklch(78.7% .15 160.59);
3972
2772
  --cirth-form-element-valid-focus-color: var(--cirth-form-element-valid-active-border-color);
3973
- --cirth-switch-background-color: #333c4e;
2773
+ --cirth-switch-background-color: oklch(52.7% .032 264);
3974
2774
  --cirth-switch-checked-background-color: var(--cirth-primary-background);
3975
- --cirth-switch-color: #fff;
3976
- --cirth-switch-thumb-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
3977
- --cirth-range-border-color: #202632;
3978
- --cirth-range-active-border-color: #2a3140;
2775
+ --cirth-switch-color: oklch(100% 0 0);
2776
+ --cirth-switch-thumb-box-shadow: 0 0 0 #0000;
2777
+ --cirth-range-border-color: oklch(26.7% .011 264);
2778
+ --cirth-range-active-border-color: oklch(31% .016 264);
3979
2779
  --cirth-range-thumb-border-color: var(--cirth-background-color);
3980
2780
  --cirth-range-thumb-color: var(--cirth-secondary-background);
3981
2781
  --cirth-range-thumb-active-color: var(--cirth-primary-background);
@@ -3983,49 +2783,34 @@ details summary[role="button"]:not(.outline):after {
3983
2783
  --cirth-accordion-active-summary-color: var(--cirth-primary-hover);
3984
2784
  --cirth-accordion-close-summary-color: var(--cirth-color);
3985
2785
  --cirth-accordion-open-summary-color: var(--cirth-muted-color);
3986
- --cirth-card-background-color: #181c25;
2786
+ --cirth-card-background-color: oklch(22.3% .006 264);
3987
2787
  --cirth-card-border-color: var(--cirth-card-background-color);
3988
2788
  --cirth-card-box-shadow: var(--cirth-box-shadow);
3989
- --cirth-card-sectioning-background-color: #1a1f28;
3990
- --cirth-dropdown-background-color: #181c25;
3991
- --cirth-dropdown-border-color: #202632;
2789
+ --cirth-card-sectioning-background-color: oklch(23.4% .00725 264);
2790
+ --cirth-dropdown-background-color: oklch(22.3% .006 264);
2791
+ --cirth-dropdown-border-color: oklch(26.7% .011 264);
3992
2792
  --cirth-dropdown-box-shadow: var(--cirth-box-shadow);
3993
2793
  --cirth-dropdown-color: var(--cirth-color);
3994
- --cirth-dropdown-hover-background-color: #202632;
2794
+ --cirth-dropdown-hover-background-color: oklch(26.7% .011 264);
3995
2795
  --cirth-loading-spinner-opacity: var(--cirth-opacity-disabled);
3996
- --cirth-modal-overlay-background-color: rgba(7.5, 8.5, 10, var(--cirth-opacity-overlay));
3997
- --cirth-progress-background-color: #202632;
3998
- --cirth-progress-color: var(--cirth-primary-background);
2796
+ --cirth-modal-overlay-background-color: oklch(9% 0 312deg / var(--cirth-opacity-overlay));
2797
+ --cirth-progress-background-color: oklch(26.7% .011 264);
2798
+ --cirth-progress-border-color: oklch(52.7% .032 264);
2799
+ --cirth-progress-color: oklch(61.3% .113 69.35);
3999
2800
  --cirth-tooltip-background-color: var(--cirth-contrast-background);
4000
2801
  --cirth-tooltip-color: var(--cirth-contrast-inverse);
4001
- --cirth-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(42, 123, 111)' 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");
4002
- --cirth-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(149.5, 74, 80)' 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");
2802
+ --cirth-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' 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");
2803
+ --cirth-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' 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");
4003
2804
  }
4004
2805
 
4005
2806
  [data-theme="dark"] input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]) {
4006
2807
  --cirth-form-element-focus-color: var(--cirth-primary-focus);
4007
2808
  }
4008
2809
 
4009
- [data-theme="dark"] details summary[role="button"].contrast:not(.outline):after {
4010
- filter: brightness(0);
4011
- }
4012
-
4013
- [data-theme="dark"] [aria-busy="true"]:not(:is(input, select, textarea)).contrast:is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]):not(.outline):before {
2810
+ [data-theme="dark"] details summary[role="button"].contrast:not(.outline):after, [data-theme="dark"] [aria-busy="true"]:not(input, select, textarea).contrast:is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]):not(.outline):before {
4014
2811
  filter: brightness(0);
4015
2812
  }
4016
2813
 
4017
- progress {
4018
- accent-color: var(--cirth-primary);
4019
- }
4020
-
4021
- [type="checkbox"] {
4022
- accent-color: var(--cirth-primary);
4023
- }
4024
-
4025
- [type="radio"] {
4026
- accent-color: var(--cirth-primary);
4027
- }
4028
-
4029
- [type="range"] {
2814
+ progress, [type="checkbox"], [type="radio"], [type="range"] {
4030
2815
  accent-color: var(--cirth-primary);
4031
2816
  }