/* ووموو — توکن‌های هویت بصری نسخه ۲ */
/* این فایل فقط توکن و فونت دارد. قواعد پایه در base.css است. */
/* ترتیب بارگذاری: tokens.css سپس base.css */

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

:root{
  /* کنترل‌های بومی مرورگر (چک‌باکس، اسکرول‌بار) هم تیره رندر شوند */
  color-scheme:dark;

  /* رنگ — تیره، پیش‌فرض */
  --page:#111113; --band:#1E1E22; --circle:#2C2C31; --win:#08080A;
  --ink:#F7F6F2; --muted:#8E8E93;
  --signal:#E2402A; --on-signal:#FFFFFF;
  --wire:rgba(247,246,242,.10);

  /* شیشه — پس‌زمینه واقعاً از پشتش دیده می‌شود، فقط تار و کمی
     تیره. رنگِ کارت نیست، لایه‌ی نور است.
       --glass       تنتِ خودِ شیشه
       --glass-thin  شیشه‌ی نازک‌تر، جایی که محصول باید پیدا باشد
       --glass-solid فال‌بک مات، برای مرورگری که backdrop-filter ندارد
       --glass-line  خط دور شیشه
       --glass-rim   لبه‌ی بالا، جایی که نور می‌گیرد */
  /* تینت عمداً کم است تا شیشه مات نشود. چیزی که متن را خوانا
     نگه می‌دارد تینت نیست، --glass-dim است: روشناییِ پشتِ شیشه
     کم می‌شود، نه اینکه پوشانده شود. نتیجه شیشه‌ای است که هم
     پشتش دیده می‌شود هم متنش خوانده می‌شود. */
  --glass:rgba(24,24,28,.20); --glass-solid:#19191D;
  --glass-thin:rgba(24,24,28,.14);
  /* شیشه‌ی غلیظ‌تر — کارتی که متنِ اصلی را حمل می‌کند */
  --glass-deep:rgba(24,24,28,.34);
  --glass-line:rgba(247,246,242,.24);
  --glass-rim:rgba(247,246,242,.44);

  /* پس‌زمینه‌ی وجه‌دار — بدون آن، شیشه روی یک رنگِ یک‌دست دیده
     نمی‌شود؛ چیزی نیست که از پشتش رد شود.

     حجم از سه چیز می‌آید، نه از پررنگ‌تر کردن:
       conic با توقفِ سخت  → وجه‌های مثلثی که از یک نقطه باز می‌شوند
       باریکه‌ی روشنِ اولِ هر وجه → درزِ دو وجه که نور می‌گیرد
       سه مبدأ در سه گوشه  → وجه‌ها همدیگر را قطع می‌کنند
     بدون درزها این فقط چند نوارِ تخت است؛ با آن‌ها لبه پیدا می‌کند.

     کنتراست عمداً محدود مانده — بیشترین شفافیت حدود ۱۰٪ — تا
     پشتِ متنِ کارت‌ها شلوغ نشود. */
  /* خاموش به خواست کارفرما: پس‌زمینه یکدست تیره می‌ماند.
     این با visual-identity.md §۵ تناقض دارد — سند هنوز به‌روز
     نشده و لایه‌بندی پنج‌گانه را امضای برند می‌داند.
     برای برگرداندن: این خط را بردار و --facet-off را به --facet
     تغییر نام بده. */
  --facet:none;
  --facet-off:
    conic-gradient(from 198deg at 16% 8%,
      rgba(247,246,242,.100) 0 .8deg,
      rgba(247,246,242,.070) .8deg 15deg,
      transparent 15deg 41deg,
      rgba(247,246,242,.038) 41deg 60deg,
      transparent 60deg 360deg),
    conic-gradient(from 22deg at 90% 26%,
      rgba(247,246,242,.090) 0 .8deg,
      rgba(247,246,242,.058) .8deg 19deg,
      transparent 19deg 48deg,
      rgba(247,246,242,.030) 48deg 69deg,
      transparent 69deg 360deg),
    conic-gradient(from 126deg at 58% 98%,
      rgba(247,246,242,.085) 0 .8deg,
      rgba(247,246,242,.050) .8deg 17deg,
      transparent 17deg 40deg,
      rgba(247,246,242,.026) 40deg 59deg,
      transparent 59deg 360deg),
    linear-gradient(112deg,
      rgba(247,246,242,.052) 0 23%,
      rgba(247,246,242,.100) 23% 23.4%,
      transparent 23.4% 51%,
      rgba(247,246,242,.032) 51% 70%,
      transparent 70%),
    radial-gradient(120% 78% at 74% -6%,rgba(247,246,242,.075),transparent 64%);

  /* شبکه مدولار — لایه ۴ در visual-identity.md §۵.
     مربع‌های خطی که مثل ماژول‌های واقعی روی هم چیده شده‌اند.
     «باید حس شود، نه دیده شود» — به همین دلیل خط‌ها خیلی زیر سقف
     ۱۰٪ می‌مانند؛ روی زمینه‌ی تیره هر چیزی بالاتر از این، شبکه را
     به یک کاغذ شطرنجی تبدیل می‌کند و محصول را می‌دزدد. */
  --grid-line:rgba(247,246,242,.055);
  --grid-cell:clamp(56px,5.5vw,84px);
  /* شبکه هم خاموش — «یکدست تیره» یعنی خط هم نباشد.
     برای برگرداندن: --grid-off را به --grid تغییر نام بده. */
  --grid:none;
  --grid-off:
    repeating-linear-gradient(to left,
      var(--grid-line) 0 var(--hair),transparent var(--hair) var(--grid-cell)),
    repeating-linear-gradient(to bottom,
      var(--grid-line) 0 var(--hair),transparent var(--hair) var(--grid-cell));

  /* پهنای کارت‌های تک — همه یک اندازه باشند */
  --card-w:min(680px,92vw);

  --gline:rgba(247,246,242,.20); --shadow:rgba(0,0,0,.70);

  /* فونت */
  --fa:"Kalameh","Vazirmatn",Tahoma,sans-serif;

  /* نشان برند */
  --mark:url("img/mark.png");

  /* اندازه — visual-identity.md §۳ */
  --fs-giant:clamp(48px,7vw,110px);   /* تیتر غول    ۴۸–۱۱۰ */
  --fs-title:clamp(30px,3.4vw,44px);  /* تیتر صفحه   ۳۰–۴۴  */
  --fs-card:clamp(24px,1.8vw,28px);   /* تیتر کارت   ۲۴–۲۸  */
  --fs-body:15px;                     /* متن                */
  --fs-body-s:14px;                   /* متن، پله کوچک      */
  --fs-micro:12.5px;                  /* متن فرعی           */

  /* رنگ خود محصول — در هر دو حالت یکسان است */
  --mod-white:#F7F5F0; --mod-black:#141417;

  /* فاصله — مضرب ۴ */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  /* لایه‌بندی پس‌زمینه — visual-identity.md §۵ */
  --band-h:38vh;
  --circle-d:min(88vh,72vw);
  --circle-sel:min(84vh,86vw);
  /* نمایشگر ورقی عکس محصول — بلندی دسته، ورقِ باز، ورقِ بسته.
     بلندی به vw هم بند است تا ورقِ باز روی موبایل مربع بماند و
     عکس مربع محصول بریده نشود. */
  --gal-h:min(62vh,620px,88vw);
  --gal-open:min(62vh,620px,78vw);
  --gal-rib:clamp(38px,5vw,84px);
  --cell:clamp(38px,4.4vw,58px);

  /* شعاع و خط */
  --r-card:18px; --r-full:100px; --hair:.5px;

  /* حرکت */
  --e:cubic-bezier(.18,.86,.24,1);
  --t-fast:300ms; --t-mid:420ms; --t-slow:760ms;

  /* شیشه: بلور بلند حس شکست نور می‌دهد — لبه‌ی چیزهای پشت کارت
     کشیده و پخش می‌شود، نه اینکه صاف پوشانده شود.
     --glass-dim روشنایی پشت شیشه را کم می‌کند (در حالت روشن
     زیاد). همین است که جای تینتِ غلیظ را می‌گیرد. */
  --blur:64px;
  --glass-dim:.52;
  --glass-filter:blur(var(--blur)) saturate(1.7) brightness(var(--glass-dim));
}

