import type { Config } from 'tailwindcss';

const config: Config = {
  darkMode: 'class',
  content: ['./src/**/*.{ts,tsx}'],
  theme: {
    extend: {
      colors: {
        paper: 'rgb(var(--color-paper) / <alpha-value>)',
        ink: 'rgb(var(--color-ink) / <alpha-value>)',
        line: 'rgb(var(--color-line) / <alpha-value>)',
        surface: 'rgb(var(--color-surface) / <alpha-value>)',
        splash: {
          orange: '#F5871F',
          pink: '#E5227E',
          blue: '#1EA7E0',
          purple: '#5B2C86',
        },
        clay: {
          DEFAULT: '#C9683F',
          dark: '#A24F2C',
        },
        muted: 'rgb(var(--color-muted) / <alpha-value>)',
      },
      fontFamily: {
        display: ['var(--font-fraunces)', 'serif'],
        script: ['var(--font-script)', 'cursive'],
        body: ['var(--font-inter)', 'sans-serif'],
        mono: ['var(--font-mono)', 'monospace'],
      },
      backgroundImage: {
        splash: 'linear-gradient(90deg, #F5871F 0%, #E5227E 35%, #1EA7E0 70%, #5B2C86 100%)',
      },
      borderRadius: {
        none: '0px',
        sm: '2px',
        DEFAULT: '3px',
      },
      letterSpacing: {
        tag: '0.14em',
      },
    },
  },
  plugins: [],
};

export default config;