کلاس‌های Tailwind

// مثال استفاده
<div className="bg-surface-100 border border-default p-4 rounded">
  <h2 className="text-foreground mb-2">عنوان</h2>
  <p className="text-light">محتوای کارت</p>
</div>

// سلسله‌مراتب متن در یک کارت
<div className="bg-surface-100 p-6 rounded border border-default">
  <h2 className="text text-2xl font-bold mb-2">
    عنوان مقاله
  </h2>
  
  <p className="text-light mb-4">
    این یک پاراگراف توضیحی است که اطلاعات اصلی را ارائه می‌دهد.
    از رنگ متن با کنتراست متوسط استفاده می‌کند.
  </p>
  
  <div className="flex items-center gap-4">
    <span className="text-lighter text-sm">
      نویسنده: علی احمدی
    </span>
    <span className="text-muted text-xs">
      2 ساعت پیش
    </span>
  </div>
  
  <button className="text-brand mt-4">
    ادامه مطلب →
  </button>
</div>

// پیام‌های وضعیت
<div>
  <p className="text-brand mb-2">✓ عملیات موفق بود</p>
  <p className="text-warning mb-2">⚠ این عملیات قابل بازگشت نیست</p>
  <p className="text-destructive">✗ خطا در بارگذاری داده‌ها</p>
</div>

// سیستم سطح‌بندی (Layering System)
<div className="bg p-8">
  <div className="bg-surface-75 p-6 rounded-lg">
    <h2 className="text mb-4">سطح اول</h2>
    
    <div className="bg-surface-100 p-4 rounded">
      <h3 className="text-light mb-3">سطح دوم</h3>
      
      <div className="bg-surface-200 p-3 rounded">
        <p className="text-lighter">سطح سوم</p>
      </div>
    </div>
  </div>
</div>

// فرم با input
<form className="bg-surface-100 p-6 rounded">
  <label className="text text-sm mb-2">نام کاربری</label>
  <input 
    className="bg-control border border-control rounded px-3 py-2 w-full"
    placeholder="نام کاربری خود را وارد کنید"
  />
</form>

// لیست با آیتم انتخاب شده
<ul>
  <li className="bg-surface-100 hover:bg-surface-200 p-3">آیتم 1</li>
  <li className="bg-selection p-3">آیتم انتخاب شده</li>
  <li className="bg-surface-100 hover:bg-surface-200 p-3">آیتم 3</li>
</ul>

// Modal
<div className="fixed inset-0 bg-overlay/80 flex items-center justify-center">
  <div className="bg-dialog p-6 rounded-lg max-w-md">
    <h2 className="text text-xl mb-4">عنوان دیالوگ</h2>
    <p className="text-light">محتوای دیالوگ</p>
  </div>
</div>

// کارت با سطوح مختلف حاشیه
<div className="flex gap-4">
  <div className="border border-default p-4 rounded">
    حاشیه معمولی
  </div>
  
  <div className="border border-strong p-4 rounded">
    حاشیه قوی
  </div>
  
  <div className="border border-stronger p-4 rounded">
    حاشیه خیلی قوی
  </div>
</div>

// Input با حالت‌های مختلف
<div className="space-y-4">
  {/* حالت عادی */}
  <input 
    className="border border-control rounded px-3 py-2"
    placeholder="حالت عادی"
  />
  
  {/* حالت focus */}
  <input 
    className="border border-strong rounded px-3 py-2"
    placeholder="حالت focus"
  />
  
  {/* حالت خطا */}
  <input 
    className="border-2 border-destructive rounded px-3 py-2"
    placeholder="حالت خطا"
  />
</div>

// دکمه با hover
<button className="border border-button hover:border-button-hover px-4 py-2 rounded transition">
  دکمه
</button>

// جدول
<table className="w-full border border-default">
  <thead>
    <tr className="border-b border-strong">
      <th className="p-3 text-start">ستون 1</th>
      <th className="p-3 text-start">ستون 2</th>
    </tr>
  </thead>
  <tbody>
    <tr className="border-b border-default">
      <td className="p-3">سلول 1</td>
      <td className="p-3">سلول 2</td>
    </tr>
  </tbody>
</table>

<div className="bg-surface-100 border border-default rounded-lg p-6">
  <h3 className="text text-lg font-semibold mb-2">عنوان کارت</h3>
  <p className="text-light text-sm mb-4">توضیحات کارت</p>
  <button className="text-brand text-sm">اقدام →</button>
</div>

<div className="bg-surface-100 border border-default hover:border-strong rounded-lg p-6 transition cursor-pointer">
  <h3 className="text text-lg font-semibold">کارت قابل کلیک</h3>
</div>

<div>
  <label className="text text-sm mb-1 block">برچسب</label>
  <input 
    className="bg-control border border-control focus:border-strong rounded px-3 py-2 w-full text-foreground outline-none transition"
    placeholder="متن placeholder"
  />
</div>

<button className="bg-brand text-white border border-brand hover:bg-brand/90 px-4 py-2 rounded transition">
  دکمه اصلی
</button>

<button className="bg-surface-100 text-foreground border border-default hover:bg-surface-200 hover:border-strong px-4 py-2 rounded transition">
  دکمه ثانویه
</button>

<button className="bg-destructive text-white border border-destructive hover:bg-destructive/90 px-4 py-2 rounded transition">
  حذف
</button>

<div className="bg-brand/10 border border-brand rounded-lg p-4">
  <div className="flex items-start gap-3">
    <span className="text-brand">✓</span>
    <div>
      <h4 className="text-brand font-medium mb-1">موفقیت</h4>
      <p className="text-light text-sm">عملیات با موفقیت انجام شد</p>
    </div>
  </div>
</div>

<div className="bg-warning/10 border border-warning rounded-lg p-4">
  <div className="flex items-start gap-3">
    <span className="text-warning">⚠</span>
    <div>
      <h4 className="text-warning font-medium mb-1">هشدار</h4>
      <p className="text-light text-sm">این عملیات قابل بازگشت نیست</p>
    </div>
  </div>
</div>

<div className="bg-destructive/10 border border-destructive rounded-lg p-4">
  <div className="flex items-start gap-3">
    <span className="text-destructive">✗</span>
    <div>
      <h4 className="text-destructive font-medium mb-1">خطا</h4>
      <p className="text-light text-sm">عملیات با شکست مواجه شد</p>
    </div>
  </div>
</div>