/* منبع اصلی: design/tokens.css — این فایل کپی است؛ تغییرها در design/tokens.css انجام و دوباره کپی شود. هنگام کپی، مسیر فونت‌ها باید ../fonts/ باشد (نه ../assets/fonts/)، چون این فایل در assets/css/ قالب است. */
/* ترب‌ینو — توکن‌ها · فاز ۰ (جهت برند: آبی اطمینان)
   سطح ۱ پایه: پالت و مقیاس خام · سطح ۲ معنایی: نقش‌ها · سطح ۳ کامپوننت: فقط به سطح ۲ ارجاع می‌دهد.
   تعویض برند = تغییر پنج متغیر --tb-color-brand-* در سطح ۲؛ هیچ کامپوننتی رنگ خام نمی‌خواند.
   تم: data-tb-theme="light" (پیش‌فرض) یا "dark" روی html یا هر والد. */

@font-face {
  font-family: 'Peyda';
  src: url('../fonts/PeydaWebVF.woff2') format('woff2'), url('../fonts/PeydaWebVF.woff') format('woff');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* ================= سطح ۱: پایه ================= */
  /* خنثی (با ته‌رنگ سرد، هم‌خانواده‌ی برند) */
  --tb-ink-0: #FFFFFF;
  --tb-ink-50: #F3F4F8;
  --tb-ink-100: #E3E6EE;
  --tb-ink-500: #5A6072;
  --tb-ink-900: #141826;
  --tb-night-0: #0C0F1A;
  --tb-night-50: #151927;
  --tb-night-100: #1D2233;
  --tb-night-200: #2A3045;
  --tb-night-500: #A3A9BC;
  --tb-night-900: #EDEFF5;

  /* برند: آبی جوهری (کنتراست سفید روی ۶۰۰ ≈ ۱۰:۱) */
  --tb-blue-50: #E9ECF8;
  --tb-blue-600: #1F35A3;
  --tb-blue-700: #172A85;
  --tb-blue-200: #AEB9F7;
  --tb-blue-300: #8C9CF0;
  --tb-blue-900: #182040;
  --tb-blue-ink: #0B1236;

  /* وضعیت: فام‌ها عمداً دور از آبی برند (برند ≈ ۲۳۰°؛ اطلاع ≈ ۱۸۵° فیروزه‌ای) */
  --tb-green-50: #E3F4E8;  --tb-green-600: #1A7F37;  --tb-green-300: #4FCB73;  --tb-green-900: #12301C;
  --tb-amber-50: #FFF1D6;  --tb-amber-700: #8A4A00;  --tb-amber-300: #F2B84B;  --tb-amber-900: #33240A;
  --tb-red-50: #FDE7E5;    --tb-red-600: #C42B1F;    --tb-red-300: #FF7D73;    --tb-red-900: #3A1513;
  --tb-teal-50: #E0F4F4;   --tb-teal-700: #0A6E73;   --tb-teal-300: #4FC6C9;   --tb-teal-900: #0D2C2E;

  /* فاصله — گرید ۸ */
  --tb-space-0: 0;
  --tb-space-half: 4px; /* فقط فاصله‌ی آیکن تا متن و عدد تا واحد */
  --tb-space-1: 8px;
  --tb-space-2: 16px;
  --tb-space-3: 24px;
  --tb-space-4: 32px;
  --tb-space-5: 40px;
  --tb-space-6: 48px;
  --tb-space-8: 64px;
  --tb-space-10: 80px;

  /* گردی — ۲۴ ثابت. قاعده‌ی استثنا: هر جزء کوتاه‌تر از ۴۰ پیکسل (بج، تگ، چک‌باکس، شمارنده) ۸ می‌گیرد،
     چون ۲۴ روی ارتفاع کمتر از ۴۸ شکل را دایره یا کپسول می‌کند. مقدار دیگری مجاز نیست. */
  --tb-radius: 24px;
  --tb-radius-sm: 8px;

  /* تایپوگرافی */
  --tb-font: 'Peyda', Tahoma, sans-serif;
  --tb-font-num: var(--tb-font); /* فقط پیدا. ارقام فارسی پیدا متناسب‌اند و tnum رویشان اثری ندارد؛ این توکن برای قیمت‌ها، شمارنده‌ها و کدها نگه داشته شده تا تعویض بعدی فونت ارقام یک خط باشد. */
  --tb-fw-regular: 400;
  --tb-fw-medium: 500;
  --tb-fw-semibold: 600;
  --tb-fw-bold: 700;
  --tb-fw-extrabold: 800;
  --tb-fw-black: 900;
  --tb-fs-display: 40px;  --tb-lh-display: 1.4;
  --tb-fs-h1: 32px;       --tb-lh-h1: 1.45;
  --tb-fs-h2: 24px;       --tb-lh-h2: 1.5;
  --tb-fs-h3: 20px;       --tb-lh-h3: 1.6;
  --tb-fs-body-lg: 17px;  --tb-lh-body-lg: 1.9;
  --tb-fs-body: 15px;     --tb-lh-body: 1.9;
  --tb-fs-sm: 13px;       --tb-lh-sm: 1.8;   /* کف اندازه؛ کوچک‌تر ممنوع */
  --tb-fs-product-title: 20px; --tb-lh-product-title: 1.7; /* عنوان کامل ترب، بدون برش */
  /* قیمت: ارقام فارسی، وزن ۸۰۰، عرض ثابت ارقام؛ «تومان» کوچک‌تر و کم‌رنگ‌تر بعد از عدد */
  --tb-fs-price-xl: 32px; /* باکس خرید */
  --tb-fs-price-lg: 24px; /* کارت محصول */
  --tb-fs-price-md: 17px; /* سبد و خلاصه‌ی سفارش */
  --tb-fs-price-unit: 14px;
  --tb-fs-price-old: 14px;
  --tb-fw-price: 800;
  --tb-num-features: "tnum" 1;

  /* حرکت */
  --tb-dur-fast: 120ms;   /* فشردن، تغییر رنگ */
  --tb-dur: 200ms;        /* هاور، باز شدن اجزای کوچک */
  --tb-dur-slow: 320ms;   /* دیالوگ، کشو، ورود بخش */
  --tb-ease: cubic-bezier(.2,.8,.2,1);       /* استاندارد */
  --tb-ease-enter: cubic-bezier(.32,.72,0,1); /* ورود */
  --tb-ease-exit: cubic-bezier(.4,0,1,1);     /* خروج */
  --tb-press-scale: .98;
  --tb-lift: -2px;

  /* ================= سطح ۲: معنایی (تم روشن) ================= */
  --tb-color-bg: var(--tb-ink-50);
  --tb-color-surface: var(--tb-ink-0);
  --tb-color-surface-2: var(--tb-ink-50);
  --tb-color-line: var(--tb-ink-100);
  --tb-color-text: var(--tb-ink-900);
  --tb-color-text-muted: var(--tb-ink-500);

  --tb-color-brand: var(--tb-blue-600);
  --tb-color-brand-hover: var(--tb-blue-700);
  --tb-color-on-brand: #FFFFFF;
  --tb-color-brand-soft: var(--tb-blue-50);
  --tb-color-brand-text: var(--tb-blue-600);

  --tb-color-success: var(--tb-green-600);  --tb-color-success-soft: var(--tb-green-50);
  --tb-color-warning: var(--tb-amber-700);  --tb-color-warning-soft: var(--tb-amber-50);
  --tb-color-error: var(--tb-red-600);      --tb-color-error-soft: var(--tb-red-50);
  --tb-color-info: var(--tb-teal-700);      --tb-color-info-soft: var(--tb-teal-50);

  --tb-shadow-1: 0 1px 2px rgb(20 24 38 / .05), 0 8px 24px -12px rgb(20 24 38 / .12);   /* کارت */
  --tb-shadow-2: 0 2px 4px rgb(20 24 38 / .05), 0 16px 32px -12px rgb(20 24 38 / .18);  /* هاور، کارت برجسته */
  --tb-shadow-3: 0 4px 8px rgb(20 24 38 / .06), 0 32px 64px -16px rgb(20 24 38 / .28);  /* پاپ‌اور، دیالوگ */
  --tb-shadow-brand: 0 10px 20px -10px rgb(31 53 163 / .6);                              /* فقط دکمه‌ی اصلی */
  --tb-focus-ring: 0 0 0 2px var(--tb-color-surface), 0 0 0 4px var(--tb-color-brand);  /* حلقه‌ی دوتایی */
}