[data-t="light"]{
  color-scheme:light;
  --page:#F4F2ED; --band:#E0DCD3; --circle:#FDFCFA; --win:#FFFFFF;
  /* muted پیش‌تر #7C7A73 بود: نسبت کنتراستش روی --page فقط
     ۳٫۸۴ و روی --band فقط ۳٫۱۴ درمی‌آمد، هر دو زیر حد ۴٫۵ که
     WCAG AA برای متن معمولی می‌خواهد. و این رنگ فقط تزئینی
     نیست — قیمت، کد ماژول، ابعاد و برچسب‌ها همه با همین
     نوشته می‌شوند.
     #63615C روی --page به ۵٫۵۳ و روی --band به ۴٫۵۲ می‌رسد،
     پس روی هر دو سطحِ حالت روشن قبول است. حالت تیره دست
     نخورد؛ آنجا #8E8E93 از قبل ۵٫۷۸ بود. */
  --ink:#111114; --muted:#63615C;
  --wire:rgba(17,17,20,.10);
  --glass:rgba(255,255,255,.24); --glass-solid:#FEFEFD;
  --glass-thin:rgba(255,255,255,.16);
  --glass-deep:rgba(255,255,255,.46);
  /* در حالت روشن، شیشه پشتش را روشن می‌کند نه تیره */
  --glass-dim:1.85;
  --glass-line:rgba(17,17,20,.14);
  --glass-rim:rgba(255,255,255,.88);
  /* در حالت روشن وجه‌ها سایه‌اند، نه نور — و چون سایه روی زمینه‌ی
     روشن قوی‌تر خوانده می‌شود، شفافیت‌ها کمترند */
  --facet:none;
  --facet-off:
    conic-gradient(from 198deg at 16% 8%,
      rgba(17,17,20,.075) 0 .8deg,
      rgba(17,17,20,.050) .8deg 15deg,
      transparent 15deg 41deg,
      rgba(17,17,20,.028) 41deg 60deg,
      transparent 60deg 360deg),
    conic-gradient(from 22deg at 90% 26%,
      rgba(17,17,20,.066) 0 .8deg,
      rgba(17,17,20,.042) .8deg 19deg,
      transparent 19deg 48deg,
      rgba(17,17,20,.022) 48deg 69deg,
      transparent 69deg 360deg),
    conic-gradient(from 126deg at 58% 98%,
      rgba(17,17,20,.062) 0 .8deg,
      rgba(17,17,20,.036) .8deg 17deg,
      transparent 17deg 40deg,
      rgba(17,17,20,.019) 40deg 59deg,
      transparent 59deg 360deg),
    linear-gradient(112deg,
      rgba(17,17,20,.038) 0 23%,
      rgba(17,17,20,.075) 23% 23.4%,
      transparent 23.4% 51%,
      rgba(17,17,20,.024) 51% 70%,
      transparent 70%),
    radial-gradient(120% 78% at 74% -6%,rgba(17,17,20,.055),transparent 64%);
  /* شبکه در حالت روشن هم خط تیره است، نه روشن */
  --grid-line:rgba(17,17,20,.055);
  --gline:rgba(17,17,20,.14); --shadow:rgba(17,17,20,.22);
}