@echsee/kwato-design-system 0.1.0 → 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/package.json +2 -1
  2. package/src/styles/kwato-variables.css +1006 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@echsee/kwato-design-system",
3
- "version": "0.1.0",
3
+ "version": "0.1.1",
4
4
  "description": "Kwato Design System - A React component library built with shadcn/ui and Tailwind CSS",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.mjs",
@@ -12,6 +12,7 @@
12
12
  "require": "./dist/index.js"
13
13
  },
14
14
  "./styles/forge-variables": "./src/styles/forge-variables.css",
15
+ "./styles/kwato-variables": "./src/styles/kwato-variables.css",
15
16
  "./package.json": "./package.json"
16
17
  },
17
18
  "files": [
package/src/styles/kwato-variables.css ADDED
@@ -0,0 +1,1006 @@
1
+ /* Generated CSS Variables - Dynamic Mode Switching Architecture */
2
+ /* Auto-generated from Figma variable collections */
3
+ /* Usage: Set data-theme attribute on container element to switch modes */
4
+ /* Color Space: OKLCH with RGB fallbacks for browser compatibility */
5
+
6
+ /* ========================================= */
7
+ /* FALLBACK VALUES (:root) */
8
+ /* These are default values when no theme is active */
9
+ /* Theme-specific selectors below will override these */
10
+ /* ========================================= */
11
+
12
+ :root {
13
+ --semantic-rounded-none: 0;
14
+ --absolute-radius-2: 2px;
15
+ --absolute-radius-4: 4px;
16
+ --absolute-radius-6: 6px;
17
+ --absolute-radius-8: 8px;
18
+ --absolute-radius-10: 10px;
19
+ --absolute-radius-12: 12px;
20
+ --absolute-radius-16: 16px;
21
+ --absolute-radius-24: 24px;
22
+ --absolute-radius-32: 32px;
23
+ --absolute-radius-infinite: 9999px;
24
+ --absolute-0: 0;
25
+ --absolute-05: 2px;
26
+ --absolute-1: 4px;
27
+ --absolute-15: 6px;
28
+ --absolute-2: 8px;
29
+ --absolute-25: 10px;
30
+ --absolute-3: 12px;
31
+ --absolute-35: 14px;
32
+ --absolute-4: 16px;
33
+ --absolute-5: 20px;
34
+ --absolute-6: 24px;
35
+ --absolute-7: 28px;
36
+ --absolute-8: 32px;
37
+ --absolute-9: 36px;
38
+ --absolute-10: 40px;
39
+ --absolute-11: 44px;
40
+ --absolute-12: 48px;
41
+ --absolute-14: 56px;
42
+ --absolute-16: 64px;
43
+ --absolute-20: 80px;
44
+ --absolute-24: 96px;
45
+ --absolute-28: 112px;
46
+ --absolute-32: 128px;
47
+ --absolute-36: 144px;
48
+ --absolute-40: 160px;
49
+ --absolute-44: 176px;
50
+ --absolute-48: 192px;
51
+ --absolute-52: 208px;
52
+ --absolute-56: 224px;
53
+ --absolute-60: 240px;
54
+ --absolute-64: 256px;
55
+ --absolute-72: 288px;
56
+ --absolute-80: 320px;
57
+ --absolute-96: 384px;
58
+ --absolute-infinite: 9999px;
59
+ --font-definitions-font-family-sans: "Inter";
60
+ --font-definitions-font-family-serif: "Inter";
61
+ --font-definitions-font-family-monospace: "Menlo";
62
+ --heading-1-weight: "Semibold";
63
+ --heading-1-font-size: 48px;
64
+ --heading-1-line-height: 48px;
65
+ --heading-1-spacing: 48px;
66
+ --heading-1-letter-spacing: -1.5px;
67
+ --heading-2-weight: "Semibold";
68
+ --heading-2-font-size: 30px;
69
+ --heading-2-line-height: 30px;
70
+ --heading-2-spacing: 30px;
71
+ --heading-2-letter-spacing: -1px;
72
+ --heading-3-weight: "Semibold";
73
+ --heading-3-font-size: 24px;
74
+ --heading-3-line-height: 28.8px;
75
+ --heading-3-spacing: 20px;
76
+ --heading-3-letter-spacing: -1px;
77
+ --heading-4-weight: "Semibold";
78
+ --monospaced-font-size: 16px;
79
+ --monospaced-line-height: 24px;
80
+ --monospaced-spacing: 16px;
81
+ --monospaced-letter-spacing: 0;
82
+ --monospaced-font-weight: "Regular";
83
+ --heading-4-font-size: 20px;
84
+ --paragraph-paragraph-weight: "Regular";
85
+ --paragraph-paragraph-bold-weight: "Semibold";
86
+ --paragraph-paragraph-medium-weight: "Medium";
87
+ --heading-4-line-height: 24px;
88
+ --paragraph-regular-font-size: 16px;
89
+ --paragraph-regular-line-height: 24px;
90
+ --paragraph-regular-spacing: 16px;
91
+ --paragraph-regular-letter-spacing: 0;
92
+ --paragraph-small-font-size: 14px;
93
+ --paragraph-small-line-height: 21px;
94
+ --paragraph-small-spacing: 14px;
95
+ --paragraph-small-letter-spacing: 0;
96
+ --paragraph-mini-font-size: 12px;
97
+ --paragraph-mini-line-height: 16px;
98
+ --paragraph-mini-spacing: 12px;
99
+ --paragraph-mini-letter-spacing: 0;
100
+ --heading-4-spacing: 20px;
101
+ --heading-4-letter-spacing: 0;
102
+ --2xs-color: rgba(0, 0, 0, 0.05);
103
+ --2xs-x: 0;
104
+ --2xs-y: 1px;
105
+ --2xs-blur: 0;
106
+ --2xs-spread: 0;
107
+ --xs-color: rgba(0, 0, 0, 0.05);
108
+ --xs-x: 0;
109
+ --xs-y: 1px;
110
+ --xs-blur: 2px;
111
+ --xs-spread: 0;
112
+ --sm-shadow-1-x: 0;
113
+ --sm-shadow-1-y: 1px;
114
+ --sm-shadow-1-blur: 3px;
115
+ --sm-shadow-1-spread: 0;
116
+ --sm-shadow-2-x2: 0;
117
+ --sm-shadow-2-y: 1px;
118
+ --sm-shadow-2-blur: 2px;
119
+ --sm-shadow-2-spread: -1px;
120
+ --sm-color: rgba(0, 0, 0, 0.1);
121
+ --md-color: rgba(0, 0, 0, 0.1);
122
+ --md-shadow-1-x: 0;
123
+ --md-shadow-1-y: 4px;
124
+ --md-shadow-1-blur: 6px;
125
+ --md-shadow-1-spread: -1px;
126
+ --md-shadow-2-x: 0;
127
+ --md-shadow-2-y: 2px;
128
+ --md-shadow-2-blur: 4px;
129
+ --md-shadow-2-spread: -2px;
130
+ --lg-shadow-1-x: 0;
131
+ --lg-shadow-1-y: 10px;
132
+ --lg-shadow-1-blur: 15px;
133
+ --lg-shadow-1-spread: -3px;
134
+ --lg-shadow-2-x: 0;
135
+ --lg-shadow-2-y: 4px;
136
+ --lg-shadow-2-blur: -4px;
137
+ --lg-shadow-2-spread: 6px;
138
+ --lg-color: rgba(0, 0, 0, 0.1);
139
+ --xl-color: rgba(0, 0, 0, 0.1);
140
+ --xl-shadow-1-x: 0;
141
+ --xl-shadow-1-y: 20px;
142
+ --xl-shadow-1-blur: 25px;
143
+ --xl-shadow-1-spread: -5px;
144
+ --xl-shadow-2-x: 0;
145
+ --xl-shadow-2-y: 8px;
146
+ --xl-shadow-2-blur: -6px;
147
+ --xl-shadow-2-spread: 10px;
148
+ --2xl-color: rgba(0, 0, 0, 0.25);
149
+ --2xl-x: 0;
150
+ --2xl-y: 25px;
151
+ --2xl-blur: 50px;
152
+ --2xl-spread: 12px;
153
+
154
+ /* ========================================= */
155
+ /* PRIMITIVE COLORS - RGB Fallbacks */
156
+ /* ========================================= */
157
+
158
+ /* Base Colors */
159
+ --white: rgb(255, 255, 255);
160
+ --black: rgb(0, 0, 0);
161
+
162
+ /* Orange Kwato (Brand Primary) */
163
+ --orangen-kwato-0: rgb(255, 252, 250);
164
+ --orangen-kwato-50: rgb(255, 245, 240);
165
+ --orangen-kwato-100: rgb(255, 235, 222);
166
+ --orangen-kwato-200: rgb(255, 217, 191);
167
+ --orangen-kwato-300: rgb(255, 201, 171);
168
+ --orangen-kwato-400: rgb(255, 186, 148);
169
+ --orangen-kwato-500: rgb(250, 168, 130);
170
+ --orangen-kwato-600: rgb(240, 143, 97);
171
+ --orangen-kwato-700: rgb(242, 105, 0);
172
+ --orangen-kwato-800: rgb(230, 89, 0);
173
+ --orangen-kwato-900: rgb(209, 77, 0);
174
+ --orangen-kwato-950: rgb(87, 46, 26);
175
+
176
+ /* Neutral Kwato */
177
+ --neutral-kwato-0: rgb(255, 255, 255);
178
+ --neutral-kwato-50: rgb(247, 247, 252);
179
+ --neutral-kwato-100: rgb(237, 237, 242);
180
+ --neutral-kwato-200: rgb(214, 214, 227);
181
+ --neutral-kwato-300: rgb(176, 181, 199);
182
+ --neutral-kwato-400: rgb(135, 140, 168);
183
+ --neutral-kwato-500: rgb(105, 112, 143);
184
+ --neutral-kwato-600: rgb(84, 89, 117);
185
+ --neutral-kwato-700: rgb(69, 71, 97);
186
+ --neutral-kwato-800: rgb(59, 61, 79);
187
+ --neutral-kwato-900: rgb(51, 54, 69);
188
+ --neutral-kwato-950: rgb(38, 38, 51);
189
+
190
+ /* Green Kwato */
191
+ --green-kwato-0: rgb(250, 255, 252);
192
+ --green-kwato-50: rgb(237, 252, 245);
193
+ --green-kwato-100: rgb(209, 250, 230);
194
+ --green-kwato-200: rgb(166, 245, 209);
195
+ --green-kwato-300: rgb(110, 232, 186);
196
+ --green-kwato-400: rgb(51, 214, 156);
197
+ --green-kwato-500: rgb(10, 186, 133);
198
+ --green-kwato-600: rgb(10, 166, 120);
199
+ --green-kwato-700: rgb(3, 120, 89);
200
+ --green-kwato-800: rgb(5, 94, 71);
201
+ --green-kwato-900: rgb(5, 79, 61);
202
+ --green-kwato-950: rgb(3, 43, 36);
203
+
204
+ /* Yellow Kwato */
205
+ --yellow-kwato-0: rgb(255, 252, 245);
206
+ --yellow-kwato-50: rgb(255, 247, 230);
207
+ --yellow-kwato-100: rgb(255, 242, 204);
208
+ --yellow-kwato-200: rgb(255, 230, 153);
209
+ --yellow-kwato-300: rgb(252, 217, 105);
210
+ --yellow-kwato-400: rgb(252, 204, 54);
211
+ --yellow-kwato-500: rgb(252, 191, 5);
212
+ --yellow-kwato-600: rgb(201, 153, 3);
213
+ --yellow-kwato-700: rgb(150, 115, 3);
214
+ --yellow-kwato-800: rgb(102, 77, 0);
215
+ --yellow-kwato-900: rgb(74, 56, 3);
216
+ --yellow-kwato-950: rgb(46, 33, 0);
217
+
218
+ /* Red Kwato */
219
+ --red-kwato-0: rgb(255, 250, 250);
220
+ --red-kwato-50: rgb(255, 242, 242);
221
+ --red-kwato-100: rgb(255, 230, 230);
222
+ --red-kwato-200: rgb(255, 201, 201);
223
+ --red-kwato-300: rgb(252, 163, 163);
224
+ --red-kwato-400: rgb(250, 112, 112);
225
+ --red-kwato-500: rgb(240, 61, 61);
226
+ --red-kwato-600: rgb(222, 36, 36);
227
+ --red-kwato-700: rgb(186, 28, 28);
228
+ --red-kwato-800: rgb(153, 26, 28);
229
+ --red-kwato-900: rgb(128, 28, 28);
230
+ --red-kwato-950: rgb(69, 10, 10);
231
+
232
+ /* Blue Kwato */
233
+ --blue-kwato-0: rgb(245, 252, 255);
234
+ --blue-kwato-50: rgb(237, 245, 255);
235
+ --blue-kwato-100: rgb(217, 232, 255);
236
+ --blue-kwato-200: rgb(153, 194, 255);
237
+ --blue-kwato-300: rgb(97, 156, 255);
238
+ --blue-kwato-400: rgb(66, 122, 255);
239
+ --blue-kwato-500: rgb(36, 84, 245);
240
+ --blue-kwato-600: rgb(20, 59, 235);
241
+ --blue-kwato-700: rgb(20, 54, 214);
242
+ --blue-kwato-800: rgb(23, 46, 181);
243
+ --blue-kwato-900: rgb(26, 43, 143);
244
+ --blue-kwato-950: rgb(20, 28, 87);
245
+
246
+ /* Indigo Kwato */
247
+ --indigo-kwato-0: rgb(247, 247, 255);
248
+ --indigo-kwato-50: rgb(242, 242, 255);
249
+ --indigo-kwato-100: rgb(232, 230, 255);
250
+ --indigo-kwato-200: rgb(222, 217, 255);
251
+ --indigo-kwato-300: rgb(214, 204, 255);
252
+ --indigo-kwato-400: rgb(199, 189, 255);
253
+ --indigo-kwato-500: rgb(171, 148, 255);
254
+ --indigo-kwato-600: rgb(148, 115, 255);
255
+ --indigo-kwato-700: rgb(112, 38, 255);
256
+ --indigo-kwato-800: rgb(87, 0, 209);
257
+ --indigo-kwato-900: rgb(59, 0, 148);
258
+ --indigo-kwato-950: rgb(28, 0, 79);
259
+
260
+ /* Neutral Dark Kwato */
261
+ --neutral-dark-kwato-50: rgb(250, 250, 250);
262
+ --neutral-dark-kwato-100: rgb(245, 245, 245);
263
+ --neutral-dark-kwato-200: rgb(230, 230, 230);
264
+ --neutral-dark-kwato-300: rgb(212, 212, 212);
265
+ --neutral-dark-kwato-400: rgb(163, 163, 163);
266
+ --neutral-dark-kwato-500: rgb(115, 115, 115);
267
+ --neutral-dark-kwato-600: rgb(82, 82, 82);
268
+ --neutral-dark-kwato-700: rgb(64, 64, 64);
269
+ --neutral-dark-kwato-800: rgb(38, 38, 38);
270
+ --neutral-dark-kwato-900: rgb(23, 23, 23);
271
+ --neutral-dark-kwato-950: rgb(10, 10, 10);
272
+
273
+ /* ========================================= */
274
+ /* SEMANTIC ALIASES */
275
+ /* ========================================= */
276
+
277
+ --semantic-rounded-xs: var(--absolute-radius-4);
278
+ --semantic-rounded-sm: var(--absolute-radius-6);
279
+ --semantic-rounded-md: var(--absolute-radius-8);
280
+ --semantic-rounded-lg: var(--absolute-radius-12);
281
+ --semantic-rounded-xl: var(--absolute-radius-16);
282
+ --semantic-rounded-2xl: var(--absolute-radius-24);
283
+ --semantic-rounded-3xl: var(--absolute-radius-32);
284
+ --semantic-rounded-full: var(--absolute-radius-infinite);
285
+ --semantic-3xs: var(--absolute-1);
286
+ --semantic-2xs: var(--absolute-15);
287
+ --semantic-xs: var(--absolute-25);
288
+ --semantic-md: var(--absolute-5);
289
+ --semantic-lg: var(--absolute-6);
290
+ --semantic-xl: var(--absolute-7);
291
+ --semantic-2xl: var(--absolute-9);
292
+ --semantic-3xl: var(--absolute-11);
293
+ --semantic-4xl: var(--absolute-14);
294
+ --semantic-5xl: var(--absolute-20);
295
+ --general-background: var(--white);
296
+ --general-foreground: var(--neutral-dark-kwato-950);
297
+ --general-primary: var(--orangen-kwato-900);
298
+ --general-primary-foreground: var(--neutral-dark-kwato-50);
299
+ --general-secondary: var(--orangen-kwato-300);
300
+ --general-secondary-foreground: var(--neutral-dark-kwato-950);
301
+ --general-accent: var(--neutral-dark-kwato-100);
302
+ --general-accent-foreground: var(--neutral-dark-kwato-950);
303
+ --general-muted: var(--neutral-dark-kwato-100);
304
+ --general-muted-foreground: var(--neutral-dark-kwato-500);
305
+ --general-destructive: var(--red-kwato-600);
306
+ --general-border: var(--neutral-dark-kwato-200);
307
+ --general-input: var(--white);
308
+ --card-card: var(--white);
309
+ --card-card-foreground: var(--black);
310
+ --popover-popover: var(--black);
311
+ --popover-popover-foreground: var(--white);
312
+ --focus-ring: var(--neutral-kwato-200);
313
+ --sidebar-sidebar: var(--neutral-dark-kwato-50);
314
+ --sidebar-sidebar-foreground: var(--neutral-dark-kwato-800);
315
+ --sidebar-sidebar-accent: var(--neutral-dark-kwato-200);
316
+ --sidebar-sidebar-accent-foreground: var(--neutral-dark-kwato-700);
317
+ --sidebar-sidebar-primary: var(--neutral-dark-kwato-950);
318
+ --sidebar-sidebar-primary-foreground: var(--neutral-dark-kwato-50);
319
+ --sidebar-sidebar-border: var(--neutral-dark-kwato-200);
320
+ --sidebar-sidebar-ring: var(--neutral-dark-kwato-300);
321
+ --focus-ring-error: var(--red-kwato-200);
322
+ --font-definitions-font-family-headings: var(--font-definitions-font-family-sans);
323
+ --font-definitions-font-family-body: var(--font-definitions-font-family-sans);
324
+ }
325
+
326
+ /* ========================================= */
327
+ /* OKLCH COLOR OVERRIDES */
328
+ /* Modern browsers with OKLCH support */
329
+ /* ========================================= */
330
+
331
+ @supports (color: oklch(0 0 0)) {
332
+ :root {
333
+ /* Base Colors */
334
+ --white: oklch(1.0000 0.0000 0);
335
+ --black: oklch(0.0000 0.0000 0);
336
+
337
+ /* Orange Kwato (Brand Primary) - Hue ~50° (orange) */
338
+ --orangen-kwato-0: oklch(0.9937 0.0053 55.95);
339
+ --orangen-kwato-50: oklch(0.9780 0.0159 48.72);
340
+ --orangen-kwato-100: oklch(0.9541 0.0337 52.47);
341
+ --orangen-kwato-200: oklch(0.9134 0.0599 53.88);
342
+ --orangen-kwato-300: oklch(0.8750 0.0861 52.34);
343
+ --orangen-kwato-400: oklch(0.8361 0.1123 51.26);
344
+ --orangen-kwato-500: oklch(0.7887 0.1260 50.83);
345
+ --orangen-kwato-600: oklch(0.7287 0.1467 47.71);
346
+ --orangen-kwato-700: oklch(0.6678 0.1890 46.15);
347
+ --orangen-kwato-800: oklch(0.6215 0.1810 45.25);
348
+ --orangen-kwato-900: oklch(0.5645 0.1650 44.35);
349
+ --orangen-kwato-950: oklch(0.3540 0.0683 42.94);
350
+
351
+ /* Neutral Kwato - Hue ~280° (purple-tinted) */
352
+ --neutral-kwato-0: oklch(1.0000 0.0000 0);
353
+ --neutral-kwato-50: oklch(0.9776 0.0066 286.28);
354
+ --neutral-kwato-100: oklch(0.9475 0.0067 286.27);
355
+ --neutral-kwato-200: oklch(0.8800 0.0177 286.03);
356
+ --neutral-kwato-300: oklch(0.7748 0.0262 273.41);
357
+ --neutral-kwato-400: oklch(0.6555 0.0422 277.19);
358
+ --neutral-kwato-500: oklch(0.5628 0.0490 274.77);
359
+ --neutral-kwato-600: oklch(0.4808 0.0458 276.62);
360
+ --neutral-kwato-700: oklch(0.4128 0.0436 280.85);
361
+ --neutral-kwato-800: oklch(0.3716 0.0311 279.78);
362
+ --neutral-kwato-900: oklch(0.3423 0.0267 276.03);
363
+ --neutral-kwato-950: oklch(0.2854 0.0239 284.72);
364
+
365
+ /* Green Kwato (Success) - Hue ~165° (green) */
366
+ --green-kwato-0: oklch(0.9954 0.0066 160.08);
367
+ --green-kwato-50: oklch(0.9780 0.0257 163.85);
368
+ --green-kwato-100: oklch(0.9574 0.0500 164.30);
369
+ --green-kwato-200: oklch(0.9184 0.0924 164.29);
370
+ --green-kwato-300: oklch(0.8618 0.1290 166.12);
371
+ --green-kwato-400: oklch(0.7932 0.1551 163.63);
372
+ --green-kwato-500: oklch(0.7052 0.1476 163.98);
373
+ --green-kwato-600: oklch(0.6541 0.1340 164.74);
374
+ --green-kwato-700: oklch(0.5186 0.1034 167.03);
375
+ --green-kwato-800: oklch(0.4390 0.0846 168.56);
376
+ --green-kwato-900: oklch(0.3915 0.0730 170.39);
377
+ --green-kwato-950: oklch(0.2700 0.0452 178.11);
378
+
379
+ /* Yellow Kwato (Warning) - Hue ~90° (yellow) */
380
+ --yellow-kwato-0: oklch(0.9937 0.0098 87.47);
381
+ --yellow-kwato-50: oklch(0.9778 0.0311 88.47);
382
+ --yellow-kwato-100: oklch(0.9618 0.0512 91.37);
383
+ --yellow-kwato-200: oklch(0.9284 0.0998 92.14);
384
+ --yellow-kwato-300: oklch(0.8934 0.1361 92.11);
385
+ --yellow-kwato-400: oklch(0.8638 0.1626 89.70);
386
+ --yellow-kwato-500: oklch(0.8372 0.1709 85.13);
387
+ --yellow-kwato-600: oklch(0.7148 0.1446 85.94);
388
+ --yellow-kwato-700: oklch(0.5842 0.1166 87.15);
389
+ --yellow-kwato-800: oklch(0.4446 0.0889 87.06);
390
+ --yellow-kwato-900: oklch(0.3610 0.0696 87.74);
391
+ --yellow-kwato-950: oklch(0.2664 0.0524 86.91);
392
+
393
+ /* Red Kwato (Error/Destructive) - Hue ~25° (red) */
394
+ --red-kwato-0: oklch(0.9889 0.0053 17.25);
395
+ --red-kwato-50: oklch(0.9713 0.0140 17.40);
396
+ --red-kwato-100: oklch(0.9452 0.0274 17.65);
397
+ --red-kwato-200: oklch(0.8834 0.0616 18.39);
398
+ --red-kwato-300: oklch(0.8038 0.1061 19.65);
399
+ --red-kwato-400: oklch(0.7119 0.1696 22.35);
400
+ --red-kwato-500: oklch(0.6314 0.2153 25.92);
401
+ --red-kwato-600: oklch(0.5794 0.2182 27.50);
402
+ --red-kwato-700: oklch(0.5073 0.1914 27.54);
403
+ --red-kwato-800: oklch(0.4431 0.1619 26.37);
404
+ --red-kwato-900: oklch(0.3967 0.1352 25.91);
405
+ --red-kwato-950: oklch(0.2675 0.0886 26.04);
406
+
407
+ /* Blue Kwato - Hue ~265° (blue) */
408
+ --blue-kwato-0: oklch(0.9867 0.0084 225.08);
409
+ --blue-kwato-50: oklch(0.9670 0.0159 253.90);
410
+ --blue-kwato-100: oklch(0.9268 0.0352 258.87);
411
+ --blue-kwato-200: oklch(0.8072 0.0975 258.14);
412
+ --blue-kwato-300: oklch(0.6979 0.1586 260.17);
413
+ --blue-kwato-400: oklch(0.6157 0.2069 264.05);
414
+ --blue-kwato-500: oklch(0.5376 0.2246 265.23);
415
+ --blue-kwato-600: oklch(0.4850 0.2407 265.21);
416
+ --blue-kwato-700: oklch(0.4549 0.2214 265.48);
417
+ --blue-kwato-800: oklch(0.4075 0.1898 266.65);
418
+ --blue-kwato-900: oklch(0.3627 0.1544 268.26);
419
+ --blue-kwato-950: oklch(0.2732 0.1060 271.09);
420
+
421
+ /* Indigo Kwato - Hue ~290° (purple) */
422
+ --indigo-kwato-0: oklch(0.9784 0.0106 286.20);
423
+ --indigo-kwato-50: oklch(0.9649 0.0173 286.07);
424
+ --indigo-kwato-100: oklch(0.9340 0.0337 289.40);
425
+ --indigo-kwato-200: oklch(0.9012 0.0519 291.36);
426
+ --indigo-kwato-300: oklch(0.8700 0.0706 293.87);
427
+ --indigo-kwato-400: oklch(0.8295 0.0921 291.20);
428
+ --indigo-kwato-500: oklch(0.7309 0.1525 292.08);
429
+ --indigo-kwato-600: oklch(0.6550 0.1995 290.69);
430
+ --indigo-kwato-700: oklch(0.5289 0.2800 287.55);
431
+ --indigo-kwato-800: oklch(0.4385 0.2524 287.29);
432
+ --indigo-kwato-900: oklch(0.3492 0.1955 287.09);
433
+ --indigo-kwato-950: oklch(0.2277 0.1254 287.18);
434
+
435
+ /* Neutral Dark Kwato - Achromatic (gray) */
436
+ --neutral-dark-kwato-50: oklch(0.9851 0.0000 0);
437
+ --neutral-dark-kwato-100: oklch(0.9702 0.0000 0);
438
+ --neutral-dark-kwato-200: oklch(0.9249 0.0000 0);
439
+ --neutral-dark-kwato-300: oklch(0.8699 0.0000 0);
440
+ --neutral-dark-kwato-400: oklch(0.7155 0.0000 0);
441
+ --neutral-dark-kwato-500: oklch(0.5555 0.0000 0);
442
+ --neutral-dark-kwato-600: oklch(0.4386 0.0000 0);
443
+ --neutral-dark-kwato-700: oklch(0.3715 0.0000 0);
444
+ --neutral-dark-kwato-800: oklch(0.2686 0.0000 0);
445
+ --neutral-dark-kwato-900: oklch(0.2046 0.0000 0);
446
+ --neutral-dark-kwato-950: oklch(0.1448 0.0000 0);
447
+ }
448
+ }
449
+
450
+ /* ========================================= */
451
+ /* ATOMIC VARIABLES (Base Layer) */
452
+ /* Theme-specific values that override :root */
453
+ /* ========================================= */
454
+
455
+ /* Collection: border radii */
456
+ [data-border-radii="Kwato"] {
457
+ --semantic-rounded-none: 0;
458
+ --absolute-radius-2: 2px;
459
+ --absolute-radius-4: 4px;
460
+ --absolute-radius-6: 6px;
461
+ --absolute-radius-8: 8px;
462
+ --absolute-radius-10: 10px;
463
+ --absolute-radius-12: 12px;
464
+ --absolute-radius-16: 16px;
465
+ --absolute-radius-24: 24px;
466
+ --absolute-radius-32: 32px;
467
+ --absolute-radius-infinite: 9999px;
468
+ }
469
+
470
+ /* Collection: spacing */
471
+ [data-spacing="kwato"] {
472
+ --absolute-0: 0;
473
+ --absolute-05: 2px;
474
+ --absolute-1: 4px;
475
+ --absolute-15: 6px;
476
+ --absolute-2: 8px;
477
+ --absolute-25: 10px;
478
+ --absolute-3: 12px;
479
+ --absolute-35: 14px;
480
+ --absolute-4: 16px;
481
+ --absolute-5: 20px;
482
+ --absolute-6: 24px;
483
+ --absolute-7: 28px;
484
+ --absolute-8: 32px;
485
+ --absolute-9: 36px;
486
+ --absolute-10: 40px;
487
+ --absolute-11: 44px;
488
+ --absolute-12: 48px;
489
+ --absolute-14: 56px;
490
+ --absolute-16: 64px;
491
+ --absolute-20: 80px;
492
+ --absolute-24: 96px;
493
+ --absolute-28: 112px;
494
+ --absolute-32: 128px;
495
+ --absolute-36: 144px;
496
+ --absolute-40: 160px;
497
+ --absolute-44: 176px;
498
+ --absolute-48: 192px;
499
+ --absolute-52: 208px;
500
+ --absolute-56: 224px;
501
+ --absolute-60: 240px;
502
+ --absolute-64: 256px;
503
+ --absolute-72: 288px;
504
+ --absolute-80: 320px;
505
+ --absolute-96: 384px;
506
+ --absolute-infinite: 9999px;
507
+ }
508
+
509
+ /* Collection: typography */
510
+ [data-typography="Kwato"] {
511
+ --font-definitions-font-family-sans: "Inter";
512
+ --font-definitions-font-family-serif: "Inter";
513
+ --font-definitions-font-family-monospace: "Menlo";
514
+ --heading-1-weight: "Semibold";
515
+ --heading-1-font-size: 48px;
516
+ --heading-1-line-height: 48px;
517
+ --heading-1-spacing: 48px;
518
+ --heading-1-letter-spacing: -1.5px;
519
+ --heading-2-weight: "Semibold";
520
+ --heading-2-font-size: 30px;
521
+ --heading-2-line-height: 30px;
522
+ --heading-2-spacing: 30px;
523
+ --heading-2-letter-spacing: -1px;
524
+ --heading-3-weight: "Semibold";
525
+ --heading-3-font-size: 24px;
526
+ --heading-3-line-height: 28.8px;
527
+ --heading-3-spacing: 20px;
528
+ --heading-3-letter-spacing: -1px;
529
+ --heading-4-weight: "Semibold";
530
+ --monospaced-font-size: 16px;
531
+ --monospaced-line-height: 24px;
532
+ --monospaced-spacing: 16px;
533
+ --monospaced-letter-spacing: 0;
534
+ --monospaced-font-weight: "Regular";
535
+ --heading-4-font-size: 20px;
536
+ --paragraph-paragraph-weight: "Regular";
537
+ --paragraph-paragraph-bold-weight: "Semibold";
538
+ --paragraph-paragraph-medium-weight: "Medium";
539
+ --heading-4-line-height: 24px;
540
+ --paragraph-regular-font-size: 16px;
541
+ --paragraph-regular-line-height: 24px;
542
+ --paragraph-regular-spacing: 16px;
543
+ --paragraph-regular-letter-spacing: 0;
544
+ --paragraph-small-font-size: 14px;
545
+ --paragraph-small-line-height: 21px;
546
+ --paragraph-small-spacing: 14px;
547
+ --paragraph-small-letter-spacing: 0;
548
+ --paragraph-mini-font-size: 12px;
549
+ --paragraph-mini-line-height: 16px;
550
+ --paragraph-mini-spacing: 12px;
551
+ --paragraph-mini-letter-spacing: 0;
552
+ --heading-4-spacing: 20px;
553
+ --heading-4-letter-spacing: 0;
554
+ }
555
+
556
+ /* Collection: shadows */
557
+ [data-shadows="Kwato"] {
558
+ --2xs-color: rgba(0, 0, 0, 0.05);
559
+ --2xs-x: 0;
560
+ --2xs-y: 1px;
561
+ --2xs-blur: 0;
562
+ --2xs-spread: 0;
563
+ --xs-color: rgba(0, 0, 0, 0.05);
564
+ --xs-x: 0;
565
+ --xs-y: 1px;
566
+ --xs-blur: 2px;
567
+ --xs-spread: 0;
568
+ --sm-shadow-1-x: 0;
569
+ --sm-shadow-1-y: 1px;
570
+ --sm-shadow-1-blur: 3px;
571
+ --sm-shadow-1-spread: 0;
572
+ --sm-shadow-2-x2: 0;
573
+ --sm-shadow-2-y: 1px;
574
+ --sm-shadow-2-blur: 2px;
575
+ --sm-shadow-2-spread: -1px;
576
+ --sm-color: rgba(0, 0, 0, 0.1);
577
+ --md-color: rgba(0, 0, 0, 0.1);
578
+ --md-shadow-1-x: 0;
579
+ --md-shadow-1-y: 4px;
580
+ --md-shadow-1-blur: 6px;
581
+ --md-shadow-1-spread: -1px;
582
+ --md-shadow-2-x: 0;
583
+ --md-shadow-2-y: 2px;
584
+ --md-shadow-2-blur: 4px;
585
+ --md-shadow-2-spread: -2px;
586
+ --lg-shadow-1-x: 0;
587
+ --lg-shadow-1-y: 10px;
588
+ --lg-shadow-1-blur: 15px;
589
+ --lg-shadow-1-spread: -3px;
590
+ --lg-shadow-2-x: 0;
591
+ --lg-shadow-2-y: 4px;
592
+ --lg-shadow-2-blur: -4px;
593
+ --lg-shadow-2-spread: 6px;
594
+ --lg-color: rgba(0, 0, 0, 0.1);
595
+ --xl-color: rgba(0, 0, 0, 0.1);
596
+ --xl-shadow-1-x: 0;
597
+ --xl-shadow-1-y: 20px;
598
+ --xl-shadow-1-blur: 25px;
599
+ --xl-shadow-1-spread: -5px;
600
+ --xl-shadow-2-x: 0;
601
+ --xl-shadow-2-y: 8px;
602
+ --xl-shadow-2-blur: -6px;
603
+ --xl-shadow-2-spread: 10px;
604
+ --2xl-color: rgba(0, 0, 0, 0.25);
605
+ --2xl-x: 0;
606
+ --2xl-y: 25px;
607
+ --2xl-blur: 50px;
608
+ --2xl-spread: 12px;
609
+ }
610
+
611
+ /* Collection: kwato colors - RGB fallback */
612
+ [data-kwato-colors="Mode-1"] {
613
+ /* Base Colors */
614
+ --white: rgb(255, 255, 255);
615
+ --black: rgb(0, 0, 0);
616
+
617
+ /* Orange Kwato (Brand Primary) */
618
+ --orangen-kwato-0: rgb(255, 252, 250);
619
+ --orangen-kwato-50: rgb(255, 245, 240);
620
+ --orangen-kwato-100: rgb(255, 235, 222);
621
+ --orangen-kwato-200: rgb(255, 217, 191);
622
+ --orangen-kwato-300: rgb(255, 201, 171);
623
+ --orangen-kwato-400: rgb(255, 186, 148);
624
+ --orangen-kwato-500: rgb(250, 168, 130);
625
+ --orangen-kwato-600: rgb(240, 143, 97);
626
+ --orangen-kwato-700: rgb(242, 105, 0);
627
+ --orangen-kwato-800: rgb(230, 89, 0);
628
+ --orangen-kwato-900: rgb(209, 77, 0);
629
+ --orangen-kwato-950: rgb(87, 46, 26);
630
+
631
+ /* Neutral Kwato */
632
+ --neutral-kwato-0: rgb(255, 255, 255);
633
+ --neutral-kwato-50: rgb(247, 247, 252);
634
+ --neutral-kwato-100: rgb(237, 237, 242);
635
+ --neutral-kwato-200: rgb(214, 214, 227);
636
+ --neutral-kwato-300: rgb(176, 181, 199);
637
+ --neutral-kwato-400: rgb(135, 140, 168);
638
+ --neutral-kwato-500: rgb(105, 112, 143);
639
+ --neutral-kwato-600: rgb(84, 89, 117);
640
+ --neutral-kwato-700: rgb(69, 71, 97);
641
+ --neutral-kwato-800: rgb(59, 61, 79);
642
+ --neutral-kwato-900: rgb(51, 54, 69);
643
+ --neutral-kwato-950: rgb(38, 38, 51);
644
+
645
+ /* Green Kwato */
646
+ --green-kwato-0: rgb(250, 255, 252);
647
+ --green-kwato-50: rgb(237, 252, 245);
648
+ --green-kwato-100: rgb(209, 250, 230);
649
+ --green-kwato-200: rgb(166, 245, 209);
650
+ --green-kwato-300: rgb(110, 232, 186);
651
+ --green-kwato-400: rgb(51, 214, 156);
652
+ --green-kwato-500: rgb(10, 186, 133);
653
+ --green-kwato-600: rgb(10, 166, 120);
654
+ --green-kwato-700: rgb(3, 120, 89);
655
+ --green-kwato-800: rgb(5, 94, 71);
656
+ --green-kwato-900: rgb(5, 79, 61);
657
+ --green-kwato-950: rgb(3, 43, 36);
658
+
659
+ /* Yellow Kwato */
660
+ --yellow-kwato-0: rgb(255, 252, 245);
661
+ --yellow-kwato-50: rgb(255, 247, 230);
662
+ --yellow-kwato-100: rgb(255, 242, 204);
663
+ --yellow-kwato-200: rgb(255, 230, 153);
664
+ --yellow-kwato-300: rgb(252, 217, 105);
665
+ --yellow-kwato-400: rgb(252, 204, 54);
666
+ --yellow-kwato-500: rgb(252, 191, 5);
667
+ --yellow-kwato-600: rgb(201, 153, 3);
668
+ --yellow-kwato-700: rgb(150, 115, 3);
669
+ --yellow-kwato-800: rgb(102, 77, 0);
670
+ --yellow-kwato-900: rgb(74, 56, 3);
671
+ --yellow-kwato-950: rgb(46, 33, 0);
672
+
673
+ /* Red Kwato */
674
+ --red-kwato-0: rgb(255, 250, 250);
675
+ --red-kwato-50: rgb(255, 242, 242);
676
+ --red-kwato-100: rgb(255, 230, 230);
677
+ --red-kwato-200: rgb(255, 201, 201);
678
+ --red-kwato-300: rgb(252, 163, 163);
679
+ --red-kwato-400: rgb(250, 112, 112);
680
+ --red-kwato-500: rgb(240, 61, 61);
681
+ --red-kwato-600: rgb(222, 36, 36);
682
+ --red-kwato-700: rgb(186, 28, 28);
683
+ --red-kwato-800: rgb(153, 26, 28);
684
+ --red-kwato-900: rgb(128, 28, 28);
685
+ --red-kwato-950: rgb(69, 10, 10);
686
+
687
+ /* Blue Kwato */
688
+ --blue-kwato-0: rgb(245, 252, 255);
689
+ --blue-kwato-50: rgb(237, 245, 255);
690
+ --blue-kwato-100: rgb(217, 232, 255);
691
+ --blue-kwato-200: rgb(153, 194, 255);
692
+ --blue-kwato-300: rgb(97, 156, 255);
693
+ --blue-kwato-400: rgb(66, 122, 255);
694
+ --blue-kwato-500: rgb(36, 84, 245);
695
+ --blue-kwato-600: rgb(20, 59, 235);
696
+ --blue-kwato-700: rgb(20, 54, 214);
697
+ --blue-kwato-800: rgb(23, 46, 181);
698
+ --blue-kwato-900: rgb(26, 43, 143);
699
+ --blue-kwato-950: rgb(20, 28, 87);
700
+
701
+ /* Indigo Kwato */
702
+ --indigo-kwato-0: rgb(247, 247, 255);
703
+ --indigo-kwato-50: rgb(242, 242, 255);
704
+ --indigo-kwato-100: rgb(232, 230, 255);
705
+ --indigo-kwato-200: rgb(222, 217, 255);
706
+ --indigo-kwato-300: rgb(214, 204, 255);
707
+ --indigo-kwato-400: rgb(199, 189, 255);
708
+ --indigo-kwato-500: rgb(171, 148, 255);
709
+ --indigo-kwato-600: rgb(148, 115, 255);
710
+ --indigo-kwato-700: rgb(112, 38, 255);
711
+ --indigo-kwato-800: rgb(87, 0, 209);
712
+ --indigo-kwato-900: rgb(59, 0, 148);
713
+ --indigo-kwato-950: rgb(28, 0, 79);
714
+
715
+ /* Neutral Dark Kwato */
716
+ --neutral-dark-kwato-50: rgb(250, 250, 250);
717
+ --neutral-dark-kwato-100: rgb(245, 245, 245);
718
+ --neutral-dark-kwato-200: rgb(230, 230, 230);
719
+ --neutral-dark-kwato-300: rgb(212, 212, 212);
720
+ --neutral-dark-kwato-400: rgb(163, 163, 163);
721
+ --neutral-dark-kwato-500: rgb(115, 115, 115);
722
+ --neutral-dark-kwato-600: rgb(82, 82, 82);
723
+ --neutral-dark-kwato-700: rgb(64, 64, 64);
724
+ --neutral-dark-kwato-800: rgb(38, 38, 38);
725
+ --neutral-dark-kwato-900: rgb(23, 23, 23);
726
+ --neutral-dark-kwato-950: rgb(10, 10, 10);
727
+ }
728
+
729
+ /* Collection: kwato colors - OKLCH overrides */
730
+ @supports (color: oklch(0 0 0)) {
731
+ [data-kwato-colors="Mode-1"] {
732
+ /* Base Colors */
733
+ --white: oklch(1.0000 0.0000 0);
734
+ --black: oklch(0.0000 0.0000 0);
735
+
736
+ /* Orange Kwato (Brand Primary) */
737
+ --orangen-kwato-0: oklch(0.9937 0.0053 55.95);
738
+ --orangen-kwato-50: oklch(0.9780 0.0159 48.72);
739
+ --orangen-kwato-100: oklch(0.9541 0.0337 52.47);
740
+ --orangen-kwato-200: oklch(0.9134 0.0599 53.88);
741
+ --orangen-kwato-300: oklch(0.8750 0.0861 52.34);
742
+ --orangen-kwato-400: oklch(0.8361 0.1123 51.26);
743
+ --orangen-kwato-500: oklch(0.7887 0.1260 50.83);
744
+ --orangen-kwato-600: oklch(0.7287 0.1467 47.71);
745
+ --orangen-kwato-700: oklch(0.6678 0.1890 46.15);
746
+ --orangen-kwato-800: oklch(0.6215 0.1810 45.25);
747
+ --orangen-kwato-900: oklch(0.5645 0.1650 44.35);
748
+ --orangen-kwato-950: oklch(0.3540 0.0683 42.94);
749
+
750
+ /* Neutral Kwato */
751
+ --neutral-kwato-0: oklch(1.0000 0.0000 0);
752
+ --neutral-kwato-50: oklch(0.9776 0.0066 286.28);
753
+ --neutral-kwato-100: oklch(0.9475 0.0067 286.27);
754
+ --neutral-kwato-200: oklch(0.8800 0.0177 286.03);
755
+ --neutral-kwato-300: oklch(0.7748 0.0262 273.41);
756
+ --neutral-kwato-400: oklch(0.6555 0.0422 277.19);
757
+ --neutral-kwato-500: oklch(0.5628 0.0490 274.77);
758
+ --neutral-kwato-600: oklch(0.4808 0.0458 276.62);
759
+ --neutral-kwato-700: oklch(0.4128 0.0436 280.85);
760
+ --neutral-kwato-800: oklch(0.3716 0.0311 279.78);
761
+ --neutral-kwato-900: oklch(0.3423 0.0267 276.03);
762
+ --neutral-kwato-950: oklch(0.2854 0.0239 284.72);
763
+
764
+ /* Green Kwato */
765
+ --green-kwato-0: oklch(0.9954 0.0066 160.08);
766
+ --green-kwato-50: oklch(0.9780 0.0257 163.85);
767
+ --green-kwato-100: oklch(0.9574 0.0500 164.30);
768
+ --green-kwato-200: oklch(0.9184 0.0924 164.29);
769
+ --green-kwato-300: oklch(0.8618 0.1290 166.12);
770
+ --green-kwato-400: oklch(0.7932 0.1551 163.63);
771
+ --green-kwato-500: oklch(0.7052 0.1476 163.98);
772
+ --green-kwato-600: oklch(0.6541 0.1340 164.74);
773
+ --green-kwato-700: oklch(0.5186 0.1034 167.03);
774
+ --green-kwato-800: oklch(0.4390 0.0846 168.56);
775
+ --green-kwato-900: oklch(0.3915 0.0730 170.39);
776
+ --green-kwato-950: oklch(0.2700 0.0452 178.11);
777
+
778
+ /* Yellow Kwato */
779
+ --yellow-kwato-0: oklch(0.9937 0.0098 87.47);
780
+ --yellow-kwato-50: oklch(0.9778 0.0311 88.47);
781
+ --yellow-kwato-100: oklch(0.9618 0.0512 91.37);
782
+ --yellow-kwato-200: oklch(0.9284 0.0998 92.14);
783
+ --yellow-kwato-300: oklch(0.8934 0.1361 92.11);
784
+ --yellow-kwato-400: oklch(0.8638 0.1626 89.70);
785
+ --yellow-kwato-500: oklch(0.8372 0.1709 85.13);
786
+ --yellow-kwato-600: oklch(0.7148 0.1446 85.94);
787
+ --yellow-kwato-700: oklch(0.5842 0.1166 87.15);
788
+ --yellow-kwato-800: oklch(0.4446 0.0889 87.06);
789
+ --yellow-kwato-900: oklch(0.3610 0.0696 87.74);
790
+ --yellow-kwato-950: oklch(0.2664 0.0524 86.91);
791
+
792
+ /* Red Kwato */
793
+ --red-kwato-0: oklch(0.9889 0.0053 17.25);
794
+ --red-kwato-50: oklch(0.9713 0.0140 17.40);
795
+ --red-kwato-100: oklch(0.9452 0.0274 17.65);
796
+ --red-kwato-200: oklch(0.8834 0.0616 18.39);
797
+ --red-kwato-300: oklch(0.8038 0.1061 19.65);
798
+ --red-kwato-400: oklch(0.7119 0.1696 22.35);
799
+ --red-kwato-500: oklch(0.6314 0.2153 25.92);
800
+ --red-kwato-600: oklch(0.5794 0.2182 27.50);
801
+ --red-kwato-700: oklch(0.5073 0.1914 27.54);
802
+ --red-kwato-800: oklch(0.4431 0.1619 26.37);
803
+ --red-kwato-900: oklch(0.3967 0.1352 25.91);
804
+ --red-kwato-950: oklch(0.2675 0.0886 26.04);
805
+
806
+ /* Blue Kwato */
807
+ --blue-kwato-0: oklch(0.9867 0.0084 225.08);
808
+ --blue-kwato-50: oklch(0.9670 0.0159 253.90);
809
+ --blue-kwato-100: oklch(0.9268 0.0352 258.87);
810
+ --blue-kwato-200: oklch(0.8072 0.0975 258.14);
811
+ --blue-kwato-300: oklch(0.6979 0.1586 260.17);
812
+ --blue-kwato-400: oklch(0.6157 0.2069 264.05);
813
+ --blue-kwato-500: oklch(0.5376 0.2246 265.23);
814
+ --blue-kwato-600: oklch(0.4850 0.2407 265.21);
815
+ --blue-kwato-700: oklch(0.4549 0.2214 265.48);
816
+ --blue-kwato-800: oklch(0.4075 0.1898 266.65);
817
+ --blue-kwato-900: oklch(0.3627 0.1544 268.26);
818
+ --blue-kwato-950: oklch(0.2732 0.1060 271.09);
819
+
820
+ /* Indigo Kwato */
821
+ --indigo-kwato-0: oklch(0.9784 0.0106 286.20);
822
+ --indigo-kwato-50: oklch(0.9649 0.0173 286.07);
823
+ --indigo-kwato-100: oklch(0.9340 0.0337 289.40);
824
+ --indigo-kwato-200: oklch(0.9012 0.0519 291.36);
825
+ --indigo-kwato-300: oklch(0.8700 0.0706 293.87);
826
+ --indigo-kwato-400: oklch(0.8295 0.0921 291.20);
827
+ --indigo-kwato-500: oklch(0.7309 0.1525 292.08);
828
+ --indigo-kwato-600: oklch(0.6550 0.1995 290.69);
829
+ --indigo-kwato-700: oklch(0.5289 0.2800 287.55);
830
+ --indigo-kwato-800: oklch(0.4385 0.2524 287.29);
831
+ --indigo-kwato-900: oklch(0.3492 0.1955 287.09);
832
+ --indigo-kwato-950: oklch(0.2277 0.1254 287.18);
833
+
834
+ /* Neutral Dark Kwato */
835
+ --neutral-dark-kwato-50: oklch(0.9851 0.0000 0);
836
+ --neutral-dark-kwato-100: oklch(0.9702 0.0000 0);
837
+ --neutral-dark-kwato-200: oklch(0.9249 0.0000 0);
838
+ --neutral-dark-kwato-300: oklch(0.8699 0.0000 0);
839
+ --neutral-dark-kwato-400: oklch(0.7155 0.0000 0);
840
+ --neutral-dark-kwato-500: oklch(0.5555 0.0000 0);
841
+ --neutral-dark-kwato-600: oklch(0.4386 0.0000 0);
842
+ --neutral-dark-kwato-700: oklch(0.3715 0.0000 0);
843
+ --neutral-dark-kwato-800: oklch(0.2686 0.0000 0);
844
+ --neutral-dark-kwato-900: oklch(0.2046 0.0000 0);
845
+ --neutral-dark-kwato-950: oklch(0.1448 0.0000 0);
846
+ }
847
+ }
848
+
849
+ /* ========================================= */
850
+ /* ALIAS VARIABLES (Semantic Layer) */
851
+ /* ========================================= */
852
+
853
+ /* Collection: border radii - Aliases */
854
+ [data-border-radii="Kwato"] {
855
+ --semantic-rounded-xs: var(--absolute-radius-4);
856
+ --semantic-rounded-sm: var(--absolute-radius-6);
857
+ --semantic-rounded-md: var(--absolute-radius-8);
858
+ --semantic-rounded-lg: var(--absolute-radius-10);
859
+ --semantic-rounded-xl: var(--absolute-radius-16);
860
+ --semantic-rounded-2xl: var(--absolute-radius-24);
861
+ --semantic-rounded-3xl: var(--absolute-radius-32);
862
+ --semantic-rounded-full: var(--absolute-radius-infinite);
863
+ }
864
+
865
+ /* Collection: spacing - Aliases */
866
+ [data-spacing="kwato"] {
867
+ --semantic-3xs: var(--absolute-1);
868
+ --semantic-2xs: var(--absolute-15);
869
+ --semantic-xs: var(--absolute-25);
870
+ --semantic-md: var(--absolute-5);
871
+ --semantic-lg: var(--absolute-6);
872
+ --semantic-xl: var(--absolute-7);
873
+ --semantic-2xl: var(--absolute-9);
874
+ --semantic-3xl: var(--absolute-11);
875
+ --semantic-4xl: var(--absolute-14);
876
+ --semantic-5xl: var(--absolute-20);
877
+ }
878
+
879
+ /* Collection: semantic colors - Aliases */
880
+ [data-semantic-colors="Kwato-Light"] {
881
+ --general-background: var(--white);
882
+ --general-foreground: var(--neutral-dark-kwato-950);
883
+ --general-primary: var(--orangen-kwato-900);
884
+ --general-primary-foreground: var(--neutral-dark-kwato-50);
885
+ --general-secondary: var(--orangen-kwato-300);
886
+ --general-secondary-foreground: var(--neutral-dark-kwato-950);
887
+ --general-accent: var(--neutral-dark-kwato-100);
888
+ --general-accent-foreground: var(--neutral-dark-kwato-950);
889
+ --general-muted: var(--neutral-dark-kwato-100);
890
+ --general-muted-foreground: var(--neutral-dark-kwato-500);
891
+ --general-destructive: var(--red-kwato-600);
892
+ --general-border: var(--neutral-dark-kwato-200);
893
+ --general-input: var(--white);
894
+ --card-card: var(--white);
895
+ --card-card-foreground: var(--black);
896
+ --popover-popover: var(--black);
897
+ --popover-popover-foreground: var(--white);
898
+ --focus-ring: var(--neutral-kwato-200);
899
+ --sidebar-sidebar: var(--neutral-dark-kwato-50);
900
+ --sidebar-sidebar-foreground: var(--neutral-dark-kwato-800);
901
+ --sidebar-sidebar-accent: var(--neutral-dark-kwato-200);
902
+ --sidebar-sidebar-accent-foreground: var(--neutral-dark-kwato-700);
903
+ --sidebar-sidebar-primary: var(--neutral-dark-kwato-950);
904
+ --sidebar-sidebar-primary-foreground: var(--neutral-dark-kwato-50);
905
+ --sidebar-sidebar-border: var(--neutral-dark-kwato-200);
906
+ --sidebar-sidebar-ring: var(--neutral-dark-kwato-300);
907
+ --focus-ring-error: var(--red-kwato-200);
908
+ }
909
+
910
+ [data-semantic-colors="Kwato-Dark"] {
911
+ --general-background: var(--black);
912
+ --general-foreground: var(--neutral-dark-kwato-50);
913
+ --general-primary: var(--orangen-kwato-400);
914
+ --general-primary-foreground: var(--neutral-dark-kwato-950);
915
+ --general-secondary: var(--neutral-dark-kwato-800);
916
+ --general-secondary-foreground: var(--neutral-dark-kwato-100);
917
+ --general-accent: var(--neutral-dark-kwato-900);
918
+ --general-accent-foreground: var(--neutral-dark-kwato-100);
919
+ --general-muted: var(--neutral-dark-kwato-900);
920
+ --general-muted-foreground: var(--neutral-dark-kwato-400);
921
+ --general-destructive: rgb(158, 64, 66);
922
+ --general-border: var(--neutral-dark-kwato-700);
923
+ --general-input: rgba(255, 255, 255, 0.05);
924
+ --card-card: var(--neutral-dark-kwato-900);
925
+ --card-card-foreground: var(--white);
926
+ --popover-popover: var(--white);
927
+ --popover-popover-foreground: var(--black);
928
+ --focus-ring: var(--neutral-dark-kwato-700);
929
+ --sidebar-sidebar: var(--neutral-dark-kwato-950);
930
+ --sidebar-sidebar-foreground: var(--neutral-dark-kwato-300);
931
+ --sidebar-sidebar-accent: var(--neutral-dark-kwato-900);
932
+ --sidebar-sidebar-accent-foreground: var(--neutral-dark-kwato-100);
933
+ --sidebar-sidebar-primary: var(--neutral-dark-kwato-50);
934
+ --sidebar-sidebar-primary-foreground: var(--neutral-dark-kwato-900);
935
+ --sidebar-sidebar-border: var(--neutral-dark-kwato-800);
936
+ --sidebar-sidebar-ring: var(--neutral-dark-kwato-700);
937
+ --focus-ring-error: rgb(110, 46, 46);
938
+ }
939
+
940
+ /* Collection: typography - Aliases */
941
+ [data-typography="Kwato"] {
942
+ --font-definitions-font-family-headings: var(--font-definitions-font-family-sans);
943
+ --font-definitions-font-family-body: var(--font-definitions-font-family-sans);
944
+ }
945
+
946
+ /* ========================================= */
947
+ /* USAGE EXAMPLES */
948
+ /* ========================================= */
949
+
950
+ /*
951
+ DYNAMIC MODE SWITCHING:
952
+
953
+ <!-- border radii Collection -->
954
+ <div data-border-radii="Kwato">Content in Kwato mode</div>
955
+
956
+ <!-- spacing Collection -->
957
+ <div data-spacing="kwato">Content in kwato mode</div>
958
+
959
+ <!-- semantic colors Collection -->
960
+ <div data-semantic-colors="Kwato-Light">Content in Kwato Light mode</div>
961
+ <div data-semantic-colors="Kwato-Dark">Content in Kwato Dark mode</div>
962
+
963
+ <!-- typography Collection -->
964
+ <div data-typography="Kwato">Content in Kwato mode</div>
965
+
966
+ <!-- shadows Collection -->
967
+ <div data-shadows="Kwato">Content in Kwato mode</div>
968
+
969
+ <!-- kwato colors Collection -->
970
+ <div data-kwato-colors="Mode-1">Content in Mode 1 mode</div>
971
+
972
+ MULTI-MODE SWITCHING:
973
+ <div data-theme="light" data-size="large" data-prominence="primary">
974
+ Content with multiple mode attributes
975
+ </div>
976
+
977
+ VARIABLE USAGE IN CSS:
978
+ .my-component {
979
+ font-size: var(--semantic-rounded-none);
980
+ font-size: var(--semantic-rounded-xs);
981
+ font-size: var(--absolute-radius-2);
982
+ }
983
+
984
+ OKLCH COLOR SPACE:
985
+ - Modern browsers use OKLCH values for perceptually uniform colors
986
+ - Older browsers fall back to RGB values automatically
987
+ - @supports ensures graceful degradation
988
+ */
989
+
990
+ /* CSS Custom Property Validation */
991
+ @supports (color: var(--test)) {
992
+ /* Modern browsers with CSS custom property support */
993
+ .css-variables-supported {
994
+ display: block;
995
+ }
996
+ }
997
+
998
+ @supports not (color: var(--test)) {
999
+ /* Fallback for older browsers */
1000
+ .css-variables-not-supported {
1001
+ display: block;
1002
+ }
1003
+ .css-variables-supported {
1004
+ display: none;
1005
+ }
1006
+ }