astralkit 0.6.0 → 0.8.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 (29) hide show
  1. package/CHANGELOG.md +109 -87
  2. package/LICENSE +73 -34
  3. package/README.md +31 -1
  4. package/astralkit-theme-v4.css +647 -626
  5. package/astralkit-theme.css +647 -626
  6. package/astralkit-utilities.css +1128 -817
  7. package/lib/presets/appearance-presets.d.ts +12 -0
  8. package/lib/presets/appearance-presets.js +102 -0
  9. package/lib/presets/chart-palettes.d.ts +29 -0
  10. package/lib/presets/chart-palettes.js +99 -0
  11. package/lib/presets/dials.d.ts +31 -0
  12. package/lib/presets/dials.js +330 -0
  13. package/lib/presets/font-pairings.d.ts +29 -0
  14. package/lib/presets/font-pairings.js +123 -0
  15. package/lib/presets/fonts.d.ts +16 -0
  16. package/lib/presets/fonts.js +76 -0
  17. package/lib/presets/index.d.ts +7 -0
  18. package/lib/presets/index.js +24 -0
  19. package/lib/presets/materials.d.ts +15 -0
  20. package/lib/presets/materials.js +245 -0
  21. package/lib/presets/theme-palettes.d.ts +90 -0
  22. package/lib/presets/theme-palettes.js +720 -0
  23. package/package.json +3 -2
  24. package/primitives/animations.css +43 -1
  25. package/primitives/forms.css +2155 -2155
  26. package/primitives/layout.css +220 -220
  27. package/primitives/mobile.css +557 -557
  28. package/primitives/navigation.css +1057 -1057
  29. package/tailwind.cjs +538 -524
