متغیرهای CSS رو میشه داخل Media Queryها هم استفاده کرد.
این یعنی می‌تونی بر اساس سایز صفحه مقدار متغیرها رو تغییر بدی و کل استایل‌ها به‌صورت اتوماتیک تغییر کنن. 🚀

🔹 مثال ۱: تغییر سایز فونت با Media Query

:root {
  --font-size: 16px;
}

p {
  font-size: var(--font-size);
}

/* وقتی صفحه بزرگ‌تر از 768px باشه */
@media (min-width: 768px) {
  :root {
    --font-size: 20px;
  }
}

/* وقتی صفحه بزرگ‌تر از 1200px باشه */
@media (min-width: 1200px) {
  :root {
    --font-size: 24px;
  }
}

👉 در اینجا:

• برای موبایل (پیش‌فرض) → 16px

• برای تبلت (بیشتر از 768px) → 20px

• برای دسکتاپ بزرگ (بیشتر از 1200px) → 24px

🔹 مثال ۲: تغییر رنگ در Media Query

:root {
  --bg-color: lightblue;
}

body {
  background: var(--bg-color);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #222;
  }
}

👉 وقتی کاربر حالت Dark Mode سیستم رو فعال کنه، رنگ پس‌زمینه خودکار تغییر می‌کنه.

🔹 مثال ۳: ریسپانسیو کردن Grid با متغیر

:root {
  --columns: 1fr;
}

.grid {
  display: grid;
  grid-template-columns: var(--columns);
  gap: 10px;
}

@media (min-width: 768px) {
  :root {
    --columns: 1fr 1fr;
  }
}

@media (min-width: 1200px) {
  :root {
    --columns: 1fr 1fr 1fr;
  }
}

👉 اینطوری گرید به‌صورت داینامیک تغییر می‌کنه:

• موبایل → ۱ ستون

• تبلت → ۲ ستون

• دسکتاپ → ۳ ستون

✅ مزیت بزرگ این روش:
به جای تغییر مستقیم استایل عناصر داخل Media Query، کافیه مقدار متغیر تغییر کنه و همه المنت‌هایی که از اون متغیر استفاده می‌کنن خودکار آپدیت می‌شن.