/* ==========================================================================
   NiloKala Design Tokens
   معماری سه‌لایه: پالت خام → توکن معنایی → توکن کامپوننت
   تغییر رنگ برند فقط با ویرایش همین فایل (یا پنل تنظیمات آینده) در کل قالب اعمال می‌شود
   ========================================================================== */

:root {

	/* ---------------------------------------------------------------
	   لایه ۱: پالت خام (Raw Palette) - فقط همین فایل به این مقادیر دسترسی مستقیم دارد
	   --------------------------------------------------------------- */
	--nk-raw-brick-500:  #A94F2A;
	--nk-raw-brick-700:  #7C3A20;
	--nk-raw-brick-900:  #5E2B18;
	--nk-raw-orange-400: #F08C5A;
	--nk-raw-orange-600: #D9713D;
	--nk-raw-emerald-500:#1F9D72;
	--nk-raw-emerald-100:#E3F5EC;
	--nk-raw-amber-500:  #E8A33D;
	--nk-raw-amber-100:  #FBEEDC;
	--nk-raw-red-500:    #D6483B;
	--nk-raw-red-100:    #FBEAE8;
	--nk-raw-gray-0:     #FAFAF9;
	--nk-raw-gray-50:    #FFFFFF;
	--nk-raw-gray-200:   #E8E8E8;
	--nk-raw-gray-500:   #6B6B68;
	--nk-raw-gray-900:   #222222;

	/* ---------------------------------------------------------------
	   لایه ۲: توکن‌های معنایی (Semantic Tokens) - کدهای قالب فقط این‌ها را صدا می‌زنند
	   --------------------------------------------------------------- */

	/* برند / اصلی */
	--color-primary:        var(--nk-raw-brick-500);
	--color-primary-hover:  var(--nk-raw-brick-700);
	--color-primary-active: var(--nk-raw-brick-900);

	/* ثانویه */
	--color-secondary:       var(--nk-raw-orange-400);
	--color-secondary-hover: var(--nk-raw-orange-600);

	/* لهجه بصری (فعلاً هم‌راستا با ثانویه - در پنل تنظیمات آینده مستقل قابل تغییر) */
	--color-accent:       var(--color-secondary);
	--color-accent-hover: var(--color-secondary-hover);

	/* وضعیت‌ها */
	--color-success:    var(--nk-raw-emerald-500);
	--color-success-bg: var(--nk-raw-emerald-100);
	--color-warning:    var(--nk-raw-amber-500);
	--color-warning-bg: var(--nk-raw-amber-100);
	--color-error:      var(--nk-raw-red-500);
	--color-error-bg:   var(--nk-raw-red-100);

	/* سطوح */
	--color-background: var(--nk-raw-gray-0);
	--color-surface:     var(--nk-raw-gray-50);
	--color-border:      var(--nk-raw-gray-200);

	/* متن */
	--color-text-primary:   var(--nk-raw-gray-900);
	--color-text-secondary: var(--nk-raw-gray-500);
	--color-text-on-primary: #FFFFFF;

	/* لینک */
	--color-link:       var(--color-primary);
	--color-link-hover: var(--color-primary-hover);

	/* ---------------------------------------------------------------
	   لایه ۳: توکن‌های کامپوننت (Component Tokens)
	   --------------------------------------------------------------- */

	--btn-primary-bg:         var(--color-primary);
	--btn-primary-bg-hover:   var(--color-primary-hover);
	--btn-primary-bg-active:  var(--color-primary-active);
	--btn-primary-text:       var(--color-text-on-primary);

	--btn-secondary-bg:        transparent;
	--btn-secondary-bg-hover:  var(--color-primary);
	--btn-secondary-border:    var(--color-primary);
	--btn-secondary-text:      var(--color-primary);
	--btn-secondary-text-hover:#FFFFFF;

	--card-bg:     var(--color-surface);
	--card-border: var(--color-border);

	/* ---------------------------------------------------------------
	   فاصله‌گذاری (Spacing Scale)
	   --------------------------------------------------------------- */
	--space-2xs: 4px;
	--space-xs:  8px;
	--space-sm:  12px;
	--space-md:  16px;
	--space-lg:  24px;
	--space-xl:  40px;
	--space-2xl: 64px;

	/* ---------------------------------------------------------------
	   شعاع گوشه‌ها (Radius Scale)
	   --------------------------------------------------------------- */
	--radius-sm:   6px;
	--radius-md:   10px;
	--radius-lg:   16px;
	--radius-pill: 999px;

	/* ---------------------------------------------------------------
	   سایه‌ها (Elevation)
	   --------------------------------------------------------------- */
	--shadow-sm: 0 1px 3px rgba(34, 34, 34, 0.06);
	--shadow-md: 0 4px 16px rgba(34, 34, 34, 0.08);
	--shadow-lg: 0 8px 32px rgba(34, 34, 34, 0.12);

	/* ---------------------------------------------------------------
	   تایپوگرافی
	   --------------------------------------------------------------- */
	--font-family-base: "IRANSansX", Tahoma, sans-serif;
	--font-size-sm:   13px;
	--font-size-base: 15px;
	--font-size-md:   17px;
	--font-size-lg:   20px;
	--font-size-xl:   24px;
	--font-size-2xl:  28px;

	/* ---------------------------------------------------------------
	   چیدمان
	   --------------------------------------------------------------- */
	--container-max: 1240px;
}

