import type {Config} from 'tailwindcss'

export default <Partial<Config>>{
    darkMode: 'class',
    theme: {
        extend: {
            fontFamily: {
                sans: ['"Helvetica Neue"', 'Helvetica', 'Arial', 'sans-serif']
            },
            colors: {
                primary: {
                    500: '#222783',
                },
                secondary: {
                    500: '#304998'
                },
                tertiary: {
                    500: '#F3F4F8'
                },
                blue: {
                    500: '#056CF2'
                },
                m: {
                    primary: 'rgb(var(--m-primary) / <alpha-value>)',
                    secondary: 'rgb(var(--m-secondary, 75 77 237) / <alpha-value>)',
                    tertiary: 'rgb(var(--m-tertiary, 243 244 248) / <alpha-value>)',
                    border: 'rgb(var(--m-border) / <alpha-value>)',
                    text: 'rgb(var(--m-text) / <alpha-value>)',
                    muted: 'rgb(var(--m-muted) / <alpha-value>)',
                    bg: 'rgb(var(--m-bg) / <alpha-value>)',
                    surface: 'rgb(var(--m-surface) / <alpha-value>)',
                    disabled: 'rgb(var(--m-disabled) / <alpha-value>)',
                    danger: 'rgb(var(--m-danger) / <alpha-value>)',
                    success: 'rgb(var(--m-success) / <alpha-value>)',
                    'btn-primary': 'rgb(var(--m-btn-primary) / <alpha-value>)',
                    'btn-primary-hover': 'rgb(var(--m-btn-primary-hover) / <alpha-value>)',
                    'btn-primary-active': 'rgb(var(--m-btn-primary-active) / <alpha-value>)',
                    'btn-secondary': 'rgb(var(--m-btn-secondary) / <alpha-value>)',
                    'btn-secondary-hover': 'rgb(var(--m-btn-secondary-hover) / <alpha-value>)',
                    'btn-secondary-active': 'rgb(var(--m-btn-secondary-active) / <alpha-value>)',
                    'btn-danger': 'rgb(var(--m-btn-danger) / <alpha-value>)',
                    'btn-danger-hover': 'rgb(var(--m-btn-danger-hover) / <alpha-value>)',
                    'btn-danger-active': 'rgb(var(--m-btn-danger-active) / <alpha-value>)',
                }
            }
        }
    }
}