/* ===========================================================================
   Design Tokens — خوانشیار (نسخه‌ی ۲ - پیوت دستیار کلاس آنلاین)
   همه‌ی رنگ‌ها/فاصله‌ها/تایپوگرافی سایت از همین فایل می‌آیند. site.css فقط
   کامپوننت‌ها را با همین متغیرها می‌سازد، رنگ خام این‌جا نیست.

   جهت هنری: تاریک‌محور (مثل Linear/Otter/Granola) - :root همان پالت تیره است،
   [data-theme="light"] پالت روشن را override می‌کند. اگر کاربر هیچ انتخابی
   ذخیره نکرده باشد، prefers-color-scheme هم رعایت می‌شود (پیش‌فرض اولیه‌ی
   خودش هم تیره است، پس این حالت فقط برای کسی که صریحا روشن را از سیستم‌عامل
   خواسته معنی دارد).
   =========================================================================== */

:root {
    /* --- رنگ برند (بنفش = اکشن) --- */
    --brand: #7C6CFF;
    --brand-hover: #9284FF;
    --brand-soft: rgba(124, 108, 255, 0.14);
    --primary: var(--brand);
    --primary-hover: var(--brand-hover);

    /* --- فیروزه‌ای = خروجی هوش مصنوعی --- */
    --accent: #3DE0C8;
    --accent-soft: rgba(61, 224, 200, 0.14);

    /* --- قرمز = فقط ضبط زنده --- */
    --rec: #FF4D6D;
    --rec-soft: rgba(255, 77, 109, 0.14);

    /* --- وضعیت --- */
    --success: #34D399;
    --danger: #F87171;
    --warning: #FFB547;
    --info: #22D3EE;

    /* --- گرادیان امضا: فقط برای CTA اصلی/لوگو/نشان هوش مصنوعی --- */
    --brand-gradient: linear-gradient(135deg, var(--brand), var(--accent));

    /* --- سطوح --- */
    --bg: #0B0D17;
    --surface: #12152A;
    --surface-2: #1A1E38;
    --surface-muted: var(--surface-2);
    --border: rgba(255, 255, 255, 0.08);

    /* --- متن --- */
    --text: #EEF0FF;
    --text-muted: #9AA0C3;

    /* --- تایپوگرافی (Vazirmatn 400/500/700/900) --- */
    --fs-xs: 13px;
    --fs-sm: 15px;
    --fs-base: 17px;
    --fs-lg: 20px;
    --fs-xl: 24px;
    --fs-2xl: 32px;
    --fs-3xl: 44px;
    --fs-4xl: 56px;
    --lh-fa: 1.9;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 700;
    --fw-bold: 700;
    --fw-black: 900;

    /* --- فاصله (مقیاس ۴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: 20px;
    --radius-control: 14px;
    --radius-pill: 999px;

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

    /* --- حرکت --- */
    --ease-standard: cubic-bezier(.2, .8, .2, 1);
    --motion-fast: 150ms;
    --motion-base: 220ms;
    --motion-slow: 300ms;
}

[data-theme="light"] {
    --brand: #5B4BFF;
    --brand-hover: #4B3CE6;
    --brand-soft: rgba(91, 75, 255, 0.10);

    --accent: #0FB39C;
    --accent-soft: rgba(15, 179, 156, 0.10);

    --rec: #E8344F;
    --rec-soft: rgba(232, 52, 79, 0.10);

    --success: #059669;
    --danger: #DC2626;
    --warning: #D98A00;
    --info: #0891B2;

    --bg: #F7F7FB;
    --surface: #FFFFFF;
    --surface-2: #F0F1F8;
    --border: rgba(15, 18, 40, 0.08);

    --text: #0F1228;
    --text-muted: #5B6085;

    --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" است)، فقط در صورتی که سیستم‌عامل صریحا "light" خواسته باشد آن
   را به‌عنوان پیش‌فرض اولیه در نظر می‌گیریم. به‌محض اینکه کاربر از دکمه‌ی تغییر
   پوسته استفاده کند، data-theme صریح می‌شود و همیشه روی همان می‌ماند (localStorage)
   - این بلوک فقط برای اولین بازدید است. */
@media (prefers-color-scheme: light) {
    html[data-theme="dark"]:not([data-theme-explicit]) {
        --brand: #5B4BFF;
        --brand-hover: #4B3CE6;
        --brand-soft: rgba(91, 75, 255, 0.10);
        --accent: #0FB39C;
        --accent-soft: rgba(15, 179, 156, 0.10);
        --rec: #E8344F;
        --rec-soft: rgba(232, 52, 79, 0.10);
        --success: #059669;
        --danger: #DC2626;
        --warning: #D98A00;
        --info: #0891B2;
        --bg: #F7F7FB;
        --surface: #FFFFFF;
        --surface-2: #F0F1F8;
        --border: rgba(15, 18, 40, 0.08);
        --text: #0F1228;
        --text-muted: #5B6085;
    }
}