import type { Config } from 'tailwindcss'

const config: Config = {
  content: ['./src/**/*.{ts,tsx}'],
  theme: {
    extend: {
      fontFamily: {
        body: ['var(--font-body)', 'system-ui', 'sans-serif'],
        heading: ['var(--font-heading)', 'serif'],
        mono: ['var(--font-mono)', 'ui-monospace', 'monospace'],
      },
      colors: {
        /* Surface ladder (legacy + DESIGN.md canonical aliases) */
        page: 'var(--bg-page)',
        canvas: 'var(--canvas)',
        surface: 'var(--bg-surface)',
        elevated: 'var(--bg-elevated)',
        'surface-1': 'var(--surface-1)',
        'surface-2': 'var(--surface-2)',
        'surface-3': 'var(--surface-3)',
        'surface-4': 'var(--surface-4)',
        'surface-hover': 'var(--bg-hover)',
        'surface-active': 'var(--bg-active)',

        /* Ink (legacy + DESIGN.md aliases) */
        primary: 'var(--text-primary)',
        secondary: 'var(--text-secondary)',
        tertiary: 'var(--text-tertiary)',
        muted: 'var(--text-muted)',
        ink: 'var(--ink)',
        'ink-muted': 'var(--ink-muted)',
        'ink-subtle': 'var(--ink-subtle)',
        'ink-tertiary': 'var(--ink-tertiary)',

        /* Accents */
        indigo: 'var(--accent-indigo)',
        green: 'var(--accent-green)',
        amber: 'var(--accent-amber)',
        coral: 'var(--accent-coral)',

        /* Primary states (DESIGN.md) */
        'brand-primary': 'var(--primary)',
        'brand-primary-hover': 'var(--primary-hover)',
        'brand-primary-active': 'var(--primary-active)',
        'brand-primary-subtle': 'var(--primary-subtle)',
        'on-primary': 'var(--on-primary)',

        /* Semantic accent colors — prefer these for new code */
        'accent-brand': 'var(--accent-brand)',
        'accent-success': 'var(--accent-success)',
        'accent-warning': 'var(--accent-warning)',
        'accent-danger': 'var(--accent-danger)',

        /* Derived neutral ramp (color-mix of foreground→page; auto-adapts to
         * theme). Use bg-fg-5 (divider), bg-fg-10 (elevated), text-fg-50 (muted). */
        foreground: 'var(--foreground)',
        'fg-2': 'var(--fg-2)',
        'fg-3': 'var(--fg-3)',
        'fg-5': 'var(--fg-5)',
        'fg-10': 'var(--fg-10)',
        'fg-20': 'var(--fg-20)',
        'fg-30': 'var(--fg-30)',
        'fg-40': 'var(--fg-40)',
        'fg-50': 'var(--fg-50)',
        'fg-60': 'var(--fg-60)',
        'fg-70': 'var(--fg-70)',
        'fg-80': 'var(--fg-80)',
        'fg-90': 'var(--fg-90)',
        'fg-95': 'var(--fg-95)',
      },
      borderColor: {
        subtle: 'var(--border-subtle)',
        strong: 'var(--border-strong)',
        hairline: 'var(--hairline)',
        'hairline-strong': 'var(--hairline-strong)',
        'brand-primary': 'var(--primary)',
      },
      backgroundColor: {
        'primary-subtle': 'var(--primary-subtle)',
      },
      boxShadow: {
        'forge-sm': 'var(--shadow-sm)',
        'forge-md': 'var(--shadow-md)',
        'forge-lg': 'var(--shadow-lg)',
        'forge-xl': 'var(--shadow-xl)',
        'forge-hover': 'var(--shadow-hover)',
        'focus-ring': 'var(--focus-ring)',
        /* Multi-layer craft-agents shadows (1px foreground ring + soft blur) */
        minimal: 'var(--shadow-minimal)',
        modal: 'var(--shadow-modal)',
      },
      borderRadius: {
        /* Canonical radii (craft-agents leans sharp; interactive els 6–8px) */
        control: '6px',   /* buttons, inputs, small controls */
        panel: '8px',     /* cards, popovers, dropdowns */
        sharp: '0px',     /* deliberate sharp edges */
      },
      ringColor: {
        'brand-primary': 'var(--primary-ring)',
      },
    },
  },
  plugins: [],
}

export default config