/* ==========================================================================
   tokens.css  =  سیستم توکن فروشگاه عینک
   نسخه ۲٫۰  |  تم: فقط روشن  |  جهت: RTL-first
   --------------------------------------------------------------------------
   پیشوند موقت «ca-» است. وقتی اسلاگ قالب قطعی شد، در کل پروژه
   «--ca-» و «.ca-» را با «--{slug}-» و «.{slug}-» جایگزین کن.
   --------------------------------------------------------------------------
   سه لایه:
     ۱. primitive  : رنگ و عدد خام. فقط در همین فایل استفاده می‌شود.
     ۲. semantic   : معنا (متن، سطح، مرز، وضعیت). کد کامپوننت فقط از این لایه می‌خواند.
     ۳. component  : اندازه‌های ثابت کامپوننت‌ها (ارتفاع دکمه، اینپوت ...).
   قانون: در هیچ فایل CSS دیگری هگز، px رادیوس یا سایه‌ی خام ننویس.
   ========================================================================== */

/* ==== فونت ==============================================================
   یک فایل variable برای همه‌ی وزن‌ها (۱۰۰ تا ۱۰۰۰). ~۱۰۰KB.
   در وردپرس: <link rel="preload" as="font" type="font/woff2" crossorigin>
   مسیر: assets/fonts/IRANSansXVF.woff2
   ======================================================================== */
