/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      fontFamily: {
        sans: ['Geist', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'sans-serif'],
        mono: ['Geist Mono', 'ui-monospace', 'SFMono-Regular', 'Menlo', 'monospace'],
      },
      fontSize: {
        '2xs': ['11px', '14px'],
        xs: ['12px', '16px'],
        sm: ['14px', '20px'],
        base: ['16px', '24px'],
        lg: ['18px', '26px'],
        xl: ['24px', '32px'],
        '2xl': ['32px', '40px'],
      },
      colors: {
        bg0: 'var(--ethos-bg0)',
        bg1: 'var(--ethos-bg1)',
        bg2: 'var(--ethos-bg2)',
        surface0: 'var(--ethos-surface0)',
        surface1: 'var(--ethos-surface1)',
        surface2: 'var(--ethos-surface2)',
        border: 'var(--ethos-border)',
        text: 'var(--ethos-text)',
        secondary: 'var(--ethos-secondary)',
        muted: 'var(--ethos-muted)',
        disabled: 'var(--ethos-disabled)',
        accent: 'var(--ethos-accent)',
        'accent-h': 'var(--ethos-accent-hover)',
        green: 'var(--ethos-green)',
        amber: 'var(--ethos-amber)',
        red: 'var(--ethos-red)',
        purple: 'var(--ethos-purple)',
        cyan: 'var(--ethos-cyan)',
        orange: 'var(--ethos-orange)',
        'on-accent': 'var(--ethos-on-accent)',
      },
      borderRadius: {
        DEFAULT: '8px',
        sm: '4px',
        md: '8px',
        lg: '12px',
        xl: '16px',
        full: '9999px',
      },
      spacing: {
        0.5: '4px',
        1: '8px',
        1.5: '12px',
        2: '16px',
        2.5: '20px',
        3: '24px',
        4: '32px',
        5: '40px',
        6: '48px',
        7: '56px',
        8: '64px',
      },
      animation: {
        'fade-in': 'fadeIn 150ms ease both',
        'rise': 'rise 150ms ease both',
        'slide-in': 'slideIn 150ms ease both',
      },
      keyframes: {
        fadeIn: {
          '0%': { opacity: '0' },
          '100%': { opacity: '1' },
        },
        rise: {
          '0%': { opacity: '0', transform: 'translateY(6px)' },
          '100%': { opacity: '1', transform: 'translateY(0)' },
        },
        slideIn: {
          '0%': { opacity: '0', transform: 'translateX(8px)' },
          '100%': { opacity: '1', transform: 'translateX(0)' },
        },
      },
    },
  },
  plugins: [],
};