@tapizlabs/ui 0.1.6 → 0.2.3

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 (12) hide show
  1. package/CHANGELOG.md +16 -16
  2. package/LICENSE +21 -21
  3. package/README.md +358 -358
  4. package/dist/fonts.css +161 -161
  5. package/dist/fonts.js.map +1 -1
  6. package/dist/index.d.ts +881 -30
  7. package/dist/index.js +1685 -160
  8. package/dist/index.js.map +1 -1
  9. package/dist/tailwind-theme.css +113 -113
  10. package/dist/theme.css +418 -772
  11. package/package.json +5 -5
  12. package/FRAMEWORK_BOUNDARY.md +0 -47
package/dist/theme.css CHANGED
@@ -1,772 +1,418 @@
1
- /* stylelint-disable */
2
- @theme {
3
- /* Grid Brutalism Electric Cyan + Signal Lime */
4
- --color-ink-000: #050608;
5
- --color-ink-100: #06080c;
6
- --color-ink-200: #0c0f16;
7
- --color-ink-300: #11151e;
8
- --color-ink-400: #1d222d;
9
- --color-ink-500: #262d3b;
10
- --color-border: #1d2330;
11
- --color-border-hi: #2a3346;
12
- --color-txt-1: #f1f4f9;
13
- --color-txt-2: #aab3c2;
14
- --color-txt-3: #6b7686;
15
- --color-txt-4: #7a8496;
16
-
17
- /* Accent ramp electric cyan replaces Prussian Navy */
18
- --color-primary-50: #e8fbff;
19
- --color-primary-100: #c7f5ff;
20
- --color-primary-200: #99eeff;
21
- --color-primary-300: #5ee7ff;
22
- --color-primary-400: #38d4f0;
23
- --color-primary-500: #1eb5d4;
24
- --color-primary-600: #1496b3;
25
- --color-primary-700: #0e7088;
26
- --color-primary-800: #0a4f60;
27
- --color-primary-900: #062f3b;
28
- --color-primary-950: #03161c;
29
-
30
- /* Signal lime */
31
- --color-signal-300: #e4ff66;
32
- --color-signal-400: #d4ff3a;
33
- --color-signal-500: #b8e620;
34
-
35
- --color-warn: #ff7a4d;
36
- --color-good: #4dd6a3;
37
-
38
- /* Icon background for icon containers dark mode default */
39
- --color-icon-bg: #03161c; /* = primary-950 */
40
- /* btn-primary text color dark mode: black on bright cyan */
41
- --btn-primary-color: #000;
42
-
43
- --font-display: 'IBM Plex Sans', system-ui, sans-serif;
44
- --font-body: 'IBM Plex Sans', system-ui, sans-serif;
45
- --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
46
-
47
- /* Kill all rounding */
48
- --radius-none: 0;
49
- --radius-sm: 0;
50
- --radius-md: 0;
51
- --radius-lg: 0;
52
- --radius-xl: 0;
53
- --radius-2xl: 0;
54
- --radius-full: 9999px;
55
-
56
- /* Animations */
57
- --animate-fade-in-up: fade-in-up 0.5s ease both;
58
- --animate-fade-in-down: fade-in-down 0.4s ease both;
59
- --animate-fade-in: fade-in 0.3s ease both;
60
- --animate-fade-out: fade-out 0.25s ease both;
61
- --animate-count-up: count-up 0.5s ease both;
62
- --animate-slide-in-right: slide-in-right 0.35s ease both;
63
- --animate-slide-in-left: slide-in-left 0.35s ease both;
64
- --animate-scale-in: scale-in 0.3s cubic-bezier(0.34,1.56,0.64,1) both;
65
- --animate-progress-fill: progress-fill 1s ease both;
66
- --animate-pulse-soft: pulse-soft 2s ease-in-out infinite;
67
- --animate-shake: shake 0.4s ease both;
68
- --animate-bounce-in: bounce-in 0.5s cubic-bezier(0.34,1.56,0.64,1) both;
69
- --animate-flip-in: flip-in 0.4s ease both;
70
- --animate-blur-in: blur-in 0.35s ease both;
71
- --animate-slide-up-fade: slide-up-fade 0.3s ease both;
72
-
73
- @keyframes fade-in-up { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
74
- @keyframes fade-in-down { from { opacity:0; transform:translateY(-12px); } to { opacity:1; transform:translateY(0); } }
75
- @keyframes fade-in { from { opacity:0; } to { opacity:1; } }
76
- @keyframes fade-out { from { opacity:1; } to { opacity:0; } }
77
- @keyframes count-up { from { opacity:0; transform:scale(0.85); } to { opacity:1; transform:scale(1); } }
78
- @keyframes slide-in-right { from { opacity:0; transform:translateX(20px); } to { opacity:1; transform:translateX(0); } }
79
- @keyframes slide-in-left { from { opacity:0; transform:translateX(-20px); } to { opacity:1; transform:translateX(0); } }
80
- @keyframes scale-in { from { opacity:0; transform:scale(0.88); } to { opacity:1; transform:scale(1); } }
81
- @keyframes progress-fill { from { width: 0%; } }
82
- @keyframes pulse-soft { 0%,100% { opacity:1; } 50% { opacity:0.6; } }
83
- @keyframes shake {
84
- 0%,100% { transform:translateX(0); } 20% { transform:translateX(-6px); }
85
- 40% { transform:translateX(6px); } 60% { transform:translateX(-4px); }
86
- 80% { transform:translateX(4px); }
87
- }
88
- @keyframes bounce-in { from { opacity:0; transform:scale(0.7); } to { opacity:1; transform:scale(1); } }
89
- @keyframes flip-in { from { opacity:0; transform:rotateX(-30deg) translateY(8px); } to { opacity:1; transform:rotateX(0deg) translateY(0); } }
90
- @keyframes blur-in { from { opacity:0; filter:blur(6px); transform:scale(0.97); } to { opacity:1; filter:blur(0px); transform:scale(1); } }
91
- @keyframes slide-up-fade { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
92
- @keyframes accordion-open { from { grid-template-rows: 0fr; opacity: 0; } to { grid-template-rows: 1fr; opacity: 1; } }
93
- @keyframes accordion-close { from { grid-template-rows: 1fr; opacity: 1; } to { grid-template-rows: 0fr; opacity: 0; } }
94
- @keyframes tz-pulse { 0%,100% { opacity:1; } 50% { opacity:.35; } }
95
- @keyframes tz-bar-grow { from { transform:scaleY(0); } to { transform:scaleY(1); } }
96
- @keyframes skeleton-shimmer { 0% { background-position:-400px 0; } 100% { background-position:400px 0; } }
97
- @keyframes slowSlideFade {
98
- 0% { transform:translateX(-120px); opacity:0; }
99
- 15% { transform:translateX(-80px); opacity:1; }
100
- 85% { transform:translateX(80px); opacity:1; }
101
- 100% { transform:translateX(120px); opacity:0; }
102
- }
103
- @keyframes thinPulse {
104
- 0%,100% { box-shadow:0 0 4px rgba(94,231,255,.15); background:rgba(94,231,255,.05); width:70px; height:2px; }
105
- 50% { box-shadow:0 0 14px rgba(94,231,255,.4); background:rgba(94,231,255,.15); width:90px; height:3px; }
106
- }
107
- }
108
-
109
- .cmd-input::placeholder { color: var(--color-txt-4); opacity: 1; }
110
- .cmd-input::selection { background: rgba(94,231,255,0.15); }
111
-
112
- /*
113
- LIGHT MODE OVERRIDES
114
- */
115
- html:not(.dark) {
116
- --color-ink-000: #ffffff;
117
- --color-ink-100: #f5f6f8;
118
- --color-ink-200: #ebedf1;
119
- --color-ink-300: #dde0e8;
120
- --color-ink-400: #cdd1db;
121
- --color-ink-500: #b8bec9;
122
- --color-border: #d8dce6;
123
- --color-border-hi: #c4c9d6;
124
- --color-txt-1: #0d1117;
125
- --color-txt-2: #3a4255;
126
- --color-txt-3: #6b7280;
127
- --color-txt-4: #6b7280;
128
-
129
- /* Shift primary accent slightly darker for light bg readability */
130
- --color-primary-300: #0ea5c9;
131
- --color-primary-400: #0891b2;
132
- --color-primary-500: #0e7490;
133
-
134
- /* Signal lime stays vivid but darkened for contrast */
135
- --color-signal-300: #65a30d;
136
- --color-signal-400: #4d7c0f;
137
- --color-signal-500: #3f6212;
138
-
139
- --color-warn: #dc4f1e;
140
- --color-good: #059669;
141
-
142
- /* Icon background light tint of primary for icon containers */
143
- --color-icon-bg: color-mix(in srgb, var(--color-primary-300) 12%, var(--color-ink-200));
144
-
145
- /* btn-primary text: black on dark (cyan bg), white on light (darker cyan bg) */
146
- --btn-primary-color: #fff;
147
- }
148
-
149
- /*
150
- BASE
151
- */
152
- @layer base {
153
- *, ::after, ::before, ::backdrop, ::file-selector-button {
154
- border-color: var(--color-border, currentcolor);
155
- border-radius: 0 !important;
156
- }
157
-
158
- html {
159
- font-family: var(--font-body);
160
- letter-spacing: 0;
161
- -webkit-font-smoothing: antialiased;
162
- background: var(--color-ink-100);
163
- color: var(--color-txt-1);
164
- }
165
-
166
- body {
167
- background: var(--color-ink-100);
168
- color: var(--color-txt-1);
169
- font-family: var(--font-body);
170
- }
171
-
172
- h1, h2, h3, h4 {
173
- font-family: var(--font-display);
174
- font-weight: 600;
175
- letter-spacing: 0;
176
- }
177
-
178
- [class*="rounded"] { border-radius: 0 !important; }
179
-
180
- html *:not([class*="animate-"]):not(.sliding-logo):not(.pulse-line) {
181
- transition:
182
- background-color 0.15s ease,
183
- border-color 0.15s ease,
184
- color 0.12s ease,
185
- transform 0.15s ease;
186
- }
187
-
188
- /* Surface mapping */
189
- .bg-white { background-color: var(--color-ink-200) !important; }
190
- .bg-gray-50 { background-color: var(--color-ink-100) !important; }
191
- .bg-gray-100 { background-color: var(--color-ink-300) !important; }
192
- .bg-gray-200 { background-color: var(--color-ink-400) !important; }
193
-
194
- .border-gray-100,
195
- .border-gray-200,
196
- .border-gray-300 { border-color: var(--color-border) !important; }
197
- hr { border-color: var(--color-border) !important; }
198
-
199
- .text-gray-900, .text-gray-800 { color: var(--color-txt-1) !important; }
200
- .text-gray-700, .text-gray-600 { color: var(--color-txt-2) !important; }
201
- .text-gray-500, .text-gray-400 { color: var(--color-txt-3) !important; }
202
- .text-gray-300 { color: var(--color-txt-4) !important; }
203
-
204
- .hover\:bg-gray-50:hover { background-color: var(--color-ink-300) !important; }
205
- .hover\:bg-gray-100:hover { background-color: var(--color-ink-400) !important; }
206
- .hover\:text-gray-900:hover,
207
- .hover\:text-gray-800:hover { color: var(--color-txt-1) !important; }
208
- .hover\:text-gray-600:hover { color: var(--color-txt-2) !important; }
209
-
210
- /* Kill shadows */
211
- .shadow-sm, .shadow-md, .shadow-xl, .shadow-2xl { box-shadow: none !important; }
212
-
213
- /* Inputs */
214
- input, textarea {
215
- background-color: var(--color-ink-100) !important;
216
- border-color: var(--color-border-hi) !important;
217
- color: var(--color-txt-1) !important;
218
- }
219
- input::placeholder, textarea::placeholder { color: var(--color-txt-4) !important; }
220
- input:focus, textarea:focus {
221
- border-color: var(--color-primary-300) !important;
222
- box-shadow: inset 3px 0 0 0 var(--color-signal-400), 0 0 0 1px var(--color-primary-300) !important;
223
- outline: none !important;
224
- }
225
- .cmd-input:focus {
226
- border-color: transparent !important;
227
- box-shadow: none !important;
228
- outline: none !important;
229
- }
230
-
231
- /* Tables */
232
- table { color: var(--color-txt-2) !important; }
233
- thead, thead tr { background-color: var(--color-ink-300) !important; }
234
- thead th {
235
- background-color: var(--color-ink-300) !important;
236
- color: var(--color-txt-3) !important;
237
- border-color: var(--color-border) !important;
238
- font-family: var(--font-mono);
239
- font-size: 10px;
240
- letter-spacing: 0.18em;
241
- text-transform: uppercase;
242
- font-weight: 500;
243
- }
244
- tbody tr { background-color: var(--color-ink-200) !important; border-color: var(--color-border) !important; }
245
- tbody tr:nth-child(even) { background-color: var(--color-ink-100) !important; }
246
- tbody tr:hover { background-color: var(--color-ink-300) !important; }
247
- tbody td, tbody th { color: var(--color-txt-2) !important; border-color: var(--color-border) !important; }
248
-
249
- /* Cards */
250
- .card, .stat-card {
251
- background-color: var(--color-ink-200) !important;
252
- border-color: var(--color-border) !important;
253
- box-shadow: none !important;
254
- }
255
- header:not(.landing-nav) { background-color: var(--color-ink-200) !important; border-color: var(--color-border) !important; }
256
-
257
- /* Primary cyan overrides */
258
- .bg-primary-50 { background-color: color-mix(in srgb, var(--color-primary-300) 8%, var(--color-ink-300)) !important; }
259
- .bg-primary-100 { background-color: color-mix(in srgb, var(--color-primary-300) 14%, var(--color-ink-300)) !important; }
260
- .bg-primary-200 { background-color: color-mix(in srgb, var(--color-primary-300) 22%, var(--color-ink-300)) !important; }
261
- .bg-primary-500 { background-color: var(--color-primary-300) !important; }
262
- .bg-primary-600 { background-color: var(--color-primary-400) !important; }
263
- .bg-primary-700 { background-color: var(--color-primary-300) !important; color: #fff !important; }
264
- .bg-primary-800 { background-color: var(--color-primary-400) !important; }
265
- .bg-primary-900 { background-color: var(--color-primary-600) !important; }
266
-
267
- .text-primary-800, .text-primary-700 { color: var(--color-primary-300) !important; }
268
- .text-primary-600, .text-primary-500 { color: var(--color-primary-400) !important; }
269
- .text-primary-400 { color: var(--color-primary-500) !important; }
270
- .text-primary-50 { color: #000 !important; }
271
-
272
- .border-primary-100 { border-color: color-mix(in srgb, var(--color-primary-300) 35%, transparent) !important; }
273
- .border-primary-200 { border-color: var(--color-border-hi) !important; }
274
- .border-primary-300 { border-color: var(--color-primary-300) !important; }
275
- .border-primary-500 { border-color: var(--color-primary-300) !important; }
276
- .border-primary-600 { border-color: var(--color-primary-400) !important; }
277
-
278
- .hover\:bg-primary-50:hover { background-color: var(--color-ink-300) !important; }
279
- .hover\:bg-primary-100:hover { background-color: var(--color-ink-300) !important; }
280
- .hover\:bg-primary-200:hover { background-color: var(--color-ink-400) !important; }
281
- .hover\:bg-primary-800:hover { background-color: var(--color-primary-400) !important; }
282
- .hover\:text-primary-700:hover { color: var(--color-primary-300) !important; }
283
- .hover\:text-primary-600:hover { color: var(--color-primary-400) !important; }
284
- .hover\:border-primary-300:hover { border-color: var(--color-primary-300) !important; }
285
-
286
- .group:hover .group-hover\:text-primary-600 { color: var(--color-primary-300) !important; }
287
- [class*="bg-primary-50"][class*="text-primary"] {
288
- color: var(--color-primary-400) !important;
289
- }
290
-
291
- /* Emerald signal lime */
292
- .bg-emerald-400, .bg-green-400 { background-color: var(--color-signal-400) !important; }
293
- .text-emerald-600, .text-green-600 { color: var(--color-good) !important; }
294
- .animate-pulse { animation: tz-pulse 1.8s ease-in-out infinite !important; }
295
-
296
- /* Red/danger */
297
- .text-red-600 { color: var(--color-warn) !important; }
298
- .bg-red-50 { background-color: rgba(255,122,77,.08) !important; }
299
- .border-red-100 { border-color: rgba(255,122,77,.2) !important; }
300
- .text-red-700 { color: var(--color-warn) !important; }
301
- .hover\:bg-red-50:hover { background-color: rgba(255,122,77,.12) !important; }
302
-
303
- /* Role badge */
304
- .bg-primary-500.text-primary-50 {
305
- background-color: transparent !important;
306
- border: 1px solid var(--color-primary-300) !important;
307
- color: var(--color-primary-300) !important;
308
- font-family: var(--font-mono);
309
- font-size: 9px;
310
- letter-spacing: 0.15em;
311
- text-transform: uppercase;
312
- }
313
-
314
- /* Zinc / Slate / Stone */
315
- .bg-zinc-50, .bg-slate-50, .bg-stone-50 { background-color: var(--color-ink-100) !important; }
316
- .bg-zinc-100, .bg-slate-100, .bg-stone-100 { background-color: var(--color-ink-200) !important; }
317
- .bg-zinc-200, .bg-slate-200 { background-color: var(--color-ink-300) !important; }
318
- .border-zinc-100, .border-slate-100, .border-zinc-200, .border-slate-200 { border-color: var(--color-border) !important; }
319
- .text-zinc-900,.text-slate-900,.text-zinc-700,.text-slate-700 { color: var(--color-txt-1) !important; }
320
- .text-zinc-600,.text-slate-600,.text-zinc-500,.text-slate-500 { color: var(--color-txt-3) !important; }
321
-
322
- /* Select */
323
- select {
324
- display: block;
325
- background-color: var(--color-ink-100) !important;
326
- border: 1px solid var(--color-border-hi) !important;
327
- border-radius: 0 !important;
328
- font-size: 0.875rem;
329
- color: var(--color-txt-1) !important;
330
- appearance: none;
331
- -webkit-appearance: none;
332
- padding-right: 2.25rem !important;
333
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%235ee7ff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E") !important;
334
- background-repeat: no-repeat !important;
335
- background-position: right 0.65rem center !important;
336
- background-size: 1rem 1rem !important;
337
- background-origin: padding-box !important;
338
- }
339
- select::-ms-expand { display: none; }
340
- select option {
341
- background: var(--color-ink-200);
342
- color: var(--color-txt-1);
343
- }
344
- select:focus {
345
- outline: none;
346
- border-color: var(--color-primary-300) !important;
347
- box-shadow: inset 3px 0 0 0 var(--color-signal-400) !important;
348
- }
349
- select:disabled { opacity: 0.4; cursor: not-allowed; }
350
- }
351
-
352
- /*
353
- DARK MODE primary surface overrides
354
- */
355
- html.dark .bg-primary-50 { background-color: var(--color-primary-950) !important; }
356
- html.dark .bg-primary-100 { background-color: color-mix(in srgb, var(--color-primary-300) 5%, var(--color-ink-200)) !important; }
357
- html.dark .bg-primary-200 { background-color: color-mix(in srgb, var(--color-primary-300) 10%, var(--color-ink-200)) !important; }
358
- html.dark .border-primary-100 { border-color: color-mix(in srgb, var(--color-primary-300) 12%, transparent) !important; }
359
- html.dark .text-primary-700,
360
- html.dark .text-primary-800 { color: var(--color-primary-300) !important; }
361
-
362
- /*
363
- KICKER
364
- */
365
- .kicker {
366
- font-family: var(--font-mono);
367
- font-size: 10px;
368
- letter-spacing: 0.18em;
369
- text-transform: uppercase;
370
- font-weight: 500;
371
- color: var(--color-primary-300);
372
- }
373
-
374
- .font-mono { font-family: var(--font-mono) !important; }
375
- .font-display { font-family: var(--font-display) !important; }
376
-
377
- /* Grid background */
378
- .grid-bg {
379
- background-image:
380
- linear-gradient(var(--color-border) 1px, transparent 1px),
381
- linear-gradient(90deg, var(--color-border) 1px, transparent 1px);
382
- background-size: 24px 24px;
383
- background-position: -1px -1px;
384
- }
385
-
386
- .tz-pulse { animation: tz-pulse 1.8s ease-in-out infinite; }
387
- .tz-bar { transform-origin: bottom; animation: tz-bar-grow .6s cubic-bezier(.4,1.4,.4,1) both; }
388
-
389
- /*
390
- UTILITIES
391
- */
392
- @utility btn-primary {
393
- display: inline-flex;
394
- align-items: center;
395
- justify-content: center;
396
- padding: 0.5rem 1rem;
397
- background: var(--color-primary-300);
398
- color: var(--btn-primary-color);
399
- font-family: var(--font-display);
400
- font-size: 0.875rem;
401
- font-weight: 600;
402
- border-radius: 0 !important;
403
- box-shadow: 4px 4px 0 0 var(--color-signal-400);
404
- cursor: pointer;
405
- &:hover { transform: translate(-1px,-1px); box-shadow: 6px 6px 0 0 var(--color-signal-400); }
406
- &:active { transform: translate(1px,1px); box-shadow: 2px 2px 0 0 var(--color-signal-400); }
407
- &:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; }
408
- }
409
-
410
- @utility btn-secondary {
411
- display: inline-flex;
412
- align-items: center;
413
- justify-content: center;
414
- padding: 0.5rem 1rem;
415
- background: transparent;
416
- color: var(--color-txt-2);
417
- font-family: var(--font-mono);
418
- font-size: 0.875rem;
419
- font-weight: 500;
420
- border: 1px solid var(--color-border-hi);
421
- border-radius: 0 !important;
422
- cursor: pointer;
423
- &:hover { color: var(--color-txt-1); border-color: var(--color-primary-300); }
424
- &:active { background: var(--color-ink-300); }
425
- &:disabled { opacity: 0.4; cursor: not-allowed; }
426
- }
427
-
428
- @utility btn-danger {
429
- display: inline-flex;
430
- align-items: center;
431
- justify-content: center;
432
- background: transparent;
433
- color: var(--color-warn);
434
- font-family: var(--font-mono);
435
- border: 1px solid var(--color-warn);
436
- border-radius: 0 !important;
437
- cursor: pointer;
438
- &:hover { background: rgba(255,122,77,.12); }
439
- }
440
-
441
- @utility input-field {
442
- display: block;
443
- width: 100%;
444
- padding: 0.625rem 0.875rem;
445
- background: var(--color-ink-100);
446
- border: 1px solid var(--color-border-hi);
447
- border-radius: 0 !important;
448
- font-size: 0.875rem;
449
- color: var(--color-txt-1);
450
- outline: none;
451
- &::placeholder { color: var(--color-txt-4); }
452
- &:focus {
453
- border-color: var(--color-primary-300);
454
- box-shadow: inset 3px 0 0 0 var(--color-signal-400);
455
- }
456
- }
457
-
458
- @utility skeleton {
459
- border-radius: 0 !important;
460
- background: linear-gradient(90deg, var(--color-ink-300) 25%, var(--color-ink-400) 50%, var(--color-ink-300) 75%);
461
- background-size: 800px 100%;
462
- animation: skeleton-shimmer 1.5s infinite linear;
463
- }
464
-
465
- @utility card {
466
- background: var(--color-ink-200);
467
- border: 1px solid var(--color-border);
468
- border-radius: 0 !important;
469
- box-shadow: none;
470
- padding: 1.25rem;
471
- }
472
-
473
- @utility form-panel {
474
- background: var(--color-ink-200);
475
- border: 1px solid var(--color-border-hi);
476
- border-top: 2px solid var(--color-primary-300);
477
- border-radius: 0 !important;
478
- box-shadow: none;
479
- padding: 1.25rem;
480
- }
481
-
482
- @utility stat-card {
483
- background: var(--color-ink-200);
484
- border: 1px solid var(--color-border);
485
- border-radius: 0 !important;
486
- box-shadow: none;
487
- padding: 1.25rem;
488
- display: flex;
489
- flex-direction: column;
490
- gap: 0.25rem;
491
- }
492
-
493
- @utility label {
494
- display: block;
495
- font-size: 0.875rem;
496
- font-weight: 500;
497
- margin-bottom: 0.375rem;
498
- color: var(--color-txt-2);
499
- }
500
-
501
- @utility hover-lift {
502
- &:hover { transform: translate(-1px, -1px); }
503
- }
504
- @utility card-hover {
505
- &:hover { transform: translate(-1px, -1px); border-color: var(--color-primary-300) !important; }
506
- }
507
-
508
- @utility animate-delay-50 { animation-delay: 50ms; }
509
- @utility animate-delay-100 { animation-delay: 100ms; }
510
- @utility animate-delay-150 { animation-delay: 150ms; }
511
- @utility animate-delay-200 { animation-delay: 200ms; }
512
- @utility animate-delay-250 { animation-delay: 250ms; }
513
- @utility animate-delay-300 { animation-delay: 300ms; }
514
- @utility animate-delay-350 { animation-delay: 350ms; }
515
- @utility animate-delay-400 { animation-delay: 400ms; }
516
- @utility animate-delay-500 { animation-delay: 500ms; }
517
- @utility animate-delay-600 { animation-delay: 600ms; }
518
- @utility animate-delay-700 { animation-delay: 700ms; }
519
-
520
- /*
521
- AUTH PANEL
522
- */
523
- .auth-panel-bg {
524
- background: var(--color-ink-200);
525
- background-image:
526
- linear-gradient(var(--color-border) 1px, transparent 1px),
527
- linear-gradient(90deg, var(--color-border) 1px, transparent 1px);
528
- background-size: 24px 24px;
529
- }
530
- .auth-panel-sweep { background: none !important; }
531
-
532
- /*
533
- MOBILE NAV
534
- */
535
- .mobile-nav-bar {
536
- background: rgba(12,15,22,0.35) !important;
537
- border-top-color: var(--color-border) !important;
538
- }
539
- html:not(.dark) .mobile-nav-bar {
540
- background: rgba(235,237,241,0.85) !important;
541
- }
542
-
543
- /*
544
- LIGHT MODE PATCHES
545
- */
546
- html:not(.dark) {
547
- /* Select chevron in darker cyan for light backgrounds */
548
- select {
549
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%230ea5c9' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E") !important;
550
- }
551
-
552
- /* Skeleton shimmer on light */
553
- .skeleton, [class*="skeleton"] {
554
- background: linear-gradient(90deg, var(--color-ink-300) 25%, var(--color-ink-400) 50%, var(--color-ink-300) 75%) !important;
555
- }
556
-
557
- /* Red tints */
558
- .bg-red-50 { background-color: rgba(220,79,30,.07) !important; }
559
- .border-red-100 { border-color: rgba(220,79,30,.2) !important; }
560
- .hover\:bg-red-50:hover { background-color: rgba(220,79,30,.10) !important; }
561
-
562
- /* btn-primary shadow in light uses same signal lime, keep */
563
- .btn-secondary:active { background: var(--color-ink-300) !important; }
564
-
565
- /* Role badge */
566
- .bg-primary-500.text-primary-50 {
567
- border-color: var(--color-primary-400) !important;
568
- color: var(--color-primary-400) !important;
569
- }
570
- }
571
-
572
- /* Logo on light theme keep bg dark so white squares stay visible */
573
- html:not(.dark) .light-logo {
574
- background-color: var(--color-primary-700) !important;
575
- color: #fff !important;
576
- }
577
-
578
- /* Landing page respects global theme */
579
- .landing-shell {
580
- background: var(--color-ink-100);
581
- color: var(--color-txt-1);
582
- }
583
- .landing-shell section,
584
- .landing-shell footer {
585
- background: var(--color-ink-100) !important;
586
- }
587
- .landing-shell [class*="border-white/"] {
588
- border-color: var(--color-border) !important;
589
- }
590
- .landing-shell [class*="bg-white/"] {
591
- background-color: var(--color-ink-300) !important;
592
- }
593
- .landing-shell [class*="shadow"] {
594
- box-shadow: none !important;
595
- }
596
- .landing-shell [class*="tracking-tight"],
597
- .landing-shell [class*="tracking-tighter"] {
598
- letter-spacing: 0 !important;
599
- }
600
- .landing-shell .landing-accent {
601
- color: var(--color-primary-300) !important;
602
- }
603
- /* Dashboard mockup illustration always dark regardless of theme */
604
- .dashboard-mockup-wrapper {
605
- --color-ink-000: #050608;
606
- --color-ink-100: #06080c;
607
- --color-border: #1d2330;
608
- --color-txt-1: #f1f4f9;
609
- --color-txt-3: #6b7686;
610
- --color-primary-300: #5ee7ff;
611
- }
612
-
613
- /* Landing text/bg overrides in light mode for any remaining hardcoded white classes */
614
- html:not(.dark) .landing-shell .text-white { color: var(--color-txt-1) !important; }
615
- html:not(.dark) .landing-shell .text-white\/90,
616
- html:not(.dark) .landing-shell .text-white\/80,
617
- html:not(.dark) .landing-shell .text-white\/70,
618
- html:not(.dark) .landing-shell .text-white\/65,
619
- html:not(.dark) .landing-shell .text-white\/60 { color: var(--color-txt-2) !important; }
620
- html:not(.dark) .landing-shell .text-white\/50,
621
- html:not(.dark) .landing-shell .text-white\/45,
622
- html:not(.dark) .landing-shell .text-white\/40,
623
- html:not(.dark) .landing-shell .text-white\/35,
624
- html:not(.dark) .landing-shell .text-white\/30,
625
- html:not(.dark) .landing-shell .text-white\/25 { color: var(--color-txt-3) !important; }
626
- html:not(.dark) .landing-shell .text-white\/20,
627
- html:not(.dark) .landing-shell .text-white\/15,
628
- html:not(.dark) .landing-shell .text-white\/10 { color: var(--color-txt-4) !important; }
629
- html:not(.dark) .landing-shell .bg-black\/40,
630
- html:not(.dark) .landing-shell .bg-black\/60 { background-color: rgba(235,237,241,0.9) !important; }
631
- html:not(.dark) .landing-shell .border-white\/10,
632
- html:not(.dark) .landing-shell .border-white\/15,
633
- html:not(.dark) .landing-shell .border-white\/20 { border-color: var(--color-border) !important; }
634
- /* Landing navbar white background in light mode */
635
- html:not(.dark) .landing-nav {
636
- --color-ink-100: #ffffff;
637
- --color-ink-200: #ffffff;
638
- }
639
-
640
- /* Any remaining inline dark backgrounds via utility classes */
641
- html:not(.dark) .landing-shell .bg-white\/3,
642
- html:not(.dark) .landing-shell .bg-white\/4,
643
- html:not(.dark) .landing-shell .bg-white\/5 { background-color: var(--color-ink-200) !important; }
644
-
645
- /*
646
- LOADING SCREEN
647
- */
648
- .track {
649
- position: relative; width: 280px; height: 60px;
650
- display: flex; align-items: center; justify-content: center; overflow: visible;
651
- }
652
- .pulse-line {
653
- position: absolute; width: 70px; height: 2px;
654
- background: rgba(94,231,255,.05);
655
- animation: thinPulse 3.5s ease-in-out infinite; z-index: 1;
656
- }
657
- .sliding-logo { position: relative; z-index: 2; animation: slowSlideFade 5s ease-in-out infinite; }
658
- .sliding-logo > div { transition: all 0.3s ease; }
659
-
660
- /*
661
- MISC
662
- */
663
- .fade-in { animation: fade-in 0.2s ease-out; }
664
-
665
- ::-webkit-scrollbar { width:0 !important; height:0 !important; background:transparent !important; }
666
- ::-webkit-scrollbar-button { display:none !important; }
667
- ::-webkit-scrollbar-track,
668
- ::-webkit-scrollbar-thumb,
669
- ::-webkit-scrollbar-corner { background:transparent !important; display:none !important; }
670
- * { scrollbar-width:none !important; -ms-overflow-style:none !important; }
671
-
672
- /*
673
- TIPTAP EDITOR
674
- */
675
- .tiptap-editor .ProseMirror,
676
- .tiptap-readonly .ProseMirror {
677
- outline: none;
678
- color: var(--color-txt-1);
679
- font-size: 0.875rem;
680
- line-height: 1.7;
681
- }
682
-
683
- .tiptap-editor .ProseMirror p.is-editor-empty:first-child::before {
684
- content: attr(data-placeholder);
685
- color: var(--color-txt-4);
686
- pointer-events: none;
687
- float: left;
688
- height: 0;
689
- }
690
-
691
- /* Headings */
692
- .tiptap-editor .ProseMirror h1,
693
- .tiptap-readonly .ProseMirror h1 { font-size: 1.4rem; font-weight: 700; margin: 1rem 0 0.5rem; color: var(--color-txt-1); font-family: var(--font-display); }
694
- .tiptap-editor .ProseMirror h2,
695
- .tiptap-readonly .ProseMirror h2 { font-size: 1.15rem; font-weight: 600; margin: 0.9rem 0 0.4rem; color: var(--color-txt-1); font-family: var(--font-display); }
696
- .tiptap-editor .ProseMirror h3,
697
- .tiptap-readonly .ProseMirror h3 { font-size: 1rem; font-weight: 600; margin: 0.75rem 0 0.35rem; color: var(--color-txt-2); font-family: var(--font-display); }
698
-
699
- /* Paragraph */
700
- .tiptap-editor .ProseMirror p,
701
- .tiptap-readonly .ProseMirror p { margin: 0 0 0.5rem; }
702
-
703
- /* Lists */
704
- .tiptap-editor .ProseMirror ul,
705
- .tiptap-readonly .ProseMirror ul { list-style: disc; padding-left: 1.4rem; margin: 0.4rem 0; }
706
- .tiptap-editor .ProseMirror ol,
707
- .tiptap-readonly .ProseMirror ol { list-style: decimal; padding-left: 1.4rem; margin: 0.4rem 0; }
708
- .tiptap-editor .ProseMirror li,
709
- .tiptap-readonly .ProseMirror li { margin: 0.15rem 0; }
710
-
711
- /* Blockquote */
712
- .tiptap-editor .ProseMirror blockquote,
713
- .tiptap-readonly .ProseMirror blockquote {
714
- border-left: 3px solid var(--color-primary-300);
715
- margin: 0.6rem 0;
716
- padding: 0.4rem 0 0.4rem 1rem;
717
- color: var(--color-txt-3);
718
- background: rgba(94,231,255,0.04);
719
- }
720
-
721
- /* Inline code */
722
- .tiptap-editor .ProseMirror code,
723
- .tiptap-readonly .ProseMirror code {
724
- font-family: var(--font-mono);
725
- font-size: 0.82em;
726
- background: rgba(94,231,255,0.08);
727
- border: 1px solid rgba(94,231,255,0.15);
728
- color: var(--color-primary-300);
729
- padding: 0.1em 0.4em;
730
- }
731
-
732
- /* Code block */
733
- .tiptap-code-block,
734
- .tiptap-editor .ProseMirror pre,
735
- .tiptap-readonly .ProseMirror pre {
736
- font-family: var(--font-mono);
737
- font-size: 0.8rem;
738
- background: var(--color-ink-300);
739
- border: 1px solid var(--color-border-hi);
740
- border-left: 3px solid var(--color-primary-300);
741
- padding: 0.8rem 1rem;
742
- margin: 0.6rem 0;
743
- overflow-x: auto;
744
- color: var(--color-txt-2);
745
- }
746
- .tiptap-editor .ProseMirror pre code,
747
- .tiptap-readonly .ProseMirror pre code {
748
- background: none;
749
- border: none;
750
- padding: 0;
751
- color: inherit;
752
- font-size: inherit;
753
- }
754
-
755
- /* Links */
756
- .tiptap-link,
757
- .tiptap-editor .ProseMirror a,
758
- .tiptap-readonly .ProseMirror a {
759
- color: var(--color-primary-300);
760
- text-decoration: underline;
761
- text-underline-offset: 2px;
762
- }
763
-
764
- /* Strong / em */
765
- .tiptap-editor .ProseMirror strong,
766
- .tiptap-readonly .ProseMirror strong { color: var(--color-txt-1); font-weight: 700; }
767
- .tiptap-editor .ProseMirror em,
768
- .tiptap-readonly .ProseMirror em { color: var(--color-txt-2); }
769
-
770
- /* Faculty branding logo */
771
- .faculty-logo { filter: none; }
772
- html.dark .faculty-logo { filter: invert(1); }
1
+ /* stylelint-disable */
2
+ @theme {
3
+ /* Core ink ramp kept for backwards compatibility with existing Tailwind classes. */
4
+ --color-ink-000: #050608;
5
+ --color-ink-100: #06080c;
6
+ --color-ink-200: #0c0f16;
7
+ --color-ink-300: #11151e;
8
+ --color-ink-400: #1d222d;
9
+ --color-ink-500: #262d3b;
10
+ --color-border: #1d2330;
11
+ --color-border-hi: #2a3346;
12
+ --color-txt-1: #f1f4f9;
13
+ --color-txt-2: #aab3c2;
14
+ --color-txt-3: #7f8a9b;
15
+ --color-txt-4: #667185;
16
+
17
+ --color-primary-50: #e8fbff;
18
+ --color-primary-100: #c7f5ff;
19
+ --color-primary-200: #99eeff;
20
+ --color-primary-300: #5ee7ff;
21
+ --color-primary-400: #38d4f0;
22
+ --color-primary-500: #1eb5d4;
23
+ --color-primary-600: #1496b3;
24
+ --color-primary-700: #0e7088;
25
+ --color-primary-800: #0a4f60;
26
+ --color-primary-900: #062f3b;
27
+ --color-primary-950: #03161c;
28
+
29
+ --color-signal-300: #e4ff66;
30
+ --color-signal-400: #d4ff3a;
31
+ --color-signal-500: #b8e620;
32
+
33
+ --color-warn: #ff7a4d;
34
+ --color-good: #4dd6a3;
35
+
36
+ --font-display: 'IBM Plex Sans', system-ui, sans-serif;
37
+ --font-body: 'IBM Plex Sans', system-ui, sans-serif;
38
+ --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
39
+
40
+ --radius-none: 0;
41
+ --radius-sm: 0;
42
+ --radius-md: 0;
43
+ --radius-lg: 0;
44
+ --radius-xl: 0;
45
+ --radius-2xl: 0;
46
+ --radius-full: 9999px;
47
+
48
+ --animate-fade-in-up: fade-in-up 0.5s ease both;
49
+ --animate-fade-in-down: fade-in-down 0.4s ease both;
50
+ --animate-fade-in: fade-in 0.3s ease both;
51
+ --animate-fade-out: fade-out 0.25s ease both;
52
+ --animate-count-up: count-up 0.5s ease both;
53
+ --animate-slide-in-right: slide-in-right 0.35s ease both;
54
+ --animate-slide-in-left: slide-in-left 0.35s ease both;
55
+ --animate-scale-in: scale-in 0.3s cubic-bezier(0.34,1.56,0.64,1) both;
56
+ --animate-progress-fill: progress-fill 1s ease both;
57
+ --animate-pulse-soft: pulse-soft 2s ease-in-out infinite;
58
+ --animate-shake: shake 0.4s ease both;
59
+ --animate-bounce-in: bounce-in 0.5s cubic-bezier(0.34,1.56,0.64,1) both;
60
+ --animate-flip-in: flip-in 0.4s ease both;
61
+ --animate-blur-in: blur-in 0.35s ease both;
62
+ --animate-slide-up-fade: slide-up-fade 0.3s ease both;
63
+
64
+ @keyframes fade-in-up { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
65
+ @keyframes fade-in-down { from { opacity:0; transform:translateY(-12px); } to { opacity:1; transform:translateY(0); } }
66
+ @keyframes fade-in { from { opacity:0; } to { opacity:1; } }
67
+ @keyframes fade-out { from { opacity:1; } to { opacity:0; } }
68
+ @keyframes count-up { from { opacity:0; transform:scale(0.85); } to { opacity:1; transform:scale(1); } }
69
+ @keyframes slide-in-right { from { opacity:0; transform:translateX(20px); } to { opacity:1; transform:translateX(0); } }
70
+ @keyframes slide-in-left { from { opacity:0; transform:translateX(-20px); } to { opacity:1; transform:translateX(0); } }
71
+ @keyframes scale-in { from { opacity:0; transform:scale(0.88); } to { opacity:1; transform:scale(1); } }
72
+ @keyframes progress-fill { from { width: 0%; } }
73
+ @keyframes pulse-soft { 0%,100% { opacity:1; } 50% { opacity:0.6; } }
74
+ @keyframes shake { 0%,100% { transform:translateX(0); } 20% { transform:translateX(-6px); } 40% { transform:translateX(6px); } 60% { transform:translateX(-4px); } 80% { transform:translateX(4px); } }
75
+ @keyframes bounce-in { from { opacity:0; transform:scale(0.7); } to { opacity:1; transform:scale(1); } }
76
+ @keyframes flip-in { from { opacity:0; transform:rotateX(-30deg) translateY(8px); } to { opacity:1; transform:rotateX(0deg) translateY(0); } }
77
+ @keyframes blur-in { from { opacity:0; filter:blur(6px); transform:scale(0.97); } to { opacity:1; filter:blur(0px); transform:scale(1); } }
78
+ @keyframes slide-up-fade { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
79
+ @keyframes skeleton-shimmer { 0% { background-position:-400px 0; } 100% { background-position:400px 0; } }
80
+ }
81
+
82
+ :root {
83
+ color-scheme: dark;
84
+
85
+ /* Semantic design tokens: use these in new components and app code. */
86
+ --tapiz-bg-canvas: var(--color-ink-100);
87
+ --tapiz-bg-page: var(--color-ink-100);
88
+ --tapiz-bg-surface: var(--color-ink-200);
89
+ --tapiz-bg-surface-muted: var(--color-ink-300);
90
+ --tapiz-bg-surface-raised: #10151f;
91
+ --tapiz-bg-surface-inverse: #f8fafc;
92
+ --tapiz-bg-overlay: rgba(5, 6, 8, 0.74);
93
+
94
+ --tapiz-border-subtle: var(--color-border);
95
+ --tapiz-border-strong: var(--color-border-hi);
96
+ --tapiz-border-focus: var(--color-primary-300);
97
+
98
+ --tapiz-text-primary: var(--color-txt-1);
99
+ --tapiz-text-secondary: var(--color-txt-2);
100
+ --tapiz-text-muted: var(--color-txt-3);
101
+ --tapiz-text-disabled: var(--color-txt-4);
102
+ --tapiz-text-inverse: #050608;
103
+
104
+ --tapiz-accent: var(--color-primary-300);
105
+ --tapiz-accent-hover: var(--color-primary-400);
106
+ --tapiz-accent-soft: color-mix(in srgb, var(--color-primary-300) 12%, transparent);
107
+ --tapiz-accent-contrast: #000000;
108
+ --tapiz-signal: var(--color-signal-400);
109
+ --tapiz-signal-soft: color-mix(in srgb, var(--color-signal-400) 14%, transparent);
110
+
111
+ --tapiz-success: var(--color-good);
112
+ --tapiz-success-soft: color-mix(in srgb, var(--color-good) 12%, transparent);
113
+ --tapiz-warning: #ffb020;
114
+ --tapiz-warning-soft: rgba(255, 176, 32, 0.12);
115
+ --tapiz-danger: var(--color-warn);
116
+ --tapiz-danger-soft: rgba(255, 122, 77, 0.12);
117
+ --tapiz-info: var(--color-primary-300);
118
+ --tapiz-info-soft: color-mix(in srgb, var(--color-primary-300) 12%, transparent);
119
+
120
+ --tapiz-shadow-sm: 0 1px 0 rgba(255,255,255,0.04);
121
+ --tapiz-shadow-md: 0 16px 44px rgba(0,0,0,0.24);
122
+ --tapiz-shadow-lg: 0 28px 80px rgba(0,0,0,0.34);
123
+ --tapiz-shadow-brutal: 4px 4px 0 var(--tapiz-border-strong);
124
+ --tapiz-shadow-brutal-lg: 8px 8px 0 var(--tapiz-border-strong);
125
+
126
+ --tapiz-brutal-border: 2px solid var(--tapiz-border-strong);
127
+ --tapiz-brutal-shadow: var(--tapiz-shadow-brutal);
128
+ --tapiz-brutal-shadow-lg: var(--tapiz-shadow-brutal-lg);
129
+
130
+ --tapiz-space-page-x: clamp(1rem, 2vw, 2rem);
131
+ --tapiz-space-section-y: clamp(3rem, 7vw, 6rem);
132
+ --tapiz-motion-fast: 120ms ease;
133
+ --tapiz-motion-base: 180ms ease;
134
+ --tapiz-motion-spring: 240ms cubic-bezier(.2, .8, .2, 1);
135
+
136
+ --tapiz-surface-grid:
137
+ linear-gradient(var(--tapiz-border-subtle) 1px, transparent 1px),
138
+ linear-gradient(90deg, var(--tapiz-border-subtle) 1px, transparent 1px);
139
+ --tapiz-surface-noise:
140
+ radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--tapiz-accent) 14%, transparent), transparent 28rem),
141
+ radial-gradient(circle at 80% 0%, color-mix(in srgb, var(--tapiz-signal) 10%, transparent), transparent 24rem);
142
+
143
+ --color-icon-bg: var(--color-primary-950);
144
+ --btn-primary-color: var(--tapiz-accent-contrast);
145
+ }
146
+
147
+ html:not(.dark) {
148
+ color-scheme: light;
149
+
150
+ --color-ink-000: #ffffff;
151
+ --color-ink-100: #f7f8fb;
152
+ --color-ink-200: #ffffff;
153
+ --color-ink-300: #eef1f6;
154
+ --color-ink-400: #d9dee8;
155
+ --color-ink-500: #bcc5d3;
156
+ --color-border: #d7dce6;
157
+ --color-border-hi: #aeb7c8;
158
+ --color-txt-1: #0b1020;
159
+ --color-txt-2: #263145;
160
+ --color-txt-3: #566276;
161
+ --color-txt-4: #7a8496;
162
+
163
+ --color-primary-300: #087d9c;
164
+ --color-primary-400: #066d89;
165
+ --color-primary-500: #075e75;
166
+ --color-signal-300: #6f950b;
167
+ --color-signal-400: #53720b;
168
+ --color-signal-500: #3f5a08;
169
+ --color-warn: #c4481f;
170
+ --color-good: #047857;
171
+
172
+ --tapiz-bg-canvas: #f7f8fb;
173
+ --tapiz-bg-page: #f7f8fb;
174
+ --tapiz-bg-surface: #ffffff;
175
+ --tapiz-bg-surface-muted: #eef1f6;
176
+ --tapiz-bg-surface-raised: #ffffff;
177
+ --tapiz-bg-surface-inverse: #050608;
178
+ --tapiz-bg-overlay: rgba(11, 16, 32, 0.45);
179
+
180
+ --tapiz-border-subtle: #d7dce6;
181
+ --tapiz-border-strong: #0b1020;
182
+ --tapiz-border-focus: var(--color-primary-300);
183
+
184
+ --tapiz-text-primary: #0b1020;
185
+ --tapiz-text-secondary: #263145;
186
+ --tapiz-text-muted: #566276;
187
+ --tapiz-text-disabled: #7a8496;
188
+ --tapiz-text-inverse: #ffffff;
189
+
190
+ --tapiz-accent: var(--color-primary-300);
191
+ --tapiz-accent-hover: var(--color-primary-400);
192
+ --tapiz-accent-soft: color-mix(in srgb, var(--color-primary-300) 10%, transparent);
193
+ --tapiz-accent-contrast: #ffffff;
194
+ --tapiz-signal: var(--color-signal-400);
195
+ --tapiz-signal-soft: color-mix(in srgb, var(--color-signal-400) 12%, transparent);
196
+
197
+ --tapiz-success: var(--color-good);
198
+ --tapiz-success-soft: rgba(4, 120, 87, 0.10);
199
+ --tapiz-warning: #b45309;
200
+ --tapiz-warning-soft: rgba(180, 83, 9, 0.10);
201
+ --tapiz-danger: var(--color-warn);
202
+ --tapiz-danger-soft: rgba(196, 72, 31, 0.10);
203
+ --tapiz-info: var(--color-primary-300);
204
+ --tapiz-info-soft: color-mix(in srgb, var(--color-primary-300) 10%, transparent);
205
+
206
+ --tapiz-shadow-sm: 0 1px 0 rgba(11,16,32,0.08);
207
+ --tapiz-shadow-md: 0 18px 42px rgba(11,16,32,0.08);
208
+ --tapiz-shadow-lg: 0 26px 80px rgba(11,16,32,0.12);
209
+ --tapiz-shadow-brutal: 4px 4px 0 #0b1020;
210
+ --tapiz-shadow-brutal-lg: 8px 8px 0 #0b1020;
211
+ --tapiz-brutal-border: 2px solid #0b1020;
212
+
213
+ --color-icon-bg: color-mix(in srgb, var(--color-primary-300) 12%, var(--color-ink-200));
214
+ --btn-primary-color: var(--tapiz-accent-contrast);
215
+ }
216
+
217
+ @layer base {
218
+ *, ::after, ::before, ::backdrop, ::file-selector-button {
219
+ border-color: var(--tapiz-border-subtle, currentcolor);
220
+ border-radius: 0 !important;
221
+ }
222
+
223
+ html, body {
224
+ background: var(--tapiz-bg-page);
225
+ color: var(--tapiz-text-primary);
226
+ font-family: var(--font-body);
227
+ letter-spacing: 0;
228
+ -webkit-font-smoothing: antialiased;
229
+ }
230
+
231
+ h1, h2, h3, h4 {
232
+ font-family: var(--font-display);
233
+ font-weight: 600;
234
+ letter-spacing: -0.03em;
235
+ }
236
+
237
+ [class*="rounded"] { border-radius: 0 !important; }
238
+
239
+ html *:not([class*="animate-"]):not(.sliding-logo):not(.pulse-line) {
240
+ transition:
241
+ background-color var(--tapiz-motion-base),
242
+ border-color var(--tapiz-motion-base),
243
+ color var(--tapiz-motion-fast),
244
+ box-shadow var(--tapiz-motion-base),
245
+ transform var(--tapiz-motion-base);
246
+ }
247
+
248
+ input, textarea, select {
249
+ background-color: var(--tapiz-bg-surface) !important;
250
+ border-color: var(--tapiz-border-strong) !important;
251
+ color: var(--tapiz-text-primary) !important;
252
+ }
253
+ input::placeholder, textarea::placeholder { color: var(--tapiz-text-disabled) !important; }
254
+ input:focus, textarea:focus, select:focus {
255
+ border-color: var(--tapiz-border-focus) !important;
256
+ box-shadow: inset 3px 0 0 0 var(--tapiz-signal), 0 0 0 1px var(--tapiz-border-focus) !important;
257
+ outline: none !important;
258
+ }
259
+
260
+ table { color: var(--tapiz-text-secondary) !important; }
261
+ thead, thead tr { background-color: var(--tapiz-bg-surface-muted) !important; }
262
+ thead th {
263
+ background-color: var(--tapiz-bg-surface-muted) !important;
264
+ color: var(--tapiz-text-muted) !important;
265
+ border-color: var(--tapiz-border-subtle) !important;
266
+ font-family: var(--font-mono);
267
+ font-size: 10px;
268
+ letter-spacing: 0.18em;
269
+ text-transform: uppercase;
270
+ font-weight: 600;
271
+ }
272
+ tbody tr { background-color: var(--tapiz-bg-surface) !important; border-color: var(--tapiz-border-subtle) !important; }
273
+ tbody tr:nth-child(even) { background-color: color-mix(in srgb, var(--tapiz-bg-surface-muted) 36%, var(--tapiz-bg-surface)) !important; }
274
+ tbody tr:hover { background-color: var(--tapiz-bg-surface-muted) !important; }
275
+ tbody td, tbody th { color: var(--tapiz-text-secondary) !important; border-color: var(--tapiz-border-subtle) !important; }
276
+
277
+ .bg-white { background-color: var(--tapiz-bg-surface) !important; }
278
+ .bg-gray-50 { background-color: var(--tapiz-bg-page) !important; }
279
+ .bg-gray-100 { background-color: var(--tapiz-bg-surface-muted) !important; }
280
+ .bg-gray-200 { background-color: var(--color-ink-400) !important; }
281
+ .border-gray-100, .border-gray-200, .border-gray-300 { border-color: var(--tapiz-border-subtle) !important; }
282
+ hr { border-color: var(--tapiz-border-subtle) !important; }
283
+ .text-gray-900, .text-gray-800 { color: var(--tapiz-text-primary) !important; }
284
+ .text-gray-700, .text-gray-600 { color: var(--tapiz-text-secondary) !important; }
285
+ .text-gray-500, .text-gray-400 { color: var(--tapiz-text-muted) !important; }
286
+ .text-gray-300 { color: var(--tapiz-text-disabled) !important; }
287
+
288
+ .card, .stat-card {
289
+ background-color: var(--tapiz-bg-surface) !important;
290
+ border-color: var(--tapiz-border-subtle) !important;
291
+ }
292
+ }
293
+
294
+ .kicker {
295
+ font-family: var(--font-mono);
296
+ font-size: 10px;
297
+ letter-spacing: 0.18em;
298
+ text-transform: uppercase;
299
+ font-weight: 700;
300
+ color: var(--tapiz-accent);
301
+ }
302
+
303
+ .font-mono { font-family: var(--font-mono) !important; }
304
+ .font-display { font-family: var(--font-display) !important; }
305
+
306
+ .grid-bg, .tapiz-grid-bg {
307
+ background-image: var(--tapiz-surface-grid);
308
+ background-size: 24px 24px;
309
+ background-position: -1px -1px;
310
+ }
311
+
312
+ .tapiz-noise-bg { background-image: var(--tapiz-surface-noise); }
313
+ .tapiz-enterprise-shell { background: var(--tapiz-bg-page); color: var(--tapiz-text-primary); }
314
+ .tapiz-focus-ring:focus-visible { outline: 2px solid var(--tapiz-border-focus); outline-offset: 2px; }
315
+
316
+ @utility btn-primary {
317
+ display: inline-flex;
318
+ align-items: center;
319
+ justify-content: center;
320
+ padding: 0.5rem 1rem;
321
+ background: var(--tapiz-accent);
322
+ color: var(--btn-primary-color);
323
+ font-family: var(--font-display);
324
+ font-size: 0.875rem;
325
+ font-weight: 700;
326
+ border: 1px solid var(--tapiz-border-strong);
327
+ box-shadow: var(--tapiz-brutal-shadow);
328
+ cursor: pointer;
329
+ &:hover { transform: translate(-1px,-1px); box-shadow: var(--tapiz-brutal-shadow-lg); }
330
+ &:active { transform: translate(1px,1px); box-shadow: 2px 2px 0 var(--tapiz-border-strong); }
331
+ &:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; }
332
+ }
333
+
334
+ @utility btn-secondary {
335
+ display: inline-flex;
336
+ align-items: center;
337
+ justify-content: center;
338
+ padding: 0.5rem 1rem;
339
+ background: var(--tapiz-bg-surface);
340
+ color: var(--tapiz-text-secondary);
341
+ font-family: var(--font-mono);
342
+ font-size: 0.875rem;
343
+ font-weight: 600;
344
+ border: 1px solid var(--tapiz-border-strong);
345
+ cursor: pointer;
346
+ &:hover { color: var(--tapiz-text-primary); border-color: var(--tapiz-accent); }
347
+ &:active { background: var(--tapiz-bg-surface-muted); }
348
+ &:disabled { opacity: 0.4; cursor: not-allowed; }
349
+ }
350
+
351
+ @utility btn-danger {
352
+ display: inline-flex;
353
+ align-items: center;
354
+ justify-content: center;
355
+ background: transparent;
356
+ color: var(--tapiz-danger);
357
+ font-family: var(--font-mono);
358
+ border: 1px solid var(--tapiz-danger);
359
+ cursor: pointer;
360
+ &:hover { background: var(--tapiz-danger-soft); }
361
+ }
362
+
363
+ @utility input-field {
364
+ display: block;
365
+ width: 100%;
366
+ padding: 0.625rem 0.875rem;
367
+ background: var(--tapiz-bg-surface);
368
+ border: 1px solid var(--tapiz-border-strong);
369
+ font-size: 0.875rem;
370
+ color: var(--tapiz-text-primary);
371
+ outline: none;
372
+ &::placeholder { color: var(--tapiz-text-disabled); }
373
+ &:focus { border-color: var(--tapiz-border-focus); box-shadow: inset 3px 0 0 0 var(--tapiz-signal); }
374
+ }
375
+
376
+ @utility skeleton {
377
+ background: linear-gradient(90deg, var(--color-ink-300) 25%, var(--color-ink-400) 50%, var(--color-ink-300) 75%);
378
+ background-size: 800px 100%;
379
+ animation: skeleton-shimmer 1.5s infinite linear;
380
+ }
381
+
382
+ @utility card {
383
+ background: var(--tapiz-bg-surface);
384
+ border: 1px solid var(--tapiz-border-subtle);
385
+ box-shadow: var(--tapiz-shadow-sm);
386
+ padding: 1.25rem;
387
+ }
388
+
389
+ @utility form-panel {
390
+ background: var(--tapiz-bg-surface);
391
+ border: 1px solid var(--tapiz-border-strong);
392
+ border-top: 2px solid var(--tapiz-accent);
393
+ box-shadow: var(--tapiz-shadow-sm);
394
+ padding: 1.25rem;
395
+ }
396
+
397
+ @utility stat-card {
398
+ background: var(--tapiz-bg-surface);
399
+ border: 1px solid var(--tapiz-border-subtle);
400
+ box-shadow: var(--tapiz-shadow-sm);
401
+ padding: 1rem;
402
+ }
403
+
404
+ @utility card-hover {
405
+ &:hover { border-color: var(--tapiz-border-strong); box-shadow: var(--tapiz-shadow-md); transform: translateY(-1px); }
406
+ }
407
+
408
+ @utility tapiz-brutal-card {
409
+ background: var(--tapiz-bg-surface);
410
+ border: var(--tapiz-brutal-border);
411
+ box-shadow: var(--tapiz-brutal-shadow);
412
+ }
413
+
414
+ @utility tapiz-enterprise-card {
415
+ background: var(--tapiz-bg-surface);
416
+ border: 1px solid var(--tapiz-border-subtle);
417
+ box-shadow: var(--tapiz-shadow-md);
418
+ }