/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {
      // Color tokens are CSS variables (defined per-theme in src/index.css)
      // rather than literal hex values, so switching the document's
      // `data-theme` re-themes every existing utility class with no markup
      // changes. The `:root` block in index.css holds the default (Classic)
      // palette; see src/lib/theme.js for the theme registry.
      colors: {
        surface: 'var(--color-surface)',
        'surface-raised': 'var(--color-surface-raised)',
        'surface-sunken': 'var(--color-surface-sunken)',
        border: 'var(--color-border)',
        'text-primary': 'var(--color-text-primary)',
        'text-secondary': 'var(--color-text-secondary)',
        accent: 'var(--color-accent)',
        'accent-hover': 'var(--color-accent-hover)',
        'accent-warm': 'var(--color-accent-warm)',
        'on-accent-warm': 'var(--color-on-accent-warm)',
        danger: 'var(--color-danger)',
      },
      fontFamily: {
        display: ['DM Sans', 'sans-serif'],
        body: ['Inter', 'sans-serif'],
      },
    },
  },
  plugins: [],
}