import animate from 'tailwindcss-animate';

/**
 * Hand-written, never CLI-generated. `shadcn add` rewrites this file and
 * strips every comment in it, so if you run the CLI, diff this file
 * afterwards and put the comments back.
 *
 * The palette is PIG's, inlined as literals rather than injected at runtime:
 * this site has no user-chosen accent, so a runtime theme layer would be a
 * moving part that buys nothing.
 */
/** @type {import('tailwindcss').Config} */
export default {
  darkMode: ['class', '[data-theme="dark"]'],
  content: ['./index.html', './src/**/*.{ts,tsx}'],
  theme: {
    extend: {
      colors: {
        bg: 'hsl(var(--bg))',
        background: 'hsl(var(--bg))',
        surface: 'hsl(var(--surface))',
        'surface-2': 'hsl(var(--surface-2))',
        border: 'hsl(var(--border))',
        input: 'hsl(var(--border))',
        ring: 'hsl(var(--accent))',
        fg: 'hsl(var(--fg))',
        foreground: 'hsl(var(--fg))',
        muted: 'hsl(var(--muted))',
        'muted-foreground': 'hsl(var(--muted))',
        // shadcn's `accent` is its SUBTLE hover surface, not the brand. Mapping
        // it to the brand paints a full-strength block on every hover state.
        accent: 'hsl(var(--accent-subtle))',
        'accent-foreground': 'hsl(var(--accent-fg))',
        brand: 'hsl(var(--accent))',
        'accent-fg': 'hsl(var(--accent-fg))',
        'accent-on': 'hsl(var(--accent-on))',
        'accent-subtle': 'hsl(var(--accent-subtle))',
        primary: { DEFAULT: 'hsl(var(--accent))', foreground: 'hsl(var(--accent-on))' },
        secondary: { DEFAULT: 'hsl(var(--surface-2))', foreground: 'hsl(var(--fg))' },
        card: { DEFAULT: 'hsl(var(--surface))', foreground: 'hsl(var(--fg))' },
        popover: { DEFAULT: 'hsl(var(--surface))', foreground: 'hsl(var(--fg))' },
        destructive: { DEFAULT: 'hsl(var(--danger))', foreground: 'hsl(0 0% 100%)' },
        positive: 'hsl(var(--positive))',
        warning: 'hsl(var(--warning))',
        danger: 'hsl(var(--danger))',
        info: 'hsl(var(--info))',
        // The board's three tile states. Named by MEANING, not by colour, so
        // the high-contrast palette can swap the values without renaming.
        tile: {
          exact: 'hsl(var(--tile-exact))',
          'exact-fg': 'hsl(var(--tile-exact-fg))',
          present: 'hsl(var(--tile-present))',
          'present-fg': 'hsl(var(--tile-present-fg))',
          absent: 'hsl(var(--tile-absent))',
          'absent-fg': 'hsl(var(--tile-absent-fg))',
        },
      },
      fontFamily: {
        sans: ['Manrope Variable', 'Avenir Next', 'ui-sans-serif', 'system-ui', 'sans-serif'],
        mono: ['ui-monospace', 'SFMono-Regular', 'Menlo', 'monospace'],
      },
      borderRadius: { md: '0.5rem', lg: '0.75rem', xl: '1rem' },
      transitionDuration: { 1: 'var(--dur-1)', 2: 'var(--dur-2)', 3: 'var(--dur-3)' },
      transitionTimingFunction: { enter: 'var(--ease-out)', exit: 'var(--ease-in)' },
      maxWidth: { canvas: '80rem' },
    },
  },
  plugins: [animate],
};