@cirthcss/cirth 0.15.0-beta.1 → 0.15.0-beta.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -50,6 +50,10 @@ section {
50
50
  margin-bottom: var(--cirth-block-spacing-vertical);
51
51
  }
52
52
 
53
+ main > section + section {
54
+ margin-block-start: var(--cirth-space-8);
55
+ }
56
+
53
57
  b, strong {
54
58
  font-weight: bolder;
55
59
  }
@@ -162,6 +166,15 @@ mark {
162
166
  background-color: var(--cirth-mark-background-color);
163
167
  color: var(--cirth-mark-color);
164
168
  vertical-align: baseline;
169
+ -webkit-box-decoration-break: clone;
170
+ box-decoration-break: clone;
171
+ }
172
+
173
+ @media (forced-colors: active) {
174
+ mark {
175
+ color: marktext;
176
+ background-color: mark;
177
+ }
165
178
  }
166
179
 
167
180
  blockquote {
@@ -384,6 +397,8 @@ form:has(:user-invalid) :is(button:not([type="button"], [type="reset"]), [type="
384
397
 
385
398
  caption {
386
399
  color: var(--cirth-muted-color);
400
+ font-size: var(--cirth-font-size-sm);
401
+ line-height: var(--cirth-line-height-normal);
387
402
  text-align: start;
388
403
  padding-block-end: calc(var(--cirth-spacing) * .5);
389
404
  }
@@ -490,6 +505,8 @@ figure {
490
505
  figure figcaption {
491
506
  padding: calc(var(--cirth-spacing) * .5) 0;
492
507
  color: var(--cirth-muted-color);
508
+ font-size: var(--cirth-font-size-sm);
509
+ line-height: var(--cirth-line-height-normal);
493
510
  }
494
511
 
495
512
  hr {
@@ -989,9 +1006,9 @@ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type
989
1006
 
990
1007
  [type="range"] {
991
1008
  appearance: none;
992
- background: none;
993
1009
  width: 100%;
994
- height: 1.25rem;
1010
+ height: max(2.75rem, var(--cirth-font-size-md) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2);
1011
+ background: none;
995
1012
  }
996
1013
 
997
1014
  [type="range"]::-webkit-slider-runnable-track {
@@ -1038,6 +1055,18 @@ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type
1038
1055
  --cirth-range-thumb-color: var(--cirth-range-thumb-active-color);
1039
1056
  }
1040
1057
 
1058
+ @media (hover: hover) and (pointer: fine) {
1059
+ [type="range"]:hover:not(:active, :focus, :disabled) {
1060
+ --cirth-range-border-color: var(--cirth-range-active-border-color);
1061
+ --cirth-range-thumb-color: var(--cirth-secondary-hover);
1062
+ }
1063
+ }
1064
+
1065
+ [type="range"]:focus-visible {
1066
+ outline: var(--cirth-outline-width) solid var(--cirth-primary-focus);
1067
+ outline-offset: var(--cirth-space-1);
1068
+ }
1069
+
1041
1070
  [type="range"]:active::-webkit-slider-thumb {
1042
1071
  transform: scale(1.25);
1043
1072
  }
@@ -1441,7 +1470,7 @@ dialog[open] {
1441
1470
  @starting-style {
1442
1471
  dialog[open] > article {
1443
1472
  opacity: 0;
1444
- transform: translateY(-100%);
1473
+ transform: translateY(-.5rem);
1445
1474
  }
1446
1475
  }
1447
1476
 
@@ -1805,6 +1834,7 @@ progress::-moz-progress-bar {
1805
1834
  scroll-behavior: auto;
1806
1835
  transition-delay: var(--cirth-duration-instant);
1807
1836
  transition-duration: var(--cirth-duration-instant);
1837
+ --cirth-transition: var(--cirth-duration-instant) var(--cirth-ease-out);
1808
1838
  animation-duration: 1ms;
1809
1839
  animation-iteration-count: 1;
1810
1840
  animation-delay: -1ms;
@@ -1932,7 +1962,11 @@ progress::-moz-progress-bar {
1932
1962
  --cirth-icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
1933
1963
  --cirth-icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
1934
1964
  --cirth-icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
1935
- --cirth-icon-loading: url("data:image/svg+xml,%3Csvg fill='none' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E g %7B animation: rotate 2s linear infinite; transform-origin: center center; %7D circle %7B stroke-dasharray: 75,100; stroke-dashoffset: -5; animation: dash 1.5s ease-in-out infinite; stroke-linecap: round; %7D @keyframes rotate %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D @keyframes dash %7B 0%25 %7B stroke-dasharray: 1,100; stroke-dashoffset: 0; %7D 50%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -17.5; %7D 100%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -62; %7D %7D %3C/style%3E%3Cg%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='rgb(136, 146, 164)' stroke-width='4' /%3E%3C/g%3E%3C/svg%3E");
1965
+ --cirth-icon-loading: url("data:image/svg+xml,%3Csvg fill='none' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E g %7B animation: rotate 2s linear infinite; transform-origin: center center; %7D circle %7B stroke-dasharray: 75,100; stroke-dashoffset: -5; animation: dash 1.5s ease-in-out infinite; stroke-linecap: round; %7D @keyframes rotate %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D @keyframes dash %7B 0%25 %7B stroke-dasharray: 1,100; stroke-dashoffset: 0; %7D 50%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -17.5; %7D 100%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -62; %7D %7D %3C/style%3E%3Cg%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='rgb(142, 144, 161)' stroke-width='4' /%3E%3C/g%3E%3C/svg%3E");
1966
+ }
1967
+
1968
+ :focus-visible {
1969
+ transition-duration: var(--cirth-duration-instant);
1936
1970
  }
1937
1971
 
1938
1972
  a {
@@ -2061,47 +2095,46 @@ details summary[role="button"]:after {
2061
2095
  }
2062
2096
 
2063
2097
  :root, :host {
2064
- --cirth-canvas: light-dark(oklch(97.4% .004 69.35), oklch(20.15% .003 264));
2065
- --cirth-ink: light-dark(oklch(35.3% .021 264), oklch(83% .016 264));
2098
+ --cirth-canvas: light-dark(oklch(97.3% .006 44), oklch(20.15% .0225 280));
2099
+ --cirth-ink: light-dark(oklch(35.3% .027 280), oklch(83% .011 280));
2066
2100
  --cirth-color: var(--cirth-ink);
2067
- --cirth-text-selection-color: light-dark(oklch(65.7% .121 69.35 / .25), oklch(70% .129 69.35 / .1875));
2068
- --cirth-muted-color: light-dark(oklch(52.7% .032 264), oklch(65.7% .03 264));
2069
- --cirth-muted-border-color: light-dark(oklch(93.85% .003 264), oklch(26.7% .011 264));
2070
- --cirth-error: light-dark(oklch(44% .151 29.73), oklch(74.3% .133 29.73));
2071
- --cirth-success: light-dark(oklch(52.7% .1 160.59), oklch(65.7% .125 160.59));
2072
- --cirth-warning: light-dark(oklch(48.3% .086 78), oklch(70% .124 78));
2073
- --cirth-primary: light-dark(oklch(52.7% .097 69.35), oklch(70% .129 69.35));
2074
- --cirth-secondary: light-dark(oklch(52.7% .032 264), oklch(70% .028 264));
2075
- --cirth-secondary-underline: light-dark(oklch(52.7% .032 264 / .5), oklch(70% .028 264 / .5));
2076
- --cirth-secondary-hover: light-dark(oklch(44% .028 264), oklch(78.7% .021 264));
2077
- --cirth-secondary-hover-background: light-dark(oklch(44% .028 264), oklch(52.7% .032 264));
2078
- --cirth-secondary-focus: light-dark(oklch(48.3% .03 264 / .7), oklch(70% .028 264 / .7));
2079
- --cirth-contrast: light-dark(oklch(22.3% .006 264), oklch(91.7% .006 264));
2080
- --cirth-contrast-background: light-dark(oklch(22.3% .006 264), oklch(96% 0 264));
2081
- --cirth-contrast-underline: light-dark(oklch(22.3% .006 264 / .5), oklch(91.7% .006 264 / .5));
2101
+ --cirth-muted-color: light-dark(oklch(52.7% .031 280), oklch(65.7% .025 280));
2102
+ --cirth-muted-border-color: light-dark(oklch(93.85% .002 280), oklch(26.7% .025 280));
2103
+ --cirth-error: light-dark(oklch(44% .151 22), oklch(74.3% .133 22));
2104
+ --cirth-success: light-dark(oklch(52.7% .115 153), oklch(65.7% .144 153));
2105
+ --cirth-warning: light-dark(oklch(48.3% .084 89.5), oklch(70% .122 89.5));
2106
+ --cirth-primary: light-dark(oklch(52.7% .107 44), oklch(65.7% .134 44));
2107
+ --cirth-secondary: light-dark(oklch(52.7% .031 280), oklch(70% .021 280));
2108
+ --cirth-secondary-underline: light-dark(oklch(52.7% .031 280 / .5), oklch(70% .021 280 / .5));
2109
+ --cirth-secondary-hover: light-dark(oklch(44% .029 280), oklch(78.7% .014 280));
2110
+ --cirth-secondary-hover-background: light-dark(oklch(44% .029 280), oklch(52.7% .031 280));
2111
+ --cirth-secondary-focus: light-dark(oklch(48.3% .03 280 / .7), oklch(70% .021 280 / .7));
2112
+ --cirth-contrast: light-dark(oklch(22.3% .023 280), oklch(91.7% .004 280));
2113
+ --cirth-contrast-background: light-dark(oklch(22.3% .023 280), oklch(96% 0 280));
2114
+ --cirth-contrast-underline: light-dark(oklch(22.3% .023 280 / .5), oklch(91.7% .004 280 / .5));
2082
2115
  --cirth-contrast-hover: light-dark(oklch(0% 0 0), oklch(100% 0 0));
2083
2116
  --cirth-contrast-hover-background: light-dark(oklch(0% 0 0), oklch(100% 0 0));
2084
- --cirth-contrast-focus: light-dark(oklch(48.3% .03 264 / .7), oklch(87.3% .011 264 / .5));
2117
+ --cirth-contrast-focus: light-dark(oklch(48.3% .03 280 / .7), oklch(87.3% .007 280 / .5));
2085
2118
  --cirth-contrast-inverse: light-dark(oklch(100% 0 0), oklch(0% 0 0));
2086
- --cirth-link-visited-color: light-dark(oklch(48.3% 0 264), oklch(65.7% 0 264));
2087
- --cirth-box-shadow: light-dark(.0145rem .029rem .174rem oklch(65.7% .03 264 / .01698), .0335rem .067rem .402rem oklch(65.7% .03 264 / .024), .0625rem .125rem .75rem oklch(65.7% .03 264 / .03), .1125rem .225rem 1.35rem oklch(65.7% .03 264 / .036), .2085rem .417rem 2.502rem oklch(65.7% .03 264 / .04302), .5rem 1rem 6rem oklch(65.7% .03 264 / .06), 0 0 0 .0625rem oklch(65.7% .03 264 / .015),
2088
- .0145rem .029rem .174rem oklch(9% 0 none / .01698), .0335rem .067rem .402rem oklch(9% 0 none / .024), .0625rem .125rem .75rem oklch(9% 0 none / .03), .1125rem .225rem 1.35rem oklch(9% 0 none / .036), .2085rem .417rem 2.502rem oklch(9% 0 none / .04302), .5rem 1rem 6rem oklch(9% 0 none / .06), 0 0 0 .0625rem oklch(9% 0 none / .015));
2089
- --cirth-h1-color: light-dark(oklch(22.3% .006 264), oklch(96% 0 264));
2090
- --cirth-h2-color: light-dark(oklch(26.7% .011 264), oklch(91.7% .006 264));
2091
- --cirth-h3-color: light-dark(oklch(31% .016 264), oklch(83% .016 264));
2092
- --cirth-h4-color: light-dark(oklch(35.3% .021 264), oklch(78.7% .021 264));
2093
- --cirth-h5-color: light-dark(oklch(39.7% .025 264), oklch(74.3% .025 264));
2094
- --cirth-h6-color: light-dark(oklch(44% .028 264), oklch(65.7% .03 264));
2095
- --cirth-mark-color: light-dark(oklch(18% 0 264), oklch(100% 0 0));
2096
- --cirth-code-color: light-dark(oklch(52.7% .032 264), oklch(65.7% .03 264));
2097
- --cirth-form-element-selected-background-color: light-dark(oklch(91.7% .006 264), oklch(31% .016 264));
2098
- --cirth-form-element-border-color: light-dark(oklch(61.3% .032 264), oklch(52.7% .032 264));
2099
- --cirth-form-element-color: light-dark(oklch(26.7% .011 264), oklch(91.7% .006 264));
2100
- --cirth-switch-background-color: light-dark(oklch(61.3% .032 264), oklch(52.7% .032 264));
2101
- --cirth-range-border-color: light-dark(oklch(91.7% .006 264), oklch(26.7% .011 264));
2102
- --cirth-range-active-border-color: light-dark(oklch(83% .016 264), oklch(31% .016 264));
2103
- --cirth-progress-background-color: light-dark(oklch(91.7% .006 264), oklch(26.7% .011 264));
2104
- --cirth-progress-border-color: light-dark(oklch(61.3% .032 264), oklch(52.7% .032 264));
2119
+ --cirth-link-visited-color: light-dark(oklch(48.3% 0 280), oklch(65.7% 0 280));
2120
+ --cirth-box-shadow: light-dark(.0145rem .029rem .174rem oklch(65.7% .025 280 / .01698), .0335rem .067rem .402rem oklch(65.7% .025 280 / .024), .0625rem .125rem .75rem oklch(65.7% .025 280 / .03), .1125rem .225rem 1.35rem oklch(65.7% .025 280 / .036), .2085rem .417rem 2.502rem oklch(65.7% .025 280 / .04302), .5rem 1rem 6rem oklch(65.7% .025 280 / .06), 0 0 0 .0625rem oklch(65.7% .025 280 / .015),
2121
+ .0145rem .029rem .174rem oklch(9% .011 280 / .01698), .0335rem .067rem .402rem oklch(9% .011 280 / .024), .0625rem .125rem .75rem oklch(9% .011 280 / .03), .1125rem .225rem 1.35rem oklch(9% .011 280 / .036), .2085rem .417rem 2.502rem oklch(9% .011 280 / .04302), .5rem 1rem 6rem oklch(9% .011 280 / .06), 0 0 0 .0625rem oklch(9% .011 280 / .015));
2122
+ --cirth-h1-color: light-dark(oklch(22.3% .023 280), oklch(96% 0 280));
2123
+ --cirth-h2-color: light-dark(oklch(26.7% .025 280), oklch(91.7% .004 280));
2124
+ --cirth-h3-color: light-dark(oklch(31% .026 280), oklch(83% .011 280));
2125
+ --cirth-h4-color: light-dark(oklch(35.3% .027 280), oklch(78.7% .014 280));
2126
+ --cirth-h5-color: light-dark(oklch(39.7% .028 280), oklch(74.3% .018 280));
2127
+ --cirth-h6-color: light-dark(oklch(44% .029 280), oklch(65.7% .025 280));
2128
+ --cirth-mark-color: light-dark(oklch(18% .022 280), oklch(100% 0 0));
2129
+ --cirth-code-color: light-dark(oklch(52.7% .031 280), oklch(65.7% .025 280));
2130
+ --cirth-form-element-selected-background-color: light-dark(oklch(91.7% .004 280), oklch(31% .026 280));
2131
+ --cirth-form-element-border-color: light-dark(oklch(61.3% .028 280), oklch(52.7% .031 280));
2132
+ --cirth-form-element-color: light-dark(oklch(26.7% .025 280), oklch(91.7% .004 280));
2133
+ --cirth-switch-background-color: light-dark(oklch(61.3% .028 280), oklch(52.7% .031 280));
2134
+ --cirth-range-border-color: light-dark(oklch(91.7% .004 280), oklch(26.7% .025 280));
2135
+ --cirth-range-active-border-color: light-dark(oklch(83% .011 280), oklch(31% .026 280));
2136
+ --cirth-progress-background-color: light-dark(oklch(91.7% .004 280), oklch(26.7% .025 280));
2137
+ --cirth-progress-border-color: light-dark(oklch(61.3% .028 280), oklch(52.7% .031 280));
2105
2138
  }
2106
2139
 
2107
2140
  :where([data-theme="light"]), :root:where(:not([data-theme="dark"])), :host(:where(:not([data-theme="dark"]))) {
@@ -2129,6 +2162,7 @@ details summary[role="button"]:after {
2129
2162
  --cirth-primary-hover-underline: var(--cirth-primary-hover);
2130
2163
  --cirth-primary-focus: oklch(from var(--cirth-primary) l c h / 75%);
2131
2164
  --cirth-primary-inverse: oklch(100% 0 0);
2165
+ --cirth-text-selection-color: oklch(from var(--cirth-primary) calc(l * 1.247) c h / 25%);
2132
2166
  --cirth-code-background-color: oklch(from var(--cirth-canvas) calc(l - .019) c h);
2133
2167
  --cirth-card-sectioning-background-color: oklch(from var(--cirth-canvas) calc(l + .009) c h);
2134
2168
  --cirth-form-element-background-color: oklch(from var(--cirth-canvas) calc(l - .008) c h);
@@ -2136,7 +2170,7 @@ details summary[role="button"]:after {
2136
2170
  --cirth-form-element-active-background-color: var(--cirth-canvas);
2137
2171
  --cirth-dropdown-background-color: var(--cirth-card-background-color);
2138
2172
  --cirth-popover-background-color: var(--cirth-card-background-color);
2139
- --cirth-secondary-background: oklch(48.3% .03 264);
2173
+ --cirth-secondary-background: oklch(48.3% .03 280);
2140
2174
  --cirth-secondary-border: var(--cirth-secondary-background);
2141
2175
  --cirth-secondary-hover-border: var(--cirth-secondary-hover-background);
2142
2176
  --cirth-secondary-hover-underline: var(--cirth-secondary-hover);
@@ -2144,7 +2178,9 @@ details summary[role="button"]:after {
2144
2178
  --cirth-contrast-border: var(--cirth-contrast-background);
2145
2179
  --cirth-contrast-hover-border: var(--cirth-contrast-hover-background);
2146
2180
  --cirth-contrast-hover-underline: var(--cirth-secondary-hover);
2147
- --cirth-mark-background-color: var(--cirth-warning-surface);
2181
+ --cirth-mark-background-color: color-mix(in oklab,
2182
+ var(--cirth-primary) 18%,
2183
+ var(--cirth-canvas));
2148
2184
  --cirth-ins-color: var(--cirth-success-text);
2149
2185
  --cirth-del-color: var(--cirth-error-text);
2150
2186
  --cirth-blockquote-border-color: var(--cirth-muted-border-color);
@@ -2152,7 +2188,7 @@ details summary[role="button"]:after {
2152
2188
  --cirth-button-box-shadow: 0 0 0 #0000;
2153
2189
  --cirth-button-hover-box-shadow: 0 0 0 #0000;
2154
2190
  --cirth-table-border-color: var(--cirth-card-border-color);
2155
- --cirth-table-row-stripped-background-color: oklch(57% .032 264 / .0375);
2191
+ --cirth-table-row-stripped-background-color: oklch(57% .032 280 / .0375);
2156
2192
  --cirth-code-kbd-background-color: var(--cirth-ink);
2157
2193
  --cirth-code-kbd-color: var(--cirth-background-color);
2158
2194
  --cirth-form-element-placeholder-color: var(--cirth-muted-color);
@@ -2169,25 +2205,25 @@ details summary[role="button"]:after {
2169
2205
  --cirth-switch-checked-background-color: var(--cirth-primary-background);
2170
2206
  --cirth-switch-color: var(--cirth-primary-inverse);
2171
2207
  --cirth-range-thumb-border-color: var(--cirth-background-color);
2172
- --cirth-range-thumb-color: var(--cirth-secondary-background);
2208
+ --cirth-range-thumb-color: var(--cirth-secondary);
2173
2209
  --cirth-range-thumb-active-color: var(--cirth-primary-background);
2174
2210
  --cirth-accordion-active-summary-color: var(--cirth-primary-hover);
2175
2211
  --cirth-accordion-close-summary-color: var(--cirth-ink);
2176
2212
  --cirth-accordion-open-summary-color: var(--cirth-ink);
2177
2213
  --cirth-card-border-color: color-mix(in oklab,
2178
2214
  var(--cirth-form-element-border-color) 38%,
2179
- var(--cirth-card-background-color));
2180
- --cirth-modal-overlay-background-color: oklch(93.85% .003 264deg / var(--cirth-opacity-overlay));
2215
+ oklch(from var(--cirth-card-background-color) l 0 h));
2216
+ --cirth-modal-overlay-background-color: oklch(93.85% .002 280deg / var(--cirth-opacity-overlay));
2181
2217
  --cirth-meter-optimum-color: var(--cirth-success);
2182
2218
  --cirth-meter-suboptimum-color: var(--cirth-warning);
2183
2219
  --cirth-meter-even-less-good-color: var(--cirth-error);
2184
2220
  --cirth-progress-color: var(--cirth-primary-background);
2185
- --cirth-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(98, 107, 126)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
2186
- --cirth-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(98, 107, 126)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
2187
- --cirth-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(98, 107, 126)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
2188
- --cirth-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(98, 107, 126)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
2189
- --cirth-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(40, 124, 87)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
2190
- --cirth-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(189, 47, 33)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
2221
+ --cirth-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(103, 105, 125)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
2222
+ --cirth-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(103, 105, 125)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
2223
+ --cirth-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(103, 105, 125)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
2224
+ --cirth-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(103, 105, 125)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
2225
+ --cirth-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(40, 126, 74)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
2226
+ --cirth-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(189, 44, 56)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
2191
2227
  }
2192
2228
 
2193
2229
  @media only screen and (prefers-color-scheme: dark) {
@@ -2216,7 +2252,8 @@ details summary[role="button"]:after {
2216
2252
  black);
2217
2253
  --cirth-primary-hover-border: var(--cirth-primary-hover-background);
2218
2254
  --cirth-primary-hover-underline: var(--cirth-primary-hover);
2219
- --cirth-primary-focus: oklch(from var(--cirth-primary) l c h / 70%);
2255
+ --cirth-primary-focus: oklch(from var(--cirth-primary) l c h / 80%);
2256
+ --cirth-text-selection-color: oklch(from var(--cirth-primary) calc(l * 1.065) c h / 18.75%);
2220
2257
  --cirth-primary-inverse: oklch(100% 0 0);
2221
2258
  --cirth-code-background-color: oklch(from var(--cirth-canvas) calc(l - .02) c h);
2222
2259
  --cirth-card-sectioning-background-color: oklch(from var(--cirth-canvas) calc(l + .025) c h);
@@ -2225,7 +2262,7 @@ details summary[role="button"]:after {
2225
2262
  --cirth-form-element-active-background-color: var(--cirth-canvas);
2226
2263
  --cirth-dropdown-background-color: var(--cirth-card-background-color);
2227
2264
  --cirth-popover-background-color: var(--cirth-card-background-color);
2228
- --cirth-secondary-background: oklch(48.3% .03 264);
2265
+ --cirth-secondary-background: oklch(48.3% .03 280);
2229
2266
  --cirth-secondary-border: var(--cirth-secondary-background);
2230
2267
  --cirth-secondary-hover-border: var(--cirth-secondary-hover-background);
2231
2268
  --cirth-secondary-hover-underline: var(--cirth-secondary-hover);
@@ -2233,7 +2270,9 @@ details summary[role="button"]:after {
2233
2270
  --cirth-contrast-border: var(--cirth-contrast-background);
2234
2271
  --cirth-contrast-hover-border: var(--cirth-contrast-hover-background);
2235
2272
  --cirth-contrast-hover-underline: var(--cirth-contrast-hover);
2236
- --cirth-mark-background-color: var(--cirth-warning-surface);
2273
+ --cirth-mark-background-color: color-mix(in oklab,
2274
+ var(--cirth-primary) 24%,
2275
+ var(--cirth-canvas));
2237
2276
  --cirth-ins-color: var(--cirth-success-text);
2238
2277
  --cirth-del-color: var(--cirth-error-text);
2239
2278
  --cirth-blockquote-border-color: var(--cirth-muted-border-color);
@@ -2241,10 +2280,10 @@ details summary[role="button"]:after {
2241
2280
  --cirth-button-box-shadow: 0 0 0 #0000;
2242
2281
  --cirth-button-hover-box-shadow: 0 0 0 #0000;
2243
2282
  --cirth-table-border-color: var(--cirth-card-border-color);
2244
- --cirth-table-row-stripped-background-color: oklch(57% .032 264 / .0375);
2283
+ --cirth-table-row-stripped-background-color: oklch(57% .032 280 / .0375);
2245
2284
  --cirth-code-kbd-background-color: var(--cirth-ink);
2246
2285
  --cirth-code-kbd-color: var(--cirth-background-color);
2247
- --cirth-form-element-placeholder-color: oklch(65.7% .03 264);
2286
+ --cirth-form-element-placeholder-color: oklch(65.7% .025 280);
2248
2287
  --cirth-form-element-active-border-color: var(--cirth-primary-border);
2249
2288
  --cirth-form-element-focus-color: var(--cirth-primary-focus);
2250
2289
  --cirth-form-element-disabled-opacity: var(--cirth-opacity-disabled);
@@ -2258,7 +2297,7 @@ details summary[role="button"]:after {
2258
2297
  --cirth-switch-checked-background-color: var(--cirth-primary-background);
2259
2298
  --cirth-switch-color: var(--cirth-primary-inverse);
2260
2299
  --cirth-range-thumb-border-color: var(--cirth-background-color);
2261
- --cirth-range-thumb-color: var(--cirth-secondary-background);
2300
+ --cirth-range-thumb-color: var(--cirth-secondary);
2262
2301
  --cirth-range-thumb-active-color: var(--cirth-primary-background);
2263
2302
  --cirth-accordion-active-summary-color: var(--cirth-primary-hover);
2264
2303
  --cirth-accordion-close-summary-color: var(--cirth-ink);
@@ -2266,17 +2305,17 @@ details summary[role="button"]:after {
2266
2305
  --cirth-card-border-color: color-mix(in oklab,
2267
2306
  var(--cirth-form-element-border-color) 46%,
2268
2307
  var(--cirth-card-background-color));
2269
- --cirth-modal-overlay-background-color: oklch(9% 0 0deg / var(--cirth-opacity-overlay));
2308
+ --cirth-modal-overlay-background-color: oklch(9% .011 280deg / var(--cirth-opacity-overlay));
2270
2309
  --cirth-meter-optimum-color: var(--cirth-success);
2271
2310
  --cirth-meter-suboptimum-color: var(--cirth-warning);
2272
2311
  --cirth-meter-even-less-good-color: var(--cirth-error);
2273
2312
  --cirth-progress-color: var(--cirth-primary);
2274
- --cirth-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 146, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
2275
- --cirth-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 146, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
2276
- --cirth-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 146, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
2277
- --cirth-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 146, 164)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
2278
- --cirth-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(75, 215, 153)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
2279
- --cirth-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(246, 160, 145)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
2313
+ --cirth-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(142, 144, 161)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
2314
+ --cirth-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(142, 144, 161)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
2315
+ --cirth-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(142, 144, 161)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
2316
+ --cirth-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(142, 144, 161)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
2317
+ --cirth-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(75, 216, 131)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
2318
+ --cirth-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(246, 158, 155)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
2280
2319
  }
2281
2320
  }
2282
2321
 
@@ -2305,7 +2344,8 @@ details summary[role="button"]:after {
2305
2344
  black);
2306
2345
  --cirth-primary-hover-border: var(--cirth-primary-hover-background);
2307
2346
  --cirth-primary-hover-underline: var(--cirth-primary-hover);
2308
- --cirth-primary-focus: oklch(from var(--cirth-primary) l c h / 70%);
2347
+ --cirth-primary-focus: oklch(from var(--cirth-primary) l c h / 80%);
2348
+ --cirth-text-selection-color: oklch(from var(--cirth-primary) calc(l * 1.065) c h / 18.75%);
2309
2349
  --cirth-primary-inverse: oklch(100% 0 0);
2310
2350
  --cirth-code-background-color: oklch(from var(--cirth-canvas) calc(l - .02) c h);
2311
2351
  --cirth-card-sectioning-background-color: oklch(from var(--cirth-canvas) calc(l + .025) c h);
@@ -2314,7 +2354,7 @@ details summary[role="button"]:after {
2314
2354
  --cirth-form-element-active-background-color: var(--cirth-canvas);
2315
2355
  --cirth-dropdown-background-color: var(--cirth-card-background-color);
2316
2356
  --cirth-popover-background-color: var(--cirth-card-background-color);
2317
- --cirth-secondary-background: oklch(48.3% .03 264);
2357
+ --cirth-secondary-background: oklch(48.3% .03 280);
2318
2358
  --cirth-secondary-border: var(--cirth-secondary-background);
2319
2359
  --cirth-secondary-hover-border: var(--cirth-secondary-hover-background);
2320
2360
  --cirth-secondary-hover-underline: var(--cirth-secondary-hover);
@@ -2322,7 +2362,9 @@ details summary[role="button"]:after {
2322
2362
  --cirth-contrast-border: var(--cirth-contrast-background);
2323
2363
  --cirth-contrast-hover-border: var(--cirth-contrast-hover-background);
2324
2364
  --cirth-contrast-hover-underline: var(--cirth-contrast-hover);
2325
- --cirth-mark-background-color: var(--cirth-warning-surface);
2365
+ --cirth-mark-background-color: color-mix(in oklab,
2366
+ var(--cirth-primary) 24%,
2367
+ var(--cirth-canvas));
2326
2368
  --cirth-ins-color: var(--cirth-success-text);
2327
2369
  --cirth-del-color: var(--cirth-error-text);
2328
2370
  --cirth-blockquote-border-color: var(--cirth-muted-border-color);
@@ -2330,10 +2372,10 @@ details summary[role="button"]:after {
2330
2372
  --cirth-button-box-shadow: 0 0 0 #0000;
2331
2373
  --cirth-button-hover-box-shadow: 0 0 0 #0000;
2332
2374
  --cirth-table-border-color: var(--cirth-card-border-color);
2333
- --cirth-table-row-stripped-background-color: oklch(57% .032 264 / .0375);
2375
+ --cirth-table-row-stripped-background-color: oklch(57% .032 280 / .0375);
2334
2376
  --cirth-code-kbd-background-color: var(--cirth-ink);
2335
2377
  --cirth-code-kbd-color: var(--cirth-background-color);
2336
- --cirth-form-element-placeholder-color: oklch(65.7% .03 264);
2378
+ --cirth-form-element-placeholder-color: oklch(65.7% .025 280);
2337
2379
  --cirth-form-element-active-border-color: var(--cirth-primary-border);
2338
2380
  --cirth-form-element-focus-color: var(--cirth-primary-focus);
2339
2381
  --cirth-form-element-disabled-opacity: var(--cirth-opacity-disabled);
@@ -2347,7 +2389,7 @@ details summary[role="button"]:after {
2347
2389
  --cirth-switch-checked-background-color: var(--cirth-primary-background);
2348
2390
  --cirth-switch-color: var(--cirth-primary-inverse);
2349
2391
  --cirth-range-thumb-border-color: var(--cirth-background-color);
2350
- --cirth-range-thumb-color: var(--cirth-secondary-background);
2392
+ --cirth-range-thumb-color: var(--cirth-secondary);
2351
2393
  --cirth-range-thumb-active-color: var(--cirth-primary-background);
2352
2394
  --cirth-accordion-active-summary-color: var(--cirth-primary-hover);
2353
2395
  --cirth-accordion-close-summary-color: var(--cirth-ink);
@@ -2355,17 +2397,17 @@ details summary[role="button"]:after {
2355
2397
  --cirth-card-border-color: color-mix(in oklab,
2356
2398
  var(--cirth-form-element-border-color) 46%,
2357
2399
  var(--cirth-card-background-color));
2358
- --cirth-modal-overlay-background-color: oklch(9% 0 0deg / var(--cirth-opacity-overlay));
2400
+ --cirth-modal-overlay-background-color: oklch(9% .011 280deg / var(--cirth-opacity-overlay));
2359
2401
  --cirth-meter-optimum-color: var(--cirth-success);
2360
2402
  --cirth-meter-suboptimum-color: var(--cirth-warning);
2361
2403
  --cirth-meter-even-less-good-color: var(--cirth-error);
2362
2404
  --cirth-progress-color: var(--cirth-primary);
2363
- --cirth-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 146, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
2364
- --cirth-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 146, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
2365
- --cirth-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 146, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
2366
- --cirth-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 146, 164)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
2367
- --cirth-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(75, 215, 153)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
2368
- --cirth-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(246, 160, 145)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
2405
+ --cirth-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(142, 144, 161)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
2406
+ --cirth-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(142, 144, 161)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
2407
+ --cirth-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(142, 144, 161)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
2408
+ --cirth-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(142, 144, 161)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
2409
+ --cirth-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(75, 216, 131)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
2410
+ --cirth-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(246, 158, 155)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
2369
2411
  }
2370
2412
 
2371
2413
  progress, [type="checkbox"], [type="radio"], [type="range"] {
@@ -2374,117 +2416,117 @@ progress, [type="checkbox"], [type="radio"], [type="range"] {
2374
2416
 
2375
2417
  @media (prefers-contrast: more) {
2376
2418
  :where([data-theme="light"]), :root:where(:not([data-theme="dark"])), :host(:where(:not([data-theme="dark"]))) {
2377
- --cirth-ink: oklch(22.3% .006 264);
2419
+ --cirth-ink: oklch(22.3% .023 280);
2378
2420
  --cirth-h1-color: var(--cirth-color);
2379
2421
  --cirth-h2-color: var(--cirth-color);
2380
2422
  --cirth-h3-color: var(--cirth-color);
2381
2423
  --cirth-h4-color: var(--cirth-color);
2382
2424
  --cirth-h5-color: var(--cirth-color);
2383
2425
  --cirth-h6-color: var(--cirth-color);
2384
- --cirth-muted-color: oklch(39.7% .025 264);
2385
- --cirth-secondary: oklch(39.7% .025 264);
2386
- --cirth-code-color: oklch(35.3% .021 264);
2387
- --cirth-link-visited-color: oklch(35.3% .021 264);
2388
- --cirth-muted-border-color: oklch(57% .032 264);
2389
- --cirth-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(64, 71, 85)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
2390
- --cirth-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(64, 71, 85)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
2391
- --cirth-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(64, 71, 85)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
2392
- --cirth-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(64, 71, 85)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
2393
- --cirth-form-element-border-color: oklch(39.7% .025 264);
2394
- --cirth-form-element-invalid-border-color: oklch(48.3% .166 29.73);
2395
- --cirth-form-element-valid-border-color: oklch(48.3% .092 160.59);
2396
- --cirth-primary: oklch(39.7% .073 69.35);
2397
- --cirth-primary-hover: oklch(31% .057 69.35);
2426
+ --cirth-muted-color: oklch(39.7% .028 280);
2427
+ --cirth-secondary: oklch(39.7% .028 280);
2428
+ --cirth-code-color: oklch(35.3% .027 280);
2429
+ --cirth-link-visited-color: oklch(35.3% .027 280);
2430
+ --cirth-muted-border-color: oklch(57% .032 280);
2431
+ --cirth-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(68, 69, 86)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
2432
+ --cirth-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(68, 69, 86)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
2433
+ --cirth-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(68, 69, 86)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
2434
+ --cirth-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(68, 69, 86)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
2435
+ --cirth-form-element-border-color: oklch(39.7% .028 280);
2436
+ --cirth-form-element-invalid-border-color: oklch(48.3% .165 22);
2437
+ --cirth-form-element-valid-border-color: oklch(48.3% .106 153);
2438
+ --cirth-primary: oklch(39.7% .081 44);
2439
+ --cirth-primary-hover: oklch(31% .063 44);
2398
2440
  --cirth-primary-underline: var(--cirth-primary);
2399
2441
  --cirth-secondary-underline: var(--cirth-secondary);
2400
2442
  --cirth-contrast-underline: var(--cirth-contrast);
2401
- --cirth-primary-focus: oklch(48.3% .089 69.35);
2402
- --cirth-secondary-focus: oklch(48.3% .03 264);
2403
- --cirth-contrast-focus: oklch(48.3% .03 264);
2404
- --cirth-switch-background-color: oklch(48.3% .03 264);
2405
- --cirth-progress-border-color: oklch(48.3% .03 264);
2406
- --cirth-meter-optimum-color: oklch(44% .084 160.59);
2407
- --cirth-meter-suboptimum-color: oklch(39.7% .07 78);
2408
- --cirth-meter-even-less-good-color: oklch(35.3% .122 29.73);
2443
+ --cirth-primary-focus: oklch(48.3% .098 44);
2444
+ --cirth-secondary-focus: oklch(48.3% .03 280);
2445
+ --cirth-contrast-focus: oklch(48.3% .03 280);
2446
+ --cirth-switch-background-color: oklch(48.3% .03 280);
2447
+ --cirth-progress-border-color: oklch(48.3% .03 280);
2448
+ --cirth-meter-optimum-color: oklch(44% .096 153);
2449
+ --cirth-meter-suboptimum-color: oklch(39.7% .069 89.5);
2450
+ --cirth-meter-even-less-good-color: oklch(35.3% .121 22);
2409
2451
  }
2410
2452
  }
2411
2453
 
2412
2454
  @media only screen and (prefers-contrast: more) and (prefers-color-scheme: dark) {
2413
2455
  :root:where(:not([data-theme])), :host(:where(:not([data-theme]))) {
2414
- --cirth-ink: oklch(96% 0 264);
2456
+ --cirth-ink: oklch(96% 0 280);
2415
2457
  --cirth-h1-color: var(--cirth-color);
2416
2458
  --cirth-h2-color: var(--cirth-color);
2417
2459
  --cirth-h3-color: var(--cirth-color);
2418
2460
  --cirth-h4-color: var(--cirth-color);
2419
2461
  --cirth-h5-color: var(--cirth-color);
2420
2462
  --cirth-h6-color: var(--cirth-color);
2421
- --cirth-muted-color: oklch(78.7% .021 264);
2422
- --cirth-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(179, 186, 200)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
2423
- --cirth-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(179, 186, 200)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
2424
- --cirth-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(179, 186, 200)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
2425
- --cirth-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(179, 186, 200)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
2426
- --cirth-secondary: oklch(78.7% .021 264);
2427
- --cirth-code-color: oklch(83% .016 264);
2428
- --cirth-link-visited-color: oklch(78.7% .021 264);
2429
- --cirth-muted-border-color: oklch(57% .032 264);
2463
+ --cirth-muted-color: oklch(78.7% .014 280);
2464
+ --cirth-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(183, 185, 195)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
2465
+ --cirth-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(183, 185, 195)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
2466
+ --cirth-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(183, 185, 195)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
2467
+ --cirth-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(183, 185, 195)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
2468
+ --cirth-secondary: oklch(78.7% .014 280);
2469
+ --cirth-code-color: oklch(83% .011 280);
2470
+ --cirth-link-visited-color: oklch(78.7% .014 280);
2471
+ --cirth-muted-border-color: oklch(57% .032 280);
2430
2472
  --cirth-card-border-color: var(--cirth-muted-border-color);
2431
- --cirth-form-element-border-color: oklch(70% .028 264);
2432
- --cirth-form-element-invalid-border-color: oklch(78.7% .106 29.73);
2433
- --cirth-form-element-valid-border-color: oklch(78.7% .15 160.59);
2434
- --cirth-primary: oklch(78.7% .146 69.35);
2435
- --cirth-primary-hover: oklch(87.3% .082 69.35);
2436
- --cirth-primary-background: oklch(44% .081 69.35);
2437
- --cirth-primary-hover-background: oklch(39.7% .073 69.35);
2473
+ --cirth-form-element-border-color: oklch(70% .021 280);
2474
+ --cirth-form-element-invalid-border-color: oklch(78.7% .105 22);
2475
+ --cirth-form-element-valid-border-color: oklch(78.7% .172 153);
2476
+ --cirth-primary: oklch(78.7% .092 44);
2477
+ --cirth-primary-hover: oklch(87.3% .051 44);
2478
+ --cirth-primary-background: oklch(44% .09 44);
2479
+ --cirth-primary-hover-background: oklch(39.7% .081 44);
2438
2480
  --cirth-primary-underline: var(--cirth-primary);
2439
2481
  --cirth-secondary-underline: var(--cirth-secondary);
2440
2482
  --cirth-contrast-underline: var(--cirth-contrast);
2441
- --cirth-primary-focus: oklch(70% .129 69.35);
2442
- --cirth-secondary-focus: oklch(70% .028 264);
2443
- --cirth-contrast-focus: oklch(87.3% .011 264);
2444
- --cirth-switch-background-color: oklch(65.7% .03 264);
2445
- --cirth-progress-border-color: oklch(70% .028 264);
2446
- --cirth-meter-optimum-color: oklch(74.3% .142 160.59);
2447
- --cirth-meter-suboptimum-color: oklch(78.7% .139 78);
2448
- --cirth-meter-even-less-good-color: oklch(83% .081 29.73);
2483
+ --cirth-primary-focus: oklch(70% .141 44);
2484
+ --cirth-secondary-focus: oklch(70% .021 280);
2485
+ --cirth-contrast-focus: oklch(87.3% .007 280);
2486
+ --cirth-switch-background-color: oklch(65.7% .025 280);
2487
+ --cirth-progress-border-color: oklch(70% .021 280);
2488
+ --cirth-meter-optimum-color: oklch(74.3% .163 153);
2489
+ --cirth-meter-suboptimum-color: oklch(78.7% .137 89.5);
2490
+ --cirth-meter-even-less-good-color: oklch(83% .08 22);
2449
2491
  }
2450
2492
  }
2451
2493
 
2452
2494
  @media (prefers-contrast: more) {
2453
2495
  :where([data-theme="dark"]) {
2454
- --cirth-ink: oklch(96% 0 264);
2496
+ --cirth-ink: oklch(96% 0 280);
2455
2497
  --cirth-h1-color: var(--cirth-color);
2456
2498
  --cirth-h2-color: var(--cirth-color);
2457
2499
  --cirth-h3-color: var(--cirth-color);
2458
2500
  --cirth-h4-color: var(--cirth-color);
2459
2501
  --cirth-h5-color: var(--cirth-color);
2460
2502
  --cirth-h6-color: var(--cirth-color);
2461
- --cirth-muted-color: oklch(78.7% .021 264);
2462
- --cirth-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(179, 186, 200)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
2463
- --cirth-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(179, 186, 200)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
2464
- --cirth-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(179, 186, 200)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
2465
- --cirth-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(179, 186, 200)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
2466
- --cirth-secondary: oklch(78.7% .021 264);
2467
- --cirth-code-color: oklch(83% .016 264);
2468
- --cirth-link-visited-color: oklch(78.7% .021 264);
2469
- --cirth-muted-border-color: oklch(57% .032 264);
2503
+ --cirth-muted-color: oklch(78.7% .014 280);
2504
+ --cirth-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(183, 185, 195)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
2505
+ --cirth-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(183, 185, 195)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
2506
+ --cirth-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(183, 185, 195)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
2507
+ --cirth-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(183, 185, 195)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
2508
+ --cirth-secondary: oklch(78.7% .014 280);
2509
+ --cirth-code-color: oklch(83% .011 280);
2510
+ --cirth-link-visited-color: oklch(78.7% .014 280);
2511
+ --cirth-muted-border-color: oklch(57% .032 280);
2470
2512
  --cirth-card-border-color: var(--cirth-muted-border-color);
2471
- --cirth-form-element-border-color: oklch(70% .028 264);
2472
- --cirth-form-element-invalid-border-color: oklch(78.7% .106 29.73);
2473
- --cirth-form-element-valid-border-color: oklch(78.7% .15 160.59);
2474
- --cirth-primary: oklch(78.7% .146 69.35);
2475
- --cirth-primary-hover: oklch(87.3% .082 69.35);
2476
- --cirth-primary-background: oklch(44% .081 69.35);
2477
- --cirth-primary-hover-background: oklch(39.7% .073 69.35);
2513
+ --cirth-form-element-border-color: oklch(70% .021 280);
2514
+ --cirth-form-element-invalid-border-color: oklch(78.7% .105 22);
2515
+ --cirth-form-element-valid-border-color: oklch(78.7% .172 153);
2516
+ --cirth-primary: oklch(78.7% .092 44);
2517
+ --cirth-primary-hover: oklch(87.3% .051 44);
2518
+ --cirth-primary-background: oklch(44% .09 44);
2519
+ --cirth-primary-hover-background: oklch(39.7% .081 44);
2478
2520
  --cirth-primary-underline: var(--cirth-primary);
2479
2521
  --cirth-secondary-underline: var(--cirth-secondary);
2480
2522
  --cirth-contrast-underline: var(--cirth-contrast);
2481
- --cirth-primary-focus: oklch(70% .129 69.35);
2482
- --cirth-secondary-focus: oklch(70% .028 264);
2483
- --cirth-contrast-focus: oklch(87.3% .011 264);
2484
- --cirth-switch-background-color: oklch(65.7% .03 264);
2485
- --cirth-progress-border-color: oklch(70% .028 264);
2486
- --cirth-meter-optimum-color: oklch(74.3% .142 160.59);
2487
- --cirth-meter-suboptimum-color: oklch(78.7% .139 78);
2488
- --cirth-meter-even-less-good-color: oklch(83% .081 29.73);
2523
+ --cirth-primary-focus: oklch(70% .141 44);
2524
+ --cirth-secondary-focus: oklch(70% .021 280);
2525
+ --cirth-contrast-focus: oklch(87.3% .007 280);
2526
+ --cirth-switch-background-color: oklch(65.7% .025 280);
2527
+ --cirth-progress-border-color: oklch(70% .021 280);
2528
+ --cirth-meter-optimum-color: oklch(74.3% .163 153);
2529
+ --cirth-meter-suboptimum-color: oklch(78.7% .137 89.5);
2530
+ --cirth-meter-even-less-good-color: oklch(83% .08 22);
2489
2531
  }
2490
2532
  }