@cirthcss/cirth 0.12.0 → 0.14.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.
@@ -0,0 +1,38 @@
1
+ :root, :host {
2
+ --cirth-primary: light-dark(oklch(50% .16 300), oklch(70% .14 300));
3
+ --cirth-canvas: light-dark(oklch(98% .012 300), oklch(24% .028 295));
4
+ --cirth-card-background-color: light-dark(oklch(100% 0 0), oklch(29% .032 295));
5
+ --cirth-color: light-dark(oklch(36% .03 295), oklch(93% .012 300));
6
+ --cirth-muted-color: light-dark(oklch(52% .035 295), oklch(70% .028 295));
7
+ --cirth-muted-border-color: light-dark(oklch(90% .02 300), oklch(36% .03 295));
8
+ --cirth-link-visited-color: light-dark(oklch(50% .03 295), oklch(70% .025 295));
9
+ --cirth-error: light-dark(oklch(45% .16 25), oklch(74% .13 25));
10
+ --cirth-success: light-dark(oklch(52% .11 155), oklch(72% .11 155));
11
+ --cirth-warning: light-dark(oklch(56% .1 75), oklch(74% .11 75));
12
+ --cirth-border-radius: var(--cirth-radius-2xl);
13
+ --cirth-spacing: var(--cirth-space-5);
14
+ --cirth-font-family: ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN", system-ui,
15
+ "Segoe UI", Roboto, sans-serif, var(--cirth-font-family-emoji);
16
+ --cirth-font-family-display: var(--cirth-font-family);
17
+ --cirth-font-weight: var(--cirth-font-weight-medium);
18
+ --cirth-line-height: var(--cirth-line-height-relaxed);
19
+ --cirth-transition: var(--cirth-duration-slow)
20
+ cubic-bezier(.34, 1.56, .64, 1);
21
+ --cirth-box-shadow: 0 .0625rem .125rem oklch(36% .03 295 / .06),
22
+ 0 .75rem 1.5rem oklch(36% .03 295 / .1);
23
+ --cirth-primary-hover: light-dark(oklch(56% .18 300), oklch(80% .13 300));
24
+ --cirth-primary-hover-background: oklch(58% .18 300);
25
+ }
26
+
27
+ @media (prefers-contrast: more) {
28
+ :root, :host {
29
+ --cirth-primary: light-dark(oklch(41% .17 300), oklch(86% .1 300));
30
+ --cirth-primary-background: light-dark(oklch(41% .17 300), oklch(42% .15 300));
31
+ --cirth-primary-hover-background: light-dark(oklch(34% .15 300), oklch(35% .13 300));
32
+ --cirth-primary-hover: light-dark(oklch(34% .16 300), oklch(92% .07 300));
33
+ --cirth-color: light-dark(oklch(22% .02 295), oklch(98% .006 300));
34
+ --cirth-muted-color: light-dark(oklch(40% .035 295), oklch(82% .02 295));
35
+ --cirth-muted-border-color: light-dark(oklch(58% .03 295), oklch(62% .03 295));
36
+ --cirth-link-visited-color: light-dark(oklch(36% .03 295), oklch(84% .02 295));
37
+ }
38
+ }
@@ -0,0 +1 @@
1
+ :root,:host{--cirth-primary:light-dark(oklch(50% .16 300),oklch(70% .14 300));--cirth-canvas:light-dark(oklch(98% .012 300),oklch(24% .028 295));--cirth-card-background-color:light-dark(oklch(100% 0 0),oklch(29% .032 295));--cirth-color:light-dark(oklch(36% .03 295),oklch(93% .012 300));--cirth-muted-color:light-dark(oklch(52% .035 295),oklch(70% .028 295));--cirth-muted-border-color:light-dark(oklch(90% .02 300),oklch(36% .03 295));--cirth-link-visited-color:light-dark(oklch(50% .03 295),oklch(70% .025 295));--cirth-error:light-dark(oklch(45% .16 25),oklch(74% .13 25));--cirth-success:light-dark(oklch(52% .11 155),oklch(72% .11 155));--cirth-warning:light-dark(oklch(56% .1 75),oklch(74% .11 75));--cirth-border-radius:var(--cirth-radius-2xl);--cirth-spacing:var(--cirth-space-5);--cirth-font-family:ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN", system-ui, "Segoe UI", Roboto, sans-serif, var(--cirth-font-family-emoji);--cirth-font-family-display:var(--cirth-font-family);--cirth-font-weight:var(--cirth-font-weight-medium);--cirth-line-height:var(--cirth-line-height-relaxed);--cirth-transition:var(--cirth-duration-slow) cubic-bezier(.34, 1.56, .64, 1);--cirth-box-shadow:0 .0625rem .125rem oklch(36% .03 295/.06), 0 .75rem 1.5rem oklch(36% .03 295/.1);--cirth-primary-hover:light-dark(oklch(56% .18 300),oklch(80% .13 300));--cirth-primary-hover-background:oklch(58% .18 300)}@media (prefers-contrast:more){:root,:host{--cirth-primary:light-dark(oklch(41% .17 300),oklch(86% .1 300));--cirth-primary-background:light-dark(oklch(41% .17 300),oklch(42% .15 300));--cirth-primary-hover-background:light-dark(oklch(34% .15 300),oklch(35% .13 300));--cirth-primary-hover:light-dark(oklch(34% .16 300),oklch(92% .07 300));--cirth-color:light-dark(oklch(22% .02 295),oklch(98% .006 300));--cirth-muted-color:light-dark(oklch(40% .035 295),oklch(82% .02 295));--cirth-muted-border-color:light-dark(oklch(58% .03 295),oklch(62% .03 295));--cirth-link-visited-color:light-dark(oklch(36% .03 295),oklch(84% .02 295))}}
package/package.json CHANGED
@@ -1,17 +1,21 @@
1
1
  {
2
2
  "name": "@cirthcss/cirth",
3
- "version": "0.12.0",
3
+ "version": "0.14.0",
4
4
  "description": "Semantic-first CSS framework for production-ready interfaces",
5
5
  "author": "Riccardo Pastori",
6
6
  "main": "dist/cirth.min.css",
7
7
  "style": "dist/cirth.min.css",
8
8
  "exports": {
9
9
  ".": "./dist/cirth.min.css",
10
+ "./print": "./dist/cirth.print.min.css",
10
11
  "./classless": "./dist/cirth.classless.min.css",
12
+ "./classless/print": "./dist/cirth.print.classless.min.css",
11
13
  "./scoped": "./dist/cirth.scoped.min.css",
14
+ "./scoped/print": "./dist/cirth.print.scoped.min.css",
12
15
  "./classless/scoped": "./dist/cirth.classless.scoped.min.css",
13
- "./presets/coral": "./dist/presets/coral.min.css",
14
- "./presets/cobalt": "./dist/presets/cobalt.min.css",
16
+ "./classless/scoped/print": "./dist/cirth.print.classless.scoped.min.css",
17
+ "./presets/plain": "./dist/presets/plain.min.css",
18
+ "./presets/playroom": "./dist/presets/playroom.min.css",
15
19
  "./presets/*": "./dist/presets/*",
16
20
  "./dist/*": "./dist/*",
17
21
  "./package.json": "./package.json"
@@ -98,7 +102,6 @@
98
102
  "FirefoxAndroid >= 130",
99
103
  "iOS >= 18.2",
100
104
  "Opera >= 109",
101
- "OperaMobile >= 73",
102
105
  "Safari >= 18.2",
103
106
  "Samsung >= 27"
104
107
  ]
@@ -1,95 +0,0 @@
1
- :where([data-theme="light"]), :root:where(:not([data-theme="dark"])), :host(:where(:not([data-theme="dark"]))) {
2
- --cirth-background-color: oklch(97.4% .002 258);
3
- --cirth-card-background-color: oklch(100% 0 0);
4
- --cirth-muted-color: oklch(50% .01 258);
5
- --cirth-muted-border-color: oklch(88% .008 258);
6
- --cirth-text-selection-color: oklch(46% .095 258 / .25);
7
- --cirth-primary: oklch(30% .085 258);
8
- --cirth-primary-background: oklch(30% .085 258);
9
- --cirth-primary-underline: oklch(30% .085 258 / .5);
10
- --cirth-primary-hover: oklch(22% .07 258);
11
- --cirth-primary-hover-background: oklch(26% .08 258);
12
- --cirth-primary-focus: oklch(46% .095 258 / .7);
13
- --cirth-link-visited-color: oklch(48.3% .02 258);
14
- --cirth-box-shadow: 0 0 0 .0625rem oklch(30% .085 258 / .14);
15
- }
16
-
17
- @media only screen and (prefers-color-scheme: dark) {
18
- :root:where(:not([data-theme])), :host(:where(:not([data-theme]))) {
19
- --cirth-background-color: oklch(19.5% .006 258);
20
- --cirth-card-background-color: oklch(23% .008 258);
21
- --cirth-muted-color: oklch(65% .02 258);
22
- --cirth-muted-border-color: oklch(30% .02 258);
23
- --cirth-text-selection-color: oklch(52% .1 258 / .1875);
24
- --cirth-primary: oklch(64% .09 258);
25
- --cirth-primary-background: oklch(30% .085 258);
26
- --cirth-primary-underline: oklch(64% .09 258 / .5);
27
- --cirth-primary-hover: oklch(72% .075 258);
28
- --cirth-primary-hover-background: oklch(34% .09 258);
29
- --cirth-primary-focus: oklch(64% .09 258 / .7);
30
- --cirth-link-visited-color: oklch(65% .02 258);
31
- --cirth-box-shadow: 0 0 0 .0625rem oklch(64% .09 258 / .2);
32
- }
33
- }
34
-
35
- :where([data-theme="dark"]) {
36
- --cirth-background-color: oklch(19.5% .006 258);
37
- --cirth-card-background-color: oklch(23% .008 258);
38
- --cirth-muted-color: oklch(65% .02 258);
39
- --cirth-muted-border-color: oklch(30% .02 258);
40
- --cirth-text-selection-color: oklch(52% .1 258 / .1875);
41
- --cirth-primary: oklch(64% .09 258);
42
- --cirth-primary-background: oklch(30% .085 258);
43
- --cirth-primary-underline: oklch(64% .09 258 / .5);
44
- --cirth-primary-hover: oklch(72% .075 258);
45
- --cirth-primary-hover-background: oklch(34% .09 258);
46
- --cirth-primary-focus: oklch(64% .09 258 / .7);
47
- --cirth-link-visited-color: oklch(65% .02 258);
48
- --cirth-box-shadow: 0 0 0 .0625rem oklch(64% .09 258 / .2);
49
- }
50
-
51
- @media (prefers-contrast: more) {
52
- :where([data-theme="light"]), :root:where(:not([data-theme="dark"])), :host(:where(:not([data-theme="dark"]))) {
53
- --cirth-muted-color: oklch(40% .01 258);
54
- --cirth-muted-border-color: oklch(57% .01 258);
55
- --cirth-primary-underline: var(--cirth-primary);
56
- --cirth-primary-focus: oklch(46% .095 258);
57
- --cirth-link-visited-color: oklch(40% .02 258);
58
- }
59
- }
60
-
61
- @media only screen and (prefers-contrast: more) and (prefers-color-scheme: dark) {
62
- :root:where(:not([data-theme])), :host(:where(:not([data-theme]))) {
63
- --cirth-muted-color: oklch(80% .02 258);
64
- --cirth-muted-border-color: oklch(57% .01 258);
65
- --cirth-card-border-color: var(--cirth-muted-border-color);
66
- --cirth-primary: oklch(80% .07 258);
67
- --cirth-primary-hover: oklch(86% .05 258);
68
- --cirth-primary-underline: var(--cirth-primary);
69
- --cirth-primary-focus: oklch(64% .09 258);
70
- --cirth-link-visited-color: oklch(80% .02 258);
71
- }
72
- }
73
-
74
- @media (prefers-contrast: more) {
75
- :where([data-theme="dark"]) {
76
- --cirth-muted-color: oklch(80% .02 258);
77
- --cirth-muted-border-color: oklch(57% .01 258);
78
- --cirth-card-border-color: var(--cirth-muted-border-color);
79
- --cirth-primary: oklch(80% .07 258);
80
- --cirth-primary-hover: oklch(86% .05 258);
81
- --cirth-primary-underline: var(--cirth-primary);
82
- --cirth-primary-focus: oklch(64% .09 258);
83
- --cirth-link-visited-color: oklch(80% .02 258);
84
- }
85
- }
86
-
87
- :root, :host {
88
- --cirth-border-radius: 0;
89
- --cirth-radius-pill: 0;
90
- --cirth-font-family: Arial, "Helvetica Neue", Helvetica, sans-serif,
91
- var(--cirth-font-family-emoji);
92
- --cirth-font-family-display: var(--cirth-font-family);
93
- --cirth-spacing: var(--cirth-space-3);
94
- --cirth-transition: var(--cirth-duration-fast) var(--cirth-ease-out);
95
- }
@@ -1 +0,0 @@
1
- :where([data-theme=light]),:root:where(:not([data-theme=dark])),:host(:where(:not([data-theme=dark]))){--cirth-background-color:oklch(97.4% .002 258);--cirth-card-background-color:oklch(100% 0 0);--cirth-muted-color:oklch(50% .01 258);--cirth-muted-border-color:oklch(88% .008 258);--cirth-text-selection-color:oklch(46% .095 258/.25);--cirth-primary:oklch(30% .085 258);--cirth-primary-background:oklch(30% .085 258);--cirth-primary-underline:oklch(30% .085 258/.5);--cirth-primary-hover:oklch(22% .07 258);--cirth-primary-hover-background:oklch(26% .08 258);--cirth-primary-focus:oklch(46% .095 258/.7);--cirth-link-visited-color:oklch(48.3% .02 258);--cirth-box-shadow:0 0 0 .0625rem oklch(30% .085 258/.14)}@media only screen and (prefers-color-scheme:dark){:root:where(:not([data-theme])),:host(:where(:not([data-theme]))){--cirth-background-color:oklch(19.5% .006 258);--cirth-card-background-color:oklch(23% .008 258);--cirth-muted-color:oklch(65% .02 258);--cirth-muted-border-color:oklch(30% .02 258);--cirth-text-selection-color:oklch(52% .1 258/.1875);--cirth-primary:oklch(64% .09 258);--cirth-primary-background:oklch(30% .085 258);--cirth-primary-underline:oklch(64% .09 258/.5);--cirth-primary-hover:oklch(72% .075 258);--cirth-primary-hover-background:oklch(34% .09 258);--cirth-primary-focus:oklch(64% .09 258/.7);--cirth-link-visited-color:oklch(65% .02 258);--cirth-box-shadow:0 0 0 .0625rem oklch(64% .09 258/.2)}}:where([data-theme=dark]){--cirth-background-color:oklch(19.5% .006 258);--cirth-card-background-color:oklch(23% .008 258);--cirth-muted-color:oklch(65% .02 258);--cirth-muted-border-color:oklch(30% .02 258);--cirth-text-selection-color:oklch(52% .1 258/.1875);--cirth-primary:oklch(64% .09 258);--cirth-primary-background:oklch(30% .085 258);--cirth-primary-underline:oklch(64% .09 258/.5);--cirth-primary-hover:oklch(72% .075 258);--cirth-primary-hover-background:oklch(34% .09 258);--cirth-primary-focus:oklch(64% .09 258/.7);--cirth-link-visited-color:oklch(65% .02 258);--cirth-box-shadow:0 0 0 .0625rem oklch(64% .09 258/.2)}@media (prefers-contrast:more){:where([data-theme=light]),:root:where(:not([data-theme=dark])),:host(:where(:not([data-theme=dark]))){--cirth-muted-color:oklch(40% .01 258);--cirth-muted-border-color:oklch(57% .01 258);--cirth-primary-underline:var(--cirth-primary);--cirth-primary-focus:oklch(46% .095 258);--cirth-link-visited-color:oklch(40% .02 258)}}@media only screen and (prefers-contrast:more) and (prefers-color-scheme:dark){:root:where(:not([data-theme])),:host(:where(:not([data-theme]))){--cirth-muted-color:oklch(80% .02 258);--cirth-muted-border-color:oklch(57% .01 258);--cirth-card-border-color:var(--cirth-muted-border-color);--cirth-primary:oklch(80% .07 258);--cirth-primary-hover:oklch(86% .05 258);--cirth-primary-underline:var(--cirth-primary);--cirth-primary-focus:oklch(64% .09 258);--cirth-link-visited-color:oklch(80% .02 258)}}@media (prefers-contrast:more){:where([data-theme=dark]){--cirth-muted-color:oklch(80% .02 258);--cirth-muted-border-color:oklch(57% .01 258);--cirth-card-border-color:var(--cirth-muted-border-color);--cirth-primary:oklch(80% .07 258);--cirth-primary-hover:oklch(86% .05 258);--cirth-primary-underline:var(--cirth-primary);--cirth-primary-focus:oklch(64% .09 258);--cirth-link-visited-color:oklch(80% .02 258)}}:root,:host{--cirth-border-radius:0;--cirth-radius-pill:0;--cirth-font-family:Arial, "Helvetica Neue", Helvetica, sans-serif, var(--cirth-font-family-emoji);--cirth-font-family-display:var(--cirth-font-family);--cirth-spacing:var(--cirth-space-3);--cirth-transition:var(--cirth-duration-fast) var(--cirth-ease-out)}
@@ -1,103 +0,0 @@
1
- :where([data-theme="light"]), :root:where(:not([data-theme="dark"])), :host(:where(:not([data-theme="dark"]))) {
2
- --cirth-background-color: oklch(97.4% .004 35);
3
- --cirth-card-background-color: oklch(100% 0 0);
4
- --cirth-muted-color: oklch(52% .02 35);
5
- --cirth-muted-border-color: oklch(88% .02 35);
6
- --cirth-text-selection-color: oklch(65% .17 35 / .25);
7
- --cirth-primary: oklch(55% .17 35);
8
- --cirth-primary-background: oklch(55% .17 35);
9
- --cirth-primary-underline: oklch(55% .17 35 / .5);
10
- --cirth-primary-hover: oklch(45% .15 35);
11
- --cirth-primary-hover-background: oklch(50% .16 35);
12
- --cirth-primary-focus: oklch(55% .17 35 / .75);
13
- --cirth-link-visited-color: oklch(48.3% .03 35);
14
- --cirth-box-shadow: .0145rem .029rem .174rem oklch(65% .17 35 / .01698), .0335rem .067rem .402rem oklch(65% .17 35 / .024), .0625rem .125rem .75rem oklch(65% .17 35 / .03), .1125rem .225rem 1.35rem oklch(65% .17 35 / .036), .2085rem .417rem 2.502rem oklch(65% .17 35 / .04302), .5rem 1rem 6rem oklch(65% .17 35 / .06), 0 0 0 .0625rem oklch(65% .17 35 / .015);
15
- --cirth-button-hover-box-shadow: 0 .5rem 1rem
16
- oklch(65% .17 35 / .35);
17
- }
18
-
19
- @media only screen and (prefers-color-scheme: dark) {
20
- :root:where(:not([data-theme])), :host(:where(:not([data-theme]))) {
21
- --cirth-background-color: oklch(19.5% .006 35);
22
- --cirth-card-background-color: oklch(23% .008 35);
23
- --cirth-muted-color: oklch(66% .02 35);
24
- --cirth-muted-border-color: oklch(30% .025 35);
25
- --cirth-text-selection-color: oklch(68% .16 35 / .1875);
26
- --cirth-primary: oklch(68% .16 35);
27
- --cirth-primary-background: oklch(55% .17 35);
28
- --cirth-primary-underline: oklch(68% .16 35 / .5);
29
- --cirth-primary-hover: oklch(80% .1 35);
30
- --cirth-primary-hover-background: oklch(60% .18 35);
31
- --cirth-primary-focus: oklch(68% .16 35 / .7);
32
- --cirth-link-visited-color: oklch(65% .03 35);
33
- --cirth-box-shadow: .0145rem .029rem .174rem oklch(68% .16 35 / .01698), .0335rem .067rem .402rem oklch(68% .16 35 / .024), .0625rem .125rem .75rem oklch(68% .16 35 / .03), .1125rem .225rem 1.35rem oklch(68% .16 35 / .036), .2085rem .417rem 2.502rem oklch(68% .16 35 / .04302), .5rem 1rem 6rem oklch(68% .16 35 / .06), 0 0 0 .0625rem oklch(68% .16 35 / .015);
34
- --cirth-button-hover-box-shadow: 0 .5rem 1rem
35
- oklch(80% .1 35 / .4);
36
- }
37
- }
38
-
39
- :where([data-theme="dark"]) {
40
- --cirth-background-color: oklch(19.5% .006 35);
41
- --cirth-card-background-color: oklch(23% .008 35);
42
- --cirth-muted-color: oklch(66% .02 35);
43
- --cirth-muted-border-color: oklch(30% .025 35);
44
- --cirth-text-selection-color: oklch(68% .16 35 / .1875);
45
- --cirth-primary: oklch(68% .16 35);
46
- --cirth-primary-background: oklch(55% .17 35);
47
- --cirth-primary-underline: oklch(68% .16 35 / .5);
48
- --cirth-primary-hover: oklch(80% .1 35);
49
- --cirth-primary-hover-background: oklch(60% .18 35);
50
- --cirth-primary-focus: oklch(68% .16 35 / .7);
51
- --cirth-link-visited-color: oklch(65% .03 35);
52
- --cirth-box-shadow: .0145rem .029rem .174rem oklch(68% .16 35 / .01698), .0335rem .067rem .402rem oklch(68% .16 35 / .024), .0625rem .125rem .75rem oklch(68% .16 35 / .03), .1125rem .225rem 1.35rem oklch(68% .16 35 / .036), .2085rem .417rem 2.502rem oklch(68% .16 35 / .04302), .5rem 1rem 6rem oklch(68% .16 35 / .06), 0 0 0 .0625rem oklch(68% .16 35 / .015);
53
- --cirth-button-hover-box-shadow: 0 .5rem 1rem
54
- oklch(80% .1 35 / .4);
55
- }
56
-
57
- @media (prefers-contrast: more) {
58
- :where([data-theme="light"]), :root:where(:not([data-theme="dark"])), :host(:where(:not([data-theme="dark"]))) {
59
- --cirth-muted-color: oklch(40% .02 35);
60
- --cirth-muted-border-color: oklch(57% .02 35);
61
- --cirth-primary: oklch(40% .14 35);
62
- --cirth-primary-hover: oklch(35% .12 35);
63
- --cirth-primary-underline: var(--cirth-primary);
64
- --cirth-primary-focus: oklch(45% .15 35);
65
- --cirth-link-visited-color: oklch(40% .03 35);
66
- }
67
- }
68
-
69
- @media only screen and (prefers-contrast: more) and (prefers-color-scheme: dark) {
70
- :root:where(:not([data-theme])), :host(:where(:not([data-theme]))) {
71
- --cirth-muted-color: oklch(80% .02 35);
72
- --cirth-muted-border-color: oklch(57% .02 35);
73
- --cirth-card-border-color: var(--cirth-muted-border-color);
74
- --cirth-primary: oklch(80% .1 35);
75
- --cirth-primary-hover: oklch(85% .08 35);
76
- --cirth-primary-underline: var(--cirth-primary);
77
- --cirth-primary-focus: oklch(68% .16 35);
78
- --cirth-link-visited-color: oklch(80% .03 35);
79
- }
80
- }
81
-
82
- @media (prefers-contrast: more) {
83
- :where([data-theme="dark"]) {
84
- --cirth-muted-color: oklch(80% .02 35);
85
- --cirth-muted-border-color: oklch(57% .02 35);
86
- --cirth-card-border-color: var(--cirth-muted-border-color);
87
- --cirth-primary: oklch(80% .1 35);
88
- --cirth-primary-hover: oklch(85% .08 35);
89
- --cirth-primary-underline: var(--cirth-primary);
90
- --cirth-primary-focus: oklch(68% .16 35);
91
- --cirth-link-visited-color: oklch(80% .03 35);
92
- }
93
- }
94
-
95
- :root, :host {
96
- --cirth-border-radius: var(--cirth-radius-2xl);
97
- --cirth-font-family: "Trebuchet MS", "Segoe UI", Verdana, sans-serif,
98
- var(--cirth-font-family-emoji);
99
- --cirth-font-family-display: var(--cirth-font-family);
100
- --cirth-spacing: var(--cirth-space-5);
101
- --cirth-transition: var(--cirth-duration-slow)
102
- cubic-bezier(.34, 1.56, .64, 1);
103
- }
@@ -1 +0,0 @@
1
- :where([data-theme=light]),:root:where(:not([data-theme=dark])),:host(:where(:not([data-theme=dark]))){--cirth-background-color:oklch(97.4% .004 35);--cirth-card-background-color:oklch(100% 0 0);--cirth-muted-color:oklch(52% .02 35);--cirth-muted-border-color:oklch(88% .02 35);--cirth-text-selection-color:oklch(65% .17 35/.25);--cirth-primary:oklch(55% .17 35);--cirth-primary-background:oklch(55% .17 35);--cirth-primary-underline:oklch(55% .17 35/.5);--cirth-primary-hover:oklch(45% .15 35);--cirth-primary-hover-background:oklch(50% .16 35);--cirth-primary-focus:oklch(55% .17 35/.75);--cirth-link-visited-color:oklch(48.3% .03 35);--cirth-box-shadow:.0145rem .029rem .174rem oklch(65% .17 35/.01698), .0335rem .067rem .402rem oklch(65% .17 35/.024), .0625rem .125rem .75rem oklch(65% .17 35/.03), .1125rem .225rem 1.35rem oklch(65% .17 35/.036), .2085rem .417rem 2.502rem oklch(65% .17 35/.04302), .5rem 1rem 6rem oklch(65% .17 35/.06), 0 0 0 .0625rem oklch(65% .17 35/.015);--cirth-button-hover-box-shadow:0 .5rem 1rem oklch(65% .17 35/.35)}@media only screen and (prefers-color-scheme:dark){:root:where(:not([data-theme])),:host(:where(:not([data-theme]))){--cirth-background-color:oklch(19.5% .006 35);--cirth-card-background-color:oklch(23% .008 35);--cirth-muted-color:oklch(66% .02 35);--cirth-muted-border-color:oklch(30% .025 35);--cirth-text-selection-color:oklch(68% .16 35/.1875);--cirth-primary:oklch(68% .16 35);--cirth-primary-background:oklch(55% .17 35);--cirth-primary-underline:oklch(68% .16 35/.5);--cirth-primary-hover:oklch(80% .1 35);--cirth-primary-hover-background:oklch(60% .18 35);--cirth-primary-focus:oklch(68% .16 35/.7);--cirth-link-visited-color:oklch(65% .03 35);--cirth-box-shadow:.0145rem .029rem .174rem oklch(68% .16 35/.01698), .0335rem .067rem .402rem oklch(68% .16 35/.024), .0625rem .125rem .75rem oklch(68% .16 35/.03), .1125rem .225rem 1.35rem oklch(68% .16 35/.036), .2085rem .417rem 2.502rem oklch(68% .16 35/.04302), .5rem 1rem 6rem oklch(68% .16 35/.06), 0 0 0 .0625rem oklch(68% .16 35/.015);--cirth-button-hover-box-shadow:0 .5rem 1rem oklch(80% .1 35/.4)}}:where([data-theme=dark]){--cirth-background-color:oklch(19.5% .006 35);--cirth-card-background-color:oklch(23% .008 35);--cirth-muted-color:oklch(66% .02 35);--cirth-muted-border-color:oklch(30% .025 35);--cirth-text-selection-color:oklch(68% .16 35/.1875);--cirth-primary:oklch(68% .16 35);--cirth-primary-background:oklch(55% .17 35);--cirth-primary-underline:oklch(68% .16 35/.5);--cirth-primary-hover:oklch(80% .1 35);--cirth-primary-hover-background:oklch(60% .18 35);--cirth-primary-focus:oklch(68% .16 35/.7);--cirth-link-visited-color:oklch(65% .03 35);--cirth-box-shadow:.0145rem .029rem .174rem oklch(68% .16 35/.01698), .0335rem .067rem .402rem oklch(68% .16 35/.024), .0625rem .125rem .75rem oklch(68% .16 35/.03), .1125rem .225rem 1.35rem oklch(68% .16 35/.036), .2085rem .417rem 2.502rem oklch(68% .16 35/.04302), .5rem 1rem 6rem oklch(68% .16 35/.06), 0 0 0 .0625rem oklch(68% .16 35/.015);--cirth-button-hover-box-shadow:0 .5rem 1rem oklch(80% .1 35/.4)}@media (prefers-contrast:more){:where([data-theme=light]),:root:where(:not([data-theme=dark])),:host(:where(:not([data-theme=dark]))){--cirth-muted-color:oklch(40% .02 35);--cirth-muted-border-color:oklch(57% .02 35);--cirth-primary:oklch(40% .14 35);--cirth-primary-hover:oklch(35% .12 35);--cirth-primary-underline:var(--cirth-primary);--cirth-primary-focus:oklch(45% .15 35);--cirth-link-visited-color:oklch(40% .03 35)}}@media only screen and (prefers-contrast:more) and (prefers-color-scheme:dark){:root:where(:not([data-theme])),:host(:where(:not([data-theme]))){--cirth-muted-color:oklch(80% .02 35);--cirth-muted-border-color:oklch(57% .02 35);--cirth-card-border-color:var(--cirth-muted-border-color);--cirth-primary:oklch(80% .1 35);--cirth-primary-hover:oklch(85% .08 35);--cirth-primary-underline:var(--cirth-primary);--cirth-primary-focus:oklch(68% .16 35);--cirth-link-visited-color:oklch(80% .03 35)}}@media (prefers-contrast:more){:where([data-theme=dark]){--cirth-muted-color:oklch(80% .02 35);--cirth-muted-border-color:oklch(57% .02 35);--cirth-card-border-color:var(--cirth-muted-border-color);--cirth-primary:oklch(80% .1 35);--cirth-primary-hover:oklch(85% .08 35);--cirth-primary-underline:var(--cirth-primary);--cirth-primary-focus:oklch(68% .16 35);--cirth-link-visited-color:oklch(80% .03 35)}}:root,:host{--cirth-border-radius:var(--cirth-radius-2xl);--cirth-font-family:"Trebuchet MS", "Segoe UI", Verdana, sans-serif, var(--cirth-font-family-emoji);--cirth-font-family-display:var(--cirth-font-family);--cirth-spacing:var(--cirth-space-5);--cirth-transition:var(--cirth-duration-slow) cubic-bezier(.34, 1.56, .64, 1)}