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)',
          // All accent TEXT and icons use this, on a tint or not (#3150,
          // #5318). The raw accent measures 1.97:1 on its own tint and 2.21 on
          // slate at worst; this measures 5.03 and 5.62. The raw accent stays
          // for borders, rings and fills, where it is a graphic, not text.
          fg: 'var(--fs-accent-fg)'
        },
        warning: { DEFAULT: 'var(--fs-warning)', fg: 'var(--fs-warning-fg)' },
        error: { DEFAULT: 'var(--fs-error)', fg: 'var(--fs-error-fg)' },
        info: { DEFAULT: 'var(--fs-info)', fg: 'var(--fs-info-fg)' }
      },
      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: []
};