/* ==========================================================================
   tokens.css — نظام طراحی «مدال»
   رنگ‌ها مستقیم از فایل logo.png استخراج شده‌اند.
   هیچ رنگ یا اندازه‌ای نباید بیرون از این فایل تعریف شود.
   ========================================================================== */

/* ── فونت‌ها ─────────────────────────────────────────────────────────────
   هر سه روی سرور خودمان میزبانی می‌شوند، نه Google Fonts:
   برای کاربر ایرانی کند و بی‌ثبات است.
   unicode-range باعث می‌شود مرورگر فایل عربی را برای متن لاتین دانلود نکند.
   ---------------------------------------------------------------------- */

/* متن، رابط کاربری و اعداد */
@font-face {
  font-family: 'Vazirmatn';
  src: url('../fonts/vazirmatn-arabic-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200D;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('../fonts/vazirmatn-latin-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F, U+2190-21BB;
}

/* تیتر فارسی — نسخ کلاسیک، هم‌جنس سریف لوگو. فقط وزن ۴۰۰. */
@font-face {
  font-family: 'Amiri';
  src: url('../fonts/amiri-arabic-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200D;
}

/* نام‌های لاتین — SALOR، کادیلاک، ورونیکا، رافائل */
@font-face {
  font-family: 'Playfair Display';
  src: url('../fonts/playfair-latin-var.woff2') format('woff2-variations');
  font-weight: 400 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F;
}

:root {
  /* ── رنگ ──────────────────────────────────────────────────────────────
     تم زرشکی. هر رنگی که بخواهید عوض کنید، همین‌جاست — و از پنل
     وردپرس هم قابل تغییر است (تنظیمات سالور ← رنگ‌های برند).
     ------------------------------------------------------------------- */

  /* زرشکی: زمینه صفحه و هر سطحی که پشتِ محتوا می‌نشیند */
  --zereshki: #210000;
  --aabnoos: var(--zereshki);        /* نام قدیمی، برای سازگاری */
  /* ★ همه سطح‌های سایت همین یک زرشکی‌اند. قبلاً کارت و کشو کمی
     روشن‌تر بودند و رنگشان جگری دیده می‌شد؛ حالا جدا شدنِ سطح‌ها را
     خط طلایی نشان می‌دهد، نه اختلاف رنگ. */
  --gerdoo: var(--zereshki);         /* زمینه بخش‌ها و کارت‌ها */
  --gerdoo-roshan: var(--zereshki);  /* کشو، پنجره‌ها، سطح بالاتر */
  --gerdoo-labe: #3a0a0a;            /* فقط لبه‌ها */

  /* طلایی متن‌ها و خطوط */
  --tala: #e6d5b6;
  --tala-saye: #b9a483;              /* طلا در سایه */
  --tala-roshan: #f2e6cf;            /* لبه نوردیده */
  --sadaf: #fbf5ea;                  /* درخشش */

  /* متن */
  --shir: #f4ece0;
  --shir-kam: #bda897;

  /* حالت‌ها */
  --khata: #d9756a;
  --movafagh: #8fae7c;

  /* ── سطح‌ها و حاشیه‌ها ────────────────────────────────────────────────
     همه حاشیه‌های طلاییِ سایت از این چهار متغیر می‌آیند. اگر بخواهید
     خطوط پررنگ‌تر یا محوتر شوند، فقط عدد آخر (شفافیت) را عوض کنید؛
     هیچ فایل دیگری دست نمی‌خورد.
     ------------------------------------------------------------------- */
  --tala-rgb: 230 213 182;           /* همان --tala، به شکل عدد */

  --marz-kam: rgb(var(--tala-rgb) / 0.16);   /* خط بسیار محو */
  --marz: rgb(var(--tala-rgb) / 0.25);       /* خط معمول کارت و کادر */
  --marz-por: rgb(var(--tala-rgb) / 0.4);    /* خط برجسته و دکمه */

  /* سطح شیشه‌ای دکمه‌ها و نوارها */
  --shishe: rgb(var(--tala-rgb) / 0.07);
  --shishe-por: rgb(var(--tala-rgb) / 0.14);
  --shishe-blur: blur(12px) saturate(140%);

  /* ── پس‌زمینه‌های صفحه ────────────────────────────────────────────────
     از پنل «تنظیمات سالور ← ظاهر سایت» قابل تغییرند. اگر تصویری
     انتخاب نشود، همین گرادیان نرمِ زرشکی می‌ماند.
     ------------------------------------------------------------------- */
  --bg-safhe: var(--zereshki);
  /* بدون هاله. زمینه یک‌دستِ زرشکی است.
     اگر روزی هاله خواستید، از پنل «درخشش نرم روی زمینه» را روشن کنید. */
  --bg-naghsh: none;
  --bg-kart: var(--gerdoo);
  --bg-panjere: var(--gerdoo-roshan);

  /* سایه‌ها */
  --saye-kart: 0 14px 34px rgba(0, 0, 0, 0.38);
  --saye-panjere: 0 24px 60px rgba(0, 0, 0, 0.5);

  /* ── طلا هیچ‌وقت تخت نیست ────────────────────────────────────────────
     خود لوگو گرادیان عمودی دارد؛ همان منطق روی خط و متن اجرا می‌شود.
     طلای تخت خردلی دیده می‌شود، طلای گرادیانی فلز.
     ------------------------------------------------------------------- */
  --gold-rule: linear-gradient(
    90deg,
    transparent 0%,
    var(--tala-saye) 10%,
    var(--tala) 34%,
    var(--tala-roshan) 50%,
    var(--tala) 66%,
    var(--tala-saye) 90%,
    transparent 100%
  );
  --gold-text: linear-gradient(
    180deg,
    var(--sadaf) 0%,
    var(--tala) 38%,
    var(--tala-saye) 68%,
    var(--tala) 100%
  );
  --gold-edge: linear-gradient(180deg, var(--tala-roshan), var(--tala-saye));

  /* ── تایپوگرافی ──────────────────────────────────────────────────────
     ★ یک فونت برای کل سایت: همان Vazirmatn که جدول مشخصات — «ابعاد»،
     «جنس بدنه» — با آن نوشته می‌شود. تیتر، نام لاتین، دکمه و متن، همه
     یکی. قبلاً سه فونت روی یک صفحه بود (Amiri برای تیتر، Playfair
     برای نام لاتین) و ناهماهنگ دیده می‌شد.

     فایل‌های Amiri و Playfair در پوشه fonts می‌مانند ولی چون هیچ‌جا
     استفاده نمی‌شوند، مرورگر دانلودشان نمی‌کند. اگر روزی خواستید
     برگردند، فقط همین دو خطِ زیر را عوض کنید:
       --font-titr: 'Amiri', 'Vazirmatn', serif;
       --font-latin: 'Playfair Display', serif;
     ------------------------------------------------------------------- */
  --font-matn: 'Vazirmatn', system-ui, sans-serif;
  --font-titr: var(--font-matn);
  --font-latin: var(--font-matn);

  --fs-display: clamp(2.5rem, 6.5vw, 4.5rem);
  --fs-titr: clamp(1.9rem, 3.6vw, 2.75rem);
  --fs-h2: clamp(1.4rem, 2.2vw, 1.75rem);
  --fs-h3: 1.25rem;
  --fs-matn: 1.0625rem;
  --fs-kootah: 0.9375rem;
  --fs-riz: 0.8125rem;

  /* فارسی به فاصله خط سخاوتمند نیاز دارد */
  --lh-display: 1.15;
  --lh-titr: 1.25;
  --lh-matn: 1.9;
  --lh-kootah: 1.75;

  /* ── فاصله ───────────────────────────────────────────────────────── */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;
  --s8: 4.5rem;
  --s9: 7rem;

  --bar: 7rem;                 /* ارتفاع نوار بالا (و اندازه لوگو با آن تنظیم می‌شود) */
  --max-w: 74rem;
  --radius: 2px;               /* لبه‌ها تیزند؛ تنها منحنی سایت، بیضی مدال است. */

  /* ── حرکت ────────────────────────────────────────────────────────────
     کل زبان حرکتی سایت یک شکل است: بیضی مدال.
     ------------------------------------------------------------------- */
  --ease-medal: cubic-bezier(0.65, 0, 0.25, 1);
  --ease-narm: cubic-bezier(0.33, 1, 0.68, 1);
  --dur-medal-baz: 760ms;      /* باز شدن مدال تا تمام صفحه */
  --dur-medal-baste: 560ms;    /* جمع شدن به ساختمان */
  --dur-kotah: 200ms;
  --dur-motevaset: 380ms;
  --dur-tabesh: 8s;            /* تابش محیطی روی طلا */
  /* چرخش نور روی خطوط ساختمان — آرام و نرم، مثل حاشیهٔ دکمه‌های
     هوشمندِ کروم. تندتر از این، چشم را می‌زند. */
  --dur-rgb: 7s;               /* یک دور کاملِ گرادیان دور ساختمان‌ها */
  --dur-flow: 11s;             /* جابه‌جایی آرامِ خودِ رنگ‌ها */

  --z-tour: 10;
  --z-bar: 50;
  /* کشوی محصول باید بالای نوار سایت باشد، وگرنه دکمه بستنش
     زیر نوار گیر می‌کند و قابل کلیک نیست */
  --z-sheet: 60;
  --z-medal: 70;
  --z-clouds: 80;
}

/* احترام به تنظیم «کاهش حرکت» سیستم کاربر */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-medal-baz: 200ms;
    --dur-medal-baste: 160ms;
    --dur-kotah: 1ms;
    --dur-motevaset: 1ms;
    --dur-tabesh: 0s;
  }
}