/*
 * ═══════════════════════════════════════════════════════
 * Novava - Design System Variables
 * فایل متغیرهای سیستم طراحی نُواوا
 * این فایل تنها منبع حقیقت برای تمام مقادیر طراحی است
 * هیچ مقدار hardcode در فایل‌های دیگر مجاز نیست
 * ═══════════════════════════════════════════════════════
 */


/* ═══════════════════════════════════════ */
/* ═══ بخش ۱ — تعریف فونت‌ها            ═══ */
/* ═══════════════════════════════════════ */

/* فونت فارسی ایران سنس ایکس — وزن معمولی */
@font-face {
    font-family: 'IRANSansX';
    src: url('../assets/fonts/IRANSansX-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* فونت فارسی ایران سنس ایکس — وزن بولد */
@font-face {
    font-family: 'IRANSansX';
    src: url('../assets/fonts/IRANSansX-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* فونت انگلیسی سورس سنس ۳ — وزن معمولی */
@font-face {
    font-family: 'Source Sans 3';
    src: url('../assets/fonts/SourceSans3-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* فونت انگلیسی سورس سنس ۳ — وزن بولد */
@font-face {
    font-family: 'Source Sans 3';
    src: url('../assets/fonts/SourceSans3-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}


/* ═══════════════════════════════════════ */
/* ═══ شروع بلاک :root                 ═══ */
/* ═══ تمام متغیرها از اینجا شروع میشن ═══ */
/* ═══════════════════════════════════════ */
:root {


    /* ═══════════════════════════════════════ */
    /* ═══ بخش ۲ — رنگ‌های اصلی برند       ═══ */
    /* ═══════════════════════════════════════ */

    --color-primary: #3b98e3;           /* نیلی/آسمانی — رنگ اصلی برند */
    --color-primary-dark: #1763a1;      /* آبی تیره — حالت hover و active */
    --color-primary-light: #e8f4fd;     /* آبی خیلی روشن — پس‌زمینه‌های مرتبط */
    --color-accent: #d2b32d;            /* خردلی — تأکید و دکمه‌های CTA */
    --color-accent-dark: #b8991f;       /* خردلی تیره — حالت hover */
    --color-accent-light: #fdf8e8;      /* خردلی خیلی روشن — پس‌زمینه */


    /* ═══════════════════════════════════════ */
    /* ═══ بخش ۳ — رنگ‌های پس‌زمینه         ═══ */
    /* ═══════════════════════════════════════ */

    --color-bg: #FFFFFF;                /* سفید — پس‌زمینه اصلی صفحات */
    --color-bg-secondary: #F8F9FA;      /* خاکستری خیلی روشن — پس‌زمینه ثانویه */
    --color-bg-tertiary: #E9ECEF;       /* خاکستری روشن — پس‌زمینه سوم */
    --color-bg-dark: #1a1a2e;           /* تیره — فوتر و بخش‌های تیره */


    /* ═══════════════════════════════════════ */
    /* ═══ بخش ۴ — رنگ‌های متن             ═══ */
    /* ═══════════════════════════════════════ */

    --color-text: #1a1a2e;              /* مشکی مایل به سرمه‌ای — متن اصلی */
    --color-text-light: #6c757d;        /* خاکستری — متن ثانویه */
    --color-text-muted: #adb5bd;        /* خاکستری روشن — placeholder و غیرفعال */
    --color-text-inverse: #FFFFFF;      /* سفید — متن روی پس‌زمینه تیره */


    /* ═══════════════════════════════════════ */
    /* ═══ بخش ۵ — رنگ‌های حاشیه (Border)  ═══ */
    /* ═══════════════════════════════════════ */

    --color-border: #dee2e6;            /* خاکستری — حاشیه عادی */
    --color-border-light: #e9ecef;      /* خاکستری روشن — حاشیه ظریف */
    --color-border-dark: #adb5bd;       /* خاکستری تیره — حاشیه تأکیدی */
    --color-border-focus: #3b98e3;      /* آبی — حاشیه فوکوس input */


    /* ═══════════════════════════════════════ */
    /* ═══ بخش ۶ — رنگ‌های وضعیت           ═══ */
    /* ═══════════════════════════════════════ */

    --color-success: #28a745;           /* سبز — موفقیت */
    --color-success-light: #d4edda;     /* سبز روشن — پس‌زمینه موفقیت */
    --color-warning: #ffc107;           /* زرد — هشدار */
    --color-warning-light: #fff3cd;     /* زرد روشن — پس‌زمینه هشدار */
    --color-danger: #dc3545;            /* قرمز — خطا */
    --color-danger-light: #f8d7da;      /* قرمز روشن — پس‌زمینه خطا */
    --color-info: #17a2b8;              /* آبی — اطلاعات */
    --color-info-light: #d1ecf1;        /* آبی روشن — پس‌زمینه اطلاعات */


    /* ═══════════════════════════════════════ */
    /* ═══ بخش ۷ — رنگ‌بندی کلمات Reader   ═══ */
    /* ═══ سیستم LingQ برای وضعیت کلمات   ═══ */
    /* ═══════════════════════════════════════ */

    --word-new: #2196F3;                        /* آبی — کلمه ندیده و جدید */
    --word-new-bg: rgba(33, 150, 243, 0.15);    /* پس‌زمینه کلمه جدید */
    --word-level-1: #F9A825;                    /* زرد تیره — سطح ۱ تازه ذخیره شده */
    --word-level-1-bg: #FFF8E1;                 /* پس‌زمینه سطح ۱ */
    --word-level-2: #FDD835;                    /* زرد — سطح ۲ در حال یادگیری */
    --word-level-2-bg: #FFFDE7;                 /* پس‌زمینه سطح ۲ */
    --word-level-3: #FFEE58;                    /* زرد روشن — سطح ۳ تقریباً یاد گرفته */
    --word-level-3-bg: #FFFEF5;                 /* پس‌زمینه سطح ۳ */
    --word-level-4: #66BB6A;                    /* سبز — سطح ۴ یاد گرفته شده */
    --word-level-4-bg: #F1F8E9;                 /* پس‌زمینه سطح ۴ */
    --word-known: inherit;                      /* معمولی — کاملاً یاد گرفته شده */
    --word-known-bg: transparent;               /* بدون پس‌زمینه */
    --word-ignored: #9E9E9E;                    /* خاکستری — نادیده گرفته شده */
    --word-ignored-bg: transparent;             /* بدون پس‌زمینه */


    /* ═══════════════════════════════════════ */
    /* ═══ بخش ۸ — فونت‌ها                  ═══ */
    /* ═══════════════════════════════════════ */

    --font-fa: 'IRANSansX', Tahoma, Arial, sans-serif;             /* فونت فارسی — رابط کاربری */
    --font-en: 'Source Sans 3', 'Segoe UI', Arial, sans-serif;     /* فونت انگلیسی — متن دروس */

    --font-weight-regular: 400;     /* وزن معمولی */
    --font-weight-bold: 700;        /* وزن بولد */


    /* ═══════════════════════════════════════ */
    /* ═══ بخش ۹ — سایز فونت‌ها (Type Scale)═══ */
    /* ═══ مقیاس مبتنی بر rem (1rem = 16px) ═══ */
    /* ═══════════════════════════════════════ */

    --font-size-xs: 0.75rem;        /* 12px — خیلی کوچک: badge و caption */
    --font-size-sm: 0.875rem;       /* 14px — کوچک: متن فرعی و helper */
    --font-size-base: 1rem;         /* 16px — پایه: متن اصلی بدنه */
    --font-size-md: 1.125rem;       /* 18px — متوسط: lead text */
    --font-size-lg: 1.25rem;        /* 20px — بزرگ: عنوان کارت */
    --font-size-xl: 1.5rem;         /* 24px — خیلی بزرگ: h3 */
    --font-size-2xl: 1.875rem;      /* 30px — عنوان بخش: h2 */
    --font-size-3xl: 2.25rem;       /* 36px — عنوان صفحه: h1 */
    --font-size-4xl: 3rem;          /* 48px — عنوان hero */
    --font-size-5xl: 3.75rem;       /* 60px — عنوان خیلی بزرگ hero */


    /* ═══════════════════════════════════════ */
    /* ═══ بخش ۱۰ — ارتفاع خط (Line Height) ═══ */
    /* ═══════════════════════════════════════ */

    --line-height-tight: 1.25;      /* عناوین */
    --line-height-normal: 1.5;      /* متن فارسی بدنه */
    --line-height-relaxed: 1.75;    /* متن انگلیسی دروس — خوانایی بیشتر */
    --line-height-loose: 2;         /* متن با فاصله زیاد */


    /* ═══════════════════════════════════════ */
    /* ═══ بخش ۱۱ — فاصله‌ها (Spacing)      ═══ */
    /* ═══ مقیاس ۸px-based                  ═══ */
    /* ═══════════════════════════════════════ */

    --spacing-1: 0.25rem;           /* 4px */
    --spacing-2: 0.5rem;            /* 8px */
    --spacing-3: 0.75rem;           /* 12px */
    --spacing-4: 1rem;              /* 16px */
    --spacing-5: 1.25rem;           /* 20px */
    --spacing-6: 1.5rem;            /* 24px */
    --spacing-7: 2rem;              /* 32px */
    --spacing-8: 2.5rem;            /* 40px */
    --spacing-9: 3rem;              /* 48px */
    --spacing-10: 4rem;             /* 64px */
    --spacing-11: 5rem;             /* 80px */
    --spacing-12: 6rem;             /* 96px */


    /* ═══════════════════════════════════════ */
    /* ═══ بخش ۱۲ — عرض Container           ═══ */
    /* ═══════════════════════════════════════ */

    --container-sm: 640px;          /* فرم‌ها — ورود و ثبت‌نام */
    --container-md: 768px;          /* محتوای متنی */
    --container-lg: 1024px;         /* محتوای عادی */
    --container-xl: 1200px;         /* عرض اصلی سایت */
    --container-2xl: 1400px;        /* عرض حداکثر */
    --container-padding: 1rem;      /* فاصله کناری container */


    /* ═══════════════════════════════════════ */
    /* ═══ بخش ۱۳ — Breakpoints (مرجع)      ═══ */
    /* ═══ CSS Custom Properties داخل        ═══ */
    /* ═══ media query قابل استفاده نیستن    ═══ */
    /* ═══ پس فقط به‌صورت کامنت مرجع هستن   ═══ */
    /* ═══════════════════════════════════════ */
    /* --breakpoint-sm: 576px                   — موبایل بزرگ */
    /* --breakpoint-md: 768px                   — تبلت عمودی */
    /* --breakpoint-lg: 1024px                  — تبلت افقی و لپ‌تاپ */
    /* --breakpoint-xl: 1200px                  — دسکتاپ */
    /* --breakpoint-2xl: 1400px                 — دسکتاپ بزرگ */


    /* ═══════════════════════════════════════ */
    /* ═══ بخش ۱۴ — شعاع گردی (Border Radius)═══ */
    /* ═══════════════════════════════════════ */

    --radius-sm: 4px;               /* دکمه‌های کوچک و badge */
    --radius-md: 8px;               /* کارت‌ها و input */
    --radius-lg: 12px;              /* مودال و کارت بزرگ */
    --radius-xl: 16px;              /* بخش‌های بزرگ */
    --radius-2xl: 24px;             /* المان‌های خیلی گرد */
    --radius-full: 9999px;          /* دایره کامل و pill shape */


    /* ═══════════════════════════════════════ */
    /* ═══ بخش ۱۵ — سایه‌ها (Box Shadow)    ═══ */
    /* ═══════════════════════════════════════ */

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);                                    /* سایه خیلی کم */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);      /* سایه کم */
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);      /* سایه متوسط */
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);    /* سایه بزرگ */
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);  /* سایه خیلی بزرگ */
    --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.15);                                  /* سایه حداکثر — مودال */
    --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);                            /* سایه داخلی */
    --shadow-focus: 0 0 0 3px rgba(59, 152, 227, 0.25);                             /* سایه فوکوس — رنگ primary */
    --shadow-none: none;                                                             /* بدون سایه */


    /* ═══════════════════════════════════════ */
    /* ═══ بخش ۱۶ — Transition و Animation  ═══ */
    /* ═══════════════════════════════════════ */

    --transition-fast: 150ms ease;                                      /* تغییرات سریع: hover دکمه */
    --transition-normal: 250ms ease;                                    /* تغییرات عادی: نمایش و مخفی */
    --transition-slow: 350ms ease;                                      /* تغییرات آرام: مودال و slide */
    --transition-bounce: 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);  /* انیمیشن پرشی */

    --animation-duration-fast: 200ms;       /* مدت انیمیشن سریع */
    --animation-duration-normal: 300ms;     /* مدت انیمیشن عادی */
    --animation-duration-slow: 500ms;       /* مدت انیمیشن آرام */


    /* ═══════════════════════════════════════ */
    /* ═══ بخش ۱۷ — z-index (لایه‌بندی)     ═══ */
    /* ═══════════════════════════════════════ */

    --z-dropdown: 100;              /* منوی کشویی */
    --z-sticky: 200;                /* navbar چسبان */
    --z-fixed: 300;                 /* المان‌های ثابت */
    --z-overlay: 400;               /* overlay تیره پشت مودال */
    --z-modal: 500;                 /* مودال */
    --z-popover: 600;               /* popup ترجمه کلمه */
    --z-tooltip: 700;               /* tooltip */
    --z-toast: 800;                 /* پیام toast */


    /* ═══════════════════════════════════════ */
    /* ═══ بخش ۱۸ — ارتفاع Navbar و Layout ═══ */
    /* ═══════════════════════════════════════ */

    --navbar-height: 64px;                                      /* ارتفاع نوار بالا */
    --navbar-height-mobile: 56px;                               /* ارتفاع نوار بالا در موبایل */
    --footer-padding: 3rem;                                     /* فاصله داخلی فوتر */
    --section-padding: 4rem;                                    /* فاصله بین بخش‌ها */
    --page-padding-top: calc(var(--navbar-height) + 2rem);      /* فاصله بالای محتوا از navbar */


    /* ═══════════════════════════════════════ */
    /* ═══ بخش ۱۹ — سایز المان‌های فرم      ═══ */
    /* ═══════════════════════════════════════ */

    --input-height: 44px;           /* ارتفاع input عادی */
    --input-height-sm: 36px;        /* ارتفاع input کوچک */
    --input-height-lg: 52px;        /* ارتفاع input بزرگ */
    --input-padding-x: 0.75rem;     /* فاصله افقی داخل input */
    --input-padding-y: 0.5rem;      /* فاصله عمودی داخل input */
    --input-border-width: 1px;      /* ضخامت حاشیه input */
    --btn-padding-x: 1.25rem;       /* فاصله افقی داخل دکمه */
    --btn-padding-y: 0.625rem;      /* فاصله عمودی داخل دکمه */
    --btn-padding-x-sm: 0.75rem;    /* فاصله افقی دکمه کوچک */
    --btn-padding-y-sm: 0.375rem;   /* فاصله عمودی دکمه کوچک */
    --btn-padding-x-lg: 1.75rem;    /* فاصله افقی دکمه بزرگ */
    --btn-padding-y-lg: 0.875rem;   /* فاصله عمودی دکمه بزرگ */


    /* ═══════════════════════════════════════ */
    /* ═══ بخش ۲۰ — اندازه آواتار و تصاویر ═══ */
    /* ═══════════════════════════════════════ */

    --avatar-sm: 32px;              /* آواتار کوچک — لیست‌ها */
    --avatar-md: 40px;              /* آواتار متوسط — navbar */
    --avatar-lg: 64px;              /* آواتار بزرگ — پروفایل */
    --avatar-xl: 96px;              /* آواتار خیلی بزرگ — صفحه پروفایل */
    --icon-sm: 16px;                /* آیکون کوچک */
    --icon-md: 20px;                /* آیکون متوسط */
    --icon-lg: 24px;                /* آیکون بزرگ */
    --icon-xl: 32px;                /* آیکون خیلی بزرگ */


    /* ═══════════════════════════════════════ */
    /* ═══ بخش ۲۱ — عرض Sidebar و Reader    ═══ */
    /* ═══════════════════════════════════════ */

    --sidebar-width: 280px;                 /* عرض سایدبار */
    --reader-max-width: 800px;              /* حداکثر عرض متن Reader */
    --reader-font-size: 1.125rem;           /* سایز فونت متن درس — 18px */
    --reader-line-height: 2;                /* ارتفاع خط متن درس */
    --reader-word-padding: 2px 4px;         /* فاصله داخلی هر کلمه قابل کلیک */
    --reader-word-radius: 3px;              /* گردی کلمه قابل کلیک */
    --popup-width: 320px;                   /* عرض popup ترجمه */
    --popup-max-height: 400px;              /* حداکثر ارتفاع popup */


}
/* ═══ پایان فایل variables.css ═══ */