/* =========================================================
   PERSONAL PORTFOLIO
   VARIABLES.CSS
   ---------------------------------------------------------
   این فایل شامل تمام متغیرهای اصلی طراحی سایت است:
   - رنگ‌ها
   - حالت روشن و تاریک
   - سایه‌ها
   - گوشه‌ها
   - فاصله‌ها
   - سرعت انیمیشن‌ها
   - لایه‌بندی
   ========================================================= */


/* =========================================================
   1. ROOT VARIABLES
   ---------------------------------------------------------
   مقادیر پیش‌فرض سایت در حالت Light Mode
   ========================================================= */

:root {

    /* -----------------------------------------------------
       Brand Colors
       رنگ‌های اصلی برند
       ----------------------------------------------------- */

    --color-primary: #2563eb;
    --color-primary-hover: #1d4ed8;
    --color-primary-soft: rgba(37, 99, 235, 0.10);

    --color-secondary: #64748b;

    --color-accent: #06b6d4;
    --color-accent-soft: rgba(6, 182, 212, 0.10);


    /* -----------------------------------------------------
       Background Colors
       رنگ‌های پس‌زمینه
       ----------------------------------------------------- */

    --color-bg: #f7f9fc;
    --color-bg-secondary: #ffffff;
    --color-bg-tertiary: #f1f5f9;


    /* -----------------------------------------------------
       Surface Colors
       برای کارت‌ها، Header، پنل‌ها و عناصر شناور
       ----------------------------------------------------- */

    --color-surface: rgba(255, 255, 255, 0.72);
    --color-surface-solid: #ffffff;
    --color-surface-hover: rgba(255, 255, 255, 0.95);


    /* -----------------------------------------------------
       Text Colors
       رنگ نوشته‌ها
       ----------------------------------------------------- */

    --color-text: #111827;
    --color-text-secondary: #475569;
    --color-text-muted: #64748b;
    --color-text-light: #94a3b8;


    /* -----------------------------------------------------
       Border Colors
       رنگ خطوط و Borderها
       ----------------------------------------------------- */

    --color-border: rgba(15, 23, 42, 0.08);
    --color-border-strong: rgba(15, 23, 42, 0.14);


    /* -----------------------------------------------------
       Status Colors
       رنگ وضعیت‌ها و پیام‌ها
       ----------------------------------------------------- */

    --color-success: #16a34a;
    --color-warning: #f59e0b;
    --color-danger: #ef4444;


    /* -----------------------------------------------------
       Shadows
       سایه‌های مختلف برای عمق دادن به عناصر
       ----------------------------------------------------- */

    --shadow-sm:
        0 2px 8px rgba(15, 23, 42, 0.05);

    --shadow-md:
        0 8px 24px rgba(15, 23, 42, 0.08);

    --shadow-lg:
        0 20px 50px rgba(15, 23, 42, 0.12);

    --shadow-xl:
        0 30px 80px rgba(15, 23, 42, 0.16);


    /* -----------------------------------------------------
       Border Radius
       میزان گردی گوشه‌ها
       ----------------------------------------------------- */

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 24px;
    --radius-2xl: 32px;
    --radius-full: 9999px;


    /* -----------------------------------------------------
       Spacing
       سیستم فاصله‌گذاری
       ----------------------------------------------------- */

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;


    /* -----------------------------------------------------
       Container
       حداکثر عرض محتوای سایت
       ----------------------------------------------------- */

    --container-width: 1200px;
    --container-padding: 24px;


    /* -----------------------------------------------------
       Typography
       سیستم فونت
       ----------------------------------------------------- */

    --font-primary:
        "Inter",
        "Segoe UI",
        Arial,
        sans-serif;

    --font-persian:
        "Vazirmatn",
        "Tahoma",
        sans-serif;


    /* -----------------------------------------------------
       Font Sizes
       اندازه‌های مختلف متن
       ----------------------------------------------------- */

    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --text-5xl: 3rem;
    --text-6xl: 3.75rem;


    /* -----------------------------------------------------
       Line Heights
       فاصله بین خطوط
       ----------------------------------------------------- */

    --line-tight: 1.15;
    --line-normal: 1.5;
    --line-relaxed: 1.75;


    /* -----------------------------------------------------
       Transitions
       سرعت تغییرات و انیمیشن‌های UI
       ----------------------------------------------------- */

    --transition-fast:
        150ms ease;

    --transition-normal:
        250ms ease;

    --transition-slow:
        400ms ease;

    --transition-smooth:
        600ms cubic-bezier(0.22, 1, 0.36, 1);


    /* -----------------------------------------------------
       Z-Index
       مدیریت ترتیب قرارگیری عناصر روی هم
       ----------------------------------------------------- */

    --z-background: -1;
    --z-base: 1;
    --z-content: 10;
    --z-header: 100;
    --z-dropdown: 200;
    --z-modal: 1000;
    --z-toast: 2000;


    /* -----------------------------------------------------
       Effects
       افکت‌های شفافیت و Blur
       ----------------------------------------------------- */

    --blur-sm: 8px;
    --blur-md: 16px;
    --blur-lg: 24px;


    /* -----------------------------------------------------
       Header
       تنظیمات اولیه Header
       ----------------------------------------------------- */

    --header-height: 76px;
}


