1  /** @type {import('tailwindcss').Config} */
 2  export default {
 3    content: ['./src/**/*.{html,js,svelte,ts}'],
 4    theme: {
 5      extend: {
 6        // C64-era inspired color palette derived from logo
 7        colors: {
 8          // Primary: Dark teal background
 9          mnemonic: {
10            bg: '#0d3d3d',
11            'bg-light': '#145454',
12            'bg-dark': '#072929',
13          },
14          // Accent: Amber/orange from logo
15          phosphor: {
16            DEFAULT: '#d9892e',
17            light: '#e9a854',
18            dark: '#b66f1a',
19            glow: '#f5c06d',
20          },
21          // Semantic colors maintaining the retro feel
22          surface: {
23            DEFAULT: '#0d3d3d',
24            raised: '#145454',
25            sunken: '#072929',
26            overlay: 'rgba(13, 61, 61, 0.95)',
27          },
28          // Text colors
29          text: {
30            primary: '#d9892e',
31            secondary: '#a3bfbf',
32            muted: '#6b8f8f',
33            inverse: '#0d3d3d',
34          },
35          // Status colors (keeping retro feel)
36          status: {
37            success: '#4ade80',
38            warning: '#fbbf24',
39            error: '#f87171',
40            info: '#60a5fa',
41          },
42        },
43        fontFamily: {
44          mono: [
45            'Berkeley Mono',
46            'JetBrains Mono',
47            'Fira Code',
48            'Consolas',
49            'monospace',
50          ],
51          display: ['Berkeley Mono', 'monospace'],
52        },
53        boxShadow: {
54          phosphor: '0 0 10px rgba(217, 137, 46, 0.3)',
55          'phosphor-lg': '0 0 20px rgba(217, 137, 46, 0.4)',
56          'inner-phosphor': 'inset 0 0 10px rgba(217, 137, 46, 0.2)',
57        },
58        animation: {
59          'phosphor-pulse': 'phosphor-pulse 2s ease-in-out infinite',
60          'glow': 'glow 1.5s ease-in-out infinite alternate',
61        },
62        keyframes: {
63          'phosphor-pulse': {
64            '0%, 100%': { opacity: 1 },
65            '50%': { opacity: 0.85 },
66          },
67          glow: {
68            from: { boxShadow: '0 0 5px rgba(217, 137, 46, 0.2)' },
69            to: { boxShadow: '0 0 15px rgba(217, 137, 46, 0.4)' },
70          },
71        },
72      },
73    },
74    plugins: [require('@tailwindcss/forms')],
75  };