/* ============================================================
   OVEX — tokens.css
   توکن‌های سیستم طراحی (رنگ، شعاع، سایه، چیدمان، فونت)
   دامنه: ovex.ir  |  متن‌دامین: ovex
   این فایل تنها منبع حقیقت برای رنگ‌هاست؛ هیچ فایل دیگری
   نباید رنگ خام (hex) بنویسد و باید از var(--ovex-*) استفاده کند.
   ============================================================ */

/* ---------- فونت وزیرمتن (محلی، بدون CDN) ---------- */
/* اگر فایل فونت موجود نباشد مرورگر به Tahoma برمی‌گردد. */

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

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

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

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

/* ---------- توکن‌های اصلی ---------- */

:root{
  /* رنگ اصلی نارنجی (Temu-like) */
  --ovex-primary:        #FB7701;
  --ovex-primary-600:    #E96A00;
  --ovex-primary-700:    #C85900;
  --ovex-primary-100:    #FFF1E3;
  --ovex-primary-50:     #FFF8F2;
  --ovex-primary-grad:   linear-gradient(135deg,#FF9A2E 0%,#FB7701 55%,#F05A00 100%);

  /* قرمز قیمت/تخفیف */
  --ovex-price:          #FF3B30;
  --ovex-price-700:      #D62B21;
  --ovex-sale-grad:      linear-gradient(135deg,#FF4E3A 0%,#FF2D55 100%);

  /* رنگ برند لوگو (بنفش/مجنتا) — فقط برای لوگو و لهجه‌های کوچک */
  --ovex-brand:          #C2178A;
  --ovex-brand-600:      #A5116F;

  /* خنثی */
  --ovex-ink:            #1A1A1A;
  --ovex-ink-2:          #4A4A4A;
  --ovex-ink-3:          #7A7A7A;
  --ovex-line:           #ECECEC;
  --ovex-line-2:         #D9D9D9;
  --ovex-bg:             #F5F5F5;
  --ovex-surface:        #FFFFFF;
  --ovex-success:        #14A44D;
  --ovex-warning:        #FFB020;
  --ovex-danger:         #E53935;

  /* شعاع و سایه */
  --ovex-r-sm: 8px;  --ovex-r: 12px;  --ovex-r-lg: 18px;  --ovex-r-xl: 24px;  --ovex-r-pill: 999px;
  --ovex-sh-1: 0 1px 2px rgba(0,0,0,.05);
  --ovex-sh-2: 0 2px 10px rgba(0,0,0,.07);
  --ovex-sh-3: 0 8px 28px rgba(0,0,0,.10);

  /* چیدمان */
  --ovex-container: 1440px;
  --ovex-gap: 12px;
  --ovex-header-h: 64px;

  --ovex-font: Vazirmatn, "Vazirmatn FD", IRANSansX, IRANSans, "Segoe UI", Tahoma, sans-serif;
}

/* ---------- توکن‌های کمکی (مشتق‌شده) ---------- */
/* این‌ها در SPEC نیامده‌اند ولی صرفاً از مقادیر بالا ساخته شده‌اند
   و برای جلوگیری از نوشتن hex خام در فایل‌های دیگر لازم‌اند. */

:root{
  /* سفید خالص و رنگ متن روی زمینه‌ی هشدار (برای کنتراست کافی) */
  --ovex-white:          #FFFFFF;
  --ovex-warning-ink:    #8A5A00;

  /* ارتفاع‌های ثابت چیدمان */
  --ovex-topbar-h:       36px;
  --ovex-nav-h:          46px;
  --ovex-mobilebar-h:    58px;
  --ovex-gap-lg:         20px;
  --ovex-gap-sm:         8px;
  --ovex-pad-x:          16px;

  /* لایه‌بندی (z-index) */
  --ovex-z-header:       900;
  --ovex-z-mega:         910;
  --ovex-z-overlay:      980;
  --ovex-z-drawer:       990;
  --ovex-z-mobilebar:    940;
  --ovex-z-modal:        1000;
  --ovex-z-toast:        1100;

  /* انیمیشن */
  --ovex-t-fast:         .15s;
  --ovex-t:              .24s;
  --ovex-t-slow:         .4s;
  --ovex-ease:           cubic-bezier(.25,.8,.25,1);

  /* پوشش تیره‌ی پشت کشو و مودال */
  --ovex-overlay:        rgba(17,17,17,.48);

  /* رنگ‌های حالت با شفافیت کم (برای پس‌زمینه‌ی بج‌ها) */
  --ovex-success-bg:     rgba(20,164,77,.10);
  --ovex-warning-bg:     rgba(255,176,32,.14);
  --ovex-danger-bg:      rgba(229,57,53,.10);
  --ovex-ink-bg:         rgba(26,26,26,.06);

  /* اسکلت لودینگ */
  --ovex-skeleton-1:     #EFEFEF;
  --ovex-skeleton-2:     #F8F8F8;

  /* عرض ستون فیلتر فروشگاه */
  --ovex-side-w:         264px;
}