1  /**
  2   * ACDC Design System - Tailwind Preset
  3   * Auto-generated from tokens/*.json - DO NOT EDIT MANUALLY
  4   *
  5   * Usage:
  6   *   import acdcPreset from '@acdc/design/tailwind'
  7   *   export default { presets: [acdcPreset], ... }
  8   */
  9  
 10  /** @type {import('tailwindcss').Config} */
 11  export default {
 12    content: [],
 13    darkMode: 'class',
 14  
 15    theme: {
 16      extend: {
 17        // === COLORS ===
 18        colors: {
 19          // Alpha Chain (Blue)
 20          alpha: {
 21                  "50": "#EBF4FF",
 22                  "100": "#D6E8FF",
 23                  "200": "#ADD1FF",
 24                  "300": "#75B3FF",
 25                  "400": "#4A9DFF",
 26                  "500": "#2B87FF",
 27                  "600": "#1A6FE8",
 28                  "700": "#1458CC",
 29                  "800": "#1048A8",
 30                  "900": "#0D3A85"
 31          },
 32          // Delta Chain (Amber)
 33          delta: {
 34                  "50": "#FFFBEB",
 35                  "100": "#FEF3C7",
 36                  "200": "#FDE68A",
 37                  "300": "#FCD34D",
 38                  "400": "#FBBF24",
 39                  "500": "#F59E0B",
 40                  "600": "#D97706",
 41                  "700": "#B45309",
 42                  "800": "#92400E",
 43                  "900": "#78350F"
 44          },
 45          // Semantic
 46          success: {
 47            DEFAULT: '#22C55E',
 48            hover: '#4ADE80',
 49            active: '#16A34A',
 50          },
 51          warning: {
 52            DEFAULT: '#F59E0B',
 53            hover: '#FBBF24',
 54            active: '#D97706',
 55          },
 56          error: {
 57            DEFAULT: '#EF4444',
 58            hover: '#F87171',
 59            active: '#DC2626',
 60          },
 61          info: {
 62            DEFAULT: '#3B82F6',
 63            hover: '#60A5FA',
 64            active: '#2563EB',
 65          },
 66          // Theme-aware (via CSS variables)
 67          bg: {
 68            primary: 'var(--bg-primary)',
 69            secondary: 'var(--bg-secondary)',
 70            tertiary: 'var(--bg-tertiary)',
 71            elevated: 'var(--bg-elevated)',
 72          },
 73          text: {
 74            primary: 'var(--text-primary)',
 75            secondary: 'var(--text-secondary)',
 76            tertiary: 'var(--text-tertiary)',
 77            muted: 'var(--text-muted)',
 78          },
 79          border: {
 80            subtle: 'var(--border-subtle)',
 81            DEFAULT: 'var(--border-default)',
 82            strong: 'var(--border-strong)',
 83          },
 84        },
 85  
 86        // === TYPOGRAPHY ===
 87        fontFamily: {
 88          sans: ['Inter, system-ui, -apple-system, sans-serif'],
 89          mono: ['JetBrains Mono, Consolas, Monaco, monospace'],
 90          display: ['Inter'],
 91        },
 92        fontSize: {
 93          xs: ['0.75rem', { lineHeight: '1rem' }],
 94          sm: ['0.875rem', { lineHeight: '1.25rem' }],
 95          base: ['1rem', { lineHeight: '1.5rem' }],
 96          lg: ['1.125rem', { lineHeight: '1.75rem' }],
 97          xl: ['1.25rem', { lineHeight: '1.75rem' }],
 98          '2xl': ['1.5rem', { lineHeight: '2rem' }],
 99          '3xl': ['1.875rem', { lineHeight: '2.25rem' }],
100          '4xl': ['2.25rem', { lineHeight: '2.5rem' }],
101          '5xl': ['3rem', { lineHeight: '1' }],
102          // Semantic sizes
103          display: ['56px', { lineHeight: '1.1', letterSpacing: '-0.02em', fontWeight: '700' }],
104          h1: ['40px', { lineHeight: '1.2', letterSpacing: '-0.02em', fontWeight: '700' }],
105          h2: ['32px', { lineHeight: '1.25', letterSpacing: '-0.01em', fontWeight: '700' }],
106          h3: ['24px', { lineHeight: '1.3', fontWeight: '600' }],
107          h4: ['20px', { lineHeight: '1.4', fontWeight: '600' }],
108          'body-lg': ['18px', { lineHeight: '1.6' }],
109          body: ['16px', { lineHeight: '1.6' }],
110          'body-sm': ['14px', { lineHeight: '1.5' }],
111          caption: ['12px', { lineHeight: '1.4', letterSpacing: '0.02em', fontWeight: '500' }],
112        },
113  
114        // === SPACING ===
115        spacing: {
116                "0": "0px",
117                "1": "4px",
118                "2": "8px",
119                "3": "12px",
120                "4": "16px",
121                "5": "20px",
122                "6": "24px",
123                "7": "28px",
124                "8": "32px",
125                "9": "36px",
126                "10": "40px",
127                "11": "44px",
128                "12": "48px",
129                "14": "56px",
130                "16": "64px",
131                "20": "80px",
132                "24": "96px",
133                "28": "112px",
134                "32": "128px",
135                "36": "144px",
136                "40": "160px",
137                "44": "176px",
138                "48": "192px",
139                "52": "208px",
140                "56": "224px",
141                "60": "240px",
142                "64": "256px",
143                "72": "288px",
144                "80": "320px",
145                "96": "384px",
146                "0.5": "2px",
147                "1.5": "6px",
148                "2.5": "10px",
149                "3.5": "14px"
150        },
151  
152        // === BORDER RADIUS ===
153        borderRadius: {
154          none: '0',
155          xs: '4px',
156          sm: '6px',
157          md: '8px',
158          lg: '12px',
159          xl: '16px',
160          '2xl': '24px',
161          full: '9999px',
162        },
163  
164        // === SHADOWS ===
165        boxShadow: {
166          1: 'var(--shadow-1)',
167          2: 'var(--shadow-2)',
168          3: 'var(--shadow-3)',
169          4: 'var(--shadow-4)',
170          5: 'var(--shadow-5)',
171          'glow-alpha': 'var(--glow-alpha)',
172          'glow-delta': 'var(--glow-delta)',
173          sm: '0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08)',
174          md: '0 4px 12px rgba(0,0,0,0.15), 0 2px 4px rgba(0,0,0,0.08)',
175          lg: '0 12px 24px rgba(0,0,0,0.18), 0 4px 8px rgba(0,0,0,0.08)',
176          xl: '0 20px 40px rgba(0,0,0,0.2), 0 8px 16px rgba(0,0,0,0.08)',
177        },
178  
179        // === Z-INDEX ===
180        zIndex: {
181          dropdown: '100',
182          sticky: '200',
183          fixed: '300',
184          'modal-backdrop': '400',
185          modal: '500',
186          popover: '600',
187          tooltip: '700',
188          toast: '800',
189          max: '9999',
190        },
191  
192        // === TRANSITIONS ===
193        transitionDuration: {
194          instant: '0ms',
195          fast: '150ms',
196          normal: '200ms',
197          slow: '300ms',
198        },
199  
200        // === ANIMATIONS ===
201        keyframes: {
202          pulse: {
203            '0%, 100%': { opacity: '1' },
204            '50%': { opacity: '0.5' },
205          },
206          'fade-in': {
207            '0%': { opacity: '0', transform: 'translateY(8px)' },
208            '100%': { opacity: '1', transform: 'translateY(0)' },
209          },
210        },
211        animation: {
212          pulse: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
213          'fade-in': 'fade-in 0.3s ease-out',
214        },
215      },
216    },
217  
218    plugins: [],
219  };