/* ==========================================================================
   سیستم مرکزی توکن‌های طراحی — رنگ‌بندی یکپارچه + تایپوگرافی استاندارد

   هدف: تمام رنگ‌ها، فاصله‌ها و اندازه‌های فونت در سراسر قالب از این یک منبع واحد
   می‌آیند. رنگ اصلی (theme-color) از پنل کاستومایزر خوانده می‌شود (همان‌جایی که
   قبلاً بود) و بقیه‌ی توکن‌ها (پس‌زمینه‌ها، متن‌ها، بوردرها، سایه‌ها) بر اساس آن و
   استانداردهای طراحی متریال/گوگل تعریف شده‌اند.

   نکته‌ی مهم فنی: پیش از این، ده‌ها بخش مختلف قالب متغیرهایی مثل --bg-card و
   --text-primary را استفاده می‌کردند اما این متغیرها هیچ‌جا در :root تعریف نشده
   بودند — فقط مقدار fallback («var(--bg-card, #fff)») در هر فایل جداگانه و با
   کمی تفاوت نوشته می‌شد. همین باعث ناهماهنگی جزئی رنگ‌ها بین بخش‌های مختلف سایت
   می‌شد. این فایل اکنون همان متغیرها را رسماً در :root تعریف می‌کند، بنابراین
   بدون نیاز به تغییر صدها خط کد موجود، تمام آن بخش‌ها خودکار هماهنگ می‌شوند.
   ========================================================================== */

:root {
    /* ---------- رنگ پایه (از پنل کاستومایزر) ---------- */
    /* --theme-color از قبل در header.php بر اساس تنظیمات پنل مقداردهی می‌شود؛
       اینجا فقط یک نام مستعار می‌سازیم تا هم --theme-color و هم --apkt-theme
       (که در template/bottom-nav.php هم جدا تعریف شده بود) به یک منبع واحد اشاره کنند. */
    --apkt-theme: var(--theme-color, #eb144c);

    /* تدرج‌های رنگ اصلی — برای هاور، سایه و پس‌زمینه‌های ملایم از خود رنگ پنل مشتق می‌شوند */
    --theme-color-rgb: 235, 20, 76; /* مقدار پیش‌فرض؛ در header.php برای رنگ واقعی پنل بازنویسی می‌شود */
    --theme-tint-8: rgba(var(--theme-color-rgb), 0.08);
    --theme-tint-12: rgba(var(--theme-color-rgb), 0.12);
    --theme-tint-25: rgba(var(--theme-color-rgb), 0.25);

    /* ---------- پس‌زمینه‌ها (حالت روشن) ---------- */
    /* توجه: bg-page باید دقیقاً با کلاس .bg-light (که روی #page در header.php قرار دارد
       و پس‌زمینه‌ی واقعی دیده‌شده توسط کاربر است) هماهنگ باشد تا در حالت overscroll موبایل
       (وقتی body کمی از زیر #page دیده می‌شود)، هیچ پرش رنگی نامحسوس رخ ندهد. */
    --bg-page: #f0f2f5;
    --bg-card: #ffffff;
    --bg-light: #f0f2f5;
    --bg-glass: rgba(255, 255, 255, 0.88);

    /* ---------- متن (حالت روشن) ---------- */
    --text-primary: #1f2126;
    --text-secondary: #555b66;
    /* FIX (کنتراست/دسترس‌پذیری): مقدار قبلی (#888e99) روی پس‌زمینه‌های روشن سایت
       (سفید و --bg-light) کنتراست ناکافی داشت (طبق گزارش PageSpeed Insights،
       نسبت واقعی 3.29:1 بود؛ استاندارد WCAG AA برای متن معمولی 4.5:1 است). این
       متن در جاهای حساسی مثل برچسب‌های نوار پایین موبایل استفاده می‌شود، پس این
       مشکل واقعی خوانایی برای همه (نه فقط کم‌بینایان) ایجاد می‌کرد. مقدار جدید
       روی هر دو پس‌زمینه رایج سایت (سفید: 5.29:1 و --bg-light: 4.71:1) رد می‌شود. */
    --text-muted: #666c76;

    /* ---------- بوردر و سایه (حالت روشن) ---------- */
    --border-color: rgba(0, 0, 0, 0.06);
    --input-bg: #f8f9fa;
    --input-border: #e8eaee;
    --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.04);
    --shadow-elevated: 0 10px 32px rgba(0, 0, 0, 0.08);

    /* ---------- تایپوگرافی ----------
   تایپوگرافی اصلی قالب در style.min.css مدیریت می‌شود.
   این فایل فقط توکن‌ها را نگه می‌دارد تا UIهای جدید در صورت نیاز از آن‌ها استفاده کنند،
   اما اندازه فونت، line-height و وزن هدینگ‌های کل سایت را override نمی‌کند. */
--font-size-xs: 0.75rem;
--font-size-sm: 0.8125rem;
--font-size-base: 0.9375rem;
--font-size-md: 1rem;
--font-size-lg: 1.125rem;
--font-size-xl: 1.375rem;
--font-size-2xl: 1.75rem;
--line-height-tight: 1.35;
--line-height-base: 1.5;
--line-height-relaxed: 1.9;
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--font-weight-black: 800;
}

/* ---------- حالت تاریک: همان توکن‌ها، مقادیر متفاوت ---------- */
body.dark-mode {
    --bg-page: #23272f;
    --bg-card: #1a1d24;
    --bg-light: #23272f;
    --bg-glass: rgba(26, 29, 36, 0.92);

    --text-primary: #eef0f2;
    --text-secondary: #a8afba;
    /* FIX: مقدار قبلی (#7d8590) روی --bg-card (#1a1d24) فقط 4.52:1 بود که خیلی
       نزدیک به حد آستانه‌ی WCAG AA (4.5:1) بود و روی --bg-light (#23272f)
       روشن‌تر ممکن بود کمتر شود. مقدار جدید حاشیه امن بیشتری دارد. */
    --text-muted: #8990a0;

    --border-color: rgba(255, 255, 255, 0.08);
    --input-bg: #23272f;
    --input-border: #2d323b;
    --shadow-card: 0 2px 10px rgba(0, 0, 0, 0.28);
    --shadow-elevated: 0 12px 36px rgba(0, 0, 0, 0.4);
}

/* ---------- پس‌زمینه‌ی کلی صفحه ---------- */
body {
    background-color: var(--bg-page);
}
body.dark-mode {
    background-color: var(--bg-page);
    color: var(--text-primary);
}

body.dark-mode #page.bg-light {
    background-color: var(--bg-page) !important;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}