export default {
  content: ['./src/**/*.{html,js,ts,svelte}'],
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        background: 'var(--fs-obsidian)',
        surface: {
          DEFAULT: 'var(--fs-iron)',
          hover: 'var(--fs-slate)'
        },
        border: {
          DEFAULT: 'var(--fs-pewter)'
        },
        text: {
          primary: 'var(--fs-parchment)',
          secondary: 'var(--fs-vellum)',
          muted: 'var(--fs-ash)'
        },
        action: {
          primary: 'var(--fs-moss)',
          secondary: 'var(--fs-bronze)',
          destructive: 'var(--fs-oxblood)',
          fg: 'var(--fs-on-action)'
        },
        accent: {
          DEFAULT: 'var(--fs-accent)',
          tint: 'color-mix(in srgb, var(--fs-accent) 12%, transparent)'
        },
        warning: 'var(--fs-warning)',
        error: 'var(--fs-error)',
        info: 'var(--fs-info)'
      },
      borderRadius: {
        sm: 'var(--fs-radius-sm)',
        md: 'var(--fs-radius-md)',
        lg: 'var(--fs-radius-lg)',
        xl: 'var(--fs-radius-xl)'
      },
      fontFamily: {
        display: ['var(--fs-font-display)'],
        sans: ['var(--fs-font-body)'],
        mono: ['var(--fs-font-mono)']
      }
    }
  },
  plugins: []
};