1  /**
 2   * ACDC Design System - Global Styles
 3   *
 4   * This file contains Tailwind directives and minimal base styles.
 5   * All design tokens are imported via design-tokens.css.
 6   */
 7  
 8  @tailwind base;
 9  @tailwind components;
10  @tailwind utilities;
11  
12  @layer base {
13    * {
14      border-color: var(--border-default);
15    }
16  
17    html {
18      -webkit-font-smoothing: antialiased;
19      -moz-osx-font-smoothing: grayscale;
20    }
21  
22    body {
23      font-family: var(--font-body);
24      background-color: var(--bg-primary);
25      color: var(--text-primary);
26      transition: background-color 200ms ease, color 200ms ease;
27    }
28  
29    /* Selection colors */
30    ::selection {
31      background-color: var(--alpha-200);
32      color: var(--alpha-900);
33    }
34  
35    .dark ::selection {
36      background-color: var(--alpha-700);
37      color: var(--alpha-100);
38    }
39  
40    /* Focus visible for keyboard navigation */
41    :focus-visible {
42      outline: 2px solid var(--alpha-500);
43      outline-offset: 2px;
44    }
45  
46    /* Remove focus outline for mouse users */
47    :focus:not(:focus-visible) {
48      outline: none;
49    }
50  }
51  
52  /* RTL Support */
53  [dir="rtl"] {
54    text-align: right;
55  }
56  
57  /* Reduced motion */
58  @media (prefers-reduced-motion: reduce) {
59    *,
60    *::before,
61    *::after {
62      animation-duration: 0.01ms !important;
63      animation-iteration-count: 1 !important;
64      transition-duration: 0.01ms !important;
65      scroll-behavior: auto !important;
66    }
67  }
68  
69  /* Scrollbar styling */
70  @layer utilities {
71    .scrollbar-thin {
72      scrollbar-width: thin;
73      scrollbar-color: var(--border-default) transparent;
74    }
75  
76    .scrollbar-thin::-webkit-scrollbar {
77      width: 6px;
78      height: 6px;
79    }
80  
81    .scrollbar-thin::-webkit-scrollbar-track {
82      background: transparent;
83    }
84  
85    .scrollbar-thin::-webkit-scrollbar-thumb {
86      background-color: var(--border-default);
87      border-radius: 3px;
88    }
89  
90    .scrollbar-thin::-webkit-scrollbar-thumb:hover {
91      background-color: var(--border-strong);
92    }
93  }