/* ==========================================================================
   قارقارک — Design Tokens (لایه‌ی یکپارچه‌ی صفحه‌ی اصلی)
   ----------------------------------------------------------------------
   این فایل تنها منبع حقیقت رنگ، تایپ، فاصله، شعاع و حرکت در کل صفحه است.
   چهار پکیج ورودی (هدر v5، هیرو/درباره v2، اسلایدر محصولات، فوتر) هرکدام
   :root خودشان را داشتند و نام‌های یکسان با مقادیر متفاوت (--line، --accent،
   --e-out، --r-sm، --t-sm …) روی هم می‌افتاد. همه به این مقیاس نگاشت شده‌اند.

   پالت رسمی برند، نمونه‌برداری‌شده از فایل لوگو:
   جوهر گرافیت #151F27 · متالیک نقره‌ای #C4CBD3 · اکسنت برنجی #C8952E
   ========================================================================== */

/* ---------- فونت: وزیرمتن متغیر، لوکال و ساب‌ست‌شده (OFL) ----------
   عمداً بدون Google Fonts: از داخل ایران ناپایدار است و یک وابستگی شبکه‌ای
   روی مسیر بحرانی رندر می‌گذارد. (فوتر ورودی از fonts.googleapis می‌خواند؛
   آن لینک حذف شد.) */
