import type { Config } from 'tailwindcss';

const config: Config = {
  content: [
    './src/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      colors: {
        theme: {
          DEFAULT: 'rgb(var(--theme-color-rgb) / <alpha-value>)',
          hover: 'var(--theme-color-hover)',
          light: 'var(--theme-color-light)',
          border: 'var(--theme-color-border)',
        },
        primary: {
          DEFAULT: 'rgb(var(--theme-color-rgb) / <alpha-value>)',
          hover: 'var(--theme-color-hover)',
          light: 'var(--theme-color-light)',
          border: 'var(--theme-color-border)',
        },
        shopify: {
          green: '#008060',
          dark: '#004c3f',
          surface: '#f6f6f7',
          border: '#e1e3e5',
          text: '#202223',
          subdued: '#6d7175',
        },
        meta: {
          blue: '#0081FB',
          dark: '#0064E0',
          light: '#E7F3FF',
          accent: '#1877F2',
        },
      },
      boxShadow: {
        '2xs': '0 1px 2px 0 rgba(0, 0, 0, 0.03)',
        'xs': '0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px -1px rgba(0, 0, 0, 0.05)',
      },
    },
  },
  plugins: [],
};

export default config;