کلاس‌های 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>

// سطح‌بندی: پس‌زمینه صلب → کارت صلب → لایهٔ تطبیقی روی کارت
<div className="bg p-8">
  <div className="bg-surface-100 p-6 rounded-lg">
    <h2 className="text mb-4">کارت (سطح صلب)</h2>

    <div className="bg-surface-200 p-3 rounded">
      {/* surface-200 یک لایهٔ نیمه‌شفاف تطبیقی است و روی رنگ کارت پشتش سوار می‌شود */}
      <p className="text-lighter">لایهٔ تطبیقی روی کارت</p>
    </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 — از bg-overlay-scrim برای پرده (backdrop) و bg-dialog برای پنل استفاده کنید
<div className="fixed inset-0 bg-overlay-scrim 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-on-brand 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-on-destructive 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>