@font-face {
  font-family: 'Vazirmatn VF';
  src: url('../fonts/Vazirmatn-Brand.woff2') format('woff2-variations'),
       url('../fonts/Vazirmatn-Brand.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0600-06FF, U+200C-200F, U+2010-2015,
                 U+2018-201E, U+2022, U+2026, U+2030, U+FB8A, U+FBFC-FBFF,
                 U+FDFC, U+FE70-FEFF;
}
@font-face {
  font-family: 'Vazirmatn Static';
  src: url('../fonts/Vazirmatn-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn Static';
  src: url('../fonts/Vazirmatn-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  color-scheme: light dark;

  /* ==== ۱. پالت خام برند — در هر دو تم ثابت ==== */
  --qq-ink-950:#070C10;
  --qq-ink-900:#0B1116;
  --qq-ink-800:#101922;
  --qq-ink-700:#151F27;   /* رنگ اصلی برند، عیناً از لوگو */
  --qq-ink-600:#1E2A34;
  --qq-ink-500:#2B3A47;

  --qq-steel-500:#556170; /* متن ثانویه — ۵٫۸۸:۱ روی زمینه‌ی روشن */
  --qq-steel-400:#6B7785;
  --qq-steel-300:#98A3AF;
  --qq-steel-200:#C4CBD3; /* متالیک لوگو */
  --qq-steel-100:#E2E7EC;
  --qq-steel-50:#F1F4F7;

  --qq-brass-800:#7A5412;
  --qq-brass-700:#8F6316;  /* برنجی متن‌خوان — ۴٫۹۴:۱ روی زمینه‌ی روشن */
  --qq-brass-600:#A97722;
  --qq-brass-500:#C8952E;  /* برنجی اصلی برند — سطح/فیل */
  --qq-brass-400:#DCAE4E;
  --qq-brass-300:#E9C87E;
  --qq-brass-100:#F7EEDC;

  /* ==== ۲. توکن‌های معنایی — تم روشن (پیش‌فرض) ==== */
  --bg:              #F4F6F9;
  --bg-2:            #EAEEF3;
  --bg-tint:         radial-gradient(120% 90% at 85% -10%, rgba(200,149,46,.09), transparent 60%),
                     radial-gradient(90% 70% at 5% -20%, rgba(21,31,39,.06), transparent 55%);
  --surface:         #FFFFFF;
  --surface-2:       #F7F9FB;
  --surface-3:       #EDF1F5;
  --surface-inverse: var(--qq-ink-700);
  /* ویترین تصویر محصول و صحنه‌ی زوم */
  --stage:           #E4EAF0;

  --glass:           rgba(255,255,255,.72);
  --glass-strong:    rgba(255,255,255,.88);
  --glass-blur:      20px;

  --text:            var(--qq-ink-700);
  --text-strong:     var(--qq-ink-900);
  --text-muted:      var(--qq-steel-500);
  --text-faint:      #64707E;            /* ۴٫۶:۱ روی --bg — کف مجاز متن ریز */
  --text-onbrass:    var(--qq-ink-700);  /* ۶٫۲:۱ روی #C8952E */
  --text-oninverse:  #EEF2F6;

  --accent:          var(--qq-brass-500);
  --accent-text:     var(--qq-brass-700);
  --accent-hover:    var(--qq-brass-400);
  --accent-deep:     var(--qq-brass-700);
  --accent-soft:     rgba(200,149,46,.12);
  --accent-softer:   rgba(200,149,46,.06);

  --line:            rgba(21,31,39,.10);
  --line-strong:     rgba(21,31,39,.18);
  --line-accent:     rgba(200,149,46,.38);

  --ring:            var(--qq-brass-600);

  /* وضعیت‌ها — همگی روی زمینه‌ی روشن ≥۴٫۵:۱ */
  --ok:              #1F7A4C;
  --ok-wash:         rgba(31,122,76,.12);
  --warn:            #9A5B0C;
  --warn-wash:       rgba(154,91,12,.12);
  --danger:          #C2321F;
  --danger-wash:     rgba(194,50,31,.12);
  --badge:           #A82918;   /* پس‌زمینه‌ی برچسب تخفیف — متن سفید ۶٫۱:۱ */
  --on-badge:        #FFFFFF;

  --shadow-sm:  0 1px 2px rgba(11,17,22,.05), 0 2px 8px rgba(11,17,22,.04);
  --shadow-md:  0 2px 6px rgba(11,17,22,.05), 0 10px 28px rgba(11,17,22,.07);
  --shadow-lg:  0 8px 20px rgba(11,17,22,.07), 0 24px 60px rgba(11,17,22,.10);
  --shadow-brass: 0 6px 18px rgba(160,118,31,.28);
  --inner-hair: inset 0 1px 0 rgba(255,255,255,.75);
  --engrave:    0 1px 0 rgba(255,255,255,.85);   /* حکاکی روی فلز روشن */
  --grain: .035;

  /* فلزِ ابزار — تیغه‌ی کولیس، فک‌ها، آجِ پیچ برنجی */
  --chrome:      #C4CBD3;
  --chrome-deep: #949DA8;
  --chrome-dark: #77818D;
  --knurl:       rgba(0,0,0,.22);

  /* ==== ۳. تایپوگرافی ====
     یک خانواده با اختلاف وزن؛ در فارسی جفت‌کردن دو خانواده به ناهماهنگی
     ارتفاع x و کرنینگ می‌انجامد. رجیستر مونو فقط برای کد فنی و ابعاد. */
  --font-ui: 'Vazirmatn VF', 'Vazirmatn Static', 'Vazirmatn',
             'IRANSansX', 'Shabnam', 'Segoe UI', Tahoma, system-ui, sans-serif;
  --font-mono: ui-monospace, 'JetBrains Mono', 'SFMono-Regular', Menlo, Consolas, monospace;

  --fs-mono:.6875rem;                                    /* ۱۱px ثابت */
  --fs-3xs: clamp(.6875rem, .665rem + .11vw, .75rem);    /* ۱۱ → ۱۲ */
  --fs-2xs: clamp(.75rem,   .72rem  + .15vw, .8125rem);  /* ۱۲ → ۱۳ */
  --fs-xs:  clamp(.8125rem, .78rem  + .18vw, .875rem);   /* ۱۳ → ۱۴ */
  --fs-sm:  clamp(.875rem,  .84rem  + .2vw,  .9375rem);  /* ۱۴ → ۱۵ */
  --fs-md:  clamp(.9375rem, .9rem   + .25vw, 1.0625rem); /* ۱۵ → ۱۷ */
  --fs-base:1rem;
  --fs-lg:  clamp(1.0625rem,1rem    + .4vw,  1.25rem);   /* ۱۷ → ۲۰ */
  --fs-xl:  clamp(1.25rem,  1.13rem + .55vw, 1.5rem);    /* ۲۰ → ۲۴ */
  --fs-2xl: clamp(1.5rem,   1.32rem + .9vw,  2rem);      /* ۲۴ → ۳۲ */
  --fs-3xl: clamp(1.875rem, 1.55rem + 1.6vw, 2.75rem);   /* ۳۰ → ۴۴ */
  --fs-4xl: clamp(2.125rem, 1.65rem + 2.4vw, 3.5rem);    /* ۳۴ → ۵۶ — تیتر هیرو */
  --fs-read:clamp(2.25rem,  1.7rem  + 3.2vw, 4.5rem);    /* قرائت ابزار */

  --lh-tight:1.25;
  --lh-snug:1.55;
  --lh-body:1.85;      /* فارسی به لیدینگ بازتر نیاز دارد */
  --tracking-brand:-.015em;

  /* ==== ۴. فاصله و شعاع ==== */
  --sp-1:.25rem;
  --sp-2:.5rem;
  --sp-3:.75rem;
  --sp-4:1rem;
  --sp-5:1.25rem;
  --sp-6:clamp(1.5rem, 1.35rem + .6vw, 2rem);
  --sp-8:clamp(2rem,   1.75rem + 1vw,  2.75rem);
  --sp-10:clamp(2.5rem,2.1rem  + 1.4vw,3.5rem);
  --sp-12:clamp(3rem,  2.4rem  + 2.2vw,5rem);

  --r-xs:8px; --r-sm:12px; --r-md:16px; --r-lg:20px; --r-xl:26px; --r-2xl:32px;
  --r-pill:999px;

  /* ==== ۵. حرکت ==== */
  --e-out:    cubic-bezier(.22,.61,.36,1);
  --e-expo:   cubic-bezier(.16,1,.3,1);
  --e-inout:  cubic-bezier(.65,.05,.36,1);
  --e-spring: cubic-bezier(.34,1.4,.5,1);
  --d-fast:140ms; --d-base:220ms; --d-slow:340ms; --d-cine:700ms;

  /* ==== ۶. چیدمان و لایه‌بندی ====
     یک مقیاس z برای کل صفحه؛ سه پکیج ورودی سه مقیاس جدا داشتند. */
  --container:1320px;
  --gutter: clamp(1rem, 3.2vw, 2rem);
  --topbar-h:40px;
  --header-h:74px;
  --header-total: calc(var(--topbar-h) + var(--header-h));

  --z-actionbar:45;   /* نوار کنش چسبان موبایل — پیش‌تر عدد خام در sections.css بود */
  --z-mega:55;
  --z-header:60;
  --z-totop:65;
  --z-backdrop:70;
  --z-drawer:80;
  --z-toast:90;
}

/* ==========================================================================
   تم تیره‌ی واقعی — هم برای «پیروی از سیستم» و هم انتخاب دستی کاربر
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:              #080D12;
    --bg-2:            #0B1218;
    --bg-tint:         radial-gradient(120% 90% at 85% -10%, rgba(200,149,46,.10), transparent 60%),
                       radial-gradient(90% 70% at 5% -20%, rgba(120,160,200,.06), transparent 55%);
    --surface:         #111A22;
    --surface-2:       #16212B;
    --surface-3:       #1D2A35;
    --surface-inverse: #E6EBF0;
    --stage:           #223039;

    --glass:           rgba(17,26,34,.68);
    --glass-strong:    rgba(17,26,34,.90);

    --text:            #E6EBF0;
    --text-strong:     #F5F8FA;
    --text-muted:      #9AA7B4;   /* ۷٫۰۲:۱ روی #111A22 */
    --text-faint:      #8593A1;   /* ۵٫۳:۱ روی #111A22 */
    --text-onbrass:    var(--qq-ink-900);
    --text-oninverse:  var(--qq-ink-800);

    --accent:          var(--qq-brass-400);
    --accent-text:     #E0B457;   /* ۸٫۸۹:۱ روی سطح تیره */
    --accent-hover:    var(--qq-brass-300);
    --accent-deep:     var(--qq-brass-600);
    --accent-soft:     rgba(220,174,78,.14);
    --accent-softer:   rgba(220,174,78,.07);

    --line:            rgba(255,255,255,.09);
    --line-strong:     rgba(255,255,255,.16);
    --line-accent:     rgba(220,174,78,.34);

    --ring:            var(--qq-brass-300);

    --ok:              #4CC38A;
    --ok-wash:         rgba(76,195,138,.14);
    --warn:            #E0A34B;
    --warn-wash:       rgba(224,163,75,.14);
    --danger:          #F0796B;
    --danger-wash:     rgba(240,121,107,.16);
    --badge:           #B12E1B;
    --on-badge:        #FFFFFF;

    --shadow-sm:  0 1px 2px rgba(0,0,0,.4);
    --shadow-md:  0 4px 12px rgba(0,0,0,.45);
    --shadow-lg:  0 10px 30px rgba(0,0,0,.55), 0 30px 70px rgba(0,0,0,.35);
    --shadow-brass: 0 6px 20px rgba(220,174,78,.20);
    --inner-hair: inset 0 1px 0 rgba(255,255,255,.06);
    --engrave:    0 -1px 0 rgba(0,0,0,.55), 0 1px 0 rgba(255,255,255,.10);
    --grain: .06;

    --chrome:      #8B96A2;
    --chrome-deep: #5B6570;
    --chrome-dark: #3D4650;
    --knurl:       rgba(0,0,0,.34);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:#080D12; --bg-2:#0B1218;
  --bg-tint: radial-gradient(120% 90% at 85% -10%, rgba(200,149,46,.10), transparent 60%),
             radial-gradient(90% 70% at 5% -20%, rgba(120,160,200,.06), transparent 55%);
  --surface:#111A22; --surface-2:#16212B; --surface-3:#1D2A35;
  --surface-inverse:#E6EBF0; --stage:#223039;
  --glass:rgba(17,26,34,.68); --glass-strong:rgba(17,26,34,.90);
  --text:#E6EBF0; --text-strong:#F5F8FA; --text-muted:#9AA7B4; --text-faint:#8593A1;
  --text-onbrass:var(--qq-ink-900); --text-oninverse:var(--qq-ink-800);
  --accent:var(--qq-brass-400); --accent-text:#E0B457; --accent-hover:var(--qq-brass-300);
  --accent-deep:var(--qq-brass-600);
  --accent-soft:rgba(220,174,78,.14); --accent-softer:rgba(220,174,78,.07);
  --line:rgba(255,255,255,.09); --line-strong:rgba(255,255,255,.16);
  --line-accent:rgba(220,174,78,.34); --ring:var(--qq-brass-300);
  --ok:#4CC38A; --ok-wash:rgba(76,195,138,.14);
  --warn:#E0A34B; --warn-wash:rgba(224,163,75,.14);
  --danger:#F0796B; --danger-wash:rgba(240,121,107,.16);
  --badge:#B12E1B; --on-badge:#FFFFFF;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 4px 12px rgba(0,0,0,.45);
  --shadow-lg:0 10px 30px rgba(0,0,0,.55), 0 30px 70px rgba(0,0,0,.35);
  --shadow-brass:0 6px 20px rgba(220,174,78,.20);
  --inner-hair: inset 0 1px 0 rgba(255,255,255,.06);
  --engrave: 0 -1px 0 rgba(0,0,0,.55), 0 1px 0 rgba(255,255,255,.10);
  --grain:.06;
  --chrome:#8B96A2; --chrome-deep:#5B6570; --chrome-dark:#3D4650;
  --knurl:rgba(0,0,0,.34);
}
:root[data-theme="light"] { color-scheme: light; }