@font-face {
  font-family: "IRANSansX";
  src: url("../fonts/IRANSansXVF.woff2") format("woff2");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ==== ۱. Primitive: آبی کبالتی ==== */
  --ca-blue-50:  #EEF2FF;
  --ca-blue-100: #DFE6FF;
  --ca-blue-200: #C2CEFF;
  --ca-blue-300: #97ABFF;
  --ca-blue-400: #6683F7;
  --ca-blue-500: #3E5EF0;
  --ca-blue-600: #2848D8; /* رنگ برند. سفید روی آن: ۶٫۹۸:۱ */
  --ca-blue-700: #1F38B0; /* hover */
  --ca-blue-800: #1B2F8A; /* active / pressed */
  --ca-blue-900: #172760;

  /* ==== Primitive: خاکستری سرد (رنگ‌مایه‌ی آبی، نه خاکستری خنثی) ==== */
  --ca-ink-0:   #FFFFFF;
  --ca-ink-25:  #F9FAFD;
  --ca-ink-50:  #F4F6FB;
  --ca-ink-100: #ECEFF6;
  --ca-ink-200: #DEE3EE;
  --ca-ink-300: #C6CDDC;
  --ca-ink-400: #848DA2; /* مرز کنترل‌ها. روی سفید ۳٫۳۳:۱ */
  --ca-ink-500: #636C83; /* متن کم‌رنگ. روی سفید ۵٫۲۵:۱ و روی ink-100 ۴٫۵۶:۱ */
  --ca-ink-600: #525A6E;
  --ca-ink-700: #3B4254;
  --ca-ink-800: #262C3B;
  --ca-ink-900: #141824; /* متن اصلی. روی سفید ۱۷٫۷:۱ */

  /* ==== Primitive: وضعیت‌ها ==== */
  --ca-green-50:  #EAF7F0;
  --ca-green-100: #CDEEDC;
  --ca-green-600: #12804F;
  --ca-green-700: #0C6A40;
  --ca-red-50:    #FDEEEE;
  --ca-red-100:   #FAD6D6;
  --ca-red-600:   #CC2B2B;
  --ca-red-700:   #A91F1F;
  --ca-amber-50:  #FFF5E5;
  --ca-amber-100: #FFE7BF;
  --ca-amber-500: #BF7D00; /* آیکون و ستاره (روی سفید ۳٫۴۲:۱)؛ هرگز متن */
  --ca-amber-700: #8A4F00;

  /* ==== ۲. Semantic: سطح‌ها ==== */
  --ca-color-bg:            var(--ca-ink-0);    /* زمینه‌ی صفحه */
  --ca-color-bg-subtle:     var(--ca-ink-50);   /* نوار، فوتر، بخش‌های متناوب */
  --ca-color-surface:       #F6F8FC;            /* کارت‌ها: tint ملایم، نه سفید خشک */
  --ca-color-surface-raised:var(--ca-ink-0);    /* پاپ‌اور، دراپ‌داون، دیالوگ (با سایه) */
  --ca-color-media-bg:      var(--ca-ink-50);   /* پس‌زمینه‌ی پشت عکس محصول تا لود شود */
  --ca-color-overlay:       rgb(20 24 36 / 0.48);
  --ca-color-hover-bg:      var(--ca-ink-100);  /* hover دکمه‌ی ghost، ردیف لیست */
  --ca-color-pressed-bg:    var(--ca-ink-200);
  --ca-color-disabled-bg:   var(--ca-ink-100);
  --ca-color-disabled-border: var(--ca-ink-200);
  --ca-color-selection:     var(--ca-blue-100); /* انتخاب متن با ماوس */
  --ca-color-inverse-bg:    var(--ca-ink-900);  /* تولتیپ، توست، بج «جدید» */
  --ca-scrollbar-thumb:       rgb(20 24 36 / 0.28); /* اسکرول‌بار شناور */
  --ca-scrollbar-thumb-hover: rgb(20 24 36 / 0.5);
  --ca-color-swatch-edge:   rgb(20 24 36 / 0.14); /* لبه‌ی داخلی سواچ تا رنگ سفید دیده شود */

  /* متن */
  --ca-color-text:          var(--ca-ink-900);
  --ca-color-text-secondary:var(--ca-ink-600);
  --ca-color-text-muted:    var(--ca-ink-500);  /* placeholder، کپشن، قیمت خط‌خورده */
  --ca-color-text-inverse:  var(--ca-ink-0);
  --ca-color-text-disabled: var(--ca-ink-500);

  /* مرزها */
  --ca-color-border:        var(--ca-ink-200);  /* جداکننده و کارت (تزئینی) */
  --ca-color-border-strong: var(--ca-ink-300);
  --ca-color-border-control:var(--ca-ink-400);  /* اینپوت، چک‌باکس: باید ۳:۱ باشد */

  /* برند */
  --ca-color-primary:         var(--ca-blue-600);
  --ca-color-primary-hover:   var(--ca-blue-700);
  --ca-color-primary-active:  var(--ca-blue-800);
  --ca-color-primary-subtle:  var(--ca-blue-50);
  --ca-color-primary-subtle-hover: var(--ca-blue-100);
  --ca-color-primary-subtle-active: var(--ca-blue-200);
  --ca-color-primary-text:    var(--ca-blue-700); /* متن آبی روی زمینه‌ی روشن */
  --ca-color-on-primary:      var(--ca-ink-0);
  --ca-color-link:            var(--ca-blue-600);
  --ca-color-link-hover:      var(--ca-blue-800);
  --ca-color-link-inverse:    var(--ca-blue-300); /* لینک روی زمینه‌ی تیره (توست) */

  /* وضعیت‌ها: هر کدام سه نقش دارند: پررنگ (دکمه)، ملایم (زمینه)، متن */
  --ca-color-success:        var(--ca-green-600);
  --ca-color-success-hover:  var(--ca-green-700);
  --ca-color-success-subtle: var(--ca-green-50);
  --ca-color-success-text:   var(--ca-green-700);
  --ca-color-danger:         var(--ca-red-600);
  --ca-color-danger-hover:   var(--ca-red-700);
  --ca-color-danger-subtle:  var(--ca-red-50);
  --ca-color-danger-subtle-hover: var(--ca-red-100);
  --ca-color-danger-text:    var(--ca-red-700);
  --ca-color-warning:        var(--ca-amber-500);
  --ca-color-warning-subtle: var(--ca-amber-50);
  --ca-color-warning-text:   var(--ca-amber-700);
  --ca-color-info:           var(--ca-blue-600);
  --ca-color-info-subtle:    var(--ca-blue-50);
  --ca-color-info-text:      var(--ca-blue-700);

  /* فروش: نام جدا دارد تا اگر روزی رنگ تخفیف از «خطا» جدا شد، فقط اینجا عوض شود */
  --ca-color-sale:           var(--ca-red-600);
  --ca-color-sale-subtle:    var(--ca-red-50);
  --ca-color-rating:         var(--ca-amber-500);

  /* فوکوس */
  --ca-focus-color:  var(--ca-blue-600);
  --ca-focus-width:  2px;
  --ca-focus-offset: 2px;
  --ca-focus-ring-soft: 0 0 0 4px rgb(40 72 216 / 0.18); /* هاله‌ی اینپوت‌ها */

  /* ==== تایپوگرافی ==== */
  --ca-font-sans: "IRANSansX", Tahoma, "Segoe UI", system-ui, sans-serif;
  /* ss01: ك/ي عربی ← ک/ی فارسی | ss02: رقم لاتین ← رقم فارسی (قیمت ووکامرس بدون PHP فارسی می‌شود) */
  --ca-font-features: "ss01", "ss02";
  --ca-font-features-tabular: "ss01", "ss02", "tnum"; /* قیمت در جدول و ستون */
  --ca-font-features-latin: "ss01";                  /* ایمیل، URL، کد پیگیری لاتین */
  --ca-dots-display: 4;   /* عنصر امضا: نقطه‌های خطی فقط در تیتر نمایشی */

  --ca-weight-regular: 400;
  --ca-weight-medium:  500;
  --ca-weight-semibold:600;
  --ca-weight-bold:    700;
  --ca-weight-extrabold: 800;
  --ca-weight-black:   900;

  /* مقیاس: min < max در همه چک شده است. ۱rem = ۱۶px */
  --ca-text-display: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);   /* ۳۶ ← ۵۶ */
  --ca-text-h1:      clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);   /* ۲۸ ← ۴۰ */
  --ca-text-h2:      clamp(1.5rem, 1.3rem + 0.9vw, 2rem);      /* ۲۴ ← ۳۲ */
  --ca-text-h3:      clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem); /* ۲۰ ← ۲۴ */
  --ca-text-h4:      1.125rem;  /* ۱۸ */
  --ca-text-h5:      1rem;      /* ۱۶ */
  --ca-text-h6:      0.875rem;  /* ۱۴ */
  --ca-text-lg:      1.125rem;  /* ۱۸: لید، توضیح هیرو */
  --ca-text-md:      1rem;      /* ۱۶: متن پایه */
  --ca-text-sm:      0.875rem;  /* ۱۴: کارت محصول، متا، لیبل */
  --ca-text-xs:      0.75rem;   /* ۱۲: کپشن، بج. کوچک‌تر ممنوع */

  /* ارتفاع خط فارسی باید بیشتر از لاتین باشد (فونت ascent ۱۰۰۰ / descent ۵۰۰ دارد) */
  --ca-leading-display: 1.3;
  --ca-leading-heading: 1.45;
  --ca-leading-tight:   1.6;   /* h4 تا h6، دکمه‌ی چندخطی، کارت */
  --ca-leading-body:    1.9;
  --ca-leading-sm:      1.8;

  --ca-measure: 68ch; /* حداکثر عرض پاراگراف */

  /* ==== فاصله (پایه‌ی ۴px) ==== */
  --ca-space-0:  0;
  --ca-space-px: 1px;
  --ca-space-05: 0.125rem; /* ۲ */
  --ca-space-1:  0.25rem;  /* ۴ */
  --ca-space-2:  0.5rem;   /* ۸ */
  --ca-space-3:  0.75rem;  /* ۱۲ */
  --ca-space-4:  1rem;     /* ۱۶ */
  --ca-space-5:  1.25rem;  /* ۲۰ */
  --ca-space-6:  1.5rem;   /* ۲۴ */
  --ca-space-8:  2rem;     /* ۳۲ */
  --ca-space-10: 2.5rem;   /* ۴۰ */
  --ca-space-12: 3rem;     /* ۴۸ */
  --ca-space-16: 4rem;     /* ۶۴ */
  --ca-space-20: 5rem;     /* ۸۰ */
  --ca-space-24: 6rem;     /* ۹۶ */
  --ca-section-gap: clamp(3rem, 2rem + 4vw, 6rem);       /* بین بخش‌های صفحه: ۴۸ ← ۹۶ */
  --ca-gutter:      clamp(1rem, 0.5rem + 2.5vw, 2.5rem); /* حاشیه‌ی کناری: ۱۶ ← ۴۰ */
  --ca-grid-gap:    clamp(1rem, 0.75rem + 1vw, 1.5rem);  /* فاصله‌ی کارت‌ها: ۱۶ ← ۲۴ */

  /* ==== شعاع گوشه (نرم و مدرن) ==== */
  --ca-radius-xs:   4px;   /* چک‌باکس، بج کوچک داخل عکس */
  --ca-radius-sm:   6px;   /* بج، تگ، تولتیپ، دکمه‌ی sm */
  --ca-radius-md:   10px;  /* دکمه، اینپوت، سلکت، آلرت */
  --ca-radius-lg:   14px;  /* کارت، عکس محصول، دراپ‌داون */
  --ca-radius-xl:   20px;  /* دیالوگ، دراور، بنر */
  --ca-radius-pill: 999px; /* چیپ فیلتر، سوییچ، شمارنده */
  --ca-radius-circle: 50%; /* سواچ رنگ، آواتار، دکمه‌ی آیکون گرد */

  /* ==== سایه (رنگ‌مایه‌ی سرمه‌ای، نه سیاه) ==== */
  --ca-shadow-xs: 0 1px 2px rgb(20 24 36 / 0.06);
  --ca-shadow-sm: 0 2px 6px -1px rgb(20 24 36 / 0.08), 0 1px 2px rgb(20 24 36 / 0.04);
  --ca-shadow-md: 0 8px 20px -6px rgb(20 24 36 / 0.12), 0 2px 6px rgb(20 24 36 / 0.05);
  --ca-shadow-lg: 0 20px 40px -12px rgb(20 24 36 / 0.18), 0 4px 12px rgb(20 24 36 / 0.06);

  /* ==== حرکت ==== */
  --ca-dur-fast:   120ms; /* hover رنگ */
  --ca-dur-base:   180ms; /* دکمه، اینپوت */
  --ca-dur-slow:   260ms; /* دراپ‌داون، آکاردئون */
  --ca-dur-slower: 360ms; /* دراور، دیالوگ */
  --ca-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ca-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ==== لایه‌ها ==== */
  --ca-z-dropdown: 100;
  --ca-z-sticky:   200;
  --ca-z-header:   300;
  --ca-z-overlay:  400;
  --ca-z-drawer:   410;
  --ca-z-modal:    500;
  --ca-z-toast:    600;
  --ca-z-tooltip:  700;

  /* ==== چیدمان ==== */
  --ca-container-max: 1440px;
  --ca-container-narrow: 760px; /* بلاگ، صفحه‌های متنی، چک‌اوت تک‌ستونه */
  --ca-shell-side-w: 17rem;           /* ستون کناری داشبورد حساب: باز */
  --ca-shell-side-w-collapsed: 4.75rem; /* جمع‌شده (فقط آیکون) */
  --ca-topbar-h: 4.5rem;              /* نوار بالای داشبورد حساب */
  --ca-header-h: 68px;
  --ca-header-h-mobile: 60px;
  /* breakpoint ها (در media query متغیر کار نمی‌کند؛ این‌ها مرجع‌اند):
     sm 480 | md 768 | lg 1024 | xl 1280 | 2xl 1440 */

  /* نسبت تصویر */
  --ca-ratio-product:  1 / 1; /* عکس محصول: مربع. عینک سوژه‌ی افقی است؛ وسط کادر، ~۸۰٪ عرض */
  --ca-ratio-category: 1 / 1;
  --ca-ratio-hero:     16 / 7;
  --ca-ratio-hero-mobile: 4 / 5;
  --ca-ratio-blog:     16 / 9;
  --ca-ratio-thumb:    1 / 1;

  /* ==== آیکون ==== */
  --ca-icon-xs: 14px;
  --ca-icon-sm: 16px;
  --ca-icon-md: 20px;
  --ca-icon-lg: 24px;
  --ca-icon-xl: 32px;
  --ca-icon-stroke: 1.5; /* Iconly Light */

  /* ==== ۳. Component ==== */
  /* دکمه و کنترل‌ها: ارتفاع یکسان تا در یک ردیف هم‌تراز باشند */
  --ca-control-h-sm: 36px;
  --ca-control-h-md: 44px; /* حداقل هدف لمسی */
  --ca-control-h-lg: 52px;
  --ca-btn-px-sm: 0.75rem;
  --ca-btn-px-md: 1.25rem;
  --ca-btn-px-lg: 1.75rem;
  --ca-btn-gap:   0.5rem;
  --ca-btn-font-sm: 0.875rem;
  --ca-btn-font-md: 0.9375rem;
  --ca-btn-font-lg: 1rem;
  --ca-input-px: 0.875rem;
  --ca-check-size: 20px;
  --ca-switch-w: 44px;
  --ca-switch-h: 24px;
  --ca-swatch-size: 28px;
  --ca-badge-h: 22px;
  --ca-scrollbar-size: 6px;        /* ضخامت thumb؛ روی hover ۸ */
  --ca-scrollbar-size-hover: 8px;
  --ca-scrollbar-hide-delay: 900ms; /* بعد از توقف اسکرول محو می‌شود */
  --ca-listbox-max-h: 320px;       /* بیشینه‌ی ارتفاع منوی سلکت */
  --ca-option-h: 40px;
  --ca-card-h-media: 112px;        /* عکس کارت افقی موبایل */
  --ca-carousel-per-view: 2.3;     /* موبایل: ۲ کارت و ۰٫۳ سومی */
}

/* کاهش حرکت: همه‌ی مدت‌ها صفر */
@media (prefers-reduced-motion: reduce) {
  :root {
    --ca-dur-fast: 0ms;
    --ca-dur-base: 0ms;
    --ca-dur-slow: 0ms;
    --ca-dur-slower: 0ms;
  }
}