import type { Config } from 'tailwindcss'

export default {
  // dark mode คุมด้วย class บน <html> (toggle จาก useTheme)
  darkMode: 'class',
  theme: {
    extend: {
      // สีทั้งหมดอ่านจาก CSS vars ใน app/assets/css/tailwind.css (:root + .dark)
      // → สลับโหมดที่ตัวแปร ไม่ต้องมีคู่ dark: class ตาม markup
      colors: {
        primary: 'rgb(var(--c-primary) / <alpha-value>)',
        'primary-hover': 'rgb(var(--c-primary-hover) / <alpha-value>)',
        'on-primary': 'rgb(var(--c-on-primary) / <alpha-value>)',
        accent: 'rgb(var(--c-accent) / <alpha-value>)',
        success: 'rgb(var(--c-success) / <alpha-value>)',
        'success-strong': 'rgb(var(--c-success-strong) / <alpha-value>)',
        error: 'rgb(var(--c-error) / <alpha-value>)',
        'error-strong': 'rgb(var(--c-error-strong) / <alpha-value>)',
        focus: 'rgb(var(--c-focus) / <alpha-value>)',
        surface: 'rgb(var(--c-surface) / <alpha-value>)',
        elevated: 'rgb(var(--c-elevated) / <alpha-value>)',
        'surface-muted': 'rgb(var(--c-surface-muted) / <alpha-value>)',
        ink: 'rgb(var(--c-ink) / <alpha-value>)',
        muted: 'rgb(var(--c-muted) / <alpha-value>)',
        line: 'rgb(var(--c-line) / <alpha-value>)',
      },
      fontFamily: {
        // Mac ได้ Sukhumvit Set จริง — นอกนั้น fallback ไป Sarabun (Google Fonts)
        sans: ['Sukhumvit Set', 'Sarabun', 'system-ui', '-apple-system', 'Segoe UI', 'sans-serif'],
      },
      fontSize: {
        display: ['2.25rem', { lineHeight: '1.2', fontWeight: '700' }], // 36px — h1 หน้าหลัก
        'page-title': ['1.75rem', { lineHeight: '1.25', fontWeight: '700' }], // 28px — h1 หน้าอื่น
        'section-title': ['1.25rem', { lineHeight: '1.4', fontWeight: '700' }], // 20px — h2 section
        'body-lg': ['1.125rem', { lineHeight: '1.5' }], // 18px — prose
      },
      borderRadius: {
        DEFAULT: '0.5rem', // rounded เปล่า ๆ (รวม file:rounded) → 8px ตาม scheme
        card: '0.5rem',
        pill: '9999px',
      },
      boxShadow: {
        soft: '0 4px 4px 0 rgba(0, 0, 0, 0.25)',
        'soft-lg': '0 8px 20px 0 rgba(0, 0, 0, 0.18)',
      },
    },
  },
} satisfies Config