/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ['class'],
  content: [
    './pages/**/*.{js,jsx}',
    './components/**/*.{js,jsx}',
    './app/**/*.{js,jsx}',
    './src/**/*.{js,jsx}',
    './ee/**/*.{js,jsx}',
  ],
  prefix: 'tw-',
  corePlugins: {
    preflight: false,
  },
  theme: {
    extend: {
      colors: {
        'page-default': 'var(--page-default)',
        'page-weak': 'var(--page-weak)',
        'background-surface-layer-01': 'var(--background-surface-layer-01)',
        'background-surface-layer-02': 'var(--background-surface-layer-02)',
        'background-surface-layer-03': 'var(--background-surface-layer-03)',
        'background-accent-strong': 'var(--background-accent-strong)',
        'background-accent-weak': 'var(--background-accent-weak)',
        'background-success-strong': 'var(--background-success-strong)',
        'background-success-weak': 'var(--background-success-weak)',
        'background-error-strong': 'var(--background-error-strong)',
        'background-error-weak': 'var(--background-error-weak)',
        'background-warning-stong': 'var(--background-warning-stong)',
        'background-warning-weak': 'var(--background-warning-weak)',
        'background-inverse': 'var(--background-inverse)',
        'text-default': 'var(--text-default)',
        'text-medium': 'var(--text-medium)',
        'text-placeholder': 'var(--text-placeholder)',
        'text-inverse': 'var(--text-inverse)',
        'text-brand': 'var(--text-brand)',
        'text-accent': 'var(--text-brand)',
        'text-selected': 'var(--text-selected)',
        'text-success': 'var(--text-success)',
        'text-warning': 'var(--text-warning)',
        'text-danger': 'var(--text-danger)',
        'text-on-solid': 'var(--text-on-solid)',
        'text-disabled': 'var(--text-disabled)',
        'text-disabled-on-solid': 'var(--text-disabled-on-solid)',
        'icon-strong': 'var(--icon-strong)',
        'icon-default': 'var(--icon-default)',
        'icon-weak': 'var(--icon-weak)',
        'icon-inverse': 'var(--icon-inverse)',
        'icon-on-solid': 'var(--icon-on-solid)',
        'icon-accent': 'var(--icon-accent)',
        'icon-brand': 'var(--icon-brand)',
        'icon-success': 'var(--icon-success)',
        'icon-warning': 'var(--icon-warning)',
        'icon-danger': 'var(--icon-danger)',
        'icon-disabled': 'var(--icon-disabled)',
        'border-strong': 'var(--border-strong)',
        'border-default': 'var(--border-default)',
        'border-weak': 'var(--border-weak)',
        'border-accent-strong': 'var(--border-accent-strong)',
        'border-accent-weak': 'var(--border-accent-weak)',
        'border-success-strong': 'var(--border-success-strong)',
        'border-success-weak': 'var(--border-success-weak)',
        'border-warning-strong': 'var(--border-warning-strong)',
        'border-warning-weak': 'var(--border-warning-weak)',
        'border-danger-strong': 'var(--border-danger-strong)',
        'border-danger-weak': 'var(--border-danger-weak)',
        'border-disabled': 'var(--border-disabled)',
        'interactive-weak': 'var(--interactive-weak)',
        'interactive-default': 'var(--interactive-default)',
        'interactive-hover': 'var(--interactive-hover)',
        'interactive-selected': 'var(--interactive-selected)',
        'interactive-disabled': 'var(--interactive-disabled)',
        'interactive-focus-outline': 'var(--interactive-focus-outline)',
        'interactive-focus-inner-shadow': 'var(--interactive-focus-inner-shadow)',
        'button-primary': 'var(--button-primary)',
        'button-primary-hover': 'var(--button-primary-hover)',
        'button-primary-pressed': 'var(--button-primary-pressed)',
        'button-primary-disabled': 'var(--button-primary-disabled)',
        'button-secondary': 'var(--button-secondary)',
        'button-secondary-hover': 'var(--button-secondary-hover)',
        'button-secondary-pressed': 'var(--button-secondary-pressed)',
        'button-secondary-disabled': 'var(--button-secondary-disabled)',
        'button-outline': 'var(--button-outline)',
        'button-outline-hover': 'var(--button-outline-hover)',
        'button-outline-pressed': 'var(--button-outline-pressed)',
        'button-outline-disabled': 'var(--button-outline-disabled)',
        'button-danger-primary': 'var(--button-danger-primary)',
        'button-danger-primary-hover': 'var(--button-danger-primary-hover)',
        'button-danger-primary-pressed': 'var(--button-danger-primary-pressed)',
        'button-danger-primary-disabled': 'var(--button-danger-primary-disabled)',
        'button-danger-secondary': 'var(--button-danger-secondary)',
        'button-danger-secondary-hover': 'var(--button-danger-secondary-hover)',
        'button-danger-secondary-pressed': 'var(--button-danger-secondary-pressed)',
        'button-danger-secondary-disabled': 'var(--button-danger-secondary-disabled)',
        'switch-tab': 'var(--switch-tab)',
        'switch-tag': 'var(--switch-tag)',
        'switch-background-off': 'var(--switch-background-off)',
        'switch-background-on': 'var(--switch-background-on)',
        'slider-handle': 'var(--slider-handle)',
        'slider-track': 'var(--slider-track)',
        'slider-fill': 'var(--slider-fill)',
      },
      boxShadow: {
        'interactive-focus-outline': ' 0px 0px 0px 2px var(--interactive-focus-outline)',
        'interactive-focus-outline-inset': 'inset 0px 0px 0px 2px #fff',
        'elevation-000': '0px 1px 0px 0px rgba(0, 0, 0, 0.10)',
        'elevation-100': '0px 1px 1px 0px rgba(48, 50, 51, 0.10), 0px 0px 1px 0px rgba(48, 50, 51, 0.05)',
        'elevation-200': '0px 2px 4px 0px rgba(48, 50, 51, 0.10), 0px 0px 1px 0px rgba(48, 50, 51, 0.05)',
        'elevation-300': '0px 4px 8px 0px rgba(48, 50, 51, 0.10), 0px 0px 1px 0px rgba(48, 50, 51, 0.05)',
        'elevation-400': '0px 8px 16px 0px rgba(48, 50, 51, 0.10), 0px 0px 1px 0px rgba(48, 50, 51, 0.05)',
        'elevation-500': '0px 16px 24px 0px rgba(48, 50, 51, 0.09), 0px 0px 1px 0px rgba(48, 50, 51, 0.05)',
        'elevation-600': '0px 24px 40px 0px rgba(48, 50, 51, 0.08), 0px 0px 1px 0px rgba(48, 50, 51, 0.05)',
        'elevation-700': '0px 32px 50px 0px rgba(48, 50, 51, 0.08), 0px 0px 1px 0px rgba(48, 50, 51, 0.05)',
      },
      fontSize: {
        sm: ['11px', '16px'],
        base: ['12px', '18px'],
        lg: ['14px', '20px'],
        xl: ['16px', '24px'],
      },
      fontWeight: {
        thin: '100',
        hairline: '100',
        extralight: '200',
        light: '300',
        normal: '400',
        medium: '500',
        semibold: '600',
        bold: '700',
        extrabold: '800',
        black: '900',
      },
    },
  },
  plugins: [require('tailwindcss-animate')],
};