import tailwindcssContainerQueries from '@tailwindcss/container-queries'
import type { Config } from 'tailwindcss'
import defaultTheme from 'tailwindcss/defaultTheme'
import tailwindcssAnimate from 'tailwindcss-animate'

const toRGBA = (customPropertyName: string) => `color-mix(
  in srgb,
  ${customPropertyName},
  transparent calc(100% - 100% * <alpha-value>)
)`

export default {
  darkMode: ['class'],
  content: [
    './src/**/*.{html,js,jsx,md,mdx,ts,tsx}',
    'node_modules/@chainlink/blocks/**/*.{ts,tsx}',
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter', ...defaultTheme.fontFamily.sans],
        mono: ['DM Mono', ...defaultTheme.fontFamily.mono],
        display: ['TASAOrbiterDisplay', ...defaultTheme.fontFamily.sans],
      },
      colors: {
        background: {
          DEFAULT: toRGBA('var(--background)'),
          alt: toRGBA('var(--background-alt)'),
        },

        foreground: {
          DEFAULT: toRGBA('var(--foreground)'),
        },

        link: toRGBA('var(--link)'),
        brand: toRGBA('var(--brand)'),

        muted: {
          DEFAULT: toRGBA('var(--muted)'),
          more: toRGBA('var(--muted-more)'),
          foreground: toRGBA('var(--muted-foreground)'),
          'more-foreground': toRGBA('var(--muted-more-foreground)'),
          'on-surface': toRGBA('var(--muted-on-surface)'),
          'on-popover': toRGBA('var(--muted-on-popover)'),
        },

        border: {
          DEFAULT: toRGBA('var(--border)'),
          muted: toRGBA('var(--border-muted)'),
          hover: toRGBA('var(--border-hover)'),
          active: toRGBA('var(--border-active)'),
        },

        input: {
          DEFAULT: toRGBA('var(--input)'),
          disabled: toRGBA('var(--input-disabled)'),
          border: toRGBA('var(--input-border)'),
          'border-disabled': toRGBA('var(--input-border-disabled)'),
          'border-hover': toRGBA('var(--input-border-hover)'),
          'border-active': toRGBA('var(--input-border-active)'),
          'border-error': toRGBA('var(--input-border-error)'),
          foreground: toRGBA('var(--input-foreground)'),
          'muted-foreground': toRGBA('var(--input-muted-foreground)'),
          'muted-more-foreground': toRGBA('var(--input-muted-more-foreground)'),
        },

        primary: {
          DEFAULT: toRGBA('var(--primary)'),
          hover: toRGBA('var(--primary-hover)'),
          disabled: toRGBA('var(--primary-disabled)'),
          foreground: toRGBA('var(--primary-foreground)'),
          'disabled-foreground': toRGBA('var(--primary-disabled-foreground)'),
        },

        secondary: {
          DEFAULT: toRGBA('var(--secondary)'),
          border: toRGBA('var(--secondary-border)'),
          'border-hover': toRGBA('var(--secondary-border-hover)'),
          'border-disabled': toRGBA('var(--secondary-border-disabled)'),
          foreground: toRGBA('var(--secondary-foreground)'),
          'disabled-foreground': toRGBA('var(--secondary-disabled-foreground)'),
        },

        tertiary: {
          DEFAULT: toRGBA('var(--tertiary)'),
          border: toRGBA('var(--tertiary-border)'),
          'border-hover': toRGBA('var(--tertiary-border-hover)'),
          'border-disabled': toRGBA('var(--tertiary-border-disabled)'),
          foreground: toRGBA('var(--tertiary-foreground)'),
          'disabled-foreground': toRGBA('var(--tertiary-disabled-foreground)'),
        },

        ghost: {
          DEFAULT: toRGBA('var(--ghost)'),
          hover: toRGBA('var(--ghost-hover)'),
          disabled: toRGBA('var(--ghost-disabled)'),
          foreground: toRGBA('var(--ghost-foreground)'),
          'disabled-foreground': toRGBA('var(--ghost-disabled-foreground)'),
        },

        success: {
          DEFAULT: toRGBA('var(--success)'),
          muted: toRGBA('var(--success-muted)'),
          border: toRGBA('var(--success-border)'),
          foreground: toRGBA('var(--success-foreground)'),
          'muted-foreground': toRGBA('var(--success-muted-foreground)'),
        },

        warning: {
          DEFAULT: toRGBA('var(--warning)'),
          muted: toRGBA('var(--warning-muted)'),
          border: toRGBA('var(--warning-border)'),
          foreground: toRGBA('var(--warning-foreground)'),
          'muted-foreground': toRGBA('var(--warning-muted-foreground)'),
        },

        error: {
          DEFAULT: toRGBA('var(--error)'),
          muted: toRGBA('var(--error-muted)'),
          border: toRGBA('var(--error-border)'),
          foreground: toRGBA('var(--error-foreground)'),
          'muted-foreground': toRGBA('var(--error-muted-foreground)'),
        },

        progress: {
          DEFAULT: toRGBA('var(--progress)'),
          muted: toRGBA('var(--progress-muted)'),
          border: toRGBA('var(--progress-border)'),
          foreground: toRGBA('var(--progress-foreground)'),
          'muted-foreground': toRGBA('var(--progress-muted-foreground)'),
        },

        card: {
          DEFAULT: toRGBA('var(--card)'),
          alt: toRGBA('var(--card-alt)'),
          border: toRGBA('var(--card-border)'),
          foreground: toRGBA('var(--card-foreground)'),
          'muted-foreground': toRGBA('var(--card-muted-foreground)'),
          'icon-background': toRGBA('var(--card-icon-background)'),
        },

        toggle: {
          on: toRGBA('var(--toggle-on)'),
          off: toRGBA('var(--toggle-off)'),
        },

        counter: {
          DEFAULT: toRGBA('var(--counter)'),
          foreground: toRGBA('var(--counter-foreground)'),
        },

        popover: {
          DEFAULT: toRGBA('var(--popover)'),
          foreground: toRGBA('var(--popover-foreground)'),
          'muted-foreground': toRGBA('var(--popover-muted-foreground)'),
        },

        destructive: {
          DEFAULT: toRGBA('var(--destructive)'),
          hover: toRGBA('var(--destructive-hover)'),
          disabled: toRGBA('var(--destructive-disabled)'),
          foreground: toRGBA('var(--destructive-foreground)'),
          'disabled-foreground': toRGBA(
            'var(--destructive-disabled-foreground)',
          ),
        },

        'side-panel-button': {
          DEFAULT: toRGBA('var(--side-panel-button)'),
          foreground: toRGBA('var(--side-panel-button-foreground)'),
          'muted-foreground': toRGBA(
            'var(--side-panel-button-muted-foreground)',
          ),
        },

        'segment-button': {
          active: toRGBA('var(--segment-button-active)'),
          border: toRGBA('var(--segment-button-border)'),
          foreground: toRGBA('var(--segment-button-foreground)'),
          'active-foreground': toRGBA(
            'var(--segment-button-active-foreground)',
          ),
          background: toRGBA('var(--segment-button-background)'),
          'background-hover': toRGBA('var(--segment-button-background-hover)'),
        },

        'platform-navigation': {
          active: toRGBA('var(--platform-navigation-active)'),
          hover: toRGBA('var(--platform-navigation-hover)'),
          foreground: toRGBA('var(--platform-navigation-foreground)'),
          'muted-foreground': toRGBA(
            'var(--platform-navigation-muted-foreground)',
          ),
          'muted-more-foreground': toRGBA(
            'var(--platform-navigation-muted-more-foreground)',
          ),
          'active-foreground': toRGBA(
            'var(--platform-navigation-active-foreground)',
          ),
          'active-brand-foreground': toRGBA(
            'var(--platform-navigation-active-brand-foreground)',
          ),
          'hover-foreground': toRGBA(
            'var(--platform-navigation-hover-foreground)',
          ),
        },

        ring: toRGBA('var(--ring)'),
        accent: toRGBA('var(--accent)'),

        'stepper-counter': {
          active: toRGBA('var(--stepper-counter-active)'),
          'track-active': toRGBA('var(--stepper-counter-track-active)'),
          done: toRGBA('var(--stepper-counter-done)'),
          'pending-background': toRGBA(
            'var(--stepper-counter-pending-background)',
          ),
          'pending-foreground': toRGBA(
            'var(--stepper-counter-pending-foreground)',
          ),
          error: toRGBA('var(--stepper-counter-error)'),
          foreground: toRGBA('var(--stepper-counter-foreground)'),
          'track-pending': toRGBA('var(--stepper-counter-track-pending)'),
        },

        pill: {
          DEFAULT: toRGBA('var(--pill)'),
          hover: toRGBA('var(--pill-hover)'),
          active: toRGBA('var(--pill-active)'),
          border: toRGBA('var(--pill-border)'),
          'border-hover': toRGBA('var(--pill-border-hover)'),
          foreground: toRGBA('var(--pill-foreground)'),
          'active-foreground': toRGBA('var(--pill-active-foreground)'),
        },

        'platform-ad': {
          DEFAULT: toRGBA('var(--platform-ad)'),
          border: toRGBA('var(--platform-ad-border)'),
          foreground: toRGBA('var(--platform-ad-foreground)'),
          link: toRGBA('var(--platform-ad-link)'),
          'link-hover': toRGBA('var(--platform-ad-link-hover)'),
        },

        chart: {
          blue: toRGBA('var(--chart-blue)'),
          green: toRGBA('var(--chart-green)'),
          yellow: toRGBA('var(--chart-yellow)'),
          purple: toRGBA('var(--chart-purple)'),
          teal: toRGBA('var(--chart-teal)'),
          orange: toRGBA('var(--chart-orange)'),
          red: toRGBA('var(--chart-red)'),
        },

        gray: {
          100: toRGBA('var(--gray-100)'),
          200: toRGBA('var(--gray-200)'),
          300: toRGBA('var(--gray-300)'),
          400: toRGBA('var(--gray-400)'),
          500: toRGBA('var(--gray-500)'),
          600: toRGBA('var(--gray-600)'),
          700: toRGBA('var(--gray-700)'),
          800: toRGBA('var(--gray-800)'),
          900: toRGBA('var(--gray-900)'),
        },
        green: {
          100: toRGBA('var(--green-100)'),
          200: toRGBA('var(--green-200)'),
          300: toRGBA('var(--green-300)'),
          400: toRGBA('var(--green-400)'),
          500: toRGBA('var(--green-500)'),
          600: toRGBA('var(--green-600)'),
          700: toRGBA('var(--green-700)'),
          800: toRGBA('var(--green-800)'),
          900: toRGBA('var(--green-900)'),
        },
        orange: {
          100: toRGBA('var(--orange-100)'),
          200: toRGBA('var(--orange-200)'),
          300: toRGBA('var(--orange-300)'),
          400: toRGBA('var(--orange-400)'),
          500: toRGBA('var(--orange-500)'),
          600: toRGBA('var(--orange-600)'),
          700: toRGBA('var(--orange-700)'),
          800: toRGBA('var(--orange-800)'),
          900: toRGBA('var(--orange-900)'),
        },
        red: {
          100: toRGBA('var(--red-100)'),
          200: toRGBA('var(--red-200)'),
          300: toRGBA('var(--red-300)'),
          400: toRGBA('var(--red-400)'),
          500: toRGBA('var(--red-500)'),
          600: toRGBA('var(--red-600)'),
          700: toRGBA('var(--red-700)'),
          800: toRGBA('var(--red-800)'),
          900: toRGBA('var(--red-900)'),
        },
        yellow: {
          100: toRGBA('var(--yellow-100)'),
          200: toRGBA('var(--yellow-200)'),
          300: toRGBA('var(--yellow-300)'),
          400: toRGBA('var(--yellow-400)'),
          500: toRGBA('var(--yellow-500)'),
          600: toRGBA('var(--yellow-600)'),
          700: toRGBA('var(--yellow-700)'),
          800: toRGBA('var(--yellow-800)'),
          900: toRGBA('var(--yellow-900)'),
        },
        blue: {
          100: toRGBA('var(--blue-100)'),
          200: toRGBA('var(--blue-200)'),
          300: toRGBA('var(--blue-300)'),
          400: toRGBA('var(--blue-400)'),
          500: toRGBA('var(--blue-500)'),
          600: toRGBA('var(--blue-600)'),
          700: toRGBA('var(--blue-700)'),
          800: toRGBA('var(--blue-800)'),
          900: toRGBA('var(--blue-900)'),
        },
      },
      screens: {
        sm: '480px',
        md: '768px',
        lg: '996px',
        xl: '1200px',
      },
      containers: {
        sm: '480px',
        md: '768px',
        lg: '996px',
        xl: '1200px',
      },
      spacing: {
        'page-header-height': 'var(--page-header-height)',
        'page-header-spacing': 'var(--page-header-spacing)',
      },
      fontSize: {
        xxs: '0.6875rem', // 11px
        xs: '0.75rem', // 12px
        sm: '0.875rem', // 14px
        base: '1rem', // 16px
        lg: '1.125rem', // 18px
        xl: '1.25rem', // 20px
        '2xl': '1.375rem', // 22px
        '3xl': '1.5rem', // 24px
        '4xl': '1.75rem', // 28px
        '5xl': '2.25rem', // 36px
        '6xl': '3rem', // 48px
        '7xl': '3.5rem', // 56px
        '8xl': '4rem', // 64px
        '9xl': '4.5rem', // 72px
        '10xl': '5rem', // 80px
        '11xl': '6rem', // 96px
      },
      lineHeight: {
        '3': '0.75rem', // 12px
        '4': '1rem', // 16px
        '5': '1.5rem', // 24px
        '6': '1.5rem', // 24px
        '7': '1.75rem', // 28px
        '8': '2rem', // 32px
        '9': '2.5rem', // 40px
        '10': '3.25rem', // 52px
        '11': '3.5rem', // 56px
        '12': '4rem', // 64px
        '13': '4.5rem', // 72px
        '14': '5rem', // 80px
        '15': '6rem', // 96px
      },
      keyframes: {
        shrink: {
          '100%': { transform: 'scaleX(0)' },
          '0%': { transform: 'scaleX(1)' },
        },
        'cube-rotate-in': {
          '0%': {
            transform: 'rotateX(135deg) rotateY(135deg) rotateZ(90deg)',
          },
          '100%': {
            transform: 'rotateX(0deg) rotateY(0deg) rotateZ(0deg)',
          },
        },
        'glitch-first': {
          '0%, 2%': { content: "'1'" },
          '4%': { transform: 'translateY(0px)' },
          '6%': { transform: 'translateY(10px)' },
          '20%': { transform: 'translateY(0)' },
          '3%, 100%': { content: "'4'" },
        },
        'glitch-middle': {
          '0%, 2%': { content: "'1'" },
          '3%, 5%': { content: "'0'" },
          '6%, 8%': { content: "'1'" },
          '9%, 100%': { content: "'0'" },
        },
        'glitch-last': {
          '0%, 2%': { content: "'0'" },
          '3%, 5%': { content: "'1'" },
          '6%, 100%': { content: "'4'" },
        },
      },
      animation: {
        shrink: 'shrink 8s linear forwards',
        'cube-rotate-in':
          'cube-rotate-in 3s cubic-bezier(0.19, 1, 0.22, 1) forwards',
        'glitch-first': 'glitch-first 5s infinite',
        'glitch-middle': 'glitch-middle 5s linear infinite',
        'glitch-last': 'glitch-last 5s linear infinite',
      },
    },
  },
  plugins: [tailwindcssAnimate, tailwindcssContainerQueries],
  corePlugins: {
    container: false,
  },
} as const satisfies Config