/*
  توکن‌های سیستم طراحی — سایت یک درجه (OneDegree)
  منبع: S:\ObsidianVault\10_Projects\onedegree-brand\website\design-system.md

  فقط توکن اینجاست، هیچ استایل کامپوننتی. تغییر ظاهر سایت یعنی تغییر
  این فایل، نه دویدن در قالب‌ها.
*/

/* --- پیدا (Peyda) — چهره‌ی «آژانس» -------------------------------------

   ⚠️ چرا وریبل نیست: نُه وزنِ پیدا قابل درون‌یابی نیستند (۱۷۵ تا ۳۰۳
   گلیف با تعداد نقطه‌ی متفاوت، و Regular حتی ترتیب گلیف متفاوت). ساخت
   فونت وریبل با این مسترها حروف را در وزن‌های میانی مچاله می‌کند.
   به‌جایش چهار وزنِ استاتیک؛ چون فونت فقط ۳۶۴ گلیف دارد هرکدام ~۲۹KB
   می‌شود. ساخت با scripts/build_fonts.py.

   ⚠️ بلاگ این فونت را نمی‌گیرد — body.is-reading برمی‌گرداند به وزیرمتن.
   خواندن متن بلندِ فارسی با پیدا سخت‌تر است. */

@font-face {
  font-family: "Peyda";
  src: url("../fonts/Peyda-Regular.948a6d359f41.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Peyda";
  src: url("../fonts/Peyda-Medium.0088614e1fce.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Peyda";
  src: url("../fonts/Peyda-Bold.9416d4b38d42.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Peyda";
  src: url("../fonts/Peyda-Black.08ac332af62f.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/Vazirmatn-Regular.cdc140628f11.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ⚠️ فایل متغیر است — گوگل برای وزن ۵۰۰ و ۷۰۰ همین یک فایل را می‌دهد.
   فقط زیرمجموعه latin دانلود شده (۲۲KB)؛ فارسی از Vazirmatn می‌آید. */
@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/SpaceGrotesk-Variable.87c506d88b9f.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122;
}

@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/Vazirmatn-Bold.7958481fe611.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- رنگ — ۶ توکن، نه بیشتر ------------------------------------- */
  --ink: #0f1720;         /* متن اصلی، پس‌زمینه بخش تیره */
  --paper: #fafaf8;       /* پس‌زمینه صفحه */
  --surface: #f1f0ec;     /* کارت، بخش متناوب */
  --muted: #667085;       /* متن کم‌رنگ، کپشن، متا */
  --line: #e3e1db;        /* خط جداکننده، حاشیه */
  --accent: #c7431a;      /* دکمه، لینک، تأکید */
  --accent-soft: #fdede6; /* پس‌زمینه ملایم تأکید */

  /* ⚠️ --accent روی زمینه تیره کنتراست ۳:۱ می‌دهد — کافی نیست.
     هر تأکید نارنجی روی .on-dark باید این را بگیرد، نه --accent. */
  --accent-bright: #f2683c;

  /* روی بخش تیره، همین توکن‌ها معکوس استفاده می‌شوند */
  --ink-paper: #fafaf8;
  --ink-muted: #9aa5b1;
  --ink-line: rgb(250 250 248 / 0.12);
  --ink-surface: rgb(250 250 248 / 0.06);

  /* --- تایپوگرافی ---------------------------------------------------- */
  /* دو چهره، دو کار:
       --font          آژانس — پیدا، مدرن‌تر و تیزتر
       --font-reading  بلاگ — وزیرمتن، برای متن بلند خواناتر
     سوییچ با کلاس body.is-reading انجام می‌شود، نه با بازنویسی در قالب. */
  /* ⚠️ وزیرمتن عمداً در زنجیره‌ی «آژانس» نیست. پوشش پیدا سنجیده شد:
     هیچ نویسه‌ای از صفحه بیرون از cmap آن نیست. با نگه‌داشتنش به‌عنوان
     fallback، کروم در بازه‌ی swap هر دو وزنش را هم دانلود می‌کرد —
     ~۱۰۰KB که هیچ‌وقت رنگ نمی‌خورد. Tahoma فونتِ سیستمی است و هزینه ندارد. */
  --font: "Peyda", "Tahoma", sans-serif;
  --font-reading: "Vazirmatn", "Tahoma", sans-serif;
  --font-display: "Space Grotesk", "Peyda", "Tahoma", sans-serif;

  --fs-display: 42px;
  --fs-h1: 34px;
  --fs-h2: 27px;
  --fs-h3: 21px;
  --fs-body: 17px;
  --fs-small: 15px;
  --fs-caption: 13px;

  --lh-display: 1.3;
  --lh-h1: 1.35;
  --lh-h2: 1.4;
  --lh-h3: 1.5;
  --lh-body: 1.9;
  --lh-small: 1.8;
  --lh-caption: 1.6;

  /* --- فاصله ----------------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;

  --content-width: 1120px;
  --prose-width: 34rem;

  /* --- شعاع، خط، سایه -------------------------------------------------- */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-pill: 999px;
  --border: 1px solid var(--line);

  /* شیشه‌ی گرم — هدر و کپسول‌ها روی هیرو.
     ⚠️ عمداً گرم است نه --ink سرد: هیرو کهربایی است و یک نوارِ آبی‌خاکستری
     رویش، همان چیزی بود که کل صفحه را «خام» نشان می‌داد. */
  --glass: rgb(26 17 12 / 0.55);
  --glass-strong: rgb(20 13 9 / 0.78);
  --glass-line: rgb(255 214 180 / 0.16);
  --glow-accent: rgb(242 104 60 / 0.35);

  --shadow-1: 0 1px 2px rgb(15 23 32 / 0.06);
  --shadow-2: 0 8px 24px rgb(15 23 32 / 0.08);

  /* --- حرکت -------------------------------------------------------------- */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  /* فنری با کمی بیش‌جهش — فقط برای بازگشت از فشار (scale)، نه ورود */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 120ms;
  --dur: 200ms;
}

/* بلاگ: متنِ بلند با وزیرمتن خواناتر است. چون h1..h3 هم از --font ارث
   می‌برند، کلِ صفحه‌ی بلاگ وزیرمتن می‌شود — همان چیزی که خواسته شده. */
body.is-reading {
  --font: var(--font-reading);
}

@media (max-width: 640px) {
  :root {
    --fs-display: 32px;
    --fs-h1: 28px;
    --fs-h2: 23px;
    --fs-h3: 19px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur: 0ms;
  }
}