/* tailwind.config.js */
fontFamily: {
  sans: ['Inter', 'Plus Jakarta Sans', 'system-ui', 'sans-serif'],
  serif: ['Merriweather', 'Lora', 'Georgia', 'serif'],
  mono: ['JetBrains Mono', 'Fira Code', 'monospace'],
}

// Base classes for ALL buttons
const buttonBase = "inline-flex items-center justify-center rounded-lg font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none"

// Variants
const buttonVariants = {
  primary: "bg-brand text-white hover:bg-brand-hover shadow-sm focus:ring-focus",
  secondary: "bg-paper text-ink border border-stone-200 hover:bg-stone-50 focus:ring-focus",
  ghost: "bg-transparent text-pencil hover:bg-stone-100 hover:text-ink",
  danger: "bg-destruct text-white hover:bg-rose-700 focus:ring-rose-200",
}

// Sizes
const buttonSizes = {
  sm: "h-8 px-3 text-xs",
  md: "h-10 px-4 text-sm",
  lg: "h-12 px-6 text-base",
  icon: "h-10 w-10", // Square for icon-only buttons
}

const cardBase = "bg-paper border border-stone-200 rounded-xl shadow-sm hover:shadow-md transition-shadow"

// Entry card specific
const entryCard = `${cardBase} p-4 cursor-pointer`

// Selected state
const entryCardSelected = "ring-2 ring-brand ring-offset-2"

// Text inputs
const inputBase = "w-full bg-paper border border-stone-200 rounded-lg px-3 py-2 text-ink placeholder:text-pencil focus:border-brand focus:ring-2 focus:ring-focus focus:outline-none transition-colors"

// Editor (BlockNote wrapper)
const editorWrapper = "prose prose-slate prose-lg max-w-none font-serif focus:outline-none"

// Textarea (for simple text areas)
const textareaBase = `${inputBase} min-h-[120px] resize-none`

const sidebarBase = "w-64 bg-paper border-r border-stone-200 h-screen flex flex-col"

const sidebarItem = "flex items-center gap-3 px-3 py-2 rounded-lg text-pencil hover:bg-stone-100 hover:text-ink transition-colors"

const sidebarItemActive = "bg-indigo-50 text-brand font-medium"

const modalOverlay = "fixed inset-0 bg-black/50 backdrop-blur-sm z-50"

const modalContent = "fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-paper rounded-2xl shadow-xl p-6 w-full max-w-md z-50 animate-in fade-in zoom-in-95 duration-300"

// Standard transition
const transition = "transition-all duration-300 ease-out"

// Hover lift effect (for cards)
const hoverLift = "hover:shadow-md hover:-translate-y-0.5 transition-all duration-300"

// Fade in animation (for modals, toasts)
const fadeIn = "animate-in fade-in duration-300"

// Slide in from bottom (for panels)
const slideUp = "animate-in slide-in-from-bottom-4 duration-300"

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slide-up {
  from { 
    opacity: 0;
    transform: translateY(16px);
  }
  to { 
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse-soft {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

// NEVER remove outline without replacing it
// ❌ BAD: focus:outline-none
// ✅ GOOD: focus:outline-none focus:ring-2 focus:ring-focus focus:ring-offset-2

// Icon-only buttons MUST have aria-label
<button aria-label="Delete entry" className="...">
  <TrashIcon />
</button>

// Loading states
<button disabled aria-busy="true">
  <Spinner aria-hidden="true" />
  <span className="sr-only">Loading...</span>
</button>

<article className="bg-paper border border-stone-200 rounded-xl p-4 shadow-sm hover:shadow-md transition-shadow cursor-pointer group">
  <div className="flex items-start justify-between mb-2">
    <time className="text-xs font-sans text-pencil">January 31, 2026</time>
    <span className="w-2 h-2 rounded-full bg-emotion-calm" aria-label="Calm mood" />
  </div>
  <h3 className="font-serif text-ink text-lg mb-2 line-clamp-1 group-hover:text-brand transition-colors">
    A quiet morning reflection
  </h3>
  <p className="font-serif text-pencil text-sm line-clamp-2">
    Today I woke up feeling grateful for the small things...
  </p>
  <div className="flex gap-2 mt-3">
    <span className="text-xs bg-stone-100 text-pencil px-2 py-1 rounded-full">#gratitude</span>
    <span className="text-xs bg-stone-100 text-pencil px-2 py-1 rounded-full">#morning</span>
  </div>
</article>

<div className="flex items-center gap-2 p-3 bg-linear-to-r from-indigo-50 to-purple-50 rounded-xl border border-indigo-100">
  <span className="text-sm font-sans text-pencil mr-2">How are you feeling?</span>
  {['😢', '😔', '😐', '🙂', '😄'].map((emoji, i) => (
    <button
      key={i}
      className={`text-2xl p-2 rounded-lg transition-all hover:scale-110 ${
        selected === i 
          ? 'bg-brand/10 ring-2 ring-brand' 
          : 'hover:bg-white/50'
      }`}
      aria-label={`Mood level ${i + 1}`}
    >
      {emoji}
    </button>
  ))}
</div>

<div className="flex flex-col items-center justify-center py-16 text-center">
  <div className="w-16 h-16 bg-stone-100 rounded-full flex items-center justify-center mb-4">
    <BookOpenIcon className="w-8 h-8 text-pencil" />
  </div>
  <h3 className="font-sans text-ink text-lg font-medium mb-2">
    Your journal awaits
  </h3>
  <p className="font-sans text-pencil text-sm max-w-xs mb-6">
    Start your first entry and begin your journey of reflection.
  </p>
  <button className="inline-flex items-center gap-2 bg-brand text-white px-4 py-2 rounded-lg hover:bg-brand-hover transition-colors">
    <PlusIcon className="w-4 h-4" />
    New Entry
  </button>
</div>

// tailwind.config.js
module.exports = {
  content: ['./src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      colors: {
        canvas: '#FAFAF9',
        paper: '#FFFFFF',
        ink: '#1E293B',
        pencil: '#64748B',
        brand: {
          DEFAULT: '#4F46E5',
          hover: '#4338CA',
        },
        focus: '#C7D2FE',
        destruct: '#E11D48',
        success: '#059669',
        warning: '#D97706',
        emotion: {
          joy: '#FEF3C7',
          calm: '#DBEAFE',
          sad: '#E0E7FF',
          anxious: '#FCE7F3',
          anger: '#FEE2E2',
        },
      },
      fontFamily: {
        sans: ['Inter', 'Plus Jakarta Sans', 'system-ui', 'sans-serif'],
        serif: ['Merriweather', 'Lora', 'Georgia', 'serif'],
        mono: ['JetBrains Mono', 'Fira Code', 'monospace'],
      },
      animation: {
        'fade-in': 'fade-in 0.3s ease-out',
        'slide-up': 'slide-up 0.3s ease-out',
        'pulse-soft': 'pulse-soft 2s ease-in-out infinite',
      },
      keyframes: {
        'fade-in': {
          from: { opacity: '0' },
          to: { opacity: '1' },
        },
        'slide-up': {
          from: { opacity: '0', transform: 'translateY(16px)' },
          to: { opacity: '1', transform: 'translateY(0)' },
        },
        'pulse-soft': {
          '0%, 100%': { opacity: '1' },
          '50%': { opacity: '0.7' },
        },
      },
    },
  },
  plugins: [
    require('@tailwindcss/typography'),
  ],
}

npm install lucide-react