[data-tb-theme="dark"] {
  --tb-color-bg: var(--tb-night-0);
  --tb-color-surface: var(--tb-night-50);
  --tb-color-surface-2: var(--tb-night-100);
  --tb-color-line: var(--tb-night-200);
  --tb-color-text: var(--tb-night-900);
  --tb-color-text-muted: var(--tb-night-500);

  --tb-color-brand: var(--tb-blue-300);
  --tb-color-brand-hover: var(--tb-blue-200);
  --tb-color-on-brand: var(--tb-blue-ink);
  --tb-color-brand-soft: var(--tb-blue-900);
  --tb-color-brand-text: var(--tb-blue-200);

  --tb-color-success: var(--tb-green-300);  --tb-color-success-soft: var(--tb-green-900);
  --tb-color-warning: var(--tb-amber-300);  --tb-color-warning-soft: var(--tb-amber-900);
  --tb-color-error: var(--tb-red-300);      --tb-color-error-soft: var(--tb-red-900);
  --tb-color-info: var(--tb-teal-300);      --tb-color-info-soft: var(--tb-teal-900);

  --tb-shadow-1: 0 1px 2px rgb(0 0 0 / .3), 0 8px 24px -12px rgb(0 0 0 / .5);
  --tb-shadow-2: 0 2px 4px rgb(0 0 0 / .3), 0 16px 32px -12px rgb(0 0 0 / .6);
  --tb-shadow-3: 0 4px 8px rgb(0 0 0 / .35), 0 32px 64px -16px rgb(0 0 0 / .7);
  --tb-shadow-brand: 0 10px 20px -10px rgb(140 156 240 / .45);
}

