/**
 * Yunifer — توکن‌های طراحی مشترک (فاز ۵)
 * ==================================================================
 * قبلاً همین ۷۰+ خط، عیناً و جداگانه، داخل <style> هر یک از پنج صفحهٔ
 * اصلی (index.html, dashboard.html, products.html, about.html,
 * custom.html) کپی شده بود — یعنی برای عوض کردن یک رنگ پایه یا اضافه
 * کردن یک تمِ رنگی جدید، باید همان تغییر را پنج بار دستی تکرار می‌کردید.
 * حالا فقط همین یک فایل است؛ هر صفحه آن را <link> می‌کند.
 *
 * انتخابگر ترنزیشن پایین همین فایل عمداً «.admin-panel» را هم شامل
 * می‌شود (چون index.html پنل ادمین دارد) — روی صفحاتی که این عنصر را
 * ندارند (dashboard/products/about/custom) این بخش از انتخابگر فقط
 * هیچ‌چیزی را match نمی‌کند، کاملاً بی‌ضرر است.
 * ==================================================================
 */
:root{
  --bg:#050608;
  --bg-raise:#0c0e12;
  --accent:#1A7FFF;
  --accent-dim:rgba(26,127,255,.35);
  --text:#F5F8FF;
  --text-dim:rgba(245,248,255,.62);
  --text-faint:rgba(245,248,255,.34);
  --hair:rgba(245,248,255,.09);
  --hair-strong:rgba(245,248,255,.16);
  --muted-corner:rgba(245,248,255,.22);
  --ease:cubic-bezier(.16,.84,.44,1);
  --f-display:'Bebas Neue', 'Estedad', sans-serif;
  --f-body:'Outfit', 'Estedad', sans-serif;
  --f-italic:'Cormorant Garamond', 'Estedad', serif;
}
[data-lang="fa"]{
  --f-display:'Morabba', 'Vazirmatn', 'Estedad', sans-serif;
  --f-body:'Vazirmatn', 'Estedad', sans-serif;
  --f-italic:'Vazirmatn', 'Estedad', sans-serif;
}

/* ============================================================
   COLOR THEMES
   ============================================================ */
:root[data-theme="electric"]{
  --bg:#050608; --bg-raise:#0c0e12; --accent:#1A7FFF; --accent-dim:rgba(26,127,255,.35);
  --text:#F5F8FF; --text-dim:rgba(245,248,255,.62); --text-faint:rgba(245,248,255,.34);
  --hair:rgba(245,248,255,.09); --hair-strong:rgba(245,248,255,.16); --muted-corner:rgba(245,248,255,.22);
}
:root[data-theme="crimson"]{
  --bg:#08060a; --bg-raise:#130a10; --accent:#FF3B4E; --accent-dim:rgba(255,59,78,.35);
  --text:#FFF6F6; --text-dim:rgba(255,246,246,.62); --text-faint:rgba(255,246,246,.34);
  --hair:rgba(255,246,246,.09); --hair-strong:rgba(255,246,246,.16); --muted-corner:rgba(255,246,246,.22);
}
:root[data-theme="emerald"]{
  --bg:#050807; --bg-raise:#0b1310; --accent:#2BD98F; --accent-dim:rgba(43,217,143,.35);
  --text:#F2FFF8; --text-dim:rgba(242,255,248,.62); --text-faint:rgba(242,255,248,.34);
  --hair:rgba(242,255,248,.09); --hair-strong:rgba(242,255,248,.16); --muted-corner:rgba(242,255,248,.22);
}
:root[data-theme="gold"]{
  --bg:#0a0804; --bg-raise:#140f09; --accent:#D4AF37; --accent-dim:rgba(212,175,55,.35);
  --text:#FFF9EC; --text-dim:rgba(255,249,236,.62); --text-faint:rgba(255,249,236,.34);
  --hair:rgba(255,249,236,.09); --hair-strong:rgba(255,249,236,.16); --muted-corner:rgba(255,249,236,.22);
}
:root[data-theme="violet"]{
  --bg:#07060b; --bg-raise:#120c19; --accent:#9B6BFF; --accent-dim:rgba(155,107,255,.35);
  --text:#F7F5FF; --text-dim:rgba(247,245,255,.62); --text-faint:rgba(247,245,255,.34);
  --hair:rgba(247,245,255,.09); --hair-strong:rgba(247,245,255,.16); --muted-corner:rgba(247,245,255,.22);
}
:root[data-theme="platinum"]{
  --bg:#060607; --bg-raise:#0e0f11; --accent:#C9D2DC; --accent-dim:rgba(201,210,220,.35);
  --text:#FAFBFC; --text-dim:rgba(250,251,252,.62); --text-faint:rgba(250,251,252,.34);
  --hair:rgba(250,251,252,.09); --hair-strong:rgba(250,251,252,.16); --muted-corner:rgba(250,251,252,.22);
}

/* ============================================================
   LIGHT / DARK MODE — independent of the accent color themes above.
   Adding [data-mode="light"] on <html> flips background/text tokens
   to a light palette while keeping whichever accent color is active.
   ============================================================ */
:root[data-mode="light"]{
  --bg:#FAFBFC; --bg-raise:#FFFFFF;
  --text:#0B0C0E; --text-dim:rgba(11,12,14,.64); --text-faint:rgba(11,12,14,.38);
  --hair:rgba(11,12,14,.10); --hair-strong:rgba(11,12,14,.18); --muted-corner:rgba(11,12,14,.24);
}
/* Platinum's accent is a pale silver — too low-contrast on a light
   background, so darken it specifically for that combination. */
:root[data-theme="platinum"][data-mode="light"]{
  --accent:#4B5563; --accent-dim:rgba(75,85,99,.35);
}
body, header, main, footer, section, .admin-panel, .nav, button, input, textarea, .theme-swatch, .theme-reopen-btn, .dn-toggle{
  transition:background-color .6s var(--ease), color .6s var(--ease), border-color .6s var(--ease);
}
