/* ===========================================================================
   Design Tokens — استادیار
   همه‌ی رنگ‌ها/فاصله‌ها/تایپوگرافی سایت از همین فایل می‌آیند. site.css فقط
   کامپوننت‌ها را با همین متغیرها می‌سازد، رنگ خام این‌جا نیست.
   تم با [data-theme="dark"] روی <html> کنترل می‌شود (مطابق الگوی قبلی که
   در Quiz/Take.cshtml هم استفاده شده بود)؛ اگر کاربر هیچ انتخابی ذخیره نکرده
   باشد، prefers-color-scheme هم به‌عنوان پیش‌فرض اولیه رعایت می‌شود.
   =========================================================================== */

:root {
    /* --- رنگ برند --- */
    --brand: #4F46E5;
    --brand-hover: #4338CA;
    --brand-soft: #EEF2FF;

    /* نگه‌داری نام‌های قبلی به‌عنوان alias تا کدی که قبلا نوشته شده نشکند */
    --primary: var(--brand);
    --primary-hover: var(--brand-hover);

    /* --- هایلایت (زرد/امبر فعلی سایت - فقط برای نشان، نه دکمه‌ی اصلی) --- */
    --accent: #F59E0B;
    --accent-soft: #FEF3C7;

    /* --- وضعیت --- */
    --success: #10B981;
    --danger: #EF4444;
    --warning: #F59E0B;
    --info: #06B6D4;

    /* --- سطوح --- */
    --bg: #FAFAFA;
    --surface: #FFFFFF;
    --surface-2: #F3F4F6;
    --surface-muted: var(--surface-2); /* alias قدیمی */
    --border: #E5E7EB;

    /* --- متن --- */
    --text: #0F172A;
    --text-muted: #64748B;

    /* --- تایپوگرافی (مقیاس ثابت) --- */
    --fs-xs: 12px;
    --fs-sm: 14px;
    --fs-base: 16px;
    --fs-lg: 20px;
    --fs-xl: 24px;
    --fs-2xl: 32px;
    --lh-fa: 1.8;
    --fw-regular: 400;
    --fw-semibold: 600;
    --fw-bold: 800;

    /* --- فاصله (مقیاس ۴px) --- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 28px;
    --space-8: 32px;

    /* --- شعاع --- */
    --radius-card: 12px;
    --radius-control: 10px;
    --radius-pill: 999px;

    /* --- سایه --- */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] {
    --brand: #818CF8;
    --brand-hover: #A5B4FC;
    --brand-soft: rgba(129, 140, 248, 0.12);

    --accent: #FBBF24;
    --accent-soft: rgba(251, 191, 36, 0.12);

    --success: #34D399;
    --danger: #F87171;
    --warning: #FBBF24;
    --info: #22D3EE;

    --bg: #0F172A;
    --surface: #1E293B;
    --surface-2: #273449;
    --border: rgba(255, 255, 255, 0.08);

    --text: #F1F5F9;
    --text-muted: #94A3B8;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
}

/* اگر کاربر هنوز هیچ تمی را به‌صورت دستی انتخاب نکرده (data-theme هنوز روی مقدار
   پیش‌فرض "light" است)، ترجیح سیستم‌عامل را به‌عنوان نقطه‌ی شروع در نظر می‌گیریم.
   به‌محض اینکه کاربر از دکمه‌ی تغییر پوسته استفاده کند، data-theme صریح می‌شود و
   همیشه روی همان می‌ماند (localStorage) - این بلوک فقط برای اولین بازدید است. */
@media (prefers-color-scheme: dark) {
    html[data-theme="light"]:not([data-theme-explicit]) {
        --brand: #818CF8;
        --brand-hover: #A5B4FC;
        --brand-soft: rgba(129, 140, 248, 0.12);
        --accent: #FBBF24;
        --accent-soft: rgba(251, 191, 36, 0.12);
        --success: #34D399;
        --danger: #F87171;
        --warning: #FBBF24;
        --info: #22D3EE;
        --bg: #0F172A;
        --surface: #1E293B;
        --surface-2: #273449;
        --border: rgba(255, 255, 255, 0.08);
        --text: #F1F5F9;
        --text-muted: #94A3B8;
    }
}