/* =========================================================
   2. DARK MODE
   ---------------------------------------------------------
   زمانی که روی HTML مقدار
   data-theme="dark"
   قرار بگیرد، این مقادیر جایگزین می‌شوند.
   ========================================================= */

html[data-theme="dark"] {

    /* -----------------------------------------------------
       Brand Colors
       ----------------------------------------------------- */

    --color-primary: #60a5fa;
    --color-primary-hover: #93c5fd;
    --color-primary-soft: rgba(96, 165, 250, 0.12);

    --color-secondary: #94a3b8;

    --color-accent: #22d3ee;
    --color-accent-soft: rgba(34, 211, 238, 0.12);


    /* -----------------------------------------------------
       Background Colors
       ----------------------------------------------------- */

    --color-bg: #080b12;
    --color-bg-secondary: #0f141d;
    --color-bg-tertiary: #151b26;


    /* -----------------------------------------------------
       Surface Colors
       ----------------------------------------------------- */

    --color-surface: rgba(15, 20, 29, 0.72);
    --color-surface-solid: #0f141d;
    --color-surface-hover: rgba(21, 27, 38, 0.95);


    /* -----------------------------------------------------
       Text Colors
       ----------------------------------------------------- */

    --color-text: #f8fafc;
    --color-text-secondary: #cbd5e1;
    --color-text-muted: #94a3b8;
    --color-text-light: #64748b;


    /* -----------------------------------------------------
       Border Colors
       ----------------------------------------------------- */

    --color-border: rgba(255, 255, 255, 0.08);
    --color-border-strong: rgba(255, 255, 255, 0.14);


    /* -----------------------------------------------------
       Shadows
       ----------------------------------------------------- */

    --shadow-sm:
        0 2px 8px rgba(0, 0, 0, 0.20);

    --shadow-md:
        0 8px 24px rgba(0, 0, 0, 0.28);

    --shadow-lg:
        0 20px 50px rgba(0, 0, 0, 0.38);

    --shadow-xl:
        0 30px 80px rgba(0, 0, 0, 0.50);
}


/* =========================================================
   3. REDUCED MOTION
   ---------------------------------------------------------
   اگر کاربر در سیستم‌عامل خود انیمیشن‌ها را محدود کرده باشد،
   حرکات سنگین سایت کاهش پیدا می‌کنند.
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    :root {

        --transition-fast: 0ms;
        --transition-normal: 0ms;
        --transition-slow: 0ms;
        --transition-smooth: 0ms;
    }
}