/* ==========================================================================
   زیرساخت حالت شب (Dark Mode)
   غیرفعال به‌صورت پیش‌فرض - با افزودن data-theme="dark" روی <html> (دستی یا از پنل تنظیمات آینده) فعال می‌شود
   ========================================================================== */
:root[data-theme="dark"] {

	--color-background: #17140F;
	--color-surface:    #221E17;
	--color-border:     #3A342B;

	--color-text-primary:   #F4F1EC;
	--color-text-secondary: #B8B2A6;

	/* رنگ برند (primary/secondary/success) اینجا عمداً override نمی‌شود - این سه‌تا برخلاف
	   warning/error، عضو آرایه‌ی هر پالت رنگی هستند (پالت ۱/۲/۳ یا سفارشی) و باید همان‌جا در
	   inc/customizer.php (تابع nilokala_palette_css) نسخه‌ی مخصوص «حالت شب» بگیرند و به همین
	   سلکتور :root[data-theme="dark"] تزریق شوند تا مشخصیت (Specificity) درست رعایت شود -
	   رفع باگ «همیشه نارنجی می‌شود حتی با پالت سبز». warning/error چون در هیچ پالتی تغییر
	   نمی‌کنند (صرفاً وضعیت عمومی هستند)، همین‌جا و به‌صورت ثابت برای وضوح بهتر روی پس‌زمینه‌ی
	   تیره تنظیم می‌شوند. */
	--color-warning:    #F0B85C;
	--color-warning-bg: #332A17;
	--color-error:      #E37164;
	--color-error-bg:   #331D1A;

	--btn-secondary-text-hover: #17140F;

	/* هدر/منو/فوتر در حالت شب - این‌ها در تنظیمات رنگی جدا مدیریت می‌شوند، در حالت شب باید تیره شوند */
	--nk-header-bg: #221E17;
	--nk-menu-bg: #17140F;
	--nk-footer-bg: #100E0B;
	--nk-mm-bg: #221E17;
	--nk-tabs-panel-bg: #221E17;
	--nk-accent-soft: #2A2117;

	--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
	--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
	--shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6);

	/* رفع باگ: رنگ متن نوار اصلی منو/عنوان ستون/لینک‌های مگامنو (تنظیمات مجزای خودشان
	   در Customizer > مگامنو) به‌صورت مقدار ثابت در یک <style> جدا با سلکتور ساده‌ی
	   :root تزریق می‌شوند (inc/mega-menu/class-nilokala-mega-menow.php) - کاملاً بی‌خبر
	   از حالت شب. نتیجه: پس‌زمینه‌ی هدر/منو تیره می‌شد ولی متنش همان رنگ روشنِ حالت روز
	   (مثلاً خاکستری روی پس‌زمینه‌ی تیره) می‌ماند و عملاً ناپدید می‌شد. چون این سلکتور
	   (:root[data-theme="dark"]) از سلکتور ساده‌ی :root مشخصیت بیشتری دارد، این‌جا
	   برنده می‌شود - صرف‌نظر از این‌که کدام <style> در HTML دیرتر چاپ شده باشد. */
	--nk-mm-header-color: var(--color-text-primary);
	--nk-mm-title-color: var(--color-primary);
	--nk-mm-link-color: var(--color-text-secondary);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		/* در فاز بعد در صورت تصمیم به فعال‌سازی خودکار، همین بلوک تکمیل می‌شود */
	}
}