/*
Theme Name: باگنجه
Theme URI: https://example.com
Author: Your Name
Description: تم اختصاصی فروشگاه باگنجه (BaGanje) - تک‌صفحه‌ای، دوزبانه، با ووکامرس
Version: 1.0.0
Text Domain: baganje
Requires PHP: 8.0
Requires at least: 6.0
Tags: e-commerce, woocommerce, rtl, bilingual
*/

/**
 * توکن‌های طراحی مرکزی (Design Tokens)
 * ------------------------------------------------------------------
 * این مقادیر «پیش‌فرض کد» هستن. اگه کاربر از پنل تنظیمات چیزی رو عوض
 * کنه (رنگ پرایمری، فونت، رادیوس)، مقدار inline از طریق PHP روی همین
 * متغیرها override می‌شه (نگاه کن به: inc/helpers.php -> baganje_print_root_css_vars)
 * پس این مقادیر همیشه باید با مقادیر پیش‌فرض ثبت‌شده در helpers.php یکی باشن.
 */
:root {
  /* رنگ‌ها — مقادیر پیش‌فرض مطابق export فیگما (global.css) */
  --color-primary: #f1427d;
  --color-primary-light: #feecf2;
  --color-primary-lighter: #fff5f9;
  --color-text: #131b22;          /* --base-color-dominant-color */
  --color-text-title: #4d4d4d;    /* --dark-color-d-30 — تیتر محصول */
  --color-text-muted: #7e7e7e;
  --color-border: #bac9cf;        /* border سرچ/فیلتر در فیگما */
  --color-bg: #ffffff;
  --color-bg-soft: #fafafa;       /* پس‌زمینه body در export */

  /* رادیوس — فیگما: 5px اکثر المان‌ها، 3px بج‌های کوچک */
  --radius-base: 5px;
  --radius-sm: 3px;
  --radius-md: var(--radius-base);
  --radius-lg: var(--radius-base);
  --radius-sheet: 20px;           /* فقط گوشه بالای bottom sheet */
  --radius-full: 999px;           /* فقط دایره/pill آگاهانه (dots اسلایدر) */

  /* فونت */
  --font-main: 'IRANSansFaNum', 'IRANSans', Tahoma, sans-serif;

  --header-height-lg: 96px;
  --header-height-sm: 56px;
}

* {
  box-sizing: border-box;
}

html {
  direction: rtl;
}

body {
  font-family: var(--font-main);
  color: var(--color-text);
  background: var(--color-bg-soft);
  margin: 0;
  direction: rtl;
  text-align: right;
}

img {
  max-width: 100%;
  display: block;
}

/* پیش‌فرض: هر متن لینک‌دار رنگش پرایمریه. کامپوننت‌های خاص (مثل تیتر
   کارت محصول که باید مشکی بمونه) این مقدار رو صراحتاً override می‌کنن. */
a {
  text-decoration: none;
  color: var(--color-primary);
}

/* آیکون‌ها به‌طور پیش‌فرض از رنگ پرایمری تبعیت می‌کنن؛ برای آیکون‌های
   خنثی (مثل آیکون منو/سبد خرید در هدر) با کلاس اختصاصی override می‌شن. */
svg {
  color: var(--color-primary);
}

button {
  font-family: inherit;
  cursor: pointer;
}

/* اعداد و ارقام (قیمت، شمارنده و ...) همیشه LTR باشن، مستقل از جهت متن اطراف */
.ltr-numbers,
.price,
.cart-count,
.badge {
  direction: ltr;
  unicode-bidi: isolate;
}

/**
 * رویکرد Mobile-First (استاندارد باگنجه):
 * - پایه: موبایل ۳۷۵px+
 * - تبلت (۷۶۸px+): فقط --container-max-width عریض‌تر می‌شود
 * - دسکتاپ: همان چیدمان تک‌ستونه موبایل، وسط صفحه — بدون لایوت لپ‌تاپ/چندستونه
 * - سقف نهایی: تبلت عریض (۱۰۲۴px+) = ۶۸۰px
 */
:root {
  --container-max-width: 480px;
  --layout-gutter: 18px;
}

.container {
  width: 100%;
  max-width: var(--container-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--layout-gutter);
  padding-right: var(--layout-gutter);
  box-sizing: border-box;
}

@media (min-width: 768px) {
  :root {
    --container-max-width: 600px;
  }
}

@media (min-width: 1024px) {
  :root {
    --container-max-width: 680px;
  }
}

/* المان‌های ثابت تمام‌عرض که محتوایشان باید هم‌تراز container باشد */
.baganje-layout-bound {
  width: 100%;
  max-width: var(--container-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--layout-gutter);
  padding-right: var(--layout-gutter);
  box-sizing: border-box;
}