import type { Config } from 'tailwindcss'

const config: Config = {
  darkMode: ['class'],
  content: ['./index.html', './src/**/*.{ts,tsx}'],
  theme: {
    extend: {
      colors: {
        // ClickHouse design system tokens
        'volt':          '#faff69',  // neon yellow-green — primary CTA accent
        'volt-pale':     '#f4f692',  // active/pressed state text
        'forest':        '#166534',  // primary action button (Get Started)
        'forest-dark':   '#14572f',  // forest border variant
        'olive-dark':    '#161600',  // subtle brand text
        'border-olive':  '#4f5100', // ghost button borders
        // Surfaces
        'canvas':        '#000000',  // pure black background
        'near-black':    '#141414',  // button bg, elevated surfaces
        'hover-gray':    '#3a3a3a',  // button hover bg
        'charcoal':      '#414141',  // primary border (used at 80% opacity in CSS)
        'deep-charcoal': '#343434',  // subtle dividers
      },
      fontFamily: {
        display: ['Inter', 'system-ui', 'sans-serif'],
        body:    ['Inter', 'system-ui', 'sans-serif'],
        code:    ['Inconsolata', 'monospace'],
      },
      fontWeight: {
        black: '900',
      },
      borderRadius: {
        sharp: '4px',
        card:  '8px',
      },
      letterSpacing: {
        widest: '1.4px',
      },
    },
  },
  plugins: [],
}

export default config