astralkit 0.3.8 → 0.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/CHANGELOG.md +23 -0
  2. package/ai-rules.md +1 -1
  3. package/astralkit-theme-v4.css +42 -0
  4. package/astralkit-theme.css +42 -0
  5. package/lib/motion.d.ts +29 -0
  6. package/lib/motion.js +85 -0
  7. package/package.json +2 -1
  8. package/palettes.css +1125 -269
  9. package/primitives/layout.css +3 -0
  10. package/tailwind.cjs +41 -0
package/palettes.css CHANGED
@@ -57,272 +57,1128 @@
57
57
  stay black-alpha.
58
58
  ══════════════════════════════════════════════════════════ */
59
59
 
60
- /* ─── Light Palettes ─── */
61
-
62
- [data-ak-theme="ocean-blue"] {
63
- --color-ak-bg: #FFFFFE;
64
- --color-ak-surface: #D8EEFE;
65
- --color-ak-surface-2: #E8F3FD;
66
- --color-ak-text: #094067;
67
- --color-ak-text-secondary: #5F6C7B;
68
- --color-ak-text-muted: #8899A6;
69
- --color-ak-primary: #3DA9FC;
70
- --color-ak-primary-hover: #2B96E8;
71
- --color-ak-primary-active: #1E83D4;
72
- --color-ak-on-primary: #ffffff;
73
- --color-ak-border: #C4DFF3;
74
- --color-ak-border-subtle: #E0EFF9;
75
- --color-ak-border-strong: #90B4CE;
76
- --color-ak-border-focus: #3DA9FC;
77
- --color-ak-text-link: #3DA9FC;
78
- --color-ak-danger: #EF4565;
79
- }
80
-
81
- [data-ak-theme="forest-gold"] {
82
- --color-ak-bg: #F2F7F5;
83
- --color-ak-surface: #FFFFFF;
84
- --color-ak-surface-2: #E8F0ED;
85
- --color-ak-text: #00473E;
86
- --color-ak-text-secondary: #475D5B;
87
- --color-ak-text-muted: #7A8E8C;
88
- --color-ak-primary: #FAAE2B;
89
- --color-ak-primary-hover: #E89D1A;
90
- --color-ak-primary-active: #D18C0E;
91
- --color-ak-on-primary: #00473E;
92
- --color-ak-border: #C9D5D2;
93
- --color-ak-border-subtle: #DDE6E3;
94
- --color-ak-border-strong: #A0B2AE;
95
- --color-ak-border-focus: #FAAE2B;
96
- --color-ak-text-link: #00473E;
97
- --color-ak-danger: #FA5246;
98
- }
99
-
100
- [data-ak-theme="minimal-violet"] {
101
- --color-ak-bg: #FFFFFE;
102
- --color-ak-surface: #F0EEFA;
103
- --color-ak-surface-2: #E8E6F4;
104
- --color-ak-text: #2B2C34;
105
- --color-ak-text-secondary: #555660;
106
- --color-ak-text-muted: #8788A0;
107
- --color-ak-primary: #6246EA;
108
- --color-ak-primary-hover: #5035D1;
109
- --color-ak-primary-active: #4028B8;
110
- --color-ak-on-primary: #ffffff;
111
- --color-ak-border: #D1D1E9;
112
- --color-ak-border-subtle: #E4E4F0;
113
- --color-ak-border-strong: #ABABCD;
114
- --color-ak-border-focus: #6246EA;
115
- --color-ak-text-link: #6246EA;
116
- --color-ak-danger: #E45858;
117
- }
118
-
119
- [data-ak-theme="warm-earth"] {
120
- --color-ak-bg: #F8F5F2;
121
- --color-ak-surface: #FFFFFF;
122
- --color-ak-surface-2: #F0EDE9;
123
- --color-ak-text: #232323;
124
- --color-ak-text-secondary: #4A4A4A;
125
- --color-ak-text-muted: #888888;
126
- --color-ak-primary: #078080;
127
- --color-ak-primary-hover: #066D6D;
128
- --color-ak-primary-active: #055A5A;
129
- --color-ak-on-primary: #ffffff;
130
- --color-ak-border: #E8E2DB;
131
- --color-ak-border-subtle: #F0ECE6;
132
- --color-ak-border-strong: #CFC5B8;
133
- --color-ak-border-focus: #078080;
134
- --color-ak-text-link: #078080;
135
- --color-ak-danger: #F45D48;
136
- }
137
-
138
- [data-ak-theme="tangerine"] {
139
- --color-ak-bg: #EFF0F3;
140
- --color-ak-surface: #FFFFFE;
141
- --color-ak-surface-2: #E5E6E9;
142
- --color-ak-text: #0D0D0D;
143
- --color-ak-text-secondary: #2A2A2A;
144
- --color-ak-text-muted: #777777;
145
- --color-ak-primary: #FF8E3C;
146
- --color-ak-primary-hover: #E87D2E;
147
- --color-ak-primary-active: #D16C20;
148
- --color-ak-on-primary: #0D0D0D;
149
- --color-ak-border: #DDDDE2;
150
- --color-ak-border-subtle: #EBEBEF;
151
- --color-ak-border-strong: #C0C0C8;
152
- --color-ak-border-focus: #FF8E3C;
153
- --color-ak-text-link: #0D0D0D;
154
- --color-ak-danger: #D9376E;
155
- }
156
-
157
- [data-ak-theme="slate-pro"] {
158
- --color-ak-bg: #F8FAFC;
159
- --color-ak-surface: #FFFFFF;
160
- --color-ak-surface-2: #F1F5F9;
161
- --color-ak-text: #0F172A;
162
- --color-ak-text-secondary: #475569;
163
- --color-ak-text-muted: #94A3B8;
164
- --color-ak-primary: #2563EB;
165
- --color-ak-primary-hover: #1D4FD7;
166
- --color-ak-primary-active: #1E40AF;
167
- --color-ak-on-primary: #ffffff;
168
- --color-ak-border: #E2E8F0;
169
- --color-ak-border-subtle: #F1F5F9;
170
- --color-ak-border-strong: #CBD5E1;
171
- --color-ak-border-focus: #2563EB;
172
- --color-ak-text-link: #2563EB;
173
- }
174
-
175
- [data-ak-theme="emerald-saas"] {
176
- --color-ak-bg: #F9FAFB;
177
- --color-ak-surface: #FFFFFF;
178
- --color-ak-surface-2: #F3F4F6;
179
- --color-ak-text: #111827;
180
- --color-ak-text-secondary: #4B5563;
181
- --color-ak-text-muted: #9CA3AF;
182
- --color-ak-primary: #059669;
183
- --color-ak-primary-hover: #047857;
184
- --color-ak-primary-active: #065F46;
185
- --color-ak-on-primary: #ffffff;
186
- --color-ak-border: #E5E7EB;
187
- --color-ak-border-subtle: #F3F4F6;
188
- --color-ak-border-strong: #D1D5DB;
189
- --color-ak-border-focus: #059669;
190
- --color-ak-text-link: #059669;
191
- }
192
-
193
- [data-ak-theme="astral-violet"] {
194
- --color-ak-bg: #FAF9F7;
195
- --color-ak-surface: #FFFFFF;
196
- --color-ak-surface-2: #F4F2F9;
197
- --color-ak-text: #150A35;
198
- --color-ak-text-secondary: #544D6B;
199
- --color-ak-text-muted: #8B849E;
200
- --color-ak-primary: #6933FF;
201
- --color-ak-primary-hover: #5A24F0;
202
- --color-ak-primary-active: #4B18DE;
203
- --color-ak-on-primary: #ffffff;
204
- --color-ak-border: #E6E3EE;
205
- --color-ak-border-subtle: #F0EEF5;
206
- --color-ak-border-strong: #C8C3D6;
207
- --color-ak-border-focus: #6933FF;
208
- --color-ak-text-link: #6933FF;
209
- }
210
-
211
- /* ─── Dark Palettes ─── */
212
-
213
- [data-ak-theme="midnight"] {
214
- --color-ak-bg: #16161A;
215
- --color-ak-surface: #242629;
216
- --color-ak-surface-2: #2E3035;
217
- --color-ak-text: #FFFFFE;
218
- --color-ak-text-secondary: #94A1B2;
219
- --color-ak-text-muted: #6B7280;
220
- --color-ak-primary: #7F5AF0;
221
- --color-ak-primary-hover: #9B7BF5;
222
- --color-ak-primary-active: #6B46DC;
223
- --color-ak-on-primary: #16161A;
224
- --color-ak-border: rgba(255, 255, 255, 0.10);
225
- --color-ak-border-subtle: rgba(255, 255, 255, 0.06);
226
- --color-ak-border-strong: rgba(255, 255, 255, 0.16);
227
- --color-ak-border-focus: #7F5AF0;
228
- --color-ak-text-link: #7F5AF0;
229
- --color-ak-hover: rgba(255,255,255,0.04);
230
- --color-ak-active: rgba(255,255,255,0.08);
231
- --shadow-ak-xs: none;
232
- --shadow-ak-sm: none;
233
- }
234
-
235
- [data-ak-theme="ember-dark"] {
236
- --color-ak-bg: #0F0E17;
237
- --color-ak-surface: #1A1925;
238
- --color-ak-surface-2: #252433;
239
- --color-ak-text: #FFFFFE;
240
- --color-ak-text-secondary: #A7A9BE;
241
- --color-ak-text-muted: #6E7089;
242
- --color-ak-primary: #FF8906;
243
- --color-ak-primary-hover: #FFa033;
244
- --color-ak-primary-active: #E67A00;
245
- --color-ak-on-primary: #0F0E17;
246
- --color-ak-border: rgba(255, 255, 255, 0.10);
247
- --color-ak-border-subtle: rgba(255, 255, 255, 0.06);
248
- --color-ak-border-strong: rgba(255, 255, 255, 0.16);
249
- --color-ak-border-focus: #FF8906;
250
- --color-ak-text-link: #FF8906;
251
- --color-ak-hover: rgba(255,255,255,0.04);
252
- --color-ak-active: rgba(255,255,255,0.08);
253
- --shadow-ak-xs: none;
254
- --shadow-ak-sm: none;
255
- }
256
-
257
- [data-ak-theme="obsidian"] {
258
- --color-ak-bg: #09090B;
259
- --color-ak-surface: #18181B;
260
- --color-ak-surface-2: #27272A;
261
- --color-ak-text: #FAFAFA;
262
- --color-ak-text-secondary: #A1A1AA;
263
- --color-ak-text-muted: #71717A;
264
- --color-ak-primary: #60A5FA;
265
- --color-ak-primary-hover: #93C5FD;
266
- --color-ak-primary-active: #3B82F6;
267
- --color-ak-on-primary: #09090B;
268
- --color-ak-border: rgba(255, 255, 255, 0.10);
269
- --color-ak-border-subtle: rgba(255, 255, 255, 0.06);
270
- --color-ak-border-strong: rgba(255, 255, 255, 0.16);
271
- --color-ak-border-focus: #60A5FA;
272
- --color-ak-text-link: #60A5FA;
273
- --color-ak-hover: rgba(255,255,255,0.04);
274
- --color-ak-active: rgba(255,255,255,0.08);
275
- --shadow-ak-xs: none;
276
- --shadow-ak-sm: none;
277
- }
278
-
279
- [data-ak-theme="deep-teal"] {
280
- --color-ak-bg: #004643;
281
- --color-ak-surface: #00332F;
282
- --color-ak-surface-2: #0A5854;
283
- --color-ak-text: #FFFFFE;
284
- --color-ak-text-secondary: #ABD1C6;
285
- --color-ak-text-muted: #7AAA9E;
286
- --color-ak-primary: #F9BC60;
287
- --color-ak-primary-hover: #FAC97A;
288
- --color-ak-primary-active: #E8AA4E;
289
- --color-ak-on-primary: #004643;
290
- --color-ak-border: rgba(255, 255, 255, 0.10);
291
- --color-ak-border-subtle: rgba(255, 255, 255, 0.06);
292
- --color-ak-border-strong: rgba(255, 255, 255, 0.16);
293
- --color-ak-border-focus: #F9BC60;
294
- --color-ak-text-link: #F9BC60;
295
- --color-ak-hover: rgba(255,255,255,0.04);
296
- --color-ak-active: rgba(255,255,255,0.08);
297
- --shadow-ak-xs: none;
298
- --shadow-ak-sm: none;
299
- }
300
-
301
- /* ─── Brand Design System Palettes ─── */
302
-
303
- [data-ak-theme="logozap"] {
304
- --color-ak-bg: #FAFAF7;
305
- --color-ak-surface: #FFFFFF;
306
- --color-ak-surface-2: #F0EFEA;
307
- --color-ak-text: #0A0A0A;
308
- --color-ak-text-secondary: #5A5A5A;
309
- --color-ak-text-muted: #8C8C8C;
310
- --color-ak-text-disabled: #C4C2BA;
311
- --color-ak-text-placeholder: #8C8C8C;
312
- --color-ak-primary: #1E7BFF;
313
- --color-ak-primary-hover: #0B4FD9;
314
- --color-ak-primary-active: #0942B0;
315
- --color-ak-on-primary: #FFFFFF;
316
- --color-ak-primary-subtle: #CFE3FF;
317
- --color-ak-border: #E4E2DA;
318
- --color-ak-border-subtle: #EEEDE8;
319
- --color-ak-border-strong: #5A5A5A;
320
- --color-ak-border-focus: #1E7BFF;
321
- --color-ak-text-link: #1E7BFF;
322
- --color-ak-hover: #F0EFEA;
323
- --color-ak-active: #E4E2DA;
324
- --color-ak-danger: #EF4444;
325
- --color-ak-success: #22C55E;
326
- --color-ak-warning: #F59E0B;
327
- --color-ak-info: #3B82F6;
328
- }
60
+ /* ─── Light Palettes ─── */
61
+
62
+ /* ============================================================
63
+ GENERATED from theme-palettes.ts (paletteToAkVariables).
64
+ Curated set: 9 light + 3 dark. Do not hand-edit — regenerate.
65
+ ============================================================ */
66
+
67
+ /* AstralKit — The default AstralKit violet theme (light) */
68
+ [data-ak-theme="astral-default"] {
69
+ --color-ak-accent: #A585FF;
70
+ --color-ak-on-accent: #FFFFFF;
71
+ --color-ak-accent-soft: #efe9ff;
72
+ --color-ak-primary-50: #f3efff;
73
+ --color-ak-primary-100: #e7deff;
74
+ --color-ak-primary-200: #cfbeff;
75
+ --color-ak-primary-300: #b195ff;
76
+ --color-ak-primary-400: #936cff;
77
+ --color-ak-primary-500: #6933FF;
78
+ --color-ak-primary-600: #5c2de0;
79
+ --color-ak-primary-700: #5027c2;
80
+ --color-ak-primary-800: #4321a3;
81
+ --color-ak-primary-900: #32187a;
82
+ --color-ak-primary-950: #221052;
83
+ --color-ak-text: #150A35;
84
+ --color-ak-text-secondary: #544D6B;
85
+ --color-ak-text-muted: #868195;
86
+ --color-ak-text-disabled: #b8b4bf;
87
+ --color-ak-text-link: #6933FF;
88
+ --color-ak-text-inverse: #FFFFFF;
89
+ --color-ak-text-placeholder: #9692a3;
90
+ --color-ak-bg: #FFFFFF;
91
+ --color-ak-surface: #FAF9F7;
92
+ --color-ak-surface-2: #F4F2F9;
93
+ --color-ak-surface-3: #eae8e9;
94
+ --color-ak-surface-4: #e2e0e3;
95
+ --color-ak-surface-raised-soft: #f5f4f3;
96
+ --color-ak-hover: #f3f3f5;
97
+ --color-ak-active: #ecebef;
98
+ --color-ak-elevated: #FFFFFF;
99
+ --color-ak-inverse-surface: #150A35;
100
+ --color-ak-inverse-on-surface: #FFFFFF;
101
+ --color-ak-border: #E6E3EE;
102
+ --color-ak-border-subtle: #f0eef3;
103
+ --color-ak-border-strong: #bcb8c9;
104
+ --color-ak-border-focus: #A585FF;
105
+ --color-ak-neutral-50: #f5f4f3;
106
+ --color-ak-neutral-100: #f1efef;
107
+ --color-ak-neutral-200: #e8e6e7;
108
+ --color-ak-neutral-300: #d8d5da;
109
+ --color-ak-neutral-400: #b5b1bd;
110
+ --color-ak-neutral-500: #938da0;
111
+ --color-ak-neutral-600: #716a83;
112
+ --color-ak-neutral-700: #554d6b;
113
+ --color-ak-neutral-800: #3a3054;
114
+ --color-ak-neutral-900: #271d45;
115
+ --color-ak-neutral-950: #1e143d;
116
+ --color-ak-primary: #6933FF;
117
+ --color-ak-primary-hover: #5f2ee6;
118
+ --color-ak-primary-active: #5429cc;
119
+ --color-ak-on-primary: #FFFFFF;
120
+ --color-ak-primary-subtle: #ede7ff;
121
+ --color-ak-success: #22C55E;
122
+ --color-ak-success-subtle: #e4f8ec;
123
+ --color-ak-success-text: #1b9e4b;
124
+ --color-ak-warning: #F59E0B;
125
+ --color-ak-warning-subtle: #fef3e2;
126
+ --color-ak-warning-text: #c47e09;
127
+ --color-ak-danger: #DC2626;
128
+ --color-ak-on-error: #FFFFFF;
129
+ --color-ak-danger-subtle: #fbe5e5;
130
+ --color-ak-danger-text: #b01e1e;
131
+ --color-ak-info: #3B82F6;
132
+ --color-ak-info-subtle: #e7f0fe;
133
+ --color-ak-info-text: #2f68c5;
134
+ --color-ak-overlay: rgba(0,0,0,0.5);
135
+ --color-ak-brutal-ink: #4a24b3;
136
+ --color-ak-brutal-face: #FFFFFF;
137
+ --color-ak-brutal-face-dark: #4421a6;
138
+ --color-ak-brutal-on-face: #4a24b3;
139
+ --color-ak-brutal-on-face-dark: #FAF9F7;
140
+ --shadow-ak-brutal-xs: 2px 2px 0 0 #3f1f99;
141
+ --shadow-ak-brutal-sm: 3px 3px 0 0 #3f1f99;
142
+ --shadow-ak-brutal: 4px 4px 0 0 #3f1f99;
143
+ --shadow-ak-brutal-lg: 6px 6px 0 0 #3f1f99;
144
+ --shadow-ak-brutal-xl: 8px 8px 0 0 #3f1f99;
145
+ --color-ak-status-beta-bg: #f1ebfe;
146
+ --color-ak-status-beta-text: #7C3AED;
147
+ --color-ak-status-beta-border: #dccefc;
148
+ --color-ak-status-new-bg: #e4f8ec;
149
+ --color-ak-status-new-text: #16A34A;
150
+ --color-ak-status-new-border: #bdeecf;
151
+ --color-ak-status-stable-bg: #e7f0fe;
152
+ --color-ak-status-stable-text: #2563EB;
153
+ --color-ak-status-stable-border: #c4dafc;
154
+ --color-ak-status-deprecated-bg: #fde9e9;
155
+ --color-ak-status-deprecated-text: #DC2626;
156
+ --color-ak-status-deprecated-border: #fac7c7;
157
+ }
158
+
159
+ /* Warm Earth — Teal primary with coral-red highlights — Happy Hues #8 (light) */
160
+ [data-ak-theme="warm-earth"] {
161
+ --color-ak-accent: #F45D48;
162
+ --color-ak-on-accent: #FFFFFF;
163
+ --color-ak-accent-soft: #fde2de;
164
+ --color-ak-primary-50: #ebf5f5;
165
+ --color-ak-primary-100: #d7ebeb;
166
+ --color-ak-primary-200: #b0d6d6;
167
+ --color-ak-primary-300: #7ebdbd;
168
+ --color-ak-primary-400: #4ca4a4;
169
+ --color-ak-primary-500: #078080;
170
+ --color-ak-primary-600: #067171;
171
+ --color-ak-primary-700: #056161;
172
+ --color-ak-primary-800: #045252;
173
+ --color-ak-primary-900: #033d3d;
174
+ --color-ak-primary-950: #022929;
175
+ --color-ak-text: #232323;
176
+ --color-ak-text-secondary: #222525;
177
+ --color-ak-text-muted: #626363;
178
+ --color-ak-text-disabled: #a2a2a0;
179
+ --color-ak-text-link: #078080;
180
+ --color-ak-text-inverse: #FFFFFF;
181
+ --color-ak-text-placeholder: #787877;
182
+ --color-ak-bg: #FFFFFF;
183
+ --color-ak-surface: #F8F5F2;
184
+ --color-ak-surface-2: #FEEFE8;
185
+ --color-ak-surface-3: #e9e6e4;
186
+ --color-ak-surface-4: #e2dfdc;
187
+ --color-ak-surface-raised-soft: #f4f1ee;
188
+ --color-ak-hover: #f4f4f4;
189
+ --color-ak-active: #ededed;
190
+ --color-ak-elevated: #FFFFFF;
191
+ --color-ak-inverse-surface: #232323;
192
+ --color-ak-inverse-on-surface: #FFFFFF;
193
+ --color-ak-border: #E8E2DB;
194
+ --color-ak-border-subtle: #f0ece7;
195
+ --color-ak-border-strong: #c1bcb6;
196
+ --color-ak-border-focus: #F45D48;
197
+ --color-ak-neutral-50: #f4f1ee;
198
+ --color-ak-neutral-100: #efedea;
199
+ --color-ak-neutral-200: #e7e4e1;
200
+ --color-ak-neutral-300: #d8d6d3;
201
+ --color-ak-neutral-400: #b8b6b4;
202
+ --color-ak-neutral-500: #989795;
203
+ --color-ak-neutral-600: #787776;
204
+ --color-ak-neutral-700: #5f5e5d;
205
+ --color-ak-neutral-800: #454544;
206
+ --color-ak-neutral-900: #343434;
207
+ --color-ak-neutral-950: #2c2b2b;
208
+ --color-ak-primary: #078080;
209
+ --color-ak-primary-hover: #067373;
210
+ --color-ak-primary-active: #066666;
211
+ --color-ak-on-primary: #FFFFFF;
212
+ --color-ak-primary-subtle: #e1f0f0;
213
+ --color-ak-success: #22C55E;
214
+ --color-ak-success-subtle: #e4f8ec;
215
+ --color-ak-success-text: #1b9e4b;
216
+ --color-ak-warning: #F59E0B;
217
+ --color-ak-warning-subtle: #fef3e2;
218
+ --color-ak-warning-text: #c47e09;
219
+ --color-ak-danger: #F45D48;
220
+ --color-ak-on-error: #FFFFFF;
221
+ --color-ak-danger-subtle: #feece9;
222
+ --color-ak-danger-text: #c34a3a;
223
+ --color-ak-info: #3B82F6;
224
+ --color-ak-info-subtle: #e7f0fe;
225
+ --color-ak-info-text: #2f68c5;
226
+ --color-ak-overlay: rgba(0,0,0,0.5);
227
+ --color-ak-brutal-ink: #055a5a;
228
+ --color-ak-brutal-face: #FFFFFF;
229
+ --color-ak-brutal-face-dark: #055353;
230
+ --color-ak-brutal-on-face: #055a5a;
231
+ --color-ak-brutal-on-face-dark: #F8F5F2;
232
+ --shadow-ak-brutal-xs: 2px 2px 0 0 #044d4d;
233
+ --shadow-ak-brutal-sm: 3px 3px 0 0 #044d4d;
234
+ --shadow-ak-brutal: 4px 4px 0 0 #044d4d;
235
+ --shadow-ak-brutal-lg: 6px 6px 0 0 #044d4d;
236
+ --shadow-ak-brutal-xl: 8px 8px 0 0 #044d4d;
237
+ --color-ak-status-beta-bg: #f1ebfe;
238
+ --color-ak-status-beta-text: #7C3AED;
239
+ --color-ak-status-beta-border: #dccefc;
240
+ --color-ak-status-new-bg: #e4f8ec;
241
+ --color-ak-status-new-text: #16A34A;
242
+ --color-ak-status-new-border: #bdeecf;
243
+ --color-ak-status-stable-bg: #e7f0fe;
244
+ --color-ak-status-stable-text: #2563EB;
245
+ --color-ak-status-stable-border: #c4dafc;
246
+ --color-ak-status-deprecated-bg: #fde9e9;
247
+ --color-ak-status-deprecated-text: #DC2626;
248
+ --color-ak-status-deprecated-border: #fac7c7;
249
+ }
250
+
251
+ /* Slate Pro — Professional gray with blue accent (light) */
252
+ [data-ak-theme="slate-pro"] {
253
+ --color-ak-accent: #7C3AED;
254
+ --color-ak-on-accent: #FFFFFF;
255
+ --color-ak-accent-soft: #e7dcfc;
256
+ --color-ak-primary-50: #eef3fd;
257
+ --color-ak-primary-100: #dce6fc;
258
+ --color-ak-primary-200: #b9cdf9;
259
+ --color-ak-primary-300: #8eaef5;
260
+ --color-ak-primary-400: #628ff1;
261
+ --color-ak-primary-500: #2563EB;
262
+ --color-ak-primary-600: #2157cf;
263
+ --color-ak-primary-700: #1c4bb3;
264
+ --color-ak-primary-800: #183f96;
265
+ --color-ak-primary-900: #123071;
266
+ --color-ak-primary-950: #0c204b;
267
+ --color-ak-text: #0F172A;
268
+ --color-ak-text-secondary: #64748B;
269
+ --color-ak-text-muted: #909cad;
270
+ --color-ak-text-disabled: #bdc4cf;
271
+ --color-ak-text-link: #2563EB;
272
+ --color-ak-text-inverse: #FFFFFF;
273
+ --color-ak-text-placeholder: #9faab8;
274
+ --color-ak-bg: #FFFFFF;
275
+ --color-ak-surface: #F8FAFC;
276
+ --color-ak-surface-2: #F1F5F9;
277
+ --color-ak-surface-3: #e8eaed;
278
+ --color-ak-surface-4: #e0e2e6;
279
+ --color-ak-surface-raised-soft: #f3f5f8;
280
+ --color-ak-hover: #f3f3f4;
281
+ --color-ak-active: #ececee;
282
+ --color-ak-elevated: #FFFFFF;
283
+ --color-ak-inverse-surface: #0F172A;
284
+ --color-ak-inverse-on-surface: #FFFFFF;
285
+ --color-ak-border: #E2E8F0;
286
+ --color-ak-border-subtle: #edf1f6;
287
+ --color-ak-border-strong: #b8bec8;
288
+ --color-ak-border-focus: #7C3AED;
289
+ --color-ak-neutral-50: #f3f5f8;
290
+ --color-ak-neutral-100: #eff1f4;
291
+ --color-ak-neutral-200: #e5e8eb;
292
+ --color-ak-neutral-300: #d5d8dd;
293
+ --color-ak-neutral-400: #b2b6bd;
294
+ --color-ak-neutral-500: #8f949e;
295
+ --color-ak-neutral-600: #6c727e;
296
+ --color-ak-neutral-700: #505765;
297
+ --color-ak-neutral-800: #343b4c;
298
+ --color-ak-neutral-900: #22293b;
299
+ --color-ak-neutral-950: #182032;
300
+ --color-ak-primary: #2563EB;
301
+ --color-ak-primary-hover: #2159d4;
302
+ --color-ak-primary-active: #1e4fbc;
303
+ --color-ak-on-primary: #FFFFFF;
304
+ --color-ak-primary-subtle: #e5ecfd;
305
+ --color-ak-success: #22C55E;
306
+ --color-ak-success-subtle: #e4f8ec;
307
+ --color-ak-success-text: #1b9e4b;
308
+ --color-ak-warning: #F59E0B;
309
+ --color-ak-warning-subtle: #fef3e2;
310
+ --color-ak-warning-text: #c47e09;
311
+ --color-ak-danger: #DC2626;
312
+ --color-ak-on-error: #FFFFFF;
313
+ --color-ak-danger-subtle: #fbe5e5;
314
+ --color-ak-danger-text: #b01e1e;
315
+ --color-ak-info: #3B82F6;
316
+ --color-ak-info-subtle: #e7f0fe;
317
+ --color-ak-info-text: #2f68c5;
318
+ --color-ak-overlay: rgba(0,0,0,0.5);
319
+ --color-ak-brutal-ink: #1a45a5;
320
+ --color-ak-brutal-face: #FFFFFF;
321
+ --color-ak-brutal-face-dark: #184099;
322
+ --color-ak-brutal-on-face: #1a45a5;
323
+ --color-ak-brutal-on-face-dark: #F8FAFC;
324
+ --shadow-ak-brutal-xs: 2px 2px 0 0 #163b8d;
325
+ --shadow-ak-brutal-sm: 3px 3px 0 0 #163b8d;
326
+ --shadow-ak-brutal: 4px 4px 0 0 #163b8d;
327
+ --shadow-ak-brutal-lg: 6px 6px 0 0 #163b8d;
328
+ --shadow-ak-brutal-xl: 8px 8px 0 0 #163b8d;
329
+ --color-ak-status-beta-bg: #f1ebfe;
330
+ --color-ak-status-beta-text: #7C3AED;
331
+ --color-ak-status-beta-border: #dccefc;
332
+ --color-ak-status-new-bg: #e4f8ec;
333
+ --color-ak-status-new-text: #16A34A;
334
+ --color-ak-status-new-border: #bdeecf;
335
+ --color-ak-status-stable-bg: #e7f0fe;
336
+ --color-ak-status-stable-text: #2563EB;
337
+ --color-ak-status-stable-border: #c4dafc;
338
+ --color-ak-status-deprecated-bg: #fde9e9;
339
+ --color-ak-status-deprecated-text: #DC2626;
340
+ --color-ak-status-deprecated-border: #fac7c7;
341
+ }
342
+
343
+ /* Indigo Craft — Warm neutral with indigo primary (light) */
344
+ [data-ak-theme="indigo-craft"] {
345
+ --color-ak-accent: #EC4899;
346
+ --color-ak-on-accent: #FFFFFF;
347
+ --color-ak-accent-soft: #fcdeed;
348
+ --color-ak-primary-50: #f1f0fd;
349
+ --color-ak-primary-100: #e3e1fb;
350
+ --color-ak-primary-200: #c7c4f7;
351
+ --color-ak-primary-300: #a39ff1;
352
+ --color-ak-primary-400: #807aec;
353
+ --color-ak-primary-500: #4F46E5;
354
+ --color-ak-primary-600: #463eca;
355
+ --color-ak-primary-700: #3c35ae;
356
+ --color-ak-primary-800: #332d93;
357
+ --color-ak-primary-900: #26226e;
358
+ --color-ak-primary-950: #191649;
359
+ --color-ak-text: #1C1917;
360
+ --color-ak-text-secondary: #78716C;
361
+ --color-ak-text-muted: #9f9a96;
362
+ --color-ak-text-disabled: #c6c3c1;
363
+ --color-ak-text-link: #4F46E5;
364
+ --color-ak-text-inverse: #FFFFFF;
365
+ --color-ak-text-placeholder: #aca8a4;
366
+ --color-ak-bg: #FFFFFF;
367
+ --color-ak-surface: #FAFAF9;
368
+ --color-ak-surface-2: #F5F5F4;
369
+ --color-ak-surface-3: #eaeae9;
370
+ --color-ak-surface-4: #e3e2e1;
371
+ --color-ak-surface-raised-soft: #f6f6f4;
372
+ --color-ak-hover: #f4f4f3;
373
+ --color-ak-active: #ededec;
374
+ --color-ak-elevated: #FFFFFF;
375
+ --color-ak-inverse-surface: #1C1917;
376
+ --color-ak-inverse-on-surface: #FFFFFF;
377
+ --color-ak-border: #E7E5E4;
378
+ --color-ak-border-subtle: #f1f0ef;
379
+ --color-ak-border-strong: #bebcbb;
380
+ --color-ak-border-focus: #EC4899;
381
+ --color-ak-neutral-50: #f6f6f4;
382
+ --color-ak-neutral-100: #f1f1f0;
383
+ --color-ak-neutral-200: #e8e8e7;
384
+ --color-ak-neutral-300: #d9d8d7;
385
+ --color-ak-neutral-400: #b7b7b5;
386
+ --color-ak-neutral-500: #969593;
387
+ --color-ak-neutral-600: #757371;
388
+ --color-ak-neutral-700: #5a5856;
389
+ --color-ak-neutral-800: #403d3b;
390
+ --color-ak-neutral-900: #2e2b29;
391
+ --color-ak-neutral-950: #252220;
392
+ --color-ak-primary: #4F46E5;
393
+ --color-ak-primary-hover: #473fce;
394
+ --color-ak-primary-active: #3f38b7;
395
+ --color-ak-on-primary: #FFFFFF;
396
+ --color-ak-primary-subtle: #eae9fc;
397
+ --color-ak-success: #22C55E;
398
+ --color-ak-success-subtle: #e4f8ec;
399
+ --color-ak-success-text: #1b9e4b;
400
+ --color-ak-warning: #F59E0B;
401
+ --color-ak-warning-subtle: #fef3e2;
402
+ --color-ak-warning-text: #c47e09;
403
+ --color-ak-danger: #DC2626;
404
+ --color-ak-on-error: #FFFFFF;
405
+ --color-ak-danger-subtle: #fbe5e5;
406
+ --color-ak-danger-text: #b01e1e;
407
+ --color-ak-info: #3B82F6;
408
+ --color-ak-info-subtle: #e7f0fe;
409
+ --color-ak-info-text: #2f68c5;
410
+ --color-ak-overlay: rgba(0,0,0,0.5);
411
+ --color-ak-brutal-ink: #3731a0;
412
+ --color-ak-brutal-face: #FFFFFF;
413
+ --color-ak-brutal-face-dark: #332e95;
414
+ --color-ak-brutal-on-face: #3731a0;
415
+ --color-ak-brutal-on-face-dark: #FAFAF9;
416
+ --shadow-ak-brutal-xs: 2px 2px 0 0 #2f2a89;
417
+ --shadow-ak-brutal-sm: 3px 3px 0 0 #2f2a89;
418
+ --shadow-ak-brutal: 4px 4px 0 0 #2f2a89;
419
+ --shadow-ak-brutal-lg: 6px 6px 0 0 #2f2a89;
420
+ --shadow-ak-brutal-xl: 8px 8px 0 0 #2f2a89;
421
+ --color-ak-status-beta-bg: #f1ebfe;
422
+ --color-ak-status-beta-text: #7C3AED;
423
+ --color-ak-status-beta-border: #dccefc;
424
+ --color-ak-status-new-bg: #e4f8ec;
425
+ --color-ak-status-new-text: #16A34A;
426
+ --color-ak-status-new-border: #bdeecf;
427
+ --color-ak-status-stable-bg: #e7f0fe;
428
+ --color-ak-status-stable-text: #2563EB;
429
+ --color-ak-status-stable-border: #c4dafc;
430
+ --color-ak-status-deprecated-bg: #fde9e9;
431
+ --color-ak-status-deprecated-text: #DC2626;
432
+ --color-ak-status-deprecated-border: #fac7c7;
433
+ }
434
+
435
+ /* MedTrackr Green — Clean white with emerald primary and mint washes — healthcare CRM (light) */
436
+ [data-ak-theme="medtrackr"] {
437
+ --color-ak-accent: #0FA47A;
438
+ --color-ak-on-accent: #FFFFFF;
439
+ --color-ak-accent-soft: #d4efe7;
440
+ --color-ak-primary-50: #ecf8f4;
441
+ --color-ak-primary-100: #d9f0ea;
442
+ --color-ak-primary-200: #b2e2d4;
443
+ --color-ak-primary-300: #82d0ba;
444
+ --color-ak-primary-400: #52bd9f;
445
+ --color-ak-primary-500: #0FA47A;
446
+ --color-ak-primary-600: #0d906b;
447
+ --color-ak-primary-700: #0b7d5d;
448
+ --color-ak-primary-800: #0a694e;
449
+ --color-ak-primary-900: #074f3b;
450
+ --color-ak-primary-950: #053427;
451
+ --color-ak-text: #17211D;
452
+ --color-ak-text-secondary: #5B6661;
453
+ --color-ak-text-muted: #8a928e;
454
+ --color-ak-text-disabled: #b9bebc;
455
+ --color-ak-text-link: #0FA47A;
456
+ --color-ak-text-inverse: #FFFFFF;
457
+ --color-ak-text-placeholder: #99a19d;
458
+ --color-ak-bg: #FFFFFF;
459
+ --color-ak-surface: #F7F9F8;
460
+ --color-ak-surface-2: #ECF2EF;
461
+ --color-ak-surface-3: #e7eae9;
462
+ --color-ak-surface-4: #dfe2e1;
463
+ --color-ak-surface-raised-soft: #f3f5f4;
464
+ --color-ak-hover: #f3f4f4;
465
+ --color-ak-active: #eceded;
466
+ --color-ak-elevated: #FFFFFF;
467
+ --color-ak-inverse-surface: #17211D;
468
+ --color-ak-inverse-on-surface: #FFFFFF;
469
+ --color-ak-border: #E2E8E5;
470
+ --color-ak-border-subtle: #edf1ef;
471
+ --color-ak-border-strong: #b9c0bd;
472
+ --color-ak-border-focus: #0FA47A;
473
+ --color-ak-neutral-50: #f3f5f4;
474
+ --color-ak-neutral-100: #eef0ef;
475
+ --color-ak-neutral-200: #e5e8e6;
476
+ --color-ak-neutral-300: #d5d9d7;
477
+ --color-ak-neutral-400: #b4b8b6;
478
+ --color-ak-neutral-500: #929895;
479
+ --color-ak-neutral-600: #717775;
480
+ --color-ak-neutral-700: #565d5a;
481
+ --color-ak-neutral-800: #3b4440;
482
+ --color-ak-neutral-900: #29322f;
483
+ --color-ak-neutral-950: #202a26;
484
+ --color-ak-primary: #0FA47A;
485
+ --color-ak-primary-hover: #0e946e;
486
+ --color-ak-primary-active: #0c8362;
487
+ --color-ak-on-primary: #FFFFFF;
488
+ --color-ak-primary-subtle: #e2f4ef;
489
+ --color-ak-success: #22C55E;
490
+ --color-ak-success-subtle: #e4f8ec;
491
+ --color-ak-success-text: #1b9e4b;
492
+ --color-ak-warning: #F59E0B;
493
+ --color-ak-warning-subtle: #fef3e2;
494
+ --color-ak-warning-text: #c47e09;
495
+ --color-ak-danger: #E5484D;
496
+ --color-ak-on-error: #FFFFFF;
497
+ --color-ak-danger-subtle: #fce9ea;
498
+ --color-ak-danger-text: #b73a3e;
499
+ --color-ak-info: #3B82F6;
500
+ --color-ak-info-subtle: #e7f0fe;
501
+ --color-ak-info-text: #2f68c5;
502
+ --color-ak-overlay: rgba(0,0,0,0.5);
503
+ --color-ak-brutal-ink: #0b7355;
504
+ --color-ak-brutal-face: #FFFFFF;
505
+ --color-ak-brutal-face-dark: #0a6b4f;
506
+ --color-ak-brutal-on-face: #0b7355;
507
+ --color-ak-brutal-on-face-dark: #F7F9F8;
508
+ --shadow-ak-brutal-xs: 2px 2px 0 0 #096249;
509
+ --shadow-ak-brutal-sm: 3px 3px 0 0 #096249;
510
+ --shadow-ak-brutal: 4px 4px 0 0 #096249;
511
+ --shadow-ak-brutal-lg: 6px 6px 0 0 #096249;
512
+ --shadow-ak-brutal-xl: 8px 8px 0 0 #096249;
513
+ --color-ak-status-beta-bg: #f1ebfe;
514
+ --color-ak-status-beta-text: #7C3AED;
515
+ --color-ak-status-beta-border: #dccefc;
516
+ --color-ak-status-new-bg: #e4f8ec;
517
+ --color-ak-status-new-text: #16A34A;
518
+ --color-ak-status-new-border: #bdeecf;
519
+ --color-ak-status-stable-bg: #e7f0fe;
520
+ --color-ak-status-stable-text: #2563EB;
521
+ --color-ak-status-stable-border: #c4dafc;
522
+ --color-ak-status-deprecated-bg: #fde9e9;
523
+ --color-ak-status-deprecated-text: #DC2626;
524
+ --color-ak-status-deprecated-border: #fac7c7;
525
+ }
526
+
527
+ /* Periwinkle — Lavender-white canvas with vivid periwinkle — fitness SaaS (light) */
528
+ [data-ak-theme="periwinkle"] {
529
+ --color-ak-accent: #6F5CF1;
530
+ --color-ak-on-accent: #FFFFFF;
531
+ --color-ak-accent-soft: #e5e2fc;
532
+ --color-ak-primary-50: #f3f2fe;
533
+ --color-ak-primary-100: #e8e5fd;
534
+ --color-ak-primary-200: #d1cbfb;
535
+ --color-ak-primary-300: #b4aaf8;
536
+ --color-ak-primary-400: #978af5;
537
+ --color-ak-primary-500: #6F5CF1;
538
+ --color-ak-primary-600: #6251d4;
539
+ --color-ak-primary-700: #5446b7;
540
+ --color-ak-primary-800: #473b9a;
541
+ --color-ak-primary-900: #352c74;
542
+ --color-ak-primary-950: #241d4d;
543
+ --color-ak-text: #1B1A2E;
544
+ --color-ak-text-secondary: #5A5874;
545
+ --color-ak-text-muted: #88879d;
546
+ --color-ak-text-disabled: #b6b5c5;
547
+ --color-ak-text-link: #6F5CF1;
548
+ --color-ak-text-inverse: #FFFFFF;
549
+ --color-ak-text-placeholder: #9896aa;
550
+ --color-ak-bg: #FFFFFF;
551
+ --color-ak-surface: #F4F3FB;
552
+ --color-ak-surface-2: #ECEAF8;
553
+ --color-ak-surface-3: #e5e4ed;
554
+ --color-ak-surface-4: #dddce5;
555
+ --color-ak-surface-raised-soft: #f0eff7;
556
+ --color-ak-hover: #f4f4f5;
557
+ --color-ak-active: #ededee;
558
+ --color-ak-elevated: #FFFFFF;
559
+ --color-ak-inverse-surface: #1B1A2E;
560
+ --color-ak-inverse-on-surface: #FFFFFF;
561
+ --color-ak-border: #E4E2F0;
562
+ --color-ak-border-subtle: #ecebf6;
563
+ --color-ak-border-strong: #bcbac9;
564
+ --color-ak-border-focus: #6F5CF1;
565
+ --color-ak-neutral-50: #f0eff7;
566
+ --color-ak-neutral-100: #ebeaf3;
567
+ --color-ak-neutral-200: #e3e2eb;
568
+ --color-ak-neutral-300: #d3d2dc;
569
+ --color-ak-neutral-400: #b3b2be;
570
+ --color-ak-neutral-500: #92919f;
571
+ --color-ak-neutral-600: #727180;
572
+ --color-ak-neutral-700: #585767;
573
+ --color-ak-neutral-800: #3e3d4f;
574
+ --color-ak-neutral-900: #2c2b3e;
575
+ --color-ak-neutral-950: #242336;
576
+ --color-ak-primary: #6F5CF1;
577
+ --color-ak-primary-hover: #6453d9;
578
+ --color-ak-primary-active: #594ac1;
579
+ --color-ak-on-primary: #FFFFFF;
580
+ --color-ak-primary-subtle: #eeebfd;
581
+ --color-ak-success: #22C55E;
582
+ --color-ak-success-subtle: #e4f8ec;
583
+ --color-ak-success-text: #1b9e4b;
584
+ --color-ak-warning: #F59E0B;
585
+ --color-ak-warning-subtle: #fef3e2;
586
+ --color-ak-warning-text: #c47e09;
587
+ --color-ak-danger: #E5484D;
588
+ --color-ak-on-error: #FFFFFF;
589
+ --color-ak-danger-subtle: #fce9ea;
590
+ --color-ak-danger-text: #b73a3e;
591
+ --color-ak-info: #3B82F6;
592
+ --color-ak-info-subtle: #e7f0fe;
593
+ --color-ak-info-text: #2f68c5;
594
+ --color-ak-overlay: rgba(0,0,0,0.5);
595
+ --color-ak-brutal-ink: #4e40a9;
596
+ --color-ak-brutal-face: #FFFFFF;
597
+ --color-ak-brutal-face-dark: #483c9d;
598
+ --color-ak-brutal-on-face: #4e40a9;
599
+ --color-ak-brutal-on-face-dark: #F4F3FB;
600
+ --shadow-ak-brutal-xs: 2px 2px 0 0 #433791;
601
+ --shadow-ak-brutal-sm: 3px 3px 0 0 #433791;
602
+ --shadow-ak-brutal: 4px 4px 0 0 #433791;
603
+ --shadow-ak-brutal-lg: 6px 6px 0 0 #433791;
604
+ --shadow-ak-brutal-xl: 8px 8px 0 0 #433791;
605
+ --color-ak-status-beta-bg: #f1ebfe;
606
+ --color-ak-status-beta-text: #7C3AED;
607
+ --color-ak-status-beta-border: #dccefc;
608
+ --color-ak-status-new-bg: #e4f8ec;
609
+ --color-ak-status-new-text: #16A34A;
610
+ --color-ak-status-new-border: #bdeecf;
611
+ --color-ak-status-stable-bg: #e7f0fe;
612
+ --color-ak-status-stable-text: #2563EB;
613
+ --color-ak-status-stable-border: #c4dafc;
614
+ --color-ak-status-deprecated-bg: #fde9e9;
615
+ --color-ak-status-deprecated-text: #DC2626;
616
+ --color-ak-status-deprecated-border: #fac7c7;
617
+ }
618
+
619
+ /* Scout Cyan — Crisp white with deep sky-cyan — referral dashboard (light) */
620
+ [data-ak-theme="scout-cyan"] {
621
+ --color-ak-accent: #0E96C4;
622
+ --color-ak-on-accent: #FFFFFF;
623
+ --color-ak-accent-soft: #d4ecf4;
624
+ --color-ak-primary-50: #ecf7fa;
625
+ --color-ak-primary-100: #d8eef6;
626
+ --color-ak-primary-200: #b2ddec;
627
+ --color-ak-primary-300: #82c8e0;
628
+ --color-ak-primary-400: #51b3d5;
629
+ --color-ak-primary-500: #0E96C4;
630
+ --color-ak-primary-600: #0c84ac;
631
+ --color-ak-primary-700: #0b7295;
632
+ --color-ak-primary-800: #09607d;
633
+ --color-ak-primary-900: #07485e;
634
+ --color-ak-primary-950: #04303f;
635
+ --color-ak-text: #14262D;
636
+ --color-ak-text-secondary: #587077;
637
+ --color-ak-text-muted: #87999f;
638
+ --color-ak-text-disabled: #b7c3c7;
639
+ --color-ak-text-link: #0E96C4;
640
+ --color-ak-text-inverse: #FFFFFF;
641
+ --color-ak-text-placeholder: #97a7ac;
642
+ --color-ak-bg: #FFFFFF;
643
+ --color-ak-surface: #F6FAFC;
644
+ --color-ak-surface-2: #EAF3F7;
645
+ --color-ak-surface-3: #e6ebee;
646
+ --color-ak-surface-4: #dee4e6;
647
+ --color-ak-surface-raised-soft: #f1f6f8;
648
+ --color-ak-hover: #f3f4f5;
649
+ --color-ak-active: #eceeee;
650
+ --color-ak-elevated: #FFFFFF;
651
+ --color-ak-inverse-surface: #14262D;
652
+ --color-ak-inverse-on-surface: #FFFFFF;
653
+ --color-ak-border: #DEE9EE;
654
+ --color-ak-border-subtle: #eaf2f5;
655
+ --color-ak-border-strong: #b6c2c7;
656
+ --color-ak-border-focus: #0E96C4;
657
+ --color-ak-neutral-50: #f1f6f8;
658
+ --color-ak-neutral-100: #edf2f4;
659
+ --color-ak-neutral-200: #e4e9eb;
660
+ --color-ak-neutral-300: #d4dadd;
661
+ --color-ak-neutral-400: #b2babe;
662
+ --color-ak-neutral-500: #909b9f;
663
+ --color-ak-neutral-600: #6e7b80;
664
+ --color-ak-neutral-700: #536167;
665
+ --color-ak-neutral-800: #38484e;
666
+ --color-ak-neutral-900: #26373e;
667
+ --color-ak-neutral-950: #1d2e35;
668
+ --color-ak-primary: #0E96C4;
669
+ --color-ak-primary-hover: #0d87b0;
670
+ --color-ak-primary-active: #0b789d;
671
+ --color-ak-on-primary: #FFFFFF;
672
+ --color-ak-primary-subtle: #e2f2f8;
673
+ --color-ak-success: #22C55E;
674
+ --color-ak-success-subtle: #e4f8ec;
675
+ --color-ak-success-text: #1b9e4b;
676
+ --color-ak-warning: #F59E0B;
677
+ --color-ak-warning-subtle: #fef3e2;
678
+ --color-ak-warning-text: #c47e09;
679
+ --color-ak-danger: #E5484D;
680
+ --color-ak-on-error: #FFFFFF;
681
+ --color-ak-danger-subtle: #fce9ea;
682
+ --color-ak-danger-text: #b73a3e;
683
+ --color-ak-info: #3B82F6;
684
+ --color-ak-info-subtle: #e7f0fe;
685
+ --color-ak-info-text: #2f68c5;
686
+ --color-ak-overlay: rgba(0,0,0,0.5);
687
+ --color-ak-brutal-ink: #0a6989;
688
+ --color-ak-brutal-face: #FFFFFF;
689
+ --color-ak-brutal-face-dark: #09627f;
690
+ --color-ak-brutal-on-face: #0a6989;
691
+ --color-ak-brutal-on-face-dark: #F6FAFC;
692
+ --shadow-ak-brutal-xs: 2px 2px 0 0 #085a76;
693
+ --shadow-ak-brutal-sm: 3px 3px 0 0 #085a76;
694
+ --shadow-ak-brutal: 4px 4px 0 0 #085a76;
695
+ --shadow-ak-brutal-lg: 6px 6px 0 0 #085a76;
696
+ --shadow-ak-brutal-xl: 8px 8px 0 0 #085a76;
697
+ --color-ak-status-beta-bg: #f1ebfe;
698
+ --color-ak-status-beta-text: #7C3AED;
699
+ --color-ak-status-beta-border: #dccefc;
700
+ --color-ak-status-new-bg: #e4f8ec;
701
+ --color-ak-status-new-text: #16A34A;
702
+ --color-ak-status-new-border: #bdeecf;
703
+ --color-ak-status-stable-bg: #e7f0fe;
704
+ --color-ak-status-stable-text: #2563EB;
705
+ --color-ak-status-stable-border: #c4dafc;
706
+ --color-ak-status-deprecated-bg: #fde9e9;
707
+ --color-ak-status-deprecated-text: #DC2626;
708
+ --color-ak-status-deprecated-border: #fac7c7;
709
+ }
710
+
711
+ /* Pulse — Bone neutrals, ink CTAs, volt-lime selection — fitness app energy (light) */
712
+ [data-ak-theme="pulse"] {
713
+ --color-ak-accent: #D7FA4B;
714
+ --color-ak-on-accent: #0B0B0B;
715
+ --color-ak-accent-soft: #f8fedf;
716
+ --color-ak-slider-fill: #0B0B0B;
717
+ --color-ak-slider-ring: #0B0B0B;
718
+ --color-ak-primary-50: #fcfff1;
719
+ --color-ak-primary-100: #f9fee2;
720
+ --color-ak-primary-200: #f2fdc5;
721
+ --color-ak-primary-300: #eafca1;
722
+ --color-ak-primary-400: #e2fb7d;
723
+ --color-ak-primary-500: #D7FA4B;
724
+ --color-ak-primary-600: #bddc42;
725
+ --color-ak-primary-700: #a3be39;
726
+ --color-ak-primary-800: #8aa030;
727
+ --color-ak-primary-900: #677824;
728
+ --color-ak-primary-950: #455018;
729
+ --color-ak-text: #0B0B0B;
730
+ --color-ak-text-secondary: #55564F;
731
+ --color-ak-text-muted: #84857f;
732
+ --color-ak-text-disabled: #b4b4af;
733
+ --color-ak-text-link: #0B0B0B;
734
+ --color-ak-text-inverse: #FFFFFF;
735
+ --color-ak-text-placeholder: #94958f;
736
+ --color-ak-bg: #FFFFFF;
737
+ --color-ak-surface: #F3F3EF;
738
+ --color-ak-surface-2: #ECEDE5;
739
+ --color-ak-surface-3: #e3e3df;
740
+ --color-ak-surface-4: #dbdbd7;
741
+ --color-ak-surface-raised-soft: #eeeeea;
742
+ --color-ak-hover: #f3f3f3;
743
+ --color-ak-active: #ebebeb;
744
+ --color-ak-elevated: #FFFFFF;
745
+ --color-ak-inverse-surface: #0B0B0B;
746
+ --color-ak-inverse-on-surface: #FFFFFF;
747
+ --color-ak-border: #E4E4DC;
748
+ --color-ak-border-subtle: #ecece6;
749
+ --color-ak-border-strong: #b9b9b2;
750
+ --color-ak-border-focus: #D7FA4B;
751
+ --color-ak-neutral-50: #eeeeea;
752
+ --color-ak-neutral-100: #eaeae6;
753
+ --color-ak-neutral-200: #e0e0dd;
754
+ --color-ak-neutral-300: #d0d0cd;
755
+ --color-ak-neutral-400: #adadab;
756
+ --color-ak-neutral-500: #8b8b88;
757
+ --color-ak-neutral-600: #686866;
758
+ --color-ak-neutral-700: #4c4c4b;
759
+ --color-ak-neutral-800: #30302f;
760
+ --color-ak-neutral-900: #1e1e1d;
761
+ --color-ak-neutral-950: #141414;
762
+ --color-ak-primary: #D7FA4B;
763
+ --color-ak-primary-hover: #c2e144;
764
+ --color-ak-primary-active: #acc83c;
765
+ --color-ak-on-primary: #0B0B0B;
766
+ --color-ak-primary-subtle: #fafee9;
767
+ --color-ak-success: #22C55E;
768
+ --color-ak-success-subtle: #e4f8ec;
769
+ --color-ak-success-text: #1b9e4b;
770
+ --color-ak-warning: #F59E0B;
771
+ --color-ak-warning-subtle: #fef3e2;
772
+ --color-ak-warning-text: #c47e09;
773
+ --color-ak-danger: #F04438;
774
+ --color-ak-on-error: #FFFFFF;
775
+ --color-ak-danger-subtle: #fde9e7;
776
+ --color-ak-danger-text: #c0362d;
777
+ --color-ak-info: #3B82F6;
778
+ --color-ak-info-subtle: #e7f0fe;
779
+ --color-ak-info-text: #2f68c5;
780
+ --color-ak-overlay: rgba(0,0,0,0.5);
781
+ --color-ak-brutal-ink: #97af35;
782
+ --color-ak-brutal-face: #FFFFFF;
783
+ --color-ak-brutal-face-dark: #8ca331;
784
+ --color-ak-brutal-on-face: #97af35;
785
+ --color-ak-brutal-on-face-dark: #F3F3EF;
786
+ --shadow-ak-brutal-xs: 2px 2px 0 0 #81962d;
787
+ --shadow-ak-brutal-sm: 3px 3px 0 0 #81962d;
788
+ --shadow-ak-brutal: 4px 4px 0 0 #81962d;
789
+ --shadow-ak-brutal-lg: 6px 6px 0 0 #81962d;
790
+ --shadow-ak-brutal-xl: 8px 8px 0 0 #81962d;
791
+ --color-ak-status-beta-bg: #f1ebfe;
792
+ --color-ak-status-beta-text: #7C3AED;
793
+ --color-ak-status-beta-border: #dccefc;
794
+ --color-ak-status-new-bg: #e4f8ec;
795
+ --color-ak-status-new-text: #16A34A;
796
+ --color-ak-status-new-border: #bdeecf;
797
+ --color-ak-status-stable-bg: #e7f0fe;
798
+ --color-ak-status-stable-text: #2563EB;
799
+ --color-ak-status-stable-border: #c4dafc;
800
+ --color-ak-status-deprecated-bg: #fde9e9;
801
+ --color-ak-status-deprecated-text: #DC2626;
802
+ --color-ak-status-deprecated-border: #fac7c7;
803
+ }
804
+
805
+ /* LogoZap — Warm paper with Zap Blue accent — brand design system experiment (light) */
806
+ [data-ak-theme="logozap"] {
807
+ --color-ak-accent: #0B4FD9;
808
+ --color-ak-on-accent: #FFFFFF;
809
+ --color-ak-accent-soft: #d3dff8;
810
+ --color-ak-primary-50: #edf4ff;
811
+ --color-ak-primary-100: #dbeaff;
812
+ --color-ak-primary-200: #b7d5ff;
813
+ --color-ak-primary-300: #8abaff;
814
+ --color-ak-primary-400: #5da0ff;
815
+ --color-ak-primary-500: #1E7BFF;
816
+ --color-ak-primary-600: #1a6ce0;
817
+ --color-ak-primary-700: #175dc2;
818
+ --color-ak-primary-800: #134fa3;
819
+ --color-ak-primary-900: #0e3b7a;
820
+ --color-ak-primary-950: #0a2752;
821
+ --color-ak-text: #0A0A0A;
822
+ --color-ak-text-secondary: #5A5A5A;
823
+ --color-ak-text-muted: #8a8a89;
824
+ --color-ak-text-disabled: #babab8;
825
+ --color-ak-text-link: #1E7BFF;
826
+ --color-ak-text-inverse: #FFFFFF;
827
+ --color-ak-text-placeholder: #9a9a99;
828
+ --color-ak-bg: #FFFFFF;
829
+ --color-ak-surface: #FAFAF7;
830
+ --color-ak-surface-2: #F0EFEA;
831
+ --color-ak-surface-3: #e9e9e6;
832
+ --color-ak-surface-4: #e1e1de;
833
+ --color-ak-surface-raised-soft: #f5f5f2;
834
+ --color-ak-hover: #f3f3f3;
835
+ --color-ak-active: #ebebeb;
836
+ --color-ak-elevated: #FFFFFF;
837
+ --color-ak-inverse-surface: #0A0A0A;
838
+ --color-ak-inverse-on-surface: #FFFFFF;
839
+ --color-ak-border: #E4E2DA;
840
+ --color-ak-border-subtle: #efeee9;
841
+ --color-ak-border-strong: #b8b7b0;
842
+ --color-ak-border-focus: #0B4FD9;
843
+ --color-ak-neutral-50: #f5f5f2;
844
+ --color-ak-neutral-100: #f0f0ee;
845
+ --color-ak-neutral-200: #e7e7e4;
846
+ --color-ak-neutral-300: #d6d6d3;
847
+ --color-ak-neutral-400: #b2b2b0;
848
+ --color-ak-neutral-500: #8e8e8c;
849
+ --color-ak-neutral-600: #6a6a69;
850
+ --color-ak-neutral-700: #4d4d4c;
851
+ --color-ak-neutral-800: #303030;
852
+ --color-ak-neutral-900: #1d1d1d;
853
+ --color-ak-neutral-950: #141413;
854
+ --color-ak-primary: #1E7BFF;
855
+ --color-ak-primary-hover: #1b6fe6;
856
+ --color-ak-primary-active: #1862cc;
857
+ --color-ak-on-primary: #FFFFFF;
858
+ --color-ak-primary-subtle: #e4efff;
859
+ --color-ak-success: #22C55E;
860
+ --color-ak-success-subtle: #e4f8ec;
861
+ --color-ak-success-text: #1b9e4b;
862
+ --color-ak-warning: #F59E0B;
863
+ --color-ak-warning-subtle: #fef3e2;
864
+ --color-ak-warning-text: #c47e09;
865
+ --color-ak-danger: #EF4444;
866
+ --color-ak-on-error: #FFFFFF;
867
+ --color-ak-danger-subtle: #fde9e9;
868
+ --color-ak-danger-text: #bf3636;
869
+ --color-ak-info: #3B82F6;
870
+ --color-ak-info-subtle: #e7f0fe;
871
+ --color-ak-info-text: #2f68c5;
872
+ --color-ak-overlay: rgba(0,0,0,0.5);
873
+ --color-ak-brutal-ink: #1556b3;
874
+ --color-ak-brutal-face: #FFFFFF;
875
+ --color-ak-brutal-face-dark: #1450a6;
876
+ --color-ak-brutal-on-face: #1556b3;
877
+ --color-ak-brutal-on-face-dark: #FAFAF7;
878
+ --shadow-ak-brutal-xs: 2px 2px 0 0 #124a99;
879
+ --shadow-ak-brutal-sm: 3px 3px 0 0 #124a99;
880
+ --shadow-ak-brutal: 4px 4px 0 0 #124a99;
881
+ --shadow-ak-brutal-lg: 6px 6px 0 0 #124a99;
882
+ --shadow-ak-brutal-xl: 8px 8px 0 0 #124a99;
883
+ --color-ak-status-beta-bg: #f1ebfe;
884
+ --color-ak-status-beta-text: #7C3AED;
885
+ --color-ak-status-beta-border: #dccefc;
886
+ --color-ak-status-new-bg: #e4f8ec;
887
+ --color-ak-status-new-text: #16A34A;
888
+ --color-ak-status-new-border: #bdeecf;
889
+ --color-ak-status-stable-bg: #e7f0fe;
890
+ --color-ak-status-stable-text: #2563EB;
891
+ --color-ak-status-stable-border: #c4dafc;
892
+ --color-ak-status-deprecated-bg: #fde9e9;
893
+ --color-ak-status-deprecated-text: #DC2626;
894
+ --color-ak-status-deprecated-border: #fac7c7;
895
+ }
896
+
897
+ /* Volt Noir — True black with volt-lime CTAs — dark sibling of Pulse (dark) */
898
+ [data-ak-theme="volt-noir"] {
899
+ --color-ak-accent: #D7F94C;
900
+ --color-ak-on-accent: #0A0A0A;
901
+ --color-ak-accent-soft: #393f20;
902
+ --color-ak-primary-50: #fcfff1;
903
+ --color-ak-primary-100: #f9fee2;
904
+ --color-ak-primary-200: #f2fdc6;
905
+ --color-ak-primary-300: #eafca2;
906
+ --color-ak-primary-400: #e2fb7e;
907
+ --color-ak-primary-500: #D7F94C;
908
+ --color-ak-primary-600: #bddb43;
909
+ --color-ak-primary-700: #a3bd3a;
910
+ --color-ak-primary-800: #8a9f31;
911
+ --color-ak-primary-900: #677824;
912
+ --color-ak-primary-950: #455018;
913
+ --color-ak-text: #F2F2EF;
914
+ --color-ak-text-secondary: #A6A6A0;
915
+ --color-ak-text-muted: #777773;
916
+ --color-ak-text-disabled: #484846;
917
+ --color-ak-text-link: #D7F94C;
918
+ --color-ak-text-inverse: #161616;
919
+ --color-ak-text-placeholder: #686864;
920
+ --color-ak-bg: #161616;
921
+ --color-ak-surface: #0A0A0A;
922
+ --color-ak-surface-2: #1F1F1F;
923
+ --color-ak-surface-3: #1a1a1a;
924
+ --color-ak-surface-4: #222222;
925
+ --color-ak-surface-raised-soft: #0f0f0f;
926
+ --color-ak-hover: rgba(255,255,255,0.04);
927
+ --color-ak-active: rgba(255,255,255,0.08);
928
+ --color-ak-elevated: #161616;
929
+ --color-ak-inverse-surface: #F2F2EF;
930
+ --color-ak-inverse-on-surface: #0A0A0A;
931
+ --color-ak-border: rgba(255,255,255,0.10);
932
+ --color-ak-border-subtle: rgba(255,255,255,0.06);
933
+ --color-ak-border-strong: rgba(255,255,255,0.16);
934
+ --color-ak-border-focus: #D7F94C;
935
+ --color-ak-neutral-50: #0f0f0f;
936
+ --color-ak-neutral-100: #131313;
937
+ --color-ak-neutral-200: #1d1d1c;
938
+ --color-ak-neutral-300: #2d2d2c;
939
+ --color-ak-neutral-400: #50504f;
940
+ --color-ak-neutral-500: #727271;
941
+ --color-ak-neutral-600: #959593;
942
+ --color-ak-neutral-700: #b1b1af;
943
+ --color-ak-neutral-800: #cdcdca;
944
+ --color-ak-neutral-900: #dfdfdd;
945
+ --color-ak-neutral-950: #e9e9e6;
946
+ --color-ak-primary: #D7F94C;
947
+ --color-ak-primary-hover: #ddfa67;
948
+ --color-ak-primary-active: #e1fb79;
949
+ --color-ak-on-primary: #0A0A0A;
950
+ --color-ak-primary-subtle: #fafeea;
951
+ --color-ak-success: #22C55E;
952
+ --color-ak-success-subtle: #e4f8ec;
953
+ --color-ak-success-text: #1b9e4b;
954
+ --color-ak-warning: #F59E0B;
955
+ --color-ak-warning-subtle: #fef3e2;
956
+ --color-ak-warning-text: #c47e09;
957
+ --color-ak-danger: #FF5A48;
958
+ --color-ak-on-error: #F2F2EF;
959
+ --color-ak-pink: #f472b6;
960
+ --color-ak-pink-subtle: rgba(244,114,182,.12);
961
+ --color-ak-danger-subtle: #ffebe9;
962
+ --color-ak-danger-text: #cc483a;
963
+ --color-ak-info: #3B82F6;
964
+ --color-ak-info-subtle: #e7f0fe;
965
+ --color-ak-info-text: #2f68c5;
966
+ --color-ak-overlay: rgba(0,0,0,0.7);
967
+ --shadow-ak-xs: none;
968
+ --shadow-ak-sm: none;
969
+ --color-ak-brutal-ink: #D7F94C;
970
+ --color-ak-brutal-face: #0A0A0A;
971
+ --color-ak-brutal-face-dark: #ddfa67;
972
+ --color-ak-brutal-on-face: #D7F94C;
973
+ --color-ak-brutal-on-face-dark: #0A0A0A;
974
+ --shadow-ak-brutal-xs: 2px 2px 0 0 #dffa70;
975
+ --shadow-ak-brutal-sm: 3px 3px 0 0 #dffa70;
976
+ --shadow-ak-brutal: 4px 4px 0 0 #dffa70;
977
+ --shadow-ak-brutal-lg: 6px 6px 0 0 #dffa70;
978
+ --shadow-ak-brutal-xl: 8px 8px 0 0 #dffa70;
979
+ --color-ak-status-beta-bg: #f1ebfe;
980
+ --color-ak-status-beta-text: #7C3AED;
981
+ --color-ak-status-beta-border: #dccefc;
982
+ --color-ak-status-new-bg: #e4f8ec;
983
+ --color-ak-status-new-text: #16A34A;
984
+ --color-ak-status-new-border: #bdeecf;
985
+ --color-ak-status-stable-bg: #e7f0fe;
986
+ --color-ak-status-stable-text: #2563EB;
987
+ --color-ak-status-stable-border: #c4dafc;
988
+ --color-ak-status-deprecated-bg: #fde9e9;
989
+ --color-ak-status-deprecated-text: #DC2626;
990
+ --color-ak-status-deprecated-border: #fac7c7;
991
+ }
992
+
993
+ /* Neon Noir — Deep violet-black with periwinkle glow — neon casino energy (dark) */
994
+ [data-ak-theme="neon-noir"] {
995
+ --color-ak-accent: #8B7CF7;
996
+ --color-ak-on-accent: #EDEAF6;
997
+ --color-ak-accent-soft: #2c264c;
998
+ --color-ak-primary-50: #f6f5fe;
999
+ --color-ak-primary-100: #eceafe;
1000
+ --color-ak-primary-200: #dad5fc;
1001
+ --color-ak-primary-300: #c3bbfb;
1002
+ --color-ak-primary-400: #aba1f9;
1003
+ --color-ak-primary-500: #8B7CF7;
1004
+ --color-ak-primary-600: #7a6dd9;
1005
+ --color-ak-primary-700: #6a5ebc;
1006
+ --color-ak-primary-800: #594f9e;
1007
+ --color-ak-primary-900: #433c77;
1008
+ --color-ak-primary-950: #2c284f;
1009
+ --color-ak-text: #EDEAF6;
1010
+ --color-ak-text-secondary: #9D97B8;
1011
+ --color-ak-text-muted: #726d87;
1012
+ --color-ak-text-disabled: #474357;
1013
+ --color-ak-text-link: #8B7CF7;
1014
+ --color-ak-text-inverse: #171327;
1015
+ --color-ak-text-placeholder: #635f77;
1016
+ --color-ak-bg: #171327;
1017
+ --color-ak-surface: #0D0B16;
1018
+ --color-ak-surface-2: #1E1936;
1019
+ --color-ak-surface-3: #1d1b26;
1020
+ --color-ak-surface-4: #25222e;
1021
+ --color-ak-surface-raised-soft: #110f1a;
1022
+ --color-ak-hover: rgba(255,255,255,0.04);
1023
+ --color-ak-active: rgba(255,255,255,0.08);
1024
+ --color-ak-elevated: #171327;
1025
+ --color-ak-inverse-surface: #EDEAF6;
1026
+ --color-ak-inverse-on-surface: #0D0B16;
1027
+ --color-ak-border: rgba(255,255,255,0.10);
1028
+ --color-ak-border-subtle: rgba(255,255,255,0.06);
1029
+ --color-ak-border-strong: rgba(255,255,255,0.16);
1030
+ --color-ak-border-focus: #8B7CF7;
1031
+ --color-ak-neutral-50: #110f1a;
1032
+ --color-ak-neutral-100: #16141f;
1033
+ --color-ak-neutral-200: #1f1d28;
1034
+ --color-ak-neutral-300: #2f2c38;
1035
+ --color-ak-neutral-400: #504e59;
1036
+ --color-ak-neutral-500: #726f7b;
1037
+ --color-ak-neutral-600: #93919c;
1038
+ --color-ak-neutral-700: #aeacb7;
1039
+ --color-ak-neutral-800: #c9c6d2;
1040
+ --color-ak-neutral-900: #dbd8e4;
1041
+ --color-ak-neutral-950: #e4e1ed;
1042
+ --color-ak-primary: #8B7CF7;
1043
+ --color-ak-primary-hover: #9c90f8;
1044
+ --color-ak-primary-active: #a89df9;
1045
+ --color-ak-on-primary: #EDEAF6;
1046
+ --color-ak-primary-subtle: #f1effe;
1047
+ --color-ak-success: #22C55E;
1048
+ --color-ak-success-subtle: #e4f8ec;
1049
+ --color-ak-success-text: #1b9e4b;
1050
+ --color-ak-warning: #F59E0B;
1051
+ --color-ak-warning-subtle: #fef3e2;
1052
+ --color-ak-warning-text: #c47e09;
1053
+ --color-ak-danger: #FF4D6A;
1054
+ --color-ak-on-error: #EDEAF6;
1055
+ --color-ak-pink: #f472b6;
1056
+ --color-ak-pink-subtle: rgba(244,114,182,.12);
1057
+ --color-ak-danger-subtle: #ffeaed;
1058
+ --color-ak-danger-text: #cc3e55;
1059
+ --color-ak-info: #3B82F6;
1060
+ --color-ak-info-subtle: #e7f0fe;
1061
+ --color-ak-info-text: #2f68c5;
1062
+ --color-ak-overlay: rgba(0,0,0,0.7);
1063
+ --shadow-ak-xs: none;
1064
+ --shadow-ak-sm: none;
1065
+ --color-ak-brutal-ink: #8B7CF7;
1066
+ --color-ak-brutal-face: #0D0B16;
1067
+ --color-ak-brutal-face-dark: #9c90f8;
1068
+ --color-ak-brutal-on-face: #8B7CF7;
1069
+ --color-ak-brutal-on-face-dark: #0D0B16;
1070
+ --shadow-ak-brutal-xs: 2px 2px 0 0 #a296f9;
1071
+ --shadow-ak-brutal-sm: 3px 3px 0 0 #a296f9;
1072
+ --shadow-ak-brutal: 4px 4px 0 0 #a296f9;
1073
+ --shadow-ak-brutal-lg: 6px 6px 0 0 #a296f9;
1074
+ --shadow-ak-brutal-xl: 8px 8px 0 0 #a296f9;
1075
+ --color-ak-status-beta-bg: #f1ebfe;
1076
+ --color-ak-status-beta-text: #7C3AED;
1077
+ --color-ak-status-beta-border: #dccefc;
1078
+ --color-ak-status-new-bg: #e4f8ec;
1079
+ --color-ak-status-new-text: #16A34A;
1080
+ --color-ak-status-new-border: #bdeecf;
1081
+ --color-ak-status-stable-bg: #e7f0fe;
1082
+ --color-ak-status-stable-text: #2563EB;
1083
+ --color-ak-status-stable-border: #c4dafc;
1084
+ --color-ak-status-deprecated-bg: #fde9e9;
1085
+ --color-ak-status-deprecated-text: #DC2626;
1086
+ --color-ak-status-deprecated-border: #fac7c7;
1087
+ }
1088
+
1089
+ /* Deep Teal — Dark ocean teal with golden accent — Happy Hues #10 (dark) */
1090
+ [data-ak-theme="deep-teal"] {
1091
+ --color-ak-accent: #E16162;
1092
+ --color-ak-on-accent: #FFFFFE;
1093
+ --color-ak-accent-soft: #292a29;
1094
+ --color-ak-primary-50: #fffaf2;
1095
+ --color-ak-primary-100: #fef4e6;
1096
+ --color-ak-primary-200: #fdeacc;
1097
+ --color-ak-primary-300: #fcdcac;
1098
+ --color-ak-primary-400: #fbcf8d;
1099
+ --color-ak-primary-500: #F9BC60;
1100
+ --color-ak-primary-600: #dba554;
1101
+ --color-ak-primary-700: #bd8f49;
1102
+ --color-ak-primary-800: #9f783d;
1103
+ --color-ak-primary-900: #785a2e;
1104
+ --color-ak-primary-950: #503c1f;
1105
+ --color-ak-text: #FFFFFE;
1106
+ --color-ak-text-secondary: #ABD1C6;
1107
+ --color-ak-text-muted: #78a79f;
1108
+ --color-ak-text-disabled: #447e77;
1109
+ --color-ak-text-link: #F9BC60;
1110
+ --color-ak-text-inverse: #001E1D;
1111
+ --color-ak-text-placeholder: #679992;
1112
+ --color-ak-bg: #001E1D;
1113
+ --color-ak-surface: #004643;
1114
+ --color-ak-surface-2: #0A5854;
1115
+ --color-ak-surface-3: #125350;
1116
+ --color-ak-surface-4: #1b5957;
1117
+ --color-ak-surface-raised-soft: #054a47;
1118
+ --color-ak-hover: rgba(255,255,255,0.04);
1119
+ --color-ak-active: rgba(255,255,255,0.08);
1120
+ --color-ak-elevated: #001E1D;
1121
+ --color-ak-inverse-surface: #FFFFFE;
1122
+ --color-ak-inverse-on-surface: #004643;
1123
+ --color-ak-border: rgba(255,255,255,0.10);
1124
+ --color-ak-border-subtle: rgba(255,255,255,0.06);
1125
+ --color-ak-border-strong: rgba(255,255,255,0.16);
1126
+ --color-ak-border-focus: #E16162;
1127
+ --color-ak-neutral-50: #054a47;
1128
+ --color-ak-neutral-100: #0a4d4a;
1129
+ --color-ak-neutral-200: #145552;
1130
+ --color-ak-neutral-300: #26625f;
1131
+ --color-ak-neutral-400: #4d7e7b;
1132
+ --color-ak-neutral-500: #739997;
1133
+ --color-ak-neutral-600: #99b5b3;
1134
+ --color-ak-neutral-700: #b8cbca;
1135
+ --color-ak-neutral-800: #d6e1e0;
1136
+ --color-ak-neutral-900: #ebf0ef;
1137
+ --color-ak-neutral-950: #f5f8f7;
1138
+ --color-ak-primary: #F9BC60;
1139
+ --color-ak-primary-hover: #fac678;
1140
+ --color-ak-primary-active: #fbcd88;
1141
+ --color-ak-on-primary: #004643;
1142
+ --color-ak-primary-subtle: #fef7ec;
1143
+ --color-ak-success: #22C55E;
1144
+ --color-ak-success-subtle: #e4f8ec;
1145
+ --color-ak-success-text: #1b9e4b;
1146
+ --color-ak-warning: #F59E0B;
1147
+ --color-ak-warning-subtle: #fef3e2;
1148
+ --color-ak-warning-text: #c47e09;
1149
+ --color-ak-danger: #E16162;
1150
+ --color-ak-on-error: #FFFFFE;
1151
+ --color-ak-pink: #f472b6;
1152
+ --color-ak-pink-subtle: rgba(244,114,182,.12);
1153
+ --color-ak-danger-subtle: #fbecec;
1154
+ --color-ak-danger-text: #b44e4e;
1155
+ --color-ak-info: #3B82F6;
1156
+ --color-ak-info-subtle: #e7f0fe;
1157
+ --color-ak-info-text: #2f68c5;
1158
+ --color-ak-overlay: rgba(0,0,0,0.7);
1159
+ --shadow-ak-xs: none;
1160
+ --shadow-ak-sm: none;
1161
+ --color-ak-brutal-ink: #F9BC60;
1162
+ --color-ak-brutal-face: #004643;
1163
+ --color-ak-brutal-face-dark: #fac678;
1164
+ --color-ak-brutal-on-face: #F9BC60;
1165
+ --color-ak-brutal-on-face-dark: #004643;
1166
+ --shadow-ak-brutal-xs: 2px 2px 0 0 #fac980;
1167
+ --shadow-ak-brutal-sm: 3px 3px 0 0 #fac980;
1168
+ --shadow-ak-brutal: 4px 4px 0 0 #fac980;
1169
+ --shadow-ak-brutal-lg: 6px 6px 0 0 #fac980;
1170
+ --shadow-ak-brutal-xl: 8px 8px 0 0 #fac980;
1171
+ --color-ak-status-beta-bg: #f1ebfe;
1172
+ --color-ak-status-beta-text: #7C3AED;
1173
+ --color-ak-status-beta-border: #dccefc;
1174
+ --color-ak-status-new-bg: #e4f8ec;
1175
+ --color-ak-status-new-text: #16A34A;
1176
+ --color-ak-status-new-border: #bdeecf;
1177
+ --color-ak-status-stable-bg: #e7f0fe;
1178
+ --color-ak-status-stable-text: #2563EB;
1179
+ --color-ak-status-stable-border: #c4dafc;
1180
+ --color-ak-status-deprecated-bg: #fde9e9;
1181
+ --color-ak-status-deprecated-text: #DC2626;
1182
+ --color-ak-status-deprecated-border: #fac7c7;
1183
+ }
1184
+