/* موبایل (مرجع ۳۷۵) */
@media (max-width: 767px) {
  :root {
    --tb-fs-display: 32px;
    --tb-fs-h1: 26px;
    --tb-fs-h2: 21px;
    --tb-fs-h3: 18px;
    --tb-fs-product-title: 17px;
    --tb-fs-price-xl: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --tb-dur-fast: 0ms; --tb-dur: 0ms; --tb-dur-slow: 0ms; --tb-lift: 0px; --tb-press-scale: 1; }
}

/* ================= سطح ۳: کامپوننت ================= */
:root, [data-tb-theme] {
  --tb-card-bg: var(--tb-color-surface);
  --tb-card-pad: var(--tb-space-3);
  --tb-card-radius: var(--tb-radius);
  --tb-card-shadow: var(--tb-shadow-1);
  --tb-card-shadow-hover: var(--tb-shadow-2);

  --tb-btn-height: 48px;
  --tb-btn-radius: var(--tb-radius);
  --tb-btn-primary-bg: var(--tb-color-brand);
  --tb-btn-primary-bg-hover: var(--tb-color-brand-hover);
  --tb-btn-primary-text: var(--tb-color-on-brand);
  --tb-btn-primary-shadow: var(--tb-shadow-brand);

  --tb-price-font: var(--tb-font-num);
  --tb-price-text: var(--tb-color-text);
  --tb-price-unit-text: var(--tb-color-text-muted);
  --tb-price-old-text: var(--tb-color-text-muted);
  --tb-discount-bg: var(--tb-color-brand-soft);
  --tb-discount-text: var(--tb-color-brand-text);

  --tb-stock-in-bg: var(--tb-color-success-soft);
  --tb-stock-in-text: var(--tb-color-success);
  --tb-stock-out-bg: var(--tb-color-surface-2);
  --tb-stock-out-text: var(--tb-color-text-muted);

  --tb-badge-radius: var(--tb-radius-sm);
  --tb-trust-text: var(--tb-color-text-muted);
  --tb-logo-mark: var(--tb-color-brand);
  --tb-logo-leaf: var(--tb-blue-300);
  --tb-logo-feature: var(--tb-color-on-brand);
  --tb-logo-pupil: var(--tb-blue-ink);
  --tb-logo-text: var(--tb-color-text);
}

/* لوگو در تم تیره (بعد از سطح ۳ تا بر آن غلبه کند) */
[data-tb-theme="dark"] { --tb-logo-leaf: var(--tb-blue-200); }