1  /**
  2   * ACDC Design System - Design Tokens
  3   *
  4   * Core tokens are auto-generated from JSON. Additional patterns and utilities
  5   * are defined here.
  6   */
  7  
  8  /* Google Fonts Import - MUST be first */
  9  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');
 10  
 11  /* Import generated tokens (colors, spacing), then feel cascade */
 12  @import './generated-tokens.css';
 13  @import '../tokens/feel.css';
 14  
 15  /* =============================================================================
 16     TYPOGRAPHY ADDITIONS
 17     ============================================================================= */
 18  
 19  :root {
 20    /* Font Families */
 21    --font-display: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
 22    --font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
 23    --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", monospace;
 24  
 25    /* Type Scale */
 26    --text-display: 56px;
 27    --text-h1: 40px;
 28    --text-h2: 32px;
 29    --text-h3: 24px;
 30    --text-h4: 20px;
 31    --text-body-lg: 18px;
 32    --text-body: 16px;
 33    --text-body-sm: 14px;
 34    --text-caption: 12px;
 35    --text-mono: 14px;
 36    --text-mono-sm: 12px;
 37  
 38    /* Line Heights */
 39    --leading-display: 1.1;
 40    --leading-heading: 1.2;
 41    --leading-snug: 1.3;
 42    --leading-normal: 1.5;
 43    --leading-relaxed: 1.6;
 44  
 45    /* Font Weights */
 46    --font-regular: 400;
 47    --font-medium: 500;
 48    --font-semibold: 600;
 49    --font-bold: 700;
 50  
 51    /* Letter Spacing */
 52    --tracking-tighter: -0.02em;
 53    --tracking-tight: -0.01em;
 54    --tracking-normal: 0;
 55    --tracking-wide: 0.02em;
 56    --tracking-wider: 0.04em;
 57  }
 58  
 59  /* =============================================================================
 60     COMPONENT SPACING PATTERNS
 61     ============================================================================= */
 62  
 63  :root {
 64    /* Semantic Spacing Tokens */
 65    --space-xs: 4px;
 66    --space-sm: 8px;
 67    --space-md: 16px;
 68    --space-lg: 24px;
 69    --space-xl: 32px;
 70    --space-2xl: 48px;
 71    --space-3xl: 64px;
 72    --space-4xl: 96px;
 73    --space-5xl: 128px;
 74  
 75    /* Component Spacing Patterns */
 76    --card-padding: var(--space-lg);
 77    --card-padding-sm: var(--space-md);
 78    --card-padding-lg: var(--space-xl);
 79    --card-gap: var(--space-lg);
 80  
 81    --section-gap: var(--space-2xl);
 82    --page-padding: var(--space-xl);
 83    --page-padding-mobile: var(--space-md);
 84  
 85    --input-padding-y: var(--space-3);
 86    --input-padding-x: var(--space-md);
 87    --input-padding-y-sm: var(--space-2);
 88    --input-padding-y-lg: var(--space-md);
 89  
 90    --button-padding-y: var(--space-3);
 91    --button-padding-x: var(--space-md);
 92    --button-padding-y-sm: var(--space-1-5);
 93    --button-padding-x-sm: var(--space-3);
 94    --button-padding-y-lg: var(--space-4);
 95    --button-padding-x-lg: var(--space-lg);
 96  
 97    --label-gap: var(--space-sm);
 98    --form-field-gap: var(--space-xl);
 99    --inline-gap: var(--space-sm);
100    --stack-gap: var(--space-md);
101  
102    /* Breakpoints */
103    --screen-mobile: 375px;
104    --screen-tablet: 768px;
105    --screen-desktop: 1280px;
106    --screen-wide: 1536px;
107  
108    /* Container Max-Widths */
109    --container-mobile: 343px;
110    --container-tablet: 720px;
111    --container-desktop: 1200px;
112    --container-wide: 1440px;
113  }
114  
115  /* =============================================================================
116     COMPONENT RADIUS TOKENS
117     ============================================================================= */
118  
119  :root {
120    --radius-button: var(--radius-md);
121    --radius-button-sm: var(--radius-sm);
122    --radius-button-lg: var(--radius-lg);
123  
124    --radius-input: var(--radius-md);
125    --radius-input-lg: var(--radius-lg);
126  
127    --radius-card: var(--radius-xl);
128    --radius-card-sm: var(--radius-lg);
129    --radius-card-lg: var(--radius-2xl);
130  
131    --radius-badge: var(--radius-sm);
132    --radius-badge-pill: var(--radius-full);
133  
134    --radius-avatar: var(--radius-lg);
135    --radius-avatar-sm: var(--radius-md);
136    --radius-avatar-circle: var(--radius-full);
137  
138    --radius-modal: var(--radius-xl);
139    --radius-tooltip: var(--radius-md);
140    --radius-dropdown: var(--radius-lg);
141  }
142  
143  /* =============================================================================
144     FOCUS RINGS & SEMANTIC SHADOWS
145     ============================================================================= */
146  
147  :root {
148    /* Focus Rings */
149    --focus-ring-alpha: 0 0 0 2px var(--bg-primary), 0 0 0 4px var(--alpha-500);
150    --focus-ring-delta: 0 0 0 2px var(--bg-primary), 0 0 0 4px var(--delta-500);
151    --focus-ring-error: 0 0 0 2px var(--bg-primary), 0 0 0 4px var(--error);
152    --focus-ring-success: 0 0 0 2px var(--bg-primary), 0 0 0 4px var(--success);
153  
154    /* Semantic Shadow Tokens */
155    --shadow-card: var(--shadow-1);
156    --shadow-card-hover: var(--shadow-2);
157    --shadow-dropdown: var(--shadow-2);
158    --shadow-popover: var(--shadow-3);
159    --shadow-modal: var(--shadow-4);
160    --shadow-tooltip: var(--shadow-4);
161    --shadow-overlay: var(--shadow-5);
162  }
163  
164  /* =============================================================================
165     BUTTON COMPONENT TOKENS
166     ============================================================================= */
167  
168  :root {
169    /* Button Base */
170    --btn-font-weight: var(--font-medium);
171    --btn-transition: all 0.15s ease;
172  
173    /* Sizes */
174    --btn-height-sm: 32px;
175    --btn-height-md: 40px;
176    --btn-height-lg: 48px;
177  
178    --btn-font-size-sm: var(--text-caption);
179    --btn-font-size-md: var(--text-body-sm);
180    --btn-font-size-lg: var(--text-body);
181  
182    --btn-padding-x-sm: var(--space-3);
183    --btn-padding-x-md: var(--space-md);
184    --btn-padding-x-lg: var(--space-lg);
185  
186    --btn-radius-sm: var(--radius-sm);
187    --btn-radius-md: var(--radius-md);
188    --btn-radius-lg: var(--radius-lg);
189  
190    /* Primary Button Text */
191    --btn-primary-text: #FFFFFF;
192    --btn-primary-shadow-hover: var(--glow-alpha);
193  
194    /* Secondary */
195    --btn-secondary-bg: transparent;
196    --btn-secondary-border: var(--border-default);
197    --btn-secondary-text: var(--text-primary);
198  
199    /* Ghost */
200    --btn-ghost-bg: transparent;
201    --btn-ghost-bg-hover: var(--bg-tertiary);
202    --btn-ghost-text: var(--text-secondary);
203    --btn-ghost-text-hover: var(--text-primary);
204  
205    /* Destructive */
206    --btn-destructive-bg: var(--error);
207    --btn-destructive-bg-hover: var(--error-hover);
208    --btn-destructive-bg-active: var(--error-active);
209    --btn-destructive-text: #FFFFFF;
210    --btn-destructive-shadow-hover: 0 4px 16px rgba(239,68,68,0.2);
211  
212    /* Success */
213    --btn-success-bg: var(--success);
214    --btn-success-bg-hover: var(--success-hover);
215    --btn-success-bg-active: var(--success-active);
216    --btn-success-text: #FFFFFF;
217    --btn-success-shadow-hover: 0 4px 16px rgba(34,197,94,0.2);
218  }
219  
220  /* Delta Chain Button Context Override */
221  [data-chain="delta"] {
222    --btn-primary-shadow-hover: var(--glow-delta);
223  }
224  
225  /* =============================================================================
226     INPUT COMPONENT TOKENS
227     ============================================================================= */
228  
229  :root {
230    /* Input Base */
231    --input-bg: var(--bg-tertiary);
232    --input-border: var(--border-default);
233    --input-border-hover: var(--border-strong);
234    --input-text: var(--text-primary);
235    --input-placeholder: var(--text-tertiary);
236    --input-transition: all 0.15s ease;
237  
238    /* Sizes */
239    --input-height-sm: 36px;
240    --input-height-md: 44px;
241    --input-height-lg: 52px;
242  
243    --input-font-size-sm: var(--text-body-sm);
244    --input-font-size-md: var(--text-body-sm);
245    --input-font-size-lg: var(--text-body);
246  
247    /* States */
248    --input-border-error: var(--error);
249    --input-border-success: var(--success);
250    --input-focus-ring: var(--focus-ring-alpha);
251    --input-focus-ring-error: var(--focus-ring-error);
252    --input-focus-ring-success: var(--focus-ring-success);
253  
254    /* Disabled */
255    --input-disabled-opacity: 0.5;
256  }
257  
258  /* Delta Chain Input Context Override */
259  [data-chain="delta"] {
260    --input-focus-ring: var(--focus-ring-delta);
261  }
262  
263  /* =============================================================================
264     ANIMATION & TRANSITIONS
265     ============================================================================= */
266  
267  :root {
268    /* Durations */
269    --duration-instant: 0ms;
270    --duration-fast: 100ms;
271    --duration-normal: 150ms;
272    --duration-slow: 300ms;
273    --duration-slower: 500ms;
274  
275    /* Easings */
276    --ease-default: ease;
277    --ease-in: ease-in;
278    --ease-out: ease-out;
279    --ease-in-out: ease-in-out;
280    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
281  
282    /* Common Transitions */
283    --transition-colors: color var(--duration-normal) var(--ease-default),
284                         background-color var(--duration-normal) var(--ease-default),
285                         border-color var(--duration-normal) var(--ease-default);
286    --transition-shadow: box-shadow var(--duration-normal) var(--ease-default);
287    --transition-transform: transform var(--duration-normal) var(--ease-default);
288    --transition-all: all var(--duration-normal) var(--ease-default);
289  
290    /* Interactive States */
291    --hover-lift: translateY(-1px);
292    --hover-lift-sm: translateY(-2px);
293    --active-press: scale(0.98);
294    --active-press-sm: scale(0.96);
295  }
296  
297  /* =============================================================================
298     UTILITY CLASSES
299     ============================================================================= */
300  
301  /* Chain Context */
302  .chain-alpha { --chain-primary: var(--alpha-500); --chain-glow: var(--glow-alpha); }
303  .chain-delta { --chain-primary: var(--delta-500); --chain-glow: var(--glow-delta); }
304  
305  /* Text Utilities */
306  .text-display { font-size: var(--text-display); line-height: var(--leading-display); font-weight: var(--font-bold); letter-spacing: var(--tracking-tighter); }
307  .text-h1 { font-size: var(--text-h1); line-height: var(--leading-heading); font-weight: var(--font-bold); letter-spacing: var(--tracking-tighter); }
308  .text-h2 { font-size: var(--text-h2); line-height: var(--leading-heading); font-weight: var(--font-bold); letter-spacing: var(--tracking-tight); }
309  .text-h3 { font-size: var(--text-h3); line-height: var(--leading-snug); font-weight: var(--font-semibold); letter-spacing: var(--tracking-tight); }
310  .text-h4 { font-size: var(--text-h4); line-height: var(--leading-snug); font-weight: var(--font-semibold); }
311  .text-body-lg { font-size: var(--text-body-lg); line-height: var(--leading-relaxed); }
312  .text-body { font-size: var(--text-body); line-height: var(--leading-relaxed); }
313  .text-body-sm { font-size: var(--text-body-sm); line-height: var(--leading-normal); }
314  .text-caption { font-size: var(--text-caption); line-height: var(--leading-normal); font-weight: var(--font-medium); letter-spacing: var(--tracking-wide); }
315  .text-mono { font-family: var(--font-mono); font-size: var(--text-mono); }
316  .text-mono-sm { font-family: var(--font-mono); font-size: var(--text-mono-sm); }
317  
318  /* Color Utilities */
319  .text-primary { color: var(--text-primary); }
320  .text-secondary { color: var(--text-secondary); }
321  .text-tertiary { color: var(--text-tertiary); }
322  .text-alpha { color: var(--alpha-500); }
323  .text-delta { color: var(--delta-500); }
324  .text-success { color: var(--success); }
325  .text-error { color: var(--error); }
326  
327  .bg-primary { background-color: var(--bg-primary); }
328  .bg-secondary { background-color: var(--bg-secondary); }
329  .bg-tertiary { background-color: var(--bg-tertiary); }
330  .bg-elevated { background-color: var(--bg-elevated); }
331  
332  /* Border Utilities */
333  .border-subtle { border-color: var(--border-subtle); }
334  .border-default { border-color: var(--border-default); }
335  .border-strong { border-color: var(--border-strong); }
336  
337  /* Shadow Utilities */
338  .shadow-card { box-shadow: var(--shadow-1); }
339  .shadow-card-hover { box-shadow: var(--shadow-2); }
340  .glow-alpha { box-shadow: var(--glow-alpha); }
341  .glow-delta { box-shadow: var(--glow-delta); }
342  
343  /* Radius Utilities */
344  .rounded-card { border-radius: var(--radius-card); }
345  .rounded-card-sm { border-radius: var(--radius-card-sm); }
346  .rounded-card-lg { border-radius: var(--radius-card-lg); }
347  
348  /* =============================================================================
349     CARD SYSTEM
350     ============================================================================= */
351  
352  /* Card Base */
353  .card {
354    background: var(--bg-elevated);
355    border: 1px solid var(--border-subtle);
356    border-radius: var(--radius-card);
357    padding: var(--card-padding);
358    box-shadow: var(--shadow-card);
359    transition: var(--transition-all);
360  }
361  
362  .card-sm { padding: var(--card-padding-sm); }
363  .card-lg { padding: var(--card-padding-lg); }
364  
365  /* Interactive Card */
366  .card-interactive {
367    cursor: pointer;
368  }
369  .card-interactive:hover {
370    box-shadow: var(--shadow-card-hover);
371    transform: var(--hover-lift-sm);
372  }
373  
374  /* Featured Card - with chain glow */
375  .card-featured[data-chain="alpha"] {
376    border-color: rgba(43, 135, 255, 0.4);
377  }
378  .card-featured[data-chain="alpha"]:hover {
379    box-shadow: var(--glow-alpha);
380  }
381  .card-featured[data-chain="delta"] {
382    border-color: rgba(245, 158, 11, 0.4);
383  }
384  .card-featured[data-chain="delta"]:hover {
385    box-shadow: var(--glow-delta);
386  }
387  
388  /* Selected Card */
389  .card-selected[data-chain="alpha"] {
390    border-color: var(--alpha-500);
391    box-shadow: var(--glow-alpha);
392  }
393  .card-selected[data-chain="delta"] {
394    border-color: var(--delta-500);
395    box-shadow: var(--glow-delta);
396  }
397  
398  /* Disabled Card */
399  .card-disabled {
400    opacity: 0.5;
401    pointer-events: none;
402  }
403  
404  /* Card Anatomy */
405  .card-header {
406    padding: var(--card-padding);
407    border-bottom: 1px solid var(--border-subtle);
408    display: flex;
409    align-items: center;
410    justify-content: space-between;
411  }
412  
413  .card-body {
414    padding: var(--card-padding);
415  }
416  
417  .card-footer {
418    padding: var(--card-padding);
419    border-top: 1px solid var(--border-subtle);
420    background: var(--bg-secondary);
421  }
422  
423  /* Stat Card */
424  .stat-card-label {
425    font-size: var(--text-caption);
426    text-transform: uppercase;
427    letter-spacing: var(--tracking-wide);
428    color: var(--text-tertiary);
429    margin-bottom: var(--space-sm);
430  }
431  .stat-card-value {
432    font-size: var(--text-h2);
433    font-weight: var(--font-bold);
434    font-family: var(--font-mono);
435  }
436  .stat-card-change {
437    font-size: var(--text-body-sm);
438    font-family: var(--font-mono);
439  }
440  .stat-card-change.positive { color: var(--success); }
441  .stat-card-change.negative { color: var(--error); }
442  
443  /* List Item Card */
444  .list-item-card {
445    padding: var(--space-md);
446    border-radius: var(--radius-lg);
447  }
448  
449  /* Transaction Card Icon */
450  .tx-icon {
451    width: 40px;
452    height: 40px;
453    border-radius: var(--radius-lg);
454    display: flex;
455    align-items: center;
456    justify-content: center;
457  }
458  .tx-icon[data-chain="alpha"] {
459    background: rgba(43, 135, 255, 0.1);
460    color: var(--alpha-500);
461  }
462  .tx-icon[data-chain="delta"] {
463    background: rgba(245, 158, 11, 0.1);
464    color: var(--delta-500);
465  }
466  
467  /* =============================================================================
468     CONTAINER PATTERNS
469     ============================================================================= */
470  
471  /* Page Container */
472  .page-container {
473    max-width: var(--container-desktop);
474    margin: 0 auto;
475    padding: var(--page-padding);
476  }
477  @media (max-width: 768px) {
478    .page-container { padding: var(--page-padding-mobile); }
479  }
480  
481  /* Section */
482  .section {
483    margin-bottom: var(--section-gap);
484  }
485  .section-header {
486    display: flex;
487    align-items: center;
488    justify-content: space-between;
489    margin-bottom: var(--space-lg);
490  }
491  .section-title {
492    font-size: var(--text-h4);
493    font-weight: var(--font-semibold);
494  }
495  
496  /* Sidebar */
497  .sidebar {
498    width: 280px;
499    background: var(--bg-secondary);
500    border-right: 1px solid var(--border-subtle);
501    padding: var(--space-lg);
502  }
503  
504  /* Modal */
505  .modal-backdrop {
506    position: fixed;
507    inset: 0;
508    background: rgba(0, 0, 0, 0.6);
509    z-index: var(--z-modal-backdrop);
510  }
511  .modal {
512    position: fixed;
513    top: 50%;
514    left: 50%;
515    transform: translate(-50%, -50%);
516    width: 100%;
517    max-width: 448px;
518    background: var(--bg-elevated);
519    border-radius: var(--radius-modal);
520    border: 1px solid var(--border-subtle);
521    box-shadow: var(--shadow-modal);
522    padding: var(--space-xl);
523    z-index: var(--z-modal);
524  }
525  
526  /* Dropdown */
527  .dropdown {
528    min-width: 192px;
529    background: var(--bg-elevated);
530    border: 1px solid var(--border-subtle);
531    border-radius: var(--radius-dropdown);
532    box-shadow: var(--shadow-dropdown);
533    padding: var(--space-sm) 0;
534    z-index: var(--z-dropdown);
535  }
536  .dropdown-item {
537    padding: var(--space-sm) var(--space-md);
538    font-size: var(--text-body-sm);
539    color: var(--text-secondary);
540    cursor: pointer;
541    transition: var(--transition-colors);
542  }
543  .dropdown-item:hover {
544    background: var(--bg-tertiary);
545  }
546  .dropdown-item.danger {
547    color: var(--error);
548  }
549  
550  /* =============================================================================
551     LOADING & EMPTY STATES
552     ============================================================================= */
553  
554  /* Skeleton */
555  .skeleton {
556    background: var(--bg-tertiary);
557    border-radius: var(--radius-md);
558    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
559  }
560  @keyframes pulse {
561    0%, 100% { opacity: 1; }
562    50% { opacity: 0.5; }
563  }
564  
565  /* Empty State */
566  .empty-state {
567    text-align: center;
568    padding: var(--space-2xl) var(--space-lg);
569  }
570  .empty-state-icon {
571    width: 64px;
572    height: 64px;
573    margin: 0 auto var(--space-md);
574    background: var(--bg-tertiary);
575    border-radius: var(--radius-2xl);
576    display: flex;
577    align-items: center;
578    justify-content: center;
579    font-size: 24px;
580  }