import typography from '@tailwindcss/typography';

/**
 * UI redesign (Refero-inspired minimal+dense) + dark mode.
 *
 * The neutral `slate` scale and the semantic surface tokens are mapped to CSS
 * variables (defined in src/index.css) so existing *-slate-* classes (1454
 * uses) flip between light and dark with zero component edits. Dark inverts
 * the slate ramp (50<->950) so fg/bg stay coherent. State colors
 * (emerald/amber/red/blue/indigo) keep Tailwind's stock scales for now.
 */
/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{ts,tsx}'],
  theme: {
    extend: {
      colors: {
        accent: 'var(--brand-primary, #18181b)',
        'accent-deep': 'var(--brand-primary-deep, #09090b)',
        'accent-soft': 'var(--brand-primary-soft, #f4f4f5)',
        'accent-ring': 'var(--brand-primary-ring, rgba(24, 24, 27, 0.25))',
        'accent-fg': 'var(--brand-primary-fg, #ffffff)',
        ink: 'var(--ink, #0f172a)',
        muted: 'var(--muted, #64748b)',
        canvas: 'var(--canvas, #ffffff)',
        surface: 'var(--surface, #fafafa)',
        'surface-2': 'var(--surface-2, #f4f4f5)',
        hairline: 'var(--hairline, #e4e4e7)',
        'hairline-soft': 'var(--hairline-soft, #f4f4f5)',
        // Neutral ramp via CSS vars so *-slate-* auto-themes (1454 uses, no
        // component edits). Light = Tailwind defaults; dark = inverted ramp.
        slate: {
          50: 'var(--slate-50)', 100: 'var(--slate-100)', 200: 'var(--slate-200)',
          300: 'var(--slate-300)', 400: 'var(--slate-400)', 500: 'var(--slate-500)',
          600: 'var(--slate-600)', 700: 'var(--slate-700)', 800: 'var(--slate-800)',
          900: 'var(--slate-900)', 950: 'var(--slate-950)',
        },
        gray: {
          400: 'var(--gray-400)', 500: 'var(--gray-500)', 700: 'var(--gray-700)',
        },
      },
      fontFamily: {
        sans: ['"IBM Plex Sans JP"', '"Hiragino Sans"', 'system-ui', 'sans-serif'],
        mono: ['"JetBrains Mono"', '"IBM Plex Mono"', 'ui-monospace', 'monospace'],
      },
      fontSize: {
        '2xs': ['0.6875rem', { lineHeight: '1rem' }], // 11px
      },
      borderRadius: {
        DEFAULT: '0.375rem', // 6px — matches the new design token.
      },
      boxShadow: {
        // Refined ramp: rely on hairlines for elevation, not drop shadows.
        sm: '0 1px 2px 0 rgba(15, 23, 42, 0.04)',
        DEFAULT: '0 1px 2px 0 rgba(15, 23, 42, 0.05), 0 1px 3px 0 rgba(15, 23, 42, 0.04)',
        md: '0 2px 4px -1px rgba(15, 23, 42, 0.06), 0 4px 6px -1px rgba(15, 23, 42, 0.04)',
      },
    },
  },
  plugins: [typography],
};