import animate from 'tailwindcss-animate';

/** @type {import('tailwindcss').Config} */
export default {
  darkMode: ['class', '[data-theme="dark"]'],
  content: ['./index.html', './src/**/*.{ts,tsx}'],
  theme: {
    extend: {
      colors: {
        // Every colour resolves through a CSS variable so the user's chosen
        // accent re-tints the whole interface without a rebuild.
        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/selected surface — dropdown
         * items, command rows, ghost-button hover. It is not the brand colour;
         * that is `primary`, mapped below.
         *
         * Mapping `accent` to --accent (the brand) inverted this, so every
         * hover state painted a full-strength brand block: in dark mode with
         * the monochrome "pig" accent that is near-white, which made a selected
         * command row glare. Aliased to the subtle pair instead, so shadcn
         * primitives tint the way their authors intended while PIG's own brand
         * fills use `primary`.
         */
        accent: 'hsl(var(--accent-subtle))',
        'accent-foreground': 'hsl(var(--accent-fg))',
        /** The brand itself, for PIG's own components that need a solid fill. */
        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%)',
        },
        /*
         * The sidebar primitive's scale. Every one of these resolves, through
         * the --sidebar-* aliases in index.css, to a variable already defined
         * above — so this is a naming layer for shadcn's block, not a second
         * palette that can drift from the first.
         */
        sidebar: {
          DEFAULT: 'hsl(var(--sidebar-background))',
          foreground: 'hsl(var(--sidebar-foreground))',
          primary: 'hsl(var(--sidebar-primary))',
          'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
          accent: 'hsl(var(--sidebar-accent))',
          'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
          border: 'hsl(var(--sidebar-border))',
          ring: 'hsl(var(--sidebar-ring))',
        },
        positive: 'hsl(var(--positive))',
        warning: 'hsl(var(--warning))',
        danger: 'hsl(var(--danger))',
        info: 'hsl(var(--info))',
      },
      fontFamily: {
        sans: ['Manrope Variable', 'Avenir Next', 'ui-sans-serif', 'system-ui', 'sans-serif'],
        mono: ['ui-monospace', 'SFMono-Regular', 'Menlo', 'monospace'],
      },
      borderRadius: { lg: '0.75rem', xl: '1rem' },
    },
  },
  plugins: [animate],
};