package/astralkit-utilities.css CHANGED
@@ -1,817 +1,1128 @@
1
- /* ══════════════════════════════════════════════════════════
2
- AstralKit — Component CSS & Primitives
3
-
4
- Tokens live in astralkit-theme.css (v3/:root) or
5
- astralkit-theme-v4.css (v4/@theme). This file contains
6
- only base resets, component primitives, and utility classes.
7
-
8
- All CSS is UNLAYERED. No @layer declarations.
9
- Compatible with Tailwind v3 and v4.
10
- ══════════════════════════════════════════════════════════ */
11
-
12
- /* ── Base resets (unlayered — always applies) ── */
13
- a { text-decoration: none; }
14
- html {
15
- -webkit-font-smoothing: antialiased;
16
- -moz-osx-font-smoothing: grayscale;
17
- scroll-padding-top: var(--height-ak-nav, 4.5rem);
18
- scroll-padding-bottom: var(--spacing-ak-mobile-bar, 4.5rem);
19
- }
20
-
21
- /* ══════════════════════════════════════════════════════════
22
- TOKENS are now in astralkit-theme.css (v3) or astralkit-theme-v4.css (v4).
23
- This file contains only component CSS, primitives, and base resets.
24
- ══════════════════════════════════════════════════════════ */
25
- /* ══════════════════════════════════════════════════════════
26
- COMPONENT PRIMITIVES
27
- Unlayered — source order determines cascade priority.
28
- Component dark modifiers (e.g. .ak-sidebar-panel--dark) beat
29
- [data-theme="dark"] because they come later in the file.
30
- ══════════════════════════════════════════════════════════ */
31
- @import "./primitives/focus.css";
32
- @import "./primitives/typography.css";
33
- @import "./primitives/icons.css";
34
- @import "./primitives/sidebar.css";
35
- @import "./primitives/avatar.css";
36
- @import "./primitives/navigation.css";
37
- @import "./primitives/badges.css";
38
- @import "./primitives/mobile.css";
39
- @import "./primitives/animations.css";
40
- @import "./primitives/layout.css";
41
- @import "./primitives/accounts.css";
42
- @import "./primitives/forms.css";
43
- @import "./primitives/effects.css";
44
-
45
- @keyframes ak-skeleton-shimmer {
46
- 100% { transform: translateX(100%); }
47
- }
48
-
49
- /* Note: The unlayered override block that was here (170 lines) has been
50
- removed. With @layer gone, all primitive declarations are unlayered and
51
- compete with Tailwind preflight via specificity (.class > *). */
52
-
53
- /* ══════════════════════════════════════════════════════════
54
- Neobrutalist interaction helper
55
- Apply `.ak-brutal-press` to any element that has a brutal shadow
56
- to get the signature "push into shadow" press effect:
57
- - default: 4px 4px shadow + translate(0,0)
58
- - hover: 2px 2px shadow + translate(2px,2px)
59
- - active: 0px 0px shadow + translate(4px,4px) — fully pressed
60
- Works with any --shadow-ak-brutal-* size.
61
- Respects prefers-reduced-motion via the rule below.
62
- ══════════════════════════════════════════════════════════ */
63
- .ak-brutal-press {
64
- transition: transform 0.15s ease, box-shadow 0.15s ease;
65
- }
66
- .ak-brutal-press:hover {
67
- transform: translate(2px, 2px);
68
- box-shadow: var(--shadow-ak-brutal-sm);
69
- }
70
- .ak-brutal-press:active {
71
- transform: translate(4px, 4px);
72
- box-shadow: 0 0 0 0 var(--color-ak-brutal-ink);
73
- }
74
-
75
- /* ══════════════════════════════════════════════════════════
76
- Form Primitives — Checkbox, Radio, Switch, Range, OTP
77
- Styles that require pseudo-elements, attribute selectors,
78
- vendor prefixes, or keyframes — things Tailwind can't do.
79
- Components use Tailwind for everything else (layout, spacing,
80
- colors, fonts). These are the minimal CSS escape hatches.
81
- ══════════════════════════════════════════════════════════ */
82
-
83
- /* ── Checkbox ── */
84
- .ak-check {
85
- appearance: none;
86
- width: 22px; height: 22px;
87
- border: 2px solid var(--color-ak-border-strong);
88
- border-radius: 6px;
89
- cursor: pointer; position: relative;
90
- transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
91
- flex-shrink: 0;
92
- }
93
- .ak-check:hover { border-color: var(--color-ak-primary); }
94
- .ak-check:checked {
95
- background: var(--color-ak-primary);
96
- border-color: var(--color-ak-primary);
97
- }
98
- .ak-check:checked::after {
99
- content: '';
100
- position: absolute; left: 6px; top: 2px;
101
- width: 6px; height: 11px;
102
- border: solid var(--color-ak-on-primary);
103
- border-width: 0 2.5px 2.5px 0;
104
- transform: rotate(45deg);
105
- }
106
- .ak-check:focus-visible {
107
- outline: 2px solid var(--color-ak-primary);
108
- outline-offset: 2px;
109
- }
110
- .ak-check:disabled { cursor: not-allowed; opacity: 0.5; }
111
-
112
- /* ── Radio ── */
113
- .ak-radio {
114
- appearance: none;
115
- width: 22px; height: 22px;
116
- border: 2px solid var(--color-ak-border-strong);
117
- border-radius: 50%;
118
- cursor: pointer; position: relative;
119
- transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
120
- flex-shrink: 0;
121
- background: var(--color-ak-bg);
122
- }
123
- .ak-radio:hover { border-color: var(--color-ak-primary); }
124
- .ak-radio:checked {
125
- border-color: var(--color-ak-primary);
126
- background: var(--color-ak-primary);
127
- }
128
- .ak-radio:checked::after {
129
- content: '';
130
- position: absolute; top: 50%; left: 50%;
131
- transform: translate(-50%, -50%);
132
- width: 8px; height: 8px;
133
- border-radius: 50%;
134
- background: var(--color-ak-on-primary);
135
- }
136
- .ak-radio:focus-visible {
137
- outline: 2px solid var(--color-ak-primary);
138
- outline-offset: 2px;
139
- }
140
- .ak-radio:disabled { cursor: not-allowed; opacity: 0.5; }
141
-
142
- /* ── Switch ── */
143
- .ak-switch-track {
144
- position: relative; width: 52px; height: 28px;
145
- background: var(--color-ak-border-strong);
146
- border-radius: 9999px;
147
- transition: background-color 0.2s;
148
- }
149
- .ak-switch[aria-checked="true"] .ak-switch-track {
150
- background: var(--color-ak-primary);
151
- }
152
- .ak-switch-knob {
153
- position: absolute; top: 3px; left: 3px;
154
- width: 22px; height: 22px;
155
- background: var(--color-ak-on-primary);
156
- border-radius: 50%;
157
- transition: transform 0.2s;
158
- }
159
- .ak-switch[aria-checked="true"] .ak-switch-knob {
160
- transform: translateX(24px);
161
- }
162
- .ak-switch:focus-visible .ak-switch-track {
163
- outline: 2px solid var(--color-ak-primary);
164
- outline-offset: 2px;
165
- }
166
- /* Size: Small */
167
- .ak-switch-sm .ak-switch-track { width: 44px; height: 24px; }
168
- .ak-switch-sm .ak-switch-knob { width: 18px; height: 18px; }
169
- .ak-switch-sm[aria-checked="true"] .ak-switch-knob { transform: translateX(20px); }
170
- /* Size: Large */
171
- .ak-switch-lg .ak-switch-track { width: 64px; height: 34px; }
172
- .ak-switch-lg .ak-switch-knob { width: 28px; height: 28px; }
173
- .ak-switch-lg[aria-checked="true"] .ak-switch-knob { transform: translateX(30px); }
174
-
175
- /* Color tracks */
176
- .ak-switch-success[aria-checked="true"] .ak-switch-track { background: var(--color-ak-success); }
177
- .ak-switch-danger[aria-checked="true"] .ak-switch-track { background: var(--color-ak-danger); }
178
-
179
- /* Icon switch — default (72×36)
180
- Track icons are absolutely positioned at left/right edges.
181
- Knob is absolute and slides over them. Knob icon shows the active state icon. */
182
- .ak-switch-with-icons .ak-switch-track { width: 72px; height: 36px; }
183
- .ak-switch-with-icons .ak-switch-knob {
184
- width: 30px; height: 30px; z-index: 2;
185
- display: flex; align-items: center; justify-content: center;
186
- }
187
- .ak-switch-with-icons[aria-checked="true"] .ak-switch-knob { transform: translateX(36px); }
188
- /* Track icons — absolute, centered vertically at left/right */
189
- .ak-switch-track-icon {
190
- position: absolute; top: 50%; transform: translateY(-50%);
191
- z-index: 1; line-height: 1; font-size: 14px;
192
- display: flex; align-items: center; justify-content: center;
193
- transition: opacity 0.2s;
194
- }
195
- .ak-switch-track-icon:first-child { left: 10px; }
196
- .ak-switch-track-icon:last-child { right: 10px; }
197
- /* Off state: left icon hidden (behind knob), right icon visible */
198
- .ak-switch-with-icons .ak-switch-track-icon:first-child { opacity: 0; }
199
- .ak-switch-with-icons .ak-switch-track-icon:last-child { color: var(--color-ak-inverse-on-surface, #ffffff); opacity: 0.7; }
200
- /* On state: left icon visible, right icon hidden (behind knob) */
201
- .ak-switch-with-icons[aria-checked="true"] .ak-switch-track-icon:first-child { color: var(--color-ak-on-primary); opacity: 0.7; }
202
- .ak-switch-with-icons[aria-checked="true"] .ak-switch-track-icon:last-child { opacity: 0; }
203
- /* Off-state surfaces: ink track from the inverse pair — palettes tint it, and
204
- it stays softer than the checked primary track — with the knob swapping the
205
- same pair so the state icon is legible on every palette in both modes. */
206
- .ak-switch-with-icons[aria-checked="false"] .ak-switch-track {
207
- background: color-mix(in srgb, var(--color-ak-inverse-surface, #171717) 84%, var(--color-ak-surface, #ffffff));
208
- }
209
- .ak-switch-with-icons[aria-checked="false"] .ak-switch-knob {
210
- background: var(--color-ak-inverse-on-surface, #ffffff);
211
- }
212
- /* Knob icon */
213
- .ak-switch-knob-icon { font-size: 14px; color: var(--color-ak-text); line-height: 1; }
214
- .ak-switch-with-icons .ak-switch-knob-icon { color: var(--color-ak-inverse-surface, #171717); }
215
- .ak-switch-with-icons[aria-checked="true"] .ak-switch-knob-icon { color: var(--color-ak-primary); }
216
- /* Dark mode: the page is already ink — the off track returns to the neutral
217
- border tone and the inverse pair flips (inverse-surface reads light). */
218
- .dark .ak-switch-with-icons[aria-checked="false"] .ak-switch-track,
219
- [data-theme="dark"] .ak-switch-with-icons[aria-checked="false"] .ak-switch-track {
220
- background: var(--color-ak-border-strong);
221
- }
222
- .dark .ak-switch-with-icons[aria-checked="false"] .ak-switch-knob,
223
- [data-theme="dark"] .ak-switch-with-icons[aria-checked="false"] .ak-switch-knob {
224
- background: var(--color-ak-inverse-surface, var(--color-ak-text, #ffffff));
225
- }
226
- .dark .ak-switch-with-icons .ak-switch-track-icon:last-child,
227
- [data-theme="dark"] .ak-switch-with-icons .ak-switch-track-icon:last-child {
228
- color: var(--color-ak-text, #ffffff);
229
- }
230
- .dark .ak-switch-with-icons[aria-checked="false"] .ak-switch-knob-icon,
231
- [data-theme="dark"] .ak-switch-with-icons[aria-checked="false"] .ak-switch-knob-icon {
232
- color: var(--color-ak-inverse-on-surface, var(--color-ak-bg, #171717));
233
- }
234
-
235
- /* Icon switch — lg (88×44) */
236
- .ak-switch-icons-lg .ak-switch-track { width: 88px; height: 44px; }
237
- .ak-switch-icons-lg .ak-switch-knob { width: 38px; height: 38px; }
238
- .ak-switch-icons-lg[aria-checked="true"] .ak-switch-knob { transform: translateX(44px); }
239
- .ak-switch-icons-lg .ak-switch-track-icon:first-child { left: 12px; }
240
- .ak-switch-icons-lg .ak-switch-track-icon:last-child { right: 12px; }
241
- .ak-switch-icons-lg .ak-switch-track-icon,
242
- .ak-switch-icons-lg .ak-switch-knob-icon { font-size: 18px; }
243
- /* Icon switch — xl (104×52) */
244
- .ak-switch-icons-xl .ak-switch-track { width: 104px; height: 52px; }
245
- .ak-switch-icons-xl .ak-switch-knob { width: 46px; height: 46px; }
246
- .ak-switch-icons-xl[aria-checked="true"] .ak-switch-knob { transform: translateX(52px); }
247
- .ak-switch-icons-xl .ak-switch-track-icon:first-child { left: 14px; }
248
- .ak-switch-icons-xl .ak-switch-track-icon:last-child { right: 14px; }
249
- .ak-switch-icons-xl .ak-switch-track-icon,
250
- .ak-switch-icons-xl .ak-switch-knob-icon { font-size: 22px; }
251
- /* Icon switch — xxl (120×60) */
252
- .ak-switch-icons-xxl .ak-switch-track { width: 120px; height: 60px; }
253
- .ak-switch-icons-xxl .ak-switch-knob { width: 54px; height: 54px; }
254
- .ak-switch-icons-xxl[aria-checked="true"] .ak-switch-knob { transform: translateX(60px); }
255
- .ak-switch-icons-xxl .ak-switch-track-icon:first-child { left: 16px; }
256
- .ak-switch-icons-xxl .ak-switch-track-icon:last-child { right: 16px; }
257
- .ak-switch-icons-xxl .ak-switch-track-icon,
258
- .ak-switch-icons-xxl .ak-switch-knob-icon { font-size: 26px; }
259
-
260
- /* Reversed field (switch left, label right) */
261
- .ak-switch-field-reversed { flex-direction: row-reverse; justify-content: flex-end; }
262
- /* Status text beside switch */
263
- .ak-switch-status { font-size: var(--text-ak-fl-base); font-weight: 600; color: var(--color-ak-text-muted); min-width: 24px; }
264
-
265
- @media (prefers-reduced-motion: reduce) {
266
- .ak-switch-track, .ak-switch-knob, .ak-switch-track-icon { transition: none; }
267
- }
268
-
269
- /* ── Range Slider ── */
270
- .ak-range input[type="range"] {
271
- --range-track: var(--color-ak-border);
272
- --range-fill: var(--color-ak-text);
273
- -webkit-appearance: none; appearance: none;
274
- width: 100%; height: 3rem;
275
- background: transparent; cursor: pointer;
276
- margin: 0; padding: 0;
277
- }
278
- .ak-range input[type="range"]::-webkit-slider-runnable-track {
279
- height: 6px; border-radius: 999px;
280
- background: linear-gradient(to right, var(--range-fill) var(--ak-fill, 0%), var(--range-track) var(--ak-fill, 0%));
281
- }
282
- .ak-range input[type="range"]::-webkit-slider-thumb {
283
- -webkit-appearance: none; appearance: none;
284
- width: 1.5rem; height: 1.5rem; margin-top: -0.5625rem;
285
- border: 4px solid var(--color-ak-text); border-radius: 999px;
286
- background: var(--color-ak-bg);
287
- transition: transform 0.15s ease, box-shadow 0.15s ease;
288
- box-shadow: 0 1px 3px rgba(0,0,0,0.12);
289
- }
290
- .ak-range input[type="range"]::-moz-range-track {
291
- height: 6px; border-radius: 999px;
292
- background: var(--range-track);
293
- }
294
- .ak-range input[type="range"]::-moz-range-progress {
295
- height: 6px; border-radius: 999px;
296
- background: var(--range-fill);
297
- }
298
- .ak-range input[type="range"]::-moz-range-thumb {
299
- width: 1rem; height: 1rem;
300
- border: 4px solid var(--color-ak-text); border-radius: 999px;
301
- background: var(--color-ak-bg);
302
- transition: transform 0.15s ease;
303
- box-shadow: 0 1px 3px rgba(0,0,0,0.12);
304
- }
305
- .ak-range input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.15); }
306
- .ak-range input[type="range"]:hover::-moz-range-thumb { transform: scale(1.15); }
307
- .ak-range input[type="range"]:focus-visible { outline: none; }
308
- .ak-range input[type="range"]:focus-visible::-webkit-slider-thumb {
309
- box-shadow: 0 0 0 4px var(--color-ak-bg), 0 0 0 7px var(--color-ak-primary);
310
- transform: scale(1.15);
311
- }
312
- .ak-range input[type="range"]:focus-visible::-moz-range-thumb {
313
- box-shadow: 0 0 0 4px var(--color-ak-bg), 0 0 0 7px var(--color-ak-primary);
314
- transform: scale(1.15);
315
- }
316
-
317
- /* ── Range Dual Track ── */
318
- .ak-dual-track { pointer-events: none; position: absolute; left: 0; right: 0; height: 6px; border-radius: 999px; background: var(--color-ak-border); z-index: 1; }
319
- .ak-dual-fill { position: absolute; height: 100%; border-radius: 999px; background: var(--color-ak-text); z-index: 0; }
320
- .ak-dual-input { pointer-events: none; position: absolute; left: 0; width: 100%; height: 3rem; background: transparent; z-index: 3; }
321
- .ak-dual-input::-webkit-slider-runnable-track { height: 6px; background: transparent !important; }
322
- .ak-dual-input::-webkit-slider-thumb { pointer-events: auto; position: relative; z-index: 10; }
323
- .ak-dual-input::-moz-range-track, .ak-dual-input::-moz-range-progress { background: transparent !important; }
324
- .ak-dual-input::-moz-range-thumb { pointer-events: auto; position: relative; z-index: 10; }
325
-
326
- /* ── Number Input Spinbutton Hide ── */
327
- .ak-stepper input,
328
- .ak-qty input,
329
- .ak-range input[type="number"] {
330
- -moz-appearance: textfield; appearance: textfield;
331
- }
332
- .ak-stepper input::-webkit-outer-spin-button,
333
- .ak-stepper input::-webkit-inner-spin-button,
334
- .ak-qty input::-webkit-outer-spin-button,
335
- .ak-qty input::-webkit-inner-spin-button,
336
- .ak-range input[type="number"]::-webkit-outer-spin-button,
337
- .ak-range input[type="number"]::-webkit-inner-spin-button {
338
- -webkit-appearance: none; margin: 0;
339
- }
340
-
341
- /* ── OTP Input ── */
342
- .ak-otp-input {
343
- width: 56px; height: 64px; text-align: center;
344
- font-size: var(--text-ak-2xl); font-weight: 700;
345
- border: 2px solid var(--color-ak-border); border-radius: 0.75rem;
346
- outline: none; background: var(--color-ak-bg); color: var(--color-ak-text);
347
- transition: border-color 0.15s ease, background-color 0.15s ease;
348
- caret-color: var(--color-ak-primary);
349
- }
350
- .ak-otp-input::placeholder { color: var(--color-ak-text-muted); }
351
- .ak-otp-input:hover { border-color: var(--color-ak-border-strong); }
352
- .ak-otp-input:focus-visible {
353
- outline: 2px solid var(--color-ak-primary);
354
- outline-offset: 2px;
355
- border-color: var(--color-ak-primary);
356
- background: var(--color-ak-surface);
357
- }
358
- .ak-otp-input.has-value { border-color: var(--color-ak-text); font-weight: 800; }
359
- @media (max-width: 400px) {
360
- .ak-otp-input { width: 44px; height: 52px; font-size: var(--text-ak-xl); }
361
- }
362
-
363
- /* ── Color Picker Swatch ── */
364
- .ak-color-swatch:hover { border-color: var(--color-ak-border-strong); }
365
- .ak-color-swatch:active { transform: scale(0.95); transition-duration: 0.1s; }
366
- .ak-color-swatch.selected { border-color: var(--color-ak-text); }
367
-
368
- /* ── File Upload ── */
369
- @keyframes ak-spin { to { transform: rotate(360deg); } }
370
- .ak-spinner { animation: ak-spin 0.8s linear infinite; }
371
- .ak-dropzone { transition: border-color 0.2s ease, background-color 0.2s ease; }
372
- .ak-dropzone:hover { border-color: var(--color-ak-border-strong); background: var(--color-ak-hover); }
373
- .ak-dropzone.drag-over { border-color: var(--color-ak-primary); background: var(--color-ak-primary-subtle); }
374
- .ak-file-row { transition: background-color 0.15s ease, border-color 0.15s ease; }
375
- .ak-file-row:hover { background: var(--color-ak-hover); border-color: var(--color-ak-border-strong); }
376
- .ak-progress-fill { transition: width 0.3s ease; }
377
-
378
- /* ── Star Rating ── */
379
- .ak-star-btn {
380
- display: inline-flex; align-items: center; justify-content: center;
381
- width: 48px; height: 48px; cursor: pointer;
382
- border: none; background: none; padding: 0;
383
- border-radius: 8px;
384
- color: var(--color-ak-text-disabled);
385
- transition: color 0.15s, transform 0.15s;
386
- }
387
- .ak-star-btn.filled { color: var(--color-ak-text); }
388
- .ak-star-btn:hover { transform: scale(1.1); }
389
- .ak-star-btn:focus-visible { outline: 2px solid var(--color-ak-primary); outline-offset: 2px; }
390
- .ak-star-btn.ak-star-sm { width: 40px; height: 40px; }
391
- .ak-star-btn.ak-star-sm .ak-star-icon { font-size: 20px; }
392
- .ak-star-icon { font-size: 28px; }
393
- .ak-star-btn.ak-star-lg { width: 56px; height: 56px; }
394
- .ak-star-btn.ak-star-lg .ak-star-icon { font-size: 36px; }
395
-
396
- /* ── Switch Layout ── */
397
- .ak-switch {
398
- display: inline-flex; align-items: center; justify-content: center;
399
- background: none; border: none; padding: 8px 0; cursor: pointer;
400
- border-radius: 9999px; flex-shrink: 0; min-height: 44px;
401
- }
402
- .ak-switch:focus { outline: none; }
403
- .ak-switch:disabled, .ak-switch[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
404
- .ak-switch-field {
405
- display: flex; align-items: center; justify-content: space-between;
406
- gap: 16px; min-height: 52px;
407
- }
408
- .ak-switch-label-wrap { display: flex; flex-direction: column; gap: 4px; cursor: pointer; flex: 1; min-width: 0; }
409
- .ak-switch-field:has(.ak-switch:disabled) .ak-switch-label-wrap,
410
- .ak-switch-field:has(.ak-switch[aria-disabled="true"]) .ak-switch-label-wrap { cursor: default; }
411
- /* When icon is present, use grid so icon spans full height and text+helper align */
412
- .ak-switch-label-wrap:has(.ak-switch-label-icon) {
413
- display: grid;
414
- grid-template-columns: 2.75rem 1fr;
415
- grid-template-rows: auto auto;
416
- column-gap: 14px;
417
- row-gap: 2px;
418
- align-items: center;
419
- }
420
- .ak-switch-label-wrap:has(.ak-switch-label-icon) .ak-switch-label-icon {
421
- grid-column: 1;
422
- grid-row: 1 / -1;
423
- align-self: center;
424
- }
425
- .ak-switch-label-wrap:has(.ak-switch-label-icon) .ak-switch-label {
426
- grid-column: 2;
427
- grid-row: 1;
428
- }
429
- .ak-switch-label-wrap:has(.ak-switch-label-icon) .ak-switch-helper {
430
- grid-column: 2;
431
- grid-row: 2;
432
- }
433
- .ak-switch-label {
434
- font-size: var(--text-ak-fl-lg); font-weight: 700; color: var(--color-ak-text);
435
- }
436
- .ak-switch-helper { font-size: var(--text-ak-fl-base); color: var(--color-ak-text-secondary); }
437
- .ak-switch-label-icon {
438
- font-size: 1.5rem; color: var(--color-ak-text-secondary); line-height: 1; flex-shrink: 0;
439
- width: 2.75rem; height: 2.75rem;
440
- display: flex; align-items: center; justify-content: center;
441
- background: var(--color-ak-surface); border-radius: 0.75rem;
442
- }
443
- .ak-switch-card {
444
- border: 2px solid var(--color-ak-border); border-radius: 0.75rem;
445
- padding: 20px 24px; transition: border-color 0.2s;
446
- }
447
- .ak-switch-card-active {
448
- border-color: var(--color-ak-primary); background: var(--color-ak-primary-subtle);
449
- }
450
- .ak-switch-compact .ak-switch-field { padding: 16px 0; }
451
- .ak-switch-compact .ak-switch-field + .ak-switch-field { border-top: 1px solid var(--color-ak-border); }
452
- .ak-switch-compact .ak-switch-label { font-size: var(--text-ak-fl-base); }
453
- .ak-switch-compact .ak-switch-helper { font-size: var(--text-ak-fl-sm); }
454
- .ak-switch-value { font-size: var(--text-ak-fl-base); font-weight: 600; color: var(--color-ak-text); min-width: 32px; text-align: right; }
455
- .ak-switch-value-muted { color: var(--color-ak-text-secondary); font-weight: 400; }
456
- .ak-switch-group { border: none; padding: 0; margin: 0; }
457
- .ak-switch-group-legend { font-size: var(--text-ak-fl-base); font-weight: 700; color: var(--color-ak-text-secondary); padding: 0; margin-bottom: 16px; text-transform: uppercase; letter-spacing: 0.05em; }
458
- .ak-switch-section { border: 2px solid var(--color-ak-border); border-radius: 0.75rem; padding: 24px; }
459
- .ak-switch-section .ak-switch-group-legend { font-size: var(--text-ak-fl-lg); margin-bottom: 16px; padding: 0 8px; text-transform: none; letter-spacing: normal; }
460
- .ak-switch-section .ak-switch-field + .ak-switch-field {
461
- border-top: 1px solid var(--color-ak-border-subtle); padding-top: 16px; margin-top: 16px;
462
- }
463
- .ak-form-section { max-width: 640px; }
464
-
465
- /* ── Number Stepper Button Press ── */
466
- .ak-stepper-btn:active:not([aria-disabled="true"]) {
467
- transform: translate(2px, 2px);
468
- box-shadow: 2px 2px 0 0 var(--color-ak-brutal-ink) !important;
469
- }
470
- .ak-stepper-btn[aria-disabled="true"] { pointer-events: none; opacity: 0.3; }
471
-
472
- /* ── Quantity Selector ── */
473
- .ak-qty-btn { transition: all 0.15s ease; }
474
- .ak-qty-btn:active:not([aria-disabled="true"]) { transform: scale(0.96); }
475
- .ak-qty-btn[aria-disabled="true"] { opacity: 0.3; cursor: not-allowed; }
476
-
477
- /* ── Shared Keyframes ── */
478
- @keyframes ak-fadeInUp {
479
- from { opacity: 0; transform: translateY(8px); }
480
- to { opacity: 1; transform: translateY(0); }
481
- }
482
- @keyframes ak-slideIn {
483
- from { opacity: 0; transform: translateY(-8px) scale(0.98); }
484
- to { opacity: 1; transform: translateY(0) scale(1); }
485
- }
486
- @keyframes ak-fadeOut {
487
- from { opacity: 1; transform: translateY(0) scale(1); }
488
- to { opacity: 0; transform: translateY(-8px) scale(0.98); }
489
- }
490
- @keyframes ak-swipeOut {
491
- from { transform: translateX(var(--radix-toast-swipe-end-x)); }
492
- to { transform: translateX(100%); }
493
- }
494
-
495
- /* ── Glass Panel (split-screen logins) ── */
496
- .ak-glass-panel {
497
- background: rgba(255, 255, 255, 0.03);
498
- backdrop-filter: blur(12px);
499
- -webkit-backdrop-filter: blur(12px);
500
- border: 1px solid rgba(255, 255, 255, 0.1);
501
- }
502
-
503
- /* ── Grid Pattern Background ── */
504
- .ak-bg-grid-pattern {
505
- background-image: linear-gradient(to right, rgba(255,255,255,0.06) 1px, transparent 1px),
506
- linear-gradient(to bottom, rgba(255,255,255,0.06) 1px, transparent 1px);
507
- background-size: 40px 40px;
508
- }
509
-
510
- /* ── Toggle Group ── */
511
- .ak-toggle-group {
512
- display: inline-flex; background: var(--color-ak-surface-2);
513
- border-radius: 8px; padding: 4px; gap: 4px;
514
- }
515
- .ak-toggle-group-item {
516
- display: inline-flex; align-items: center; justify-content: center; gap: 6px;
517
- background: none; border: none; padding: 0 16px; min-height: 44px;
518
- font-family: inherit; font-size: var(--text-ak-base, 1rem); font-weight: 600;
519
- color: var(--color-ak-text-secondary); border-radius: 8px; cursor: pointer;
520
- transition: background-color 0.2s, color 0.2s; white-space: nowrap; line-height: 1;
521
- }
522
- .ak-toggle-group-item[aria-checked="true"],
523
- .ak-toggle-group-item[aria-pressed="true"] {
524
- background: var(--color-ak-bg); color: var(--color-ak-text);
525
- }
526
- .ak-toggle-group-item[aria-checked="false"]:not(:disabled):hover,
527
- .ak-toggle-group-item[aria-pressed="false"]:not(:disabled):hover {
528
- color: var(--color-ak-text); background: var(--color-ak-hover);
529
- }
530
- .ak-toggle-group-item:focus { outline: none; }
531
- .ak-toggle-group-item:focus-visible { outline: 2px solid var(--color-ak-primary); outline-offset: 2px; }
532
- .ak-toggle-group-item:disabled { opacity: 0.4; cursor: not-allowed; }
533
- .ak-toggle-group[aria-disabled="true"] { opacity: 0.5; }
534
- .ak-toggle-group[aria-disabled="true"] .ak-toggle-group-item { cursor: not-allowed; }
535
- .ak-toggle-group-item i { font-size: 20px; line-height: 1; }
536
- .ak-toggle-group-item-icon { padding: 0 14px; }
537
- /* Toggle group — small */
538
- .ak-toggle-group-sm { padding: 3px; gap: 3px; }
539
- .ak-toggle-group-sm .ak-toggle-group-item { min-height: 44px; padding: 0 12px; font-size: var(--text-ak-sm, 0.875rem); }
540
- .ak-toggle-group-sm .ak-toggle-group-item i { font-size: 18px; }
541
- .ak-toggle-group-sm .ak-toggle-group-item-icon { padding: 0 12px; }
542
- /* Toggle group — large */
543
- .ak-toggle-group-lg { padding: 5px; gap: 5px; }
544
- .ak-toggle-group-lg .ak-toggle-group-item { min-height: 52px; padding: 0 24px; font-size: var(--text-ak-lg, 1.125rem); }
545
- .ak-toggle-group-lg .ak-toggle-group-item i { font-size: 24px; }
546
- .ak-toggle-group-lg .ak-toggle-group-item-icon { padding: 0 18px; }
547
-
548
- /* ── Resizable Panel Cursors ── */
549
- body.ak-col-resizing, body.ak-col-resizing * {
550
- cursor: col-resize !important; user-select: none !important; -webkit-user-select: none !important;
551
- }
552
- body.ak-ew-resizing, body.ak-ew-resizing * {
553
- cursor: ew-resize !important; user-select: none !important; -webkit-user-select: none !important;
554
- }
555
-
556
- /* ── Theme Role Utilities ── */
557
- .ak-theme-control {
558
- background: var(--color-ak-surface-container-lowest, var(--color-ak-bg));
559
- border-color: var(--color-ak-outline-variant, var(--color-ak-border-subtle));
560
- color: var(--color-ak-on-surface, var(--color-ak-text));
561
- }
562
- .ak-theme-control:is(button, a, [role="button"], [tabindex]):not([aria-disabled="true"]):not(:disabled):hover {
563
- background: var(--color-ak-surface-container-low, var(--color-ak-hover));
564
- border-color: var(--color-ak-outline, var(--color-ak-border));
565
- }
566
- .ak-theme-control-selected {
567
- background: var(--color-ak-secondary, var(--color-ak-primary));
568
- border-color: var(--color-ak-secondary, var(--color-ak-primary));
569
- color: var(--color-ak-on-secondary, var(--color-ak-on-primary));
570
- }
571
- .ak-theme-control-selected-soft {
572
- background: var(--color-ak-secondary-container, var(--color-ak-primary-subtle));
573
- border-color: var(--color-ak-secondary-outline, var(--color-ak-secondary, var(--color-ak-primary)));
574
- color: var(--color-ak-on-secondary-container, var(--color-ak-text));
575
- }
576
- .ak-theme-control-selected-primary {
577
- background: var(--color-ak-primary);
578
- border-color: var(--color-ak-primary);
579
- color: var(--color-ak-on-primary);
580
- }
581
- .ak-theme-control-selected-primary-soft {
582
- background: var(--color-ak-primary-container, var(--color-ak-primary-subtle));
583
- border-color: var(--color-ak-primary-outline, var(--color-ak-primary));
584
- color: var(--color-ak-selection-ink, var(--color-ak-on-primary-container, var(--color-ak-text)));
585
- }
586
- .ak-theme-icon-well {
587
- background: var(--color-ak-surface-container, var(--color-ak-surface-2));
588
- border-color: var(--color-ak-outline-variant, var(--color-ak-border-subtle));
589
- color: var(--color-ak-on-surface-variant, var(--color-ak-text-secondary));
590
- }
591
- .ak-theme-icon-well-selected {
592
- background: var(--color-ak-secondary, var(--color-ak-primary));
593
- border-color: var(--color-ak-secondary, var(--color-ak-primary));
594
- color: var(--color-ak-on-secondary, var(--color-ak-on-primary));
595
- }
596
- .ak-theme-icon-well-selected-primary {
597
- background: var(--color-ak-primary-selection, var(--color-ak-primary));
598
- border-color: var(--color-ak-primary-selection, var(--color-ak-primary));
599
- color: var(--color-ak-on-primary-selection, var(--color-ak-on-primary));
600
- }
601
- .ak-theme-badge {
602
- background: var(--color-ak-surface-container-lowest, var(--color-ak-bg));
603
- border-color: var(--color-ak-outline-variant, var(--color-ak-border-subtle));
604
- color: var(--color-ak-on-surface-variant, var(--color-ak-text-secondary));
605
- }
606
- .ak-theme-badge-selected {
607
- background: var(--color-ak-accent, var(--color-ak-primary));
608
- border-color: var(--color-ak-accent, var(--color-ak-primary));
609
- color: var(--color-ak-on-accent, var(--color-ak-on-primary));
610
- }
611
- .ak-theme-media-caption {
612
- background: var(--color-ak-primary-container, var(--color-ak-secondary-container, var(--color-ak-surface-container-lowest, var(--color-ak-bg))));
613
- border-color: color-mix(in srgb, var(--color-ak-primary, var(--color-ak-border)) 34%, transparent);
614
- color: var(--color-ak-on-primary-container, var(--color-ak-on-secondary-container, var(--color-ak-on-surface, var(--color-ak-text))));
615
- }
616
- .ak-theme-cta-gradient {
617
- background: var(--gradient-ak-primary, linear-gradient(135deg, var(--color-ak-primary-hover), var(--color-ak-primary), var(--color-ak-primary-active)));
618
- background-size: 160% 160%;
619
- border-color: transparent;
620
- color: var(--color-ak-on-primary);
621
- transition:
622
- background-position var(--duration-ak-slow, 240ms) var(--ease-ak-default, cubic-bezier(0.4, 0, 0.2, 1)),
623
- filter var(--duration-ak-fast, 110ms) var(--ease-ak-default, cubic-bezier(0.4, 0, 0.2, 1)),
624
- transform var(--duration-ak-fast, 110ms) var(--ease-ak-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
625
- }
626
- .ak-theme-cta-gradient:is(button, a, [role="button"]):not([aria-disabled="true"]):not(:disabled):hover {
627
- background: var(--gradient-ak-primary-hover, var(--gradient-ak-primary, linear-gradient(135deg, var(--color-ak-primary-hover), var(--color-ak-primary), var(--color-ak-primary-active))));
628
- background-position: 100% 50%;
629
- filter: saturate(1.05);
630
- }
631
- .ak-theme-cta-gradient:is(button, a, [role="button"]):not([aria-disabled="true"]):not(:disabled):active {
632
- transform: translateY(1px) scale(0.99);
633
- }
634
- .ak-theme-switch-track {
635
- background: var(--color-ak-surface-container-high, var(--color-ak-surface-2));
636
- border-color: var(--color-ak-outline-variant, var(--color-ak-border-subtle));
637
- box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-ak-on-surface-variant, var(--color-ak-text-secondary)) 6%, transparent);
638
- }
639
- .ak-theme-switch-track-selected {
640
- background: var(--color-ak-secondary, var(--color-ak-primary));
641
- border-color: var(--color-ak-secondary, var(--color-ak-primary));
642
- }
643
- .ak-theme-switch-track-selected-primary {
644
- background: var(--color-ak-primary);
645
- border-color: var(--color-ak-primary);
646
- }
647
- .ak-theme-switch-thumb {
648
- background: var(--color-ak-bg);
649
- box-shadow: var(--shadow-ak-xs);
650
- }
651
- .ak-theme-switch-track-selected .ak-theme-switch-thumb {
652
- background: var(--color-ak-on-secondary, var(--color-ak-on-primary));
653
- }
654
- .ak-theme-switch-track-selected-primary .ak-theme-switch-thumb {
655
- background: var(--color-ak-on-primary);
656
- }
657
- .dark .ak-theme-switch-thumb,
658
- [data-theme="dark"] .ak-theme-switch-thumb,
659
- [data-ak-dark-panel] .ak-theme-switch-thumb {
660
- background: var(--color-ak-text);
661
- }
662
- .dark .ak-theme-switch-track-selected .ak-theme-switch-thumb,
663
- [data-theme="dark"] .ak-theme-switch-track-selected .ak-theme-switch-thumb,
664
- [data-ak-dark-panel] .ak-theme-switch-track-selected .ak-theme-switch-thumb {
665
- background: var(--color-ak-on-secondary, var(--color-ak-on-primary));
666
- }
667
- .dark .ak-theme-switch-track-selected-primary .ak-theme-switch-thumb,
668
- [data-theme="dark"] .ak-theme-switch-track-selected-primary .ak-theme-switch-thumb,
669
- [data-ak-dark-panel] .ak-theme-switch-track-selected-primary .ak-theme-switch-thumb {
670
- background: var(--color-ak-on-primary);
671
- }
672
- .ak-theme-logo-mark {
673
- transition: filter var(--duration-ak-fast, 110ms) var(--ease-ak-default, cubic-bezier(0.4, 0, 0.2, 1)), opacity var(--duration-ak-fast, 110ms) var(--ease-ak-default, cubic-bezier(0.4, 0, 0.2, 1));
674
- }
675
- .dark .ak-theme-logo-mark,
676
- [data-theme="dark"] .ak-theme-logo-mark,
677
- [data-ak-dark-panel] .ak-theme-logo-mark {
678
- filter: invert(1) brightness(1.08) contrast(0.96);
679
- }
680
-
681
- /* Dark premium material utilities.
682
- These stay dormant in light mode and use the palette glow tokens in dark contexts. */
683
- .ak-dark-material:is([data-ak-dark-panel], [data-ak-dark-rail], [data-ak-dark-mobile]),
684
- .ak-dark-material:is(.dark *),
685
- .dark .ak-dark-material,
686
- [data-theme="dark"] .ak-dark-material,
687
- [data-ak-dark-panel] .ak-dark-material,
688
- [data-ak-dark-rail] .ak-dark-material,
689
- [data-ak-dark-mobile] .ak-dark-material {
690
- background:
691
- linear-gradient(180deg, color-mix(in srgb, var(--color-ak-on-surface, #fff) 5%, transparent), transparent 42%),
692
- radial-gradient(90% 64% at 50% 0%, color-mix(in srgb, var(--color-ak-glow-primary, #818cf8) 10%, transparent), transparent 72%),
693
- color-mix(in srgb, var(--color-ak-bg, #111) 90%, var(--color-ak-mesh-base, #050509) 10%);
694
- border-color: color-mix(in srgb, var(--color-ak-glow-primary, #818cf8) 18%, var(--color-ak-border, rgba(255,255,255,0.12)));
695
- color: var(--color-ak-on-surface, var(--color-ak-text));
696
- }
697
- .ak-dark-control:is(.dark *),
698
- .dark .ak-dark-control,
699
- [data-theme="dark"] .ak-dark-control,
700
- [data-ak-dark-panel] .ak-dark-control,
701
- [data-ak-dark-rail] .ak-dark-control,
702
- [data-ak-dark-mobile] .ak-dark-control {
703
- background-color: transparent;
704
- border-color: transparent;
705
- }
706
- .ak-dark-outlined-control:is(.dark *),
707
- .dark .ak-dark-outlined-control,
708
- [data-theme="dark"] .ak-dark-outlined-control,
709
- [data-ak-dark-panel] .ak-dark-outlined-control,
710
- [data-ak-dark-rail] .ak-dark-outlined-control,
711
- [data-ak-dark-mobile] .ak-dark-outlined-control {
712
- background:
713
- linear-gradient(180deg, color-mix(in srgb, var(--color-ak-on-surface, #fff) 3%, transparent), transparent 58%),
714
- color-mix(in srgb, var(--color-ak-bg, #111) 86%, var(--color-ak-on-surface, #fff) 5%);
715
- border-color: color-mix(in srgb, var(--color-ak-glow-primary, #818cf8) 26%, var(--color-ak-border, rgba(255,255,255,0.12)));
716
- }
717
- .ak-dark-avatar-tile:is(.dark *),
718
- .dark .ak-dark-avatar-tile,
719
- [data-theme="dark"] .ak-dark-avatar-tile,
720
- [data-ak-dark-panel] .ak-dark-avatar-tile,
721
- [data-ak-dark-rail] .ak-dark-avatar-tile,
722
- [data-ak-dark-mobile] .ak-dark-avatar-tile {
723
- background:
724
- radial-gradient(circle at 35% 22%, color-mix(in srgb, var(--color-ak-glow-primary, #818cf8) 30%, transparent), transparent 62%),
725
- color-mix(in srgb, var(--color-ak-primary-container, #31245a) 72%, var(--color-ak-bg, #111) 28%);
726
- color: var(--color-ak-on-primary-container, var(--color-ak-on-surface, #fff));
727
- }
728
- .ak-dark-control:is(button, a, [role="button"], [tabindex]):not([aria-disabled="true"]):not(:disabled):is(:hover, [data-highlighted]),
729
- .ak-dark-control:is(button, a, [role="button"], [tabindex]):not([aria-disabled="true"]):not(:disabled)[data-highlighted],
730
- .dark .ak-dark-control:is(button, a, [role="button"], [tabindex]):not([aria-disabled="true"]):not(:disabled):hover,
731
- [data-theme="dark"] .ak-dark-control:is(button, a, [role="button"], [tabindex]):not([aria-disabled="true"]):not(:disabled):hover,
732
- [data-ak-dark-panel] .ak-dark-control:is(button, a, [role="button"], [tabindex]):not([aria-disabled="true"]):not(:disabled):hover,
733
- [data-ak-dark-rail] .ak-dark-control:is(button, a, [role="button"], [tabindex]):not([aria-disabled="true"]):not(:disabled):hover,
734
- [data-ak-dark-mobile] .ak-dark-control:is(button, a, [role="button"], [tabindex]):not([aria-disabled="true"]):not(:disabled):hover {
735
- background:
736
- linear-gradient(135deg, color-mix(in srgb, var(--color-ak-glow-primary, #818cf8) 10%, transparent), transparent 64%),
737
- color-mix(in srgb, var(--color-ak-on-surface, #fff) 6%, transparent);
738
- color: var(--color-ak-on-surface, var(--color-ak-text));
739
- }
740
- .ak-dark-control-selected:is(.dark *),
741
- .dark .ak-dark-control-selected,
742
- [data-theme="dark"] .ak-dark-control-selected,
743
- [data-ak-dark-panel] .ak-dark-control-selected,
744
- [data-ak-dark-rail] .ak-dark-control-selected,
745
- [data-ak-dark-mobile] .ak-dark-control-selected {
746
- background:
747
- radial-gradient(circle at 18% 14%, color-mix(in srgb, var(--color-ak-on-primary, #fff) 22%, transparent), transparent 36%),
748
- linear-gradient(135deg, var(--color-ak-gradient-start, var(--color-ak-primary-hover)) 0%, var(--color-ak-gradient-mid, var(--color-ak-primary)) 52%, var(--color-ak-gradient-end, var(--color-ak-primary-active)) 100%);
749
- border-color: color-mix(in srgb, var(--color-ak-glow-primary, #818cf8) 64%, var(--color-ak-border, rgba(255,255,255,0.12)));
750
- box-shadow:
751
- inset 0 0 0 1px color-mix(in srgb, var(--color-ak-glow-primary, #818cf8) 46%, transparent),
752
- inset 0 1px 0 color-mix(in srgb, var(--color-ak-neutral-0, #fff) 16%, transparent),
753
- 0 0 0 1px color-mix(in srgb, var(--color-ak-glow-primary, #818cf8) 14%, transparent),
754
- 0 12px 28px -22px color-mix(in srgb, var(--color-ak-glow-primary, #818cf8) 78%, transparent);
755
- color: var(--color-ak-on-primary-selection, var(--color-ak-on-primary, #fff));
756
- }
757
- .dark .ak-dark-control-selected.ak-selection-ink,
758
- [data-theme="dark"] .ak-dark-control-selected.ak-selection-ink,
759
- [data-ak-dark-panel] .ak-dark-control-selected.ak-selection-ink,
760
- [data-ak-dark-rail] .ak-dark-control-selected.ak-selection-ink,
761
- [data-ak-dark-mobile] .ak-dark-control-selected.ak-selection-ink,
762
- .dark .ak-dark-control-selected :where(.ak-selection-ink, i, svg, .ph),
763
- [data-theme="dark"] .ak-dark-control-selected :where(.ak-selection-ink, i, svg, .ph),
764
- [data-ak-dark-panel] .ak-dark-control-selected :where(.ak-selection-ink, i, svg, .ph),
765
- [data-ak-dark-rail] .ak-dark-control-selected :where(.ak-selection-ink, i, svg, .ph),
766
- [data-ak-dark-mobile] .ak-dark-control-selected :where(.ak-selection-ink, i, svg, .ph) {
767
- color: var(--color-ak-on-primary-selection, var(--color-ak-on-primary, #fff));
768
- }
769
- .ak-dark-accent-tile:is(.dark *),
770
- .dark .ak-dark-accent-tile,
771
- [data-theme="dark"] .ak-dark-accent-tile,
772
- [data-ak-dark-panel] .ak-dark-accent-tile,
773
- [data-ak-dark-rail] .ak-dark-accent-tile,
774
- [data-ak-dark-mobile] .ak-dark-accent-tile {
775
- background:
776
- radial-gradient(circle at 22% 16%, color-mix(in srgb, var(--color-ak-on-primary, #fff) 20%, transparent), transparent 38%),
777
- linear-gradient(135deg, var(--color-ak-gradient-start, var(--color-ak-primary-hover)) 0%, var(--color-ak-gradient-mid, var(--color-ak-primary)) 50%, var(--color-ak-gradient-end, var(--color-ak-primary-active)) 100%);
778
- border-color: color-mix(in srgb, var(--color-ak-glow-primary, #818cf8) 62%, transparent);
779
- box-shadow:
780
- inset 0 0 0 1px color-mix(in srgb, var(--color-ak-on-primary, #fff) 16%, transparent),
781
- 0 10px 28px -18px color-mix(in srgb, var(--color-ak-glow-primary, #818cf8) 90%, transparent);
782
- color: var(--color-ak-on-primary, #fff);
783
- }
784
- .ak-dark-accent-tile:is(.dark *) :where(i, svg, .ph),
785
- .dark .ak-dark-accent-tile :where(i, svg, .ph),
786
- [data-theme="dark"] .ak-dark-accent-tile :where(i, svg, .ph),
787
- [data-ak-dark-panel] .ak-dark-accent-tile :where(i, svg, .ph),
788
- [data-ak-dark-rail] .ak-dark-accent-tile :where(i, svg, .ph),
789
- [data-ak-dark-mobile] .ak-dark-accent-tile :where(i, svg, .ph) {
790
- color: var(--color-ak-on-primary, #fff);
791
- }
792
- .ak-dark-vivid-ink:is(.dark *),
793
- .dark .ak-dark-vivid-ink,
794
- [data-theme="dark"] .ak-dark-vivid-ink,
795
- [data-ak-dark-panel] .ak-dark-vivid-ink,
796
- [data-ak-dark-rail] .ak-dark-vivid-ink,
797
- [data-ak-dark-mobile] .ak-dark-vivid-ink {
798
- color: var(--color-ak-glow-primary, var(--color-ak-primary));
799
- }
800
-
801
- /* ── Focus Ring Utility ── */
802
- .ak-focus-ring:focus-visible { outline: 2px solid var(--color-ak-border-focus, var(--color-ak-primary)); outline-offset: 2px; }
803
-
804
- /* ── Price Fade Transition ── */
805
- .ak-price-fade { transition: opacity 0.15s ease-in-out; }
806
-
807
- /* Reduced motion — unlayered so it overrides everything */
808
- @media (prefers-reduced-motion: reduce) {
809
- *, *::before, *::after {
810
- animation-duration: 0.01ms !important;
811
- transition-duration: 0.01ms !important;
812
- }
813
- .ak-star-btn:hover { transform: none !important; }
814
- .ak-stepper-btn:active { transform: none !important; }
815
- @keyframes ak-slideIn { from { opacity: 0; } to { opacity: 1; } }
816
- @keyframes ak-fadeOut { from { opacity: 1; } to { opacity: 0; } }
817
- }
1
+ /* ══════════════════════════════════════════════════════════
2
+ AstralKit — Component CSS & Primitives
3
+
4
+ Tokens live in astralkit-theme.css (v3/:root) or
5
+ astralkit-theme-v4.css (v4/@theme). This file contains
6
+ only base resets, component primitives, and utility classes.
7
+
8
+ All CSS is UNLAYERED. No @layer declarations.
9
+ Compatible with Tailwind v3 and v4.
10
+ ══════════════════════════════════════════════════════════ */
11
+
12
+ /* ── Base resets (unlayered — always applies) ── */
13
+ a { text-decoration: none; }
14
+ html {
15
+ -webkit-font-smoothing: antialiased;
16
+ -moz-osx-font-smoothing: grayscale;
17
+ scroll-padding-top: var(--height-ak-nav, 4.5rem);
18
+ scroll-padding-bottom: var(--spacing-ak-mobile-bar, 4.5rem);
19
+ }
20
+
21
+ /* ══════════════════════════════════════════════════════════
22
+ TOKENS are now in astralkit-theme.css (v3) or astralkit-theme-v4.css (v4).
23
+ This file contains only component CSS, primitives, and base resets.
24
+ ══════════════════════════════════════════════════════════ */
25
+ /* ══════════════════════════════════════════════════════════
26
+ COMPONENT PRIMITIVES
27
+ Unlayered — source order determines cascade priority.
28
+ Component dark modifiers (e.g. .ak-sidebar-panel--dark) beat
29
+ [data-theme="dark"] because they come later in the file.
30
+ ══════════════════════════════════════════════════════════ */
31
+ @import "./primitives/focus.css";
32
+ @import "./primitives/typography.css";
33
+ @import "./primitives/icons.css";
34
+ @import "./primitives/sidebar.css";
35
+ @import "./primitives/avatar.css";
36
+ @import "./primitives/navigation.css";
37
+ @import "./primitives/badges.css";
38
+ @import "./primitives/mobile.css";
39
+ @import "./primitives/animations.css";
40
+ @import "./primitives/layout.css";
41
+ @import "./primitives/accounts.css";
42
+ @import "./primitives/forms.css";
43
+ @import "./primitives/effects.css";
44
+
45
+ @keyframes ak-skeleton-shimmer {
46
+ 100% { transform: translateX(100%); }
47
+ }
48
+
49
+ /* Note: The unlayered override block that was here (170 lines) has been
50
+ removed. With @layer gone, all primitive declarations are unlayered and
51
+ compete with Tailwind preflight via specificity (.class > *). */
52
+
53
+ /* ══════════════════════════════════════════════════════════
54
+ Neobrutalist interaction helper
55
+ Apply `.ak-brutal-press` to any element that has a brutal shadow
56
+ to get the signature "push into shadow" press effect:
57
+ - default: 4px 4px shadow + translate(0,0)
58
+ - hover: 2px 2px shadow + translate(2px,2px)
59
+ - active: 0px 0px shadow + translate(4px,4px) — fully pressed
60
+ Works with any --shadow-ak-brutal-* size.
61
+ Respects prefers-reduced-motion via the rule below.
62
+ ══════════════════════════════════════════════════════════ */
63
+ .ak-brutal-press {
64
+ transition: transform 0.15s ease, box-shadow 0.15s ease;
65
+ }
66
+ .ak-brutal-press:hover {
67
+ transform: translate(2px, 2px);
68
+ box-shadow: var(--shadow-ak-brutal-sm);
69
+ }
70
+ .ak-brutal-press:active {
71
+ transform: translate(4px, 4px);
72
+ box-shadow: 0 0 0 0 var(--color-ak-brutal-ink);
73
+ }
74
+
75
+ /* ══════════════════════════════════════════════════════════
76
+ Form Primitives — Checkbox, Radio, Switch, Range, OTP
77
+ Styles that require pseudo-elements, attribute selectors,
78
+ vendor prefixes, or keyframes — things Tailwind can't do.
79
+ Components use Tailwind for everything else (layout, spacing,
80
+ colors, fonts). These are the minimal CSS escape hatches.
81
+ ══════════════════════════════════════════════════════════ */
82
+
83
+ /* ── Checkbox ── */
84
+ .ak-check {
85
+ appearance: none;
86
+ width: 22px; height: 22px;
87
+ border: 2px solid var(--color-ak-border-strong);
88
+ border-radius: 6px;
89
+ cursor: pointer; position: relative;
90
+ transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
91
+ flex-shrink: 0;
92
+ }
93
+ .ak-check:hover { border-color: var(--color-ak-primary); }
94
+ .ak-check:checked {
95
+ background: var(--color-ak-primary);
96
+ border-color: var(--color-ak-primary);
97
+ }
98
+ .ak-check:checked::after {
99
+ content: '';
100
+ position: absolute; left: 6px; top: 2px;
101
+ width: 6px; height: 11px;
102
+ border: solid var(--color-ak-on-primary);
103
+ border-width: 0 2.5px 2.5px 0;
104
+ transform: rotate(45deg);
105
+ }
106
+ .ak-check:focus-visible {
107
+ outline: 2px solid var(--color-ak-primary);
108
+ outline-offset: 2px;
109
+ }
110
+ .ak-check:disabled { cursor: not-allowed; opacity: 0.5; }
111
+
112
+ /* ── Radio ── */
113
+ .ak-radio {
114
+ appearance: none;
115
+ width: 22px; height: 22px;
116
+ border: 2px solid var(--color-ak-border-strong);
117
+ border-radius: 50%;
118
+ cursor: pointer; position: relative;
119
+ transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
120
+ flex-shrink: 0;
121
+ background: var(--color-ak-bg);
122
+ }
123
+ .ak-radio:hover { border-color: var(--color-ak-primary); }
124
+ .ak-radio:checked {
125
+ border-color: var(--color-ak-primary);
126
+ background: var(--color-ak-primary);
127
+ }
128
+ .ak-radio:checked::after {
129
+ content: '';
130
+ position: absolute; top: 50%; left: 50%;
131
+ transform: translate(-50%, -50%);
132
+ width: 8px; height: 8px;
133
+ border-radius: 50%;
134
+ background: var(--color-ak-on-primary);
135
+ }
136
+ .ak-radio:focus-visible {
137
+ outline: 2px solid var(--color-ak-primary);
138
+ outline-offset: 2px;
139
+ }
140
+ .ak-radio:disabled { cursor: not-allowed; opacity: 0.5; }
141
+
142
+ /* ── Switch ── */
143
+ .ak-switch-track {
144
+ position: relative; width: 52px; height: 28px;
145
+ background: var(--color-ak-border-strong);
146
+ border-radius: 9999px;
147
+ transition: background-color 0.2s;
148
+ }
149
+ .ak-switch[aria-checked="true"] .ak-switch-track {
150
+ background: var(--color-ak-primary);
151
+ }
152
+ .ak-switch-knob {
153
+ position: absolute; top: 3px; left: 3px;
154
+ width: 22px; height: 22px;
155
+ background: var(--color-ak-on-primary);
156
+ border-radius: 50%;
157
+ transition: transform 0.2s;
158
+ }
159
+ .ak-switch[aria-checked="true"] .ak-switch-knob {
160
+ transform: translateX(24px);
161
+ }
162
+ .ak-switch:focus-visible .ak-switch-track {
163
+ outline: 2px solid var(--color-ak-primary);
164
+ outline-offset: 2px;
165
+ }
166
+ /* Size: Small */
167
+ .ak-switch-sm .ak-switch-track { width: 44px; height: 24px; }
168
+ .ak-switch-sm .ak-switch-knob { width: 18px; height: 18px; }
169
+ .ak-switch-sm[aria-checked="true"] .ak-switch-knob { transform: translateX(20px); }
170
+ /* Size: Large */
171
+ .ak-switch-lg .ak-switch-track { width: 64px; height: 34px; }
172
+ .ak-switch-lg .ak-switch-knob { width: 28px; height: 28px; }
173
+ .ak-switch-lg[aria-checked="true"] .ak-switch-knob { transform: translateX(30px); }
174
+
175
+ /* Color tracks */
176
+ .ak-switch-success[aria-checked="true"] .ak-switch-track { background: var(--color-ak-success); }
177
+ .ak-switch-danger[aria-checked="true"] .ak-switch-track { background: var(--color-ak-danger); }
178
+
179
+ /* Icon switch — default (72×36)
180
+ Track icons are absolutely positioned at left/right edges.
181
+ Knob is absolute and slides over them. Knob icon shows the active state icon. */
182
+ .ak-switch-with-icons .ak-switch-track { width: 72px; height: 36px; }
183
+ .ak-switch-with-icons .ak-switch-knob {
184
+ width: 30px; height: 30px; z-index: 2;
185
+ display: flex; align-items: center; justify-content: center;
186
+ }
187
+ .ak-switch-with-icons[aria-checked="true"] .ak-switch-knob { transform: translateX(36px); }
188
+ /* Track icons — absolute, centered vertically at left/right */
189
+ .ak-switch-track-icon {
190
+ position: absolute; top: 50%; transform: translateY(-50%);
191
+ z-index: 1; line-height: 1; font-size: 14px;
192
+ display: flex; align-items: center; justify-content: center;
193
+ transition: opacity 0.2s;
194
+ }
195
+ .ak-switch-track-icon:first-child { left: 10px; }
196
+ .ak-switch-track-icon:last-child { right: 10px; }
197
+ /* Off state: left icon hidden (behind knob), right icon visible */
198
+ .ak-switch-with-icons .ak-switch-track-icon:first-child { opacity: 0; }
199
+ .ak-switch-with-icons .ak-switch-track-icon:last-child { color: var(--color-ak-inverse-on-surface, #ffffff); opacity: 0.7; }
200
+ /* On state: left icon visible, right icon hidden (behind knob) */
201
+ .ak-switch-with-icons[aria-checked="true"] .ak-switch-track-icon:first-child { color: var(--color-ak-on-primary); opacity: 0.7; }
202
+ .ak-switch-with-icons[aria-checked="true"] .ak-switch-track-icon:last-child { opacity: 0; }
203
+ /* Off-state surfaces: ink track from the inverse pair — palettes tint it, and
204
+ it stays softer than the checked primary track — with the knob swapping the
205
+ same pair so the state icon is legible on every palette in both modes. */
206
+ .ak-switch-with-icons[aria-checked="false"] .ak-switch-track {
207
+ background: color-mix(in srgb, var(--color-ak-inverse-surface, #171717) 84%, var(--color-ak-surface, #ffffff));
208
+ }
209
+ .ak-switch-with-icons[aria-checked="false"] .ak-switch-knob {
210
+ background: var(--color-ak-inverse-on-surface, #ffffff);
211
+ }
212
+ /* Knob icon */
213
+ .ak-switch-knob-icon { font-size: 14px; color: var(--color-ak-text); line-height: 1; }
214
+ .ak-switch-with-icons .ak-switch-knob-icon { color: var(--color-ak-inverse-surface, #171717); }
215
+ .ak-switch-with-icons[aria-checked="true"] .ak-switch-knob-icon { color: var(--color-ak-primary); }
216
+ /* Dark mode: the page is already ink — the off track returns to the neutral
217
+ border tone and the inverse pair flips (inverse-surface reads light). */
218
+ .dark .ak-switch-with-icons[aria-checked="false"] .ak-switch-track,
219
+ [data-theme="dark"] .ak-switch-with-icons[aria-checked="false"] .ak-switch-track {
220
+ background: var(--color-ak-border-strong);
221
+ }
222
+ .dark .ak-switch-with-icons[aria-checked="false"] .ak-switch-knob,
223
+ [data-theme="dark"] .ak-switch-with-icons[aria-checked="false"] .ak-switch-knob {
224
+ background: var(--color-ak-inverse-surface, var(--color-ak-text, #ffffff));
225
+ }
226
+ .dark .ak-switch-with-icons .ak-switch-track-icon:last-child,
227
+ [data-theme="dark"] .ak-switch-with-icons .ak-switch-track-icon:last-child {
228
+ color: var(--color-ak-text, #ffffff);
229
+ }
230
+ .dark .ak-switch-with-icons[aria-checked="false"] .ak-switch-knob-icon,
231
+ [data-theme="dark"] .ak-switch-with-icons[aria-checked="false"] .ak-switch-knob-icon {
232
+ color: var(--color-ak-inverse-on-surface, var(--color-ak-bg, #171717));
233
+ }
234
+
235
+ /* Icon switch — lg (88×44) */
236
+ .ak-switch-icons-lg .ak-switch-track { width: 88px; height: 44px; }
237
+ .ak-switch-icons-lg .ak-switch-knob { width: 38px; height: 38px; }
238
+ .ak-switch-icons-lg[aria-checked="true"] .ak-switch-knob { transform: translateX(44px); }
239
+ .ak-switch-icons-lg .ak-switch-track-icon:first-child { left: 12px; }
240
+ .ak-switch-icons-lg .ak-switch-track-icon:last-child { right: 12px; }
241
+ .ak-switch-icons-lg .ak-switch-track-icon,
242
+ .ak-switch-icons-lg .ak-switch-knob-icon { font-size: 18px; }
243
+ /* Icon switch — xl (104×52) */
244
+ .ak-switch-icons-xl .ak-switch-track { width: 104px; height: 52px; }
245
+ .ak-switch-icons-xl .ak-switch-knob { width: 46px; height: 46px; }
246
+ .ak-switch-icons-xl[aria-checked="true"] .ak-switch-knob { transform: translateX(52px); }
247
+ .ak-switch-icons-xl .ak-switch-track-icon:first-child { left: 14px; }
248
+ .ak-switch-icons-xl .ak-switch-track-icon:last-child { right: 14px; }
249
+ .ak-switch-icons-xl .ak-switch-track-icon,
250
+ .ak-switch-icons-xl .ak-switch-knob-icon { font-size: 22px; }
251
+ /* Icon switch — xxl (120×60) */
252
+ .ak-switch-icons-xxl .ak-switch-track { width: 120px; height: 60px; }
253
+ .ak-switch-icons-xxl .ak-switch-knob { width: 54px; height: 54px; }
254
+ .ak-switch-icons-xxl[aria-checked="true"] .ak-switch-knob { transform: translateX(60px); }
255
+ .ak-switch-icons-xxl .ak-switch-track-icon:first-child { left: 16px; }
256
+ .ak-switch-icons-xxl .ak-switch-track-icon:last-child { right: 16px; }
257
+ .ak-switch-icons-xxl .ak-switch-track-icon,
258
+ .ak-switch-icons-xxl .ak-switch-knob-icon { font-size: 26px; }
259
+
260
+ /* Reversed field (switch left, label right) */
261
+ .ak-switch-field-reversed { flex-direction: row-reverse; justify-content: flex-end; }
262
+ /* Status text beside switch */
263
+ .ak-switch-status { font-size: var(--text-ak-fl-base); font-weight: 600; color: var(--color-ak-text-muted); min-width: 24px; }
264
+
265
+ @media (prefers-reduced-motion: reduce) {
266
+ .ak-switch-track, .ak-switch-knob, .ak-switch-track-icon { transition: none; }
267
+ }
268
+
269
+ /* ── Range Slider ── */
270
+ .ak-range input[type="range"] {
271
+ --range-track: var(--color-ak-border);
272
+ --range-fill: var(--color-ak-text);
273
+ -webkit-appearance: none; appearance: none;
274
+ width: 100%; height: 3rem;
275
+ background: transparent; cursor: pointer;
276
+ margin: 0; padding: 0;
277
+ }
278
+ .ak-range input[type="range"]::-webkit-slider-runnable-track {
279
+ height: 6px; border-radius: 999px;
280
+ background: linear-gradient(to right, var(--range-fill) var(--ak-fill, 0%), var(--range-track) var(--ak-fill, 0%));
281
+ }
282
+ .ak-range input[type="range"]::-webkit-slider-thumb {
283
+ -webkit-appearance: none; appearance: none;
284
+ width: 1.5rem; height: 1.5rem; margin-top: -0.5625rem;
285
+ border: 4px solid var(--color-ak-text); border-radius: 999px;
286
+ background: var(--color-ak-bg);
287
+ transition: transform 0.15s ease, box-shadow 0.15s ease;
288
+ box-shadow: 0 1px 3px rgba(0,0,0,0.12);
289
+ }
290
+ .ak-range input[type="range"]::-moz-range-track {
291
+ height: 6px; border-radius: 999px;
292
+ background: var(--range-track);
293
+ }
294
+ .ak-range input[type="range"]::-moz-range-progress {
295
+ height: 6px; border-radius: 999px;
296
+ background: var(--range-fill);
297
+ }
298
+ .ak-range input[type="range"]::-moz-range-thumb {
299
+ width: 1rem; height: 1rem;
300
+ border: 4px solid var(--color-ak-text); border-radius: 999px;
301
+ background: var(--color-ak-bg);
302
+ transition: transform 0.15s ease;
303
+ box-shadow: 0 1px 3px rgba(0,0,0,0.12);
304
+ }
305
+ .ak-range input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.15); }
306
+ .ak-range input[type="range"]:hover::-moz-range-thumb { transform: scale(1.15); }
307
+ .ak-range input[type="range"]:focus-visible { outline: none; }
308
+ .ak-range input[type="range"]:focus-visible::-webkit-slider-thumb {
309
+ box-shadow: 0 0 0 4px var(--color-ak-bg), 0 0 0 7px var(--color-ak-primary);
310
+ transform: scale(1.15);
311
+ }
312
+ .ak-range input[type="range"]:focus-visible::-moz-range-thumb {
313
+ box-shadow: 0 0 0 4px var(--color-ak-bg), 0 0 0 7px var(--color-ak-primary);
314
+ transform: scale(1.15);
315
+ }
316
+
317
+ /* ── Range Dual Track ── */
318
+ .ak-dual-track { pointer-events: none; position: absolute; left: 0; right: 0; height: 6px; border-radius: 999px; background: var(--color-ak-border); z-index: 1; }
319
+ .ak-dual-fill { position: absolute; height: 100%; border-radius: 999px; background: var(--color-ak-text); z-index: 0; }
320
+ .ak-dual-input { pointer-events: none; position: absolute; left: 0; width: 100%; height: 3rem; background: transparent; z-index: 3; }
321
+ .ak-dual-input::-webkit-slider-runnable-track { height: 6px; background: transparent !important; }
322
+ .ak-dual-input::-webkit-slider-thumb { pointer-events: auto; position: relative; z-index: 10; }
323
+ .ak-dual-input::-moz-range-track, .ak-dual-input::-moz-range-progress { background: transparent !important; }
324
+ .ak-dual-input::-moz-range-thumb { pointer-events: auto; position: relative; z-index: 10; }
325
+
326
+ /* ── Number Input Spinbutton Hide ── */
327
+ .ak-stepper input,
328
+ .ak-qty input,
329
+ .ak-range input[type="number"] {
330
+ -moz-appearance: textfield; appearance: textfield;
331
+ }
332
+ .ak-stepper input::-webkit-outer-spin-button,
333
+ .ak-stepper input::-webkit-inner-spin-button,
334
+ .ak-qty input::-webkit-outer-spin-button,
335
+ .ak-qty input::-webkit-inner-spin-button,
336
+ .ak-range input[type="number"]::-webkit-outer-spin-button,
337
+ .ak-range input[type="number"]::-webkit-inner-spin-button {
338
+ -webkit-appearance: none; margin: 0;
339
+ }
340
+
341
+ /* ── OTP Input ── */
342
+ .ak-otp-input {
343
+ width: 56px; height: 64px; text-align: center;
344
+ font-size: var(--text-ak-2xl); font-weight: 700;
345
+ border: 2px solid var(--color-ak-border); border-radius: 0.75rem;
346
+ outline: none; background: var(--color-ak-bg); color: var(--color-ak-text);
347
+ transition: border-color 0.15s ease, background-color 0.15s ease;
348
+ caret-color: var(--color-ak-primary);
349
+ }
350
+ .ak-otp-input::placeholder { color: var(--color-ak-text-muted); }
351
+ .ak-otp-input:hover { border-color: var(--color-ak-border-strong); }
352
+ .ak-otp-input:focus-visible {
353
+ outline: 2px solid var(--color-ak-primary);
354
+ outline-offset: 2px;
355
+ border-color: var(--color-ak-primary);
356
+ background: var(--color-ak-surface);
357
+ }
358
+ .ak-otp-input.has-value { border-color: var(--color-ak-text); font-weight: 800; }
359
+ @media (max-width: 400px) {
360
+ .ak-otp-input { width: 44px; height: 52px; font-size: var(--text-ak-xl); }
361
+ }
362
+
363
+ /* ── Color Picker Swatch ── */
364
+ .ak-color-swatch:hover { border-color: var(--color-ak-border-strong); }
365
+ .ak-color-swatch:active { transform: scale(0.95); transition-duration: 0.1s; }
366
+ .ak-color-swatch.selected { border-color: var(--color-ak-text); }
367
+
368
+ /* ── File Upload ── */
369
+ @keyframes ak-spin { to { transform: rotate(360deg); } }
370
+ .ak-spinner { animation: ak-spin 0.8s linear infinite; }
371
+ .ak-dropzone { transition: border-color 0.2s ease, background-color 0.2s ease; }
372
+ .ak-dropzone:hover { border-color: var(--color-ak-border-strong); background: var(--color-ak-hover); }
373
+ .ak-dropzone.drag-over { border-color: var(--color-ak-primary); background: var(--color-ak-primary-subtle); }
374
+ .ak-file-row { transition: background-color 0.15s ease, border-color 0.15s ease; }
375
+ .ak-file-row:hover { background: var(--color-ak-hover); border-color: var(--color-ak-border-strong); }
376
+ .ak-progress-fill { transition: width 0.3s ease; }
377
+
378
+ /* ── Star Rating ── */
379
+ .ak-star-btn {
380
+ display: inline-flex; align-items: center; justify-content: center;
381
+ width: 48px; height: 48px; cursor: pointer;
382
+ border: none; background: none; padding: 0;
383
+ border-radius: 8px;
384
+ color: var(--color-ak-text-disabled);
385
+ transition: color 0.15s, transform 0.15s;
386
+ }
387
+ .ak-star-btn.filled { color: var(--color-ak-text); }
388
+ .ak-star-btn:hover { transform: scale(1.1); }
389
+ .ak-star-btn:focus-visible { outline: 2px solid var(--color-ak-primary); outline-offset: 2px; }
390
+ .ak-star-btn.ak-star-sm { width: 40px; height: 40px; }
391
+ .ak-star-btn.ak-star-sm .ak-star-icon { font-size: 20px; }
392
+ .ak-star-icon { font-size: 28px; }
393
+ .ak-star-btn.ak-star-lg { width: 56px; height: 56px; }
394
+ .ak-star-btn.ak-star-lg .ak-star-icon { font-size: 36px; }
395
+
396
+ /* ── Switch Layout ── */
397
+ .ak-switch {
398
+ display: inline-flex; align-items: center; justify-content: center;
399
+ background: none; border: none; padding: 8px 0; cursor: pointer;
400
+ border-radius: 9999px; flex-shrink: 0; min-height: 44px;
401
+ }
402
+ .ak-switch:focus { outline: none; }
403
+ .ak-switch:disabled, .ak-switch[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
404
+ .ak-switch-field {
405
+ display: flex; align-items: center; justify-content: space-between;
406
+ gap: 16px; min-height: 52px;
407
+ }
408
+ .ak-switch-label-wrap { display: flex; flex-direction: column; gap: 4px; cursor: pointer; flex: 1; min-width: 0; }
409
+ .ak-switch-field:has(.ak-switch:disabled) .ak-switch-label-wrap,
410
+ .ak-switch-field:has(.ak-switch[aria-disabled="true"]) .ak-switch-label-wrap { cursor: default; }
411
+ /* When icon is present, use grid so icon spans full height and text+helper align */
412
+ .ak-switch-label-wrap:has(.ak-switch-label-icon) {
413
+ display: grid;
414
+ grid-template-columns: 2.75rem 1fr;
415
+ grid-template-rows: auto auto;
416
+ column-gap: 14px;
417
+ row-gap: 2px;
418
+ align-items: center;
419
+ }
420
+ .ak-switch-label-wrap:has(.ak-switch-label-icon) .ak-switch-label-icon {
421
+ grid-column: 1;
422
+ grid-row: 1 / -1;
423
+ align-self: center;
424
+ }
425
+ .ak-switch-label-wrap:has(.ak-switch-label-icon) .ak-switch-label {
426
+ grid-column: 2;
427
+ grid-row: 1;
428
+ }
429
+ .ak-switch-label-wrap:has(.ak-switch-label-icon) .ak-switch-helper {
430
+ grid-column: 2;
431
+ grid-row: 2;
432
+ }
433
+ .ak-switch-label {
434
+ font-size: var(--text-ak-fl-lg); font-weight: 700; color: var(--color-ak-text);
435
+ }
436
+ .ak-switch-helper { font-size: var(--text-ak-fl-base); color: var(--color-ak-text-secondary); }
437
+ .ak-switch-label-icon {
438
+ font-size: 1.5rem; color: var(--color-ak-text-secondary); line-height: 1; flex-shrink: 0;
439
+ width: 2.75rem; height: 2.75rem;
440
+ display: flex; align-items: center; justify-content: center;
441
+ background: var(--color-ak-surface); border-radius: 0.75rem;
442
+ }
443
+ .ak-switch-card {
444
+ border: 2px solid var(--color-ak-border); border-radius: 0.75rem;
445
+ padding: 20px 24px; transition: border-color 0.2s;
446
+ }
447
+ .ak-switch-card-active {
448
+ border-color: var(--color-ak-primary); background: var(--color-ak-primary-subtle);
449
+ }
450
+ .ak-switch-compact .ak-switch-field { padding: 16px 0; }
451
+ .ak-switch-compact .ak-switch-field + .ak-switch-field { border-top: 1px solid var(--color-ak-border); }
452
+ .ak-switch-compact .ak-switch-label { font-size: var(--text-ak-fl-base); }
453
+ .ak-switch-compact .ak-switch-helper { font-size: var(--text-ak-fl-sm); }
454
+ .ak-switch-value { font-size: var(--text-ak-fl-base); font-weight: 600; color: var(--color-ak-text); min-width: 32px; text-align: right; }
455
+ .ak-switch-value-muted { color: var(--color-ak-text-secondary); font-weight: 400; }
456
+ .ak-switch-group { border: none; padding: 0; margin: 0; }
457
+ .ak-switch-group-legend { font-size: var(--text-ak-fl-base); font-weight: 700; color: var(--color-ak-text-secondary); padding: 0; margin-bottom: 16px; text-transform: uppercase; letter-spacing: 0.05em; }
458
+ .ak-switch-section { border: 2px solid var(--color-ak-border); border-radius: 0.75rem; padding: 24px; }
459
+ .ak-switch-section .ak-switch-group-legend { font-size: var(--text-ak-fl-lg); margin-bottom: 16px; padding: 0 8px; text-transform: none; letter-spacing: normal; }
460
+ .ak-switch-section .ak-switch-field + .ak-switch-field {
461
+ border-top: 1px solid var(--color-ak-border-subtle); padding-top: 16px; margin-top: 16px;
462
+ }
463
+ .ak-form-section { max-width: 640px; }
464
+
465
+ /* ── Number Stepper Button Press ── */
466
+ .ak-stepper-btn:active:not([aria-disabled="true"]) {
467
+ transform: translate(2px, 2px);
468
+ box-shadow: 2px 2px 0 0 var(--color-ak-brutal-ink) !important;
469
+ }
470
+ .ak-stepper-btn[aria-disabled="true"] { pointer-events: none; opacity: 0.3; }
471
+
472
+ /* ── Quantity Selector ── */
473
+ .ak-qty-btn { transition: all 0.15s ease; }
474
+ .ak-qty-btn:active:not([aria-disabled="true"]) { transform: scale(0.96); }
475
+ .ak-qty-btn[aria-disabled="true"] { opacity: 0.3; cursor: not-allowed; }
476
+
477
+ /* ── Shared Keyframes ── */
478
+ @keyframes ak-fadeInUp {
479
+ from { opacity: 0; transform: translateY(8px); }
480
+ to { opacity: 1; transform: translateY(0); }
481
+ }
482
+ @keyframes ak-slideIn {
483
+ from { opacity: 0; transform: translateY(-8px) scale(0.98); }
484
+ to { opacity: 1; transform: translateY(0) scale(1); }
485
+ }
486
+ @keyframes ak-fadeOut {
487
+ from { opacity: 1; transform: translateY(0) scale(1); }
488
+ to { opacity: 0; transform: translateY(-8px) scale(0.98); }
489
+ }
490
+ @keyframes ak-swipeOut {
491
+ from { transform: translateX(var(--radix-toast-swipe-end-x)); }
492
+ to { transform: translateX(100%); }
493
+ }
494
+
495
+ /* ── Glass Panel (split-screen logins) ── */
496
+ .ak-glass-panel {
497
+ background: rgba(255, 255, 255, 0.03);
498
+ backdrop-filter: blur(12px);
499
+ -webkit-backdrop-filter: blur(12px);
500
+ border: 1px solid rgba(255, 255, 255, 0.1);
501
+ }
502
+
503
+ /* ── Grid Pattern Background ── */
504
+ .ak-bg-grid-pattern {
505
+ background-image: linear-gradient(to right, rgba(255,255,255,0.06) 1px, transparent 1px),
506
+ linear-gradient(to bottom, rgba(255,255,255,0.06) 1px, transparent 1px);
507
+ background-size: 40px 40px;
508
+ }
509
+
510
+ /* ── Toggle Group ── */
511
+ .ak-toggle-group {
512
+ display: inline-flex; background: var(--color-ak-surface-2);
513
+ border-radius: 8px; padding: 4px; gap: 4px;
514
+ }
515
+ .ak-toggle-group-item {
516
+ display: inline-flex; align-items: center; justify-content: center; gap: 6px;
517
+ background: none; border: none; padding: 0 16px; min-height: 44px;
518
+ font-family: inherit; font-size: var(--text-ak-base, 1rem); font-weight: 600;
519
+ color: var(--color-ak-text-secondary); border-radius: 8px; cursor: pointer;
520
+ transition: background-color 0.2s, color 0.2s; white-space: nowrap; line-height: 1;
521
+ }
522
+ .ak-toggle-group-item[aria-checked="true"],
523
+ .ak-toggle-group-item[aria-pressed="true"] {
524
+ background: var(--color-ak-bg); color: var(--color-ak-text);
525
+ }
526
+ .ak-toggle-group-item[aria-checked="false"]:not(:disabled):hover,
527
+ .ak-toggle-group-item[aria-pressed="false"]:not(:disabled):hover {
528
+ color: var(--color-ak-text); background: var(--color-ak-hover);
529
+ }
530
+ .ak-toggle-group-item:focus { outline: none; }
531
+ .ak-toggle-group-item:focus-visible { outline: 2px solid var(--color-ak-primary); outline-offset: 2px; }
532
+ .ak-toggle-group-item:disabled { opacity: 0.4; cursor: not-allowed; }
533
+ .ak-toggle-group[aria-disabled="true"] { opacity: 0.5; }
534
+ .ak-toggle-group[aria-disabled="true"] .ak-toggle-group-item { cursor: not-allowed; }
535
+ .ak-toggle-group-item i { font-size: 20px; line-height: 1; }
536
+ .ak-toggle-group-item-icon { padding: 0 14px; }
537
+ /* Toggle group — small */
538
+ .ak-toggle-group-sm { padding: 3px; gap: 3px; }
539
+ .ak-toggle-group-sm .ak-toggle-group-item { min-height: 44px; padding: 0 12px; font-size: var(--text-ak-sm, 0.875rem); }
540
+ .ak-toggle-group-sm .ak-toggle-group-item i { font-size: 18px; }
541
+ .ak-toggle-group-sm .ak-toggle-group-item-icon { padding: 0 12px; }
542
+ /* Toggle group — large */
543
+ .ak-toggle-group-lg { padding: 5px; gap: 5px; }
544
+ .ak-toggle-group-lg .ak-toggle-group-item { min-height: 52px; padding: 0 24px; font-size: var(--text-ak-lg, 1.125rem); }
545
+ .ak-toggle-group-lg .ak-toggle-group-item i { font-size: 24px; }
546
+ .ak-toggle-group-lg .ak-toggle-group-item-icon { padding: 0 18px; }
547
+
548
+ /* ── Resizable Panel Cursors ── */
549
+ body.ak-col-resizing, body.ak-col-resizing * {
550
+ cursor: col-resize !important; user-select: none !important; -webkit-user-select: none !important;
551
+ }
552
+ body.ak-ew-resizing, body.ak-ew-resizing * {
553
+ cursor: ew-resize !important; user-select: none !important; -webkit-user-select: none !important;
554
+ }
555
+
556
+ /* ── Theme Role Utilities ── */
557
+ .ak-theme-control {
558
+ background: var(--color-ak-surface-container-lowest, var(--color-ak-bg));
559
+ border-color: var(--color-ak-outline-variant, var(--color-ak-border-subtle));
560
+ color: var(--color-ak-on-surface, var(--color-ak-text));
561
+ }
562
+ .ak-theme-control:is(button, a, [role="button"], [tabindex]):not([aria-disabled="true"]):not(:disabled):hover {
563
+ background: var(--color-ak-surface-container-low, var(--color-ak-hover));
564
+ border-color: var(--color-ak-outline, var(--color-ak-border));
565
+ }
566
+ .ak-theme-control-selected {
567
+ background: var(--color-ak-secondary, var(--color-ak-primary));
568
+ border-color: var(--color-ak-secondary, var(--color-ak-primary));
569
+ color: var(--color-ak-on-secondary, var(--color-ak-on-primary));
570
+ }
571
+ .ak-theme-control-selected-soft {
572
+ background: var(--color-ak-secondary-container, var(--color-ak-primary-subtle));
573
+ border-color: var(--color-ak-secondary-outline, var(--color-ak-secondary, var(--color-ak-primary)));
574
+ color: var(--color-ak-on-secondary-container, var(--color-ak-text));
575
+ }
576
+ .ak-theme-control-selected-primary {
577
+ background: var(--color-ak-primary);
578
+ border-color: var(--color-ak-primary);
579
+ color: var(--color-ak-on-primary);
580
+ }
581
+ .ak-theme-control-selected-primary-soft {
582
+ background: var(--color-ak-primary-container, var(--color-ak-primary-subtle));
583
+ border-color: var(--color-ak-primary-outline, var(--color-ak-primary));
584
+ color: var(--color-ak-selection-ink, var(--color-ak-on-primary-container, var(--color-ak-text)));
585
+ }
586
+ .ak-theme-icon-well {
587
+ background: var(--color-ak-surface-container, var(--color-ak-surface-2));
588
+ border-color: var(--color-ak-outline-variant, var(--color-ak-border-subtle));
589
+ color: var(--color-ak-on-surface-variant, var(--color-ak-text-secondary));
590
+ }
591
+ .ak-theme-icon-well-selected {
592
+ background: var(--color-ak-secondary, var(--color-ak-primary));
593
+ border-color: var(--color-ak-secondary, var(--color-ak-primary));
594
+ color: var(--color-ak-on-secondary, var(--color-ak-on-primary));
595
+ }
596
+ .ak-theme-icon-well-selected-primary {
597
+ background: var(--color-ak-primary-selection, var(--color-ak-primary));
598
+ border-color: var(--color-ak-primary-selection, var(--color-ak-primary));
599
+ color: var(--color-ak-on-primary-selection, var(--color-ak-on-primary));
600
+ }
601
+ .ak-theme-badge {
602
+ background: var(--color-ak-surface-container-lowest, var(--color-ak-bg));
603
+ border-color: var(--color-ak-outline-variant, var(--color-ak-border-subtle));
604
+ color: var(--color-ak-on-surface-variant, var(--color-ak-text-secondary));
605
+ }
606
+ .ak-theme-badge-selected {
607
+ background: var(--color-ak-accent, var(--color-ak-primary));
608
+ border-color: var(--color-ak-accent, var(--color-ak-primary));
609
+ color: var(--color-ak-on-accent, var(--color-ak-on-primary));
610
+ }
611
+ .ak-theme-media-caption {
612
+ background: var(--color-ak-primary-container, var(--color-ak-secondary-container, var(--color-ak-surface-container-lowest, var(--color-ak-bg))));
613
+ border-color: color-mix(in srgb, var(--color-ak-primary, var(--color-ak-border)) 34%, transparent);
614
+ color: var(--color-ak-on-primary-container, var(--color-ak-on-secondary-container, var(--color-ak-on-surface, var(--color-ak-text))));
615
+ }
616
+ .ak-theme-cta-gradient {
617
+ background: var(--gradient-ak-primary, linear-gradient(135deg, var(--color-ak-primary-hover), var(--color-ak-primary), var(--color-ak-primary-active)));
618
+ background-size: 160% 160%;
619
+ border-color: transparent;
620
+ color: var(--color-ak-on-primary);
621
+ transition:
622
+ background-position var(--duration-ak-slow, 240ms) var(--ease-ak-default, cubic-bezier(0.4, 0, 0.2, 1)),
623
+ filter var(--duration-ak-fast, 110ms) var(--ease-ak-default, cubic-bezier(0.4, 0, 0.2, 1)),
624
+ transform var(--duration-ak-fast, 110ms) var(--ease-ak-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
625
+ }
626
+ .ak-theme-cta-gradient:is(button, a, [role="button"]):not([aria-disabled="true"]):not(:disabled):hover {
627
+ background: var(--gradient-ak-primary-hover, var(--gradient-ak-primary, linear-gradient(135deg, var(--color-ak-primary-hover), var(--color-ak-primary), var(--color-ak-primary-active))));
628
+ background-position: 100% 50%;
629
+ filter: saturate(1.05);
630
+ }
631
+ .ak-theme-cta-gradient:is(button, a, [role="button"]):not([aria-disabled="true"]):not(:disabled):active {
632
+ transform: translateY(1px) scale(0.99);
633
+ }
634
+ .ak-theme-switch-track {
635
+ background: var(--color-ak-surface-container-high, var(--color-ak-surface-2));
636
+ border-color: var(--color-ak-outline-variant, var(--color-ak-border-subtle));
637
+ box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-ak-on-surface-variant, var(--color-ak-text-secondary)) 6%, transparent);
638
+ }
639
+ .ak-theme-switch-track-selected {
640
+ background: var(--color-ak-secondary, var(--color-ak-primary));
641
+ border-color: var(--color-ak-secondary, var(--color-ak-primary));
642
+ }
643
+ .ak-theme-switch-track-selected-primary {
644
+ background: var(--color-ak-primary);
645
+ border-color: var(--color-ak-primary);
646
+ }
647
+ .ak-theme-switch-thumb {
648
+ background: var(--color-ak-bg);
649
+ box-shadow: var(--shadow-ak-xs);
650
+ }
651
+ .ak-theme-switch-track-selected .ak-theme-switch-thumb {
652
+ background: var(--color-ak-on-secondary, var(--color-ak-on-primary));
653
+ }
654
+ .ak-theme-switch-track-selected-primary .ak-theme-switch-thumb {
655
+ background: var(--color-ak-on-primary);
656
+ }
657
+ .dark .ak-theme-switch-thumb,
658
+ [data-theme="dark"] .ak-theme-switch-thumb,
659
+ [data-ak-dark-panel] .ak-theme-switch-thumb {
660
+ background: var(--color-ak-text);
661
+ }
662
+ .dark .ak-theme-switch-track-selected .ak-theme-switch-thumb,
663
+ [data-theme="dark"] .ak-theme-switch-track-selected .ak-theme-switch-thumb,
664
+ [data-ak-dark-panel] .ak-theme-switch-track-selected .ak-theme-switch-thumb {
665
+ background: var(--color-ak-on-secondary, var(--color-ak-on-primary));
666
+ }
667
+ .dark .ak-theme-switch-track-selected-primary .ak-theme-switch-thumb,
668
+ [data-theme="dark"] .ak-theme-switch-track-selected-primary .ak-theme-switch-thumb,
669
+ [data-ak-dark-panel] .ak-theme-switch-track-selected-primary .ak-theme-switch-thumb {
670
+ background: var(--color-ak-on-primary);
671
+ }
672
+ .ak-theme-logo-mark {
673
+ transition: filter var(--duration-ak-fast, 110ms) var(--ease-ak-default, cubic-bezier(0.4, 0, 0.2, 1)), opacity var(--duration-ak-fast, 110ms) var(--ease-ak-default, cubic-bezier(0.4, 0, 0.2, 1));
674
+ }
675
+ .dark .ak-theme-logo-mark,
676
+ [data-theme="dark"] .ak-theme-logo-mark,
677
+ [data-ak-dark-panel] .ak-theme-logo-mark {
678
+ filter: invert(1) brightness(1.08) contrast(0.96);
679
+ }
680
+
681
+ /* Dark premium material utilities.
682
+ These stay dormant in light mode and use the palette glow tokens in dark contexts. */
683
+ .ak-dark-material:is([data-ak-dark-panel], [data-ak-dark-rail], [data-ak-dark-mobile]),
684
+ .ak-dark-material:is(.dark *),
685
+ .dark .ak-dark-material,
686
+ [data-theme="dark"] .ak-dark-material,
687
+ [data-ak-dark-panel] .ak-dark-material,
688
+ [data-ak-dark-rail] .ak-dark-material,
689
+ [data-ak-dark-mobile] .ak-dark-material {
690
+ background:
691
+ linear-gradient(180deg, color-mix(in srgb, var(--color-ak-on-surface, #fff) 5%, transparent), transparent 42%),
692
+ radial-gradient(90% 64% at 50% 0%, color-mix(in srgb, var(--color-ak-glow-primary, #818cf8) 10%, transparent), transparent 72%),
693
+ color-mix(in srgb, var(--color-ak-bg, #111) 90%, var(--color-ak-mesh-base, #050509) 10%);
694
+ border-color: color-mix(in srgb, var(--color-ak-glow-primary, #818cf8) 18%, var(--color-ak-border, rgba(255,255,255,0.12)));
695
+ color: var(--color-ak-on-surface, var(--color-ak-text));
696
+ }
697
+ .ak-dark-control:is(.dark *),
698
+ .dark .ak-dark-control,
699
+ [data-theme="dark"] .ak-dark-control,
700
+ [data-ak-dark-panel] .ak-dark-control,
701
+ [data-ak-dark-rail] .ak-dark-control,
702
+ [data-ak-dark-mobile] .ak-dark-control {
703
+ background-color: transparent;
704
+ border-color: transparent;
705
+ }
706
+ .ak-dark-outlined-control:is(.dark *),
707
+ .dark .ak-dark-outlined-control,
708
+ [data-theme="dark"] .ak-dark-outlined-control,
709
+ [data-ak-dark-panel] .ak-dark-outlined-control,
710
+ [data-ak-dark-rail] .ak-dark-outlined-control,
711
+ [data-ak-dark-mobile] .ak-dark-outlined-control {
712
+ background:
713
+ linear-gradient(180deg, color-mix(in srgb, var(--color-ak-on-surface, #fff) 3%, transparent), transparent 58%),
714
+ color-mix(in srgb, var(--color-ak-bg, #111) 86%, var(--color-ak-on-surface, #fff) 5%);
715
+ border-color: color-mix(in srgb, var(--color-ak-glow-primary, #818cf8) 26%, var(--color-ak-border, rgba(255,255,255,0.12)));
716
+ }
717
+ .ak-dark-avatar-tile:is(.dark *),
718
+ .dark .ak-dark-avatar-tile,
719
+ [data-theme="dark"] .ak-dark-avatar-tile,
720
+ [data-ak-dark-panel] .ak-dark-avatar-tile,
721
+ [data-ak-dark-rail] .ak-dark-avatar-tile,
722
+ [data-ak-dark-mobile] .ak-dark-avatar-tile {
723
+ background:
724
+ radial-gradient(circle at 35% 22%, color-mix(in srgb, var(--color-ak-glow-primary, #818cf8) 30%, transparent), transparent 62%),
725
+ color-mix(in srgb, var(--color-ak-primary-container, #31245a) 72%, var(--color-ak-bg, #111) 28%);
726
+ color: var(--color-ak-on-primary-container, var(--color-ak-on-surface, #fff));
727
+ }
728
+ .ak-dark-control:is(button, a, [role="button"], [tabindex]):not([aria-disabled="true"]):not(:disabled):is(:hover, [data-highlighted]),
729
+ .ak-dark-control:is(button, a, [role="button"], [tabindex]):not([aria-disabled="true"]):not(:disabled)[data-highlighted],
730
+ .dark .ak-dark-control:is(button, a, [role="button"], [tabindex]):not([aria-disabled="true"]):not(:disabled):hover,
731
+ [data-theme="dark"] .ak-dark-control:is(button, a, [role="button"], [tabindex]):not([aria-disabled="true"]):not(:disabled):hover,
732
+ [data-ak-dark-panel] .ak-dark-control:is(button, a, [role="button"], [tabindex]):not([aria-disabled="true"]):not(:disabled):hover,
733
+ [data-ak-dark-rail] .ak-dark-control:is(button, a, [role="button"], [tabindex]):not([aria-disabled="true"]):not(:disabled):hover,
734
+ [data-ak-dark-mobile] .ak-dark-control:is(button, a, [role="button"], [tabindex]):not([aria-disabled="true"]):not(:disabled):hover {
735
+ background:
736
+ linear-gradient(135deg, color-mix(in srgb, var(--color-ak-glow-primary, #818cf8) 10%, transparent), transparent 64%),
737
+ color-mix(in srgb, var(--color-ak-on-surface, #fff) 6%, transparent);
738
+ color: var(--color-ak-on-surface, var(--color-ak-text));
739
+ }
740
+ .ak-dark-control-selected:is(.dark *),
741
+ .dark .ak-dark-control-selected,
742
+ [data-theme="dark"] .ak-dark-control-selected,
743
+ [data-ak-dark-panel] .ak-dark-control-selected,
744
+ [data-ak-dark-rail] .ak-dark-control-selected,
745
+ [data-ak-dark-mobile] .ak-dark-control-selected {
746
+ background:
747
+ radial-gradient(circle at 18% 14%, color-mix(in srgb, var(--color-ak-on-primary, #fff) 22%, transparent), transparent 36%),
748
+ linear-gradient(135deg, var(--color-ak-gradient-start, var(--color-ak-primary-hover)) 0%, var(--color-ak-gradient-mid, var(--color-ak-primary)) 52%, var(--color-ak-gradient-end, var(--color-ak-primary-active)) 100%);
749
+ border-color: color-mix(in srgb, var(--color-ak-glow-primary, #818cf8) 64%, var(--color-ak-border, rgba(255,255,255,0.12)));
750
+ box-shadow:
751
+ inset 0 0 0 1px color-mix(in srgb, var(--color-ak-glow-primary, #818cf8) 46%, transparent),
752
+ inset 0 1px 0 color-mix(in srgb, var(--color-ak-neutral-0, #fff) 16%, transparent),
753
+ 0 0 0 1px color-mix(in srgb, var(--color-ak-glow-primary, #818cf8) 14%, transparent),
754
+ 0 12px 28px -22px color-mix(in srgb, var(--color-ak-glow-primary, #818cf8) 78%, transparent);
755
+ color: var(--color-ak-on-primary-selection, var(--color-ak-on-primary, #fff));
756
+ }
757
+ .dark .ak-dark-control-selected.ak-selection-ink,
758
+ [data-theme="dark"] .ak-dark-control-selected.ak-selection-ink,
759
+ [data-ak-dark-panel] .ak-dark-control-selected.ak-selection-ink,
760
+ [data-ak-dark-rail] .ak-dark-control-selected.ak-selection-ink,
761
+ [data-ak-dark-mobile] .ak-dark-control-selected.ak-selection-ink,
762
+ .dark .ak-dark-control-selected :where(.ak-selection-ink, i, svg, .ph),
763
+ [data-theme="dark"] .ak-dark-control-selected :where(.ak-selection-ink, i, svg, .ph),
764
+ [data-ak-dark-panel] .ak-dark-control-selected :where(.ak-selection-ink, i, svg, .ph),
765
+ [data-ak-dark-rail] .ak-dark-control-selected :where(.ak-selection-ink, i, svg, .ph),
766
+ [data-ak-dark-mobile] .ak-dark-control-selected :where(.ak-selection-ink, i, svg, .ph) {
767
+ color: var(--color-ak-on-primary-selection, var(--color-ak-on-primary, #fff));
768
+ }
769
+ .ak-dark-accent-tile:is(.dark *),
770
+ .dark .ak-dark-accent-tile,
771
+ [data-theme="dark"] .ak-dark-accent-tile,
772
+ [data-ak-dark-panel] .ak-dark-accent-tile,
773
+ [data-ak-dark-rail] .ak-dark-accent-tile,
774
+ [data-ak-dark-mobile] .ak-dark-accent-tile {
775
+ background:
776
+ radial-gradient(circle at 22% 16%, color-mix(in srgb, var(--color-ak-on-primary, #fff) 20%, transparent), transparent 38%),
777
+ linear-gradient(135deg, var(--color-ak-gradient-start, var(--color-ak-primary-hover)) 0%, var(--color-ak-gradient-mid, var(--color-ak-primary)) 50%, var(--color-ak-gradient-end, var(--color-ak-primary-active)) 100%);
778
+ border-color: color-mix(in srgb, var(--color-ak-glow-primary, #818cf8) 62%, transparent);
779
+ box-shadow:
780
+ inset 0 0 0 1px color-mix(in srgb, var(--color-ak-on-primary, #fff) 16%, transparent),
781
+ 0 10px 28px -18px color-mix(in srgb, var(--color-ak-glow-primary, #818cf8) 90%, transparent);
782
+ color: var(--color-ak-on-primary, #fff);
783
+ }
784
+ .ak-dark-accent-tile:is(.dark *) :where(i, svg, .ph),
785
+ .dark .ak-dark-accent-tile :where(i, svg, .ph),
786
+ [data-theme="dark"] .ak-dark-accent-tile :where(i, svg, .ph),
787
+ [data-ak-dark-panel] .ak-dark-accent-tile :where(i, svg, .ph),
788
+ [data-ak-dark-rail] .ak-dark-accent-tile :where(i, svg, .ph),
789
+ [data-ak-dark-mobile] .ak-dark-accent-tile :where(i, svg, .ph) {
790
+ color: var(--color-ak-on-primary, #fff);
791
+ }
792
+ .ak-dark-vivid-ink:is(.dark *),
793
+ .dark .ak-dark-vivid-ink,
794
+ [data-theme="dark"] .ak-dark-vivid-ink,
795
+ [data-ak-dark-panel] .ak-dark-vivid-ink,
796
+ [data-ak-dark-rail] .ak-dark-vivid-ink,
797
+ [data-ak-dark-mobile] .ak-dark-vivid-ink {
798
+ color: var(--color-ak-glow-primary, var(--color-ak-primary));
799
+ }
800
+
801
+ /* ── Focus Ring Utility ── */
802
+ .ak-focus-ring:focus-visible {
803
+ /* Material-drivable: packs may restyle focus (neo-brutal = 3px dashed ink).
804
+ Default reproduces the house ring exactly. */
805
+ outline: var(--ak-focus-outline, 2px solid var(--color-ak-border-focus, var(--color-ak-primary)));
806
+ outline-offset: var(--ak-focus-offset, 2px);
807
+ }
808
+
809
+ /* ── Price Fade Transition ── */
810
+ .ak-price-fade { transition: opacity 0.15s ease-in-out; }
811
+
812
+ /* Reduced motion — unlayered so it overrides everything */
813
+ @media (prefers-reduced-motion: reduce) {
814
+ *, *::before, *::after {
815
+ animation-duration: 0.01ms !important;
816
+ transition-duration: 0.01ms !important;
817
+ }
818
+ .ak-star-btn:hover { transform: none !important; }
819
+ .ak-stepper-btn:active { transform: none !important; }
820
+ @keyframes ak-slideIn { from { opacity: 0; } to { opacity: 1; } }
821
+ @keyframes ak-fadeOut { from { opacity: 1; } to { opacity: 0; } }
822
+ }
823
+
824
+ /* ── Typography roles (2026-08-02) ─────────────────────────────────
825
+ Five roles, each an authored family+weight pair driven by variables so a
826
+ font pairing re-tunes the whole hierarchy coherently (family swaps without
827
+ weight compensation always look wrong — different families have different
828
+ weight curves). Components consume ROLE classes, never literal
829
+ font-family/font-weight for themed text. Weight vars live outside the
830
+ --font-weight-* namespace on purpose (v4 would generate colliding font-*
831
+ utilities). Mono role = the existing font-ak-mono utility. */
832
+ .ak-font-heading {
833
+ font-family: var(--font-ak-heading, var(--font-ak-sans, Inter, sans-serif));
834
+ font-weight: var(--ak-weight-heading, 600);
835
+ }
836
+ .ak-font-body {
837
+ font-family: var(--font-ak-sans, Inter, sans-serif);
838
+ font-weight: var(--ak-weight-body, 400);
839
+ }
840
+ .ak-font-ui {
841
+ font-family: var(--font-ak-ui, var(--font-ak-sans, Inter, sans-serif));
842
+ font-weight: var(--ak-weight-ui, 500);
843
+ }
844
+ /* Emphasized UI — buttons, pressed/active controls, row titles. The library
845
+ calibration is semibold on every button and active state (conventions:
846
+ "titles are font-semibold"; forms references all carry font-semibold CTAs)
847
+ while quiet UI (menu rows, inputs, nav) stays at the ui weight. Pairings
848
+ override via --ak-weight-ui-strong. */
849
+ .ak-font-ui-strong {
850
+ font-family: var(--font-ak-ui, var(--font-ak-sans, Inter, sans-serif));
851
+ font-weight: var(--ak-weight-ui-strong, 600);
852
+ }
853
+ .ak-font-label {
854
+ font-family: var(--font-ak-label, var(--font-ak-sans, Inter, sans-serif));
855
+ font-weight: var(--ak-weight-label, 600);
856
+ letter-spacing: var(--ak-tracking-label, 0.02em);
857
+ }
858
+
859
+ /* ── Material recipes (2026-08-02) ──────────────────────────────
860
+ The consumption layer for material appearances (astralkit/presets
861
+ MATERIAL_APPEARANCES). Components carry these classes; appearance packs
862
+ fill the --ak-* slots. Every default reproduces the pre-material look,
863
+ so unthemed apps are pixel-identical. */
864
+ .ak-material-control {
865
+ box-shadow: var(--ak-control-shadow, none);
866
+ transition: box-shadow 0.15s ease, transform 0.15s ease;
867
+ }
868
+ .ak-material-control:hover {
869
+ transform: var(--ak-control-hover-transform, none);
870
+ box-shadow: var(--ak-control-shadow-hover, var(--ak-control-shadow, none));
871
+ }
872
+ .ak-material-control:active {
873
+ box-shadow: var(--ak-control-shadow-active, var(--ak-control-shadow, none));
874
+ }
875
+ .ak-material-surface {
876
+ position: relative;
877
+ /* Two-layer background: an optional SHEEN (falls off from the single
878
+ top-left light source) over the fill. Defaults collapse to plain fill. */
879
+ background: var(--ak-surface-sheen, none), var(--ak-surface-fill, var(--color-ak-surface));
880
+ border: var(--ak-surface-border-w, 1px) solid var(--ak-surface-border-color, var(--color-ak-border));
881
+ box-shadow: var(--ak-surface-shadow, none);
882
+ -webkit-backdrop-filter: var(--ak-surface-blur, none);
883
+ backdrop-filter: var(--ak-surface-blur, none);
884
+ }
885
+ /* Directional rim — a gradient border ring (hot toward the light source,
886
+ dying opposite) via padding + mask-composite. Invisible until a pack sets
887
+ --ak-surface-rim. */
888
+ .ak-material-surface::before {
889
+ content: "";
890
+ position: absolute;
891
+ inset: 0;
892
+ border-radius: inherit;
893
+ padding: var(--ak-surface-rim-w, 1.5px);
894
+ background: var(--ak-surface-rim, none);
895
+ -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
896
+ -webkit-mask-composite: xor;
897
+ mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
898
+ mask-composite: exclude;
899
+ pointer-events: none;
900
+ }
901
+ /* Depth ladder: nested material surfaces step their tint up one level so
902
+ stacked glass reads as stacked panes. Packs opt in via the -2 slot. */
903
+ .ak-material-surface .ak-material-surface {
904
+ background: var(--ak-surface-sheen-2, var(--ak-surface-sheen, none)),
905
+ var(--ak-surface-fill-2, var(--ak-surface-fill, var(--color-ak-surface-2)));
906
+ box-shadow: var(--ak-surface-shadow-2, var(--ak-surface-shadow, none));
907
+ }
908
+
909
+ /* ── Small-control material parts (batch 2) ─────────────────────────────
910
+ Glass Law 4: glass is for surfaces — active parts stay flat solid. The
911
+ knob (switch), thumb (slider) and track are material-slotted so the
912
+ Appearance dial re-materializes running form controls. Position is done
913
+ with the CSS `translate` property in components; recipes only ever touch
914
+ `transform`, so squish/tilt compose with position instead of clobbering it. */
915
+ .ak-control-knob {
916
+ background: var(--ak-knob-fill, #ffffff);
917
+ box-shadow: var(--ak-knob-shadow, 0 1px 3px rgba(0, 0, 0, 0.25));
918
+ transition:
919
+ translate 200ms var(--ak-control-spring, cubic-bezier(0.4, 0, 0.2, 1)),
920
+ transform 200ms var(--ak-control-spring, cubic-bezier(0.4, 0, 0.2, 1)),
921
+ background-color 150ms ease;
922
+ }
923
+ [data-state="checked"] > .ak-control-knob {
924
+ background: var(--ak-knob-fill-checked, var(--ak-knob-fill, #ffffff));
925
+ }
926
+ /* The squish: origin follows the travel direction so the stretch reads as
927
+ the knob leaning into the push. */
928
+ [data-ak-component="switch"]:active .ak-control-knob {
929
+ transform: var(--ak-knob-press, scaleX(1.12));
930
+ transform-origin: left center;
931
+ }
932
+ [data-ak-component="switch"][data-state="checked"]:active .ak-control-knob {
933
+ transform-origin: right center;
934
+ }
935
+ .ak-control-thumb {
936
+ background: var(--ak-thumb-fill, #ffffff);
937
+ border-radius: var(--ak-thumb-radius, 9999px);
938
+ border: var(--ak-thumb-border-w, 0px) solid var(--ak-thumb-border-color, transparent);
939
+ box-shadow: var(--ak-thumb-shadow, 0 1px 4px rgba(0, 0, 0, 0.3));
940
+ transition: transform 180ms var(--ak-control-spring, cubic-bezier(0.4, 0, 0.2, 1)),
941
+ box-shadow 180ms ease;
942
+ }
943
+ .ak-control-thumb:hover {
944
+ transform: var(--ak-thumb-hover-transform, scale(1.1));
945
+ }
946
+ .ak-control-thumb:active {
947
+ transform: var(--ak-thumb-active-transform, scale(0.96));
948
+ }
949
+ /* Track border renders as an INSET RING, not a real border — layout never
950
+ shifts, so knob travel constants hold across every material. */
951
+ .ak-control-track {
952
+ box-shadow:
953
+ inset 0 0 0 var(--ak-track-border-w, 0px) var(--ak-track-border-color, transparent),
954
+ var(--ak-track-shadow, 0 0 0 0 transparent);
955
+ }
956
+ @media (prefers-reduced-motion: reduce) {
957
+ .ak-control-knob,
958
+ .ak-control-thumb {
959
+ transition: none;
960
+ }
961
+ }
962
+
963
+ /* ── Themed scrollbar (2026-08-03) ──────────────────────────────────────
964
+ A thin, ALWAYS-VISIBLE scrollbar on the token layer — thumb follows the
965
+ theme (border-strong, text-muted on hover), track transparent. Visible
966
+ at rest on purpose: hidden-until-hover scrollbars fail discoverability.
967
+ Firefox via scrollbar-*, WebKit via the pseudo-elements. */
968
+ .ak-scrollbar {
969
+ scrollbar-width: thin;
970
+ scrollbar-color: var(--color-ak-border-strong) transparent;
971
+ }
972
+ .ak-scrollbar::-webkit-scrollbar {
973
+ width: 8px;
974
+ height: 8px;
975
+ }
976
+ .ak-scrollbar::-webkit-scrollbar-thumb {
977
+ background: var(--color-ak-border-strong);
978
+ border-radius: 9999px;
979
+ }
980
+ .ak-scrollbar::-webkit-scrollbar-thumb:hover {
981
+ background: var(--color-ak-text-muted);
982
+ }
983
+ .ak-scrollbar::-webkit-scrollbar-track {
984
+ background: transparent;
985
+ }
986
+
987
+ /* ── Quiet-hover bar (2026-08-03) ───────────────────────────────────────
988
+ The hover treatment for quiet controls and text links: a bar under the
989
+ WHOLE control (::after), not text-decoration — underlines don't propagate
990
+ into flex children, so any link with an icon shows a cut-off underline.
991
+ Materials fill the slots (brutal: 3px ink bar offset 4px = the backface's
992
+ bottom edge). Defaults are 0/invisible; a component can opt into a
993
+ default bar via the -default fallback vars (the link button does), which
994
+ materials still override via the primary vars. */
995
+ .ak-quiet-hover {
996
+ position: relative;
997
+ }
998
+ .ak-quiet-hover::after {
999
+ content: "";
1000
+ position: absolute;
1001
+ inset-inline: 0;
1002
+ bottom: calc(-1 * var(--ak-quiet-hover-offset, var(--ak-quiet-hover-offset-default, 0px)));
1003
+ height: var(--ak-quiet-hover-thickness, var(--ak-quiet-hover-thickness-default, 0px));
1004
+ background: var(--ak-quiet-hover-color, currentColor);
1005
+ opacity: 0;
1006
+ transition: opacity 120ms ease;
1007
+ pointer-events: none;
1008
+ }
1009
+ .ak-quiet-hover:hover::after,
1010
+ .ak-quiet-hover:focus-visible::after {
1011
+ opacity: 1;
1012
+ }
1013
+ @media (prefers-reduced-motion: reduce) {
1014
+ .ak-quiet-hover::after {
1015
+ transition: none;
1016
+ }
1017
+ }
1018
+
1019
+ /* ── Overlay motion (core batch 4) ──────────────────────────────────────
1020
+ In/out animations for portalled overlays, driven by Radix data-state.
1021
+ Plain CSS so both Tailwind pipelines get them. Dialogs center with
1022
+ inset-0 + m-auto (NOT translate) so the pop transform never fights
1023
+ positioning; sheets own their transform entirely. */
1024
+ @keyframes ak-overlay-in { from { opacity: 0; } to { opacity: 1; } }
1025
+ @keyframes ak-overlay-out { from { opacity: 1; } to { opacity: 0; } }
1026
+ @keyframes ak-pop-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
1027
+ @keyframes ak-pop-out { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.96); } }
1028
+ @keyframes ak-slide-in-right { from { transform: translateX(100%); } to { transform: translateX(0); } }
1029
+ @keyframes ak-slide-out-right { from { transform: translateX(0); } to { transform: translateX(100%); } }
1030
+ @keyframes ak-slide-in-left { from { transform: translateX(-100%); } to { transform: translateX(0); } }
1031
+ @keyframes ak-slide-out-left { from { transform: translateX(0); } to { transform: translateX(-100%); } }
1032
+ @keyframes ak-slide-in-bottom { from { transform: translateY(100%); } to { transform: translateY(0); } }
1033
+ @keyframes ak-slide-out-bottom { from { transform: translateY(0); } to { transform: translateY(100%); } }
1034
+ @keyframes ak-slide-in-top { from { transform: translateY(-100%); } to { transform: translateY(0); } }
1035
+ @keyframes ak-slide-out-top { from { transform: translateY(0); } to { transform: translateY(-100%); } }
1036
+ .ak-overlay-anim[data-state="open"] { animation: ak-overlay-in 150ms ease; }
1037
+ .ak-overlay-anim[data-state="closed"] { animation: ak-overlay-out 130ms ease forwards; }
1038
+ .ak-pop-anim[data-state="open"],
1039
+ .ak-pop-anim[data-state="delayed-open"] { animation: ak-pop-in 160ms cubic-bezier(0.16, 1, 0.3, 1); }
1040
+ .ak-pop-anim[data-state="closed"] { animation: ak-pop-out 120ms ease forwards; }
1041
+ .ak-sheet-anim[data-state="open"][data-side="right"] { animation: ak-slide-in-right 260ms cubic-bezier(0.16, 1, 0.3, 1); }
1042
+ .ak-sheet-anim[data-state="closed"][data-side="right"] { animation: ak-slide-out-right 200ms ease forwards; }
1043
+ .ak-sheet-anim[data-state="open"][data-side="left"] { animation: ak-slide-in-left 260ms cubic-bezier(0.16, 1, 0.3, 1); }
1044
+ .ak-sheet-anim[data-state="closed"][data-side="left"] { animation: ak-slide-out-left 200ms ease forwards; }
1045
+ .ak-sheet-anim[data-state="open"][data-side="bottom"] { animation: ak-slide-in-bottom 260ms cubic-bezier(0.16, 1, 0.3, 1); }
1046
+ .ak-sheet-anim[data-state="closed"][data-side="bottom"] { animation: ak-slide-out-bottom 200ms ease forwards; }
1047
+ .ak-sheet-anim[data-state="open"][data-side="top"] { animation: ak-slide-in-top 260ms cubic-bezier(0.16, 1, 0.3, 1); }
1048
+ .ak-sheet-anim[data-state="closed"][data-side="top"] { animation: ak-slide-out-top 200ms ease forwards; }
1049
+ /* Height-reveal for Radix Accordion/Collapsible content. */
1050
+ @keyframes ak-accordion-down { from { height: 0; } to { height: var(--radix-accordion-content-height); } }
1051
+ @keyframes ak-accordion-up { from { height: var(--radix-accordion-content-height); } to { height: 0; } }
1052
+ @keyframes ak-collapsible-down { from { height: 0; } to { height: var(--radix-collapsible-content-height); } }
1053
+ @keyframes ak-collapsible-up { from { height: var(--radix-collapsible-content-height); } to { height: 0; } }
1054
+ .ak-accordion-anim[data-state="open"] { animation: ak-accordion-down 200ms cubic-bezier(0.16, 1, 0.3, 1); }
1055
+ .ak-accordion-anim[data-state="closed"] { animation: ak-accordion-up 180ms ease forwards; }
1056
+ .ak-collapsible-anim[data-state="open"] { animation: ak-collapsible-down 200ms cubic-bezier(0.16, 1, 0.3, 1); }
1057
+ .ak-collapsible-anim[data-state="closed"] { animation: ak-collapsible-up 180ms ease forwards; }
1058
+ @media (prefers-reduced-motion: reduce) {
1059
+ .ak-overlay-anim,
1060
+ .ak-pop-anim,
1061
+ .ak-sheet-anim,
1062
+ .ak-accordion-anim,
1063
+ .ak-collapsible-anim {
1064
+ animation-duration: 0.01ms !important;
1065
+ }
1066
+ }
1067
+
1068
+ /* ── Button group (core) ────────────────────────────────────────────────
1069
+ Container-aware styling for attached button groups (the CORE-STANDARD
1070
+ pattern: plain CSS attribute selectors, works in both Tailwind pipelines).
1071
+ Inner corners collapse, outer corners keep the radius tokens, adjacent
1072
+ borders overlap by 1px, and the focused member wins the z-order. */
1073
+ /* Any direct child participates in the corner system — buttons today,
1074
+ inputs/selects/ButtonGroupText when those cores land. Separators opt out. */
1075
+ .ak-button-group {
1076
+ display: inline-flex;
1077
+ align-items: stretch;
1078
+ }
1079
+ .ak-button-group > :focus-visible {
1080
+ z-index: 1;
1081
+ }
1082
+ .ak-button-group[data-ak-orientation="vertical"] {
1083
+ flex-direction: column;
1084
+ }
1085
+ /* Fusing applies only to a leaf group — a group of groups is a toolbar
1086
+ (below) and its sub-groups keep their own corners. */
1087
+ .ak-button-group:not(:has(> .ak-button-group)) > * {
1088
+ position: relative;
1089
+ border-radius: 0;
1090
+ }
1091
+ .ak-button-group[data-ak-orientation="horizontal"]:not(:has(> .ak-button-group)) > * + :not(.ak-button-group-separator) {
1092
+ margin-left: -1px;
1093
+ }
1094
+ .ak-button-group[data-ak-orientation="horizontal"]:not(:has(> .ak-button-group)) > .ak-button-group-separator + * {
1095
+ margin-left: 0;
1096
+ }
1097
+ .ak-button-group[data-ak-orientation="horizontal"]:not(:has(> .ak-button-group)) > :first-child {
1098
+ border-top-left-radius: var(--radius-ak-md);
1099
+ border-bottom-left-radius: var(--radius-ak-md);
1100
+ }
1101
+ .ak-button-group[data-ak-orientation="horizontal"]:not(:has(> .ak-button-group)) > :last-child {
1102
+ border-top-right-radius: var(--radius-ak-md);
1103
+ border-bottom-right-radius: var(--radius-ak-md);
1104
+ }
1105
+ .ak-button-group[data-ak-orientation="vertical"]:not(:has(> .ak-button-group)) > * + :not(.ak-button-group-separator) {
1106
+ margin-top: -1px;
1107
+ }
1108
+ .ak-button-group[data-ak-orientation="vertical"]:not(:has(> .ak-button-group)) > .ak-button-group-separator + * {
1109
+ margin-top: 0;
1110
+ }
1111
+ .ak-button-group[data-ak-orientation="vertical"]:not(:has(> .ak-button-group)) > :first-child {
1112
+ border-top-left-radius: var(--radius-ak-md);
1113
+ border-top-right-radius: var(--radius-ak-md);
1114
+ }
1115
+ .ak-button-group[data-ak-orientation="vertical"]:not(:has(> .ak-button-group)) > :last-child {
1116
+ border-bottom-left-radius: var(--radius-ak-md);
1117
+ border-bottom-right-radius: var(--radius-ak-md);
1118
+ }
1119
+ /* The seam flips with the group's axis. */
1120
+ .ak-button-group[data-ak-orientation="vertical"] > .ak-button-group-separator {
1121
+ width: auto;
1122
+ height: 1px;
1123
+ align-self: stretch;
1124
+ }
1125
+ /* A group of groups is a toolbar: sub-groups space out instead of fusing. */
1126
+ .ak-button-group:has(> .ak-button-group) {
1127
+ gap: var(--spacing-ak-2, 0.5rem);
1128
+ }