/* ==========================================================
   VARIABLES.CSS
   Design System
========================================================== */

:root{

    /* ======================================================
       Colors
    ====================================================== */

    --color-primary:#2563eb;

    --color-primary-light:#3b82f6;

    --color-primary-dark:#1d4ed8;

    --color-accent:#06b6d4;

    --color-accent-light:#22d3ee;

    --color-success:#10b981;

    --color-warning:#f59e0b;

    --color-danger:#ef4444;

    /* ======================================================
       Backgrounds
    ====================================================== */

    --bg-page:#060b16;

    --bg-section:#091220;

    --bg-card:#101a2b;

    --bg-card-hover:#15233a;

    --bg-glass:rgba(255,255,255,.05);

    --bg-glass-strong:rgba(255,255,255,.08);

    /* ======================================================
       Borders
    ====================================================== */

    --border-color:rgba(255,255,255,.08);

    --border-light:rgba(255,255,255,.12);

    --border-strong:rgba(255,255,255,.18);

    /* ======================================================
       Typography
    ====================================================== */

    --text-primary:#ffffff;

    --text-secondary:#b8c5d6;

    --text-muted:#7d8ba0;

    --text-light:#dce7f7;

    /* ======================================================
       Gradients
    ====================================================== */

    --gradient-primary:
        linear-gradient(
            135deg,
            #2563eb 0%,
            #06b6d4 100%
        );

    --gradient-dark:
        linear-gradient(
            180deg,
            #0a1220,
            #060b16
        );

    --gradient-card:
        linear-gradient(
            145deg,
            rgba(255,255,255,.08),
            rgba(255,255,255,.02)
        );

    /* ======================================================
       Shadows
    ====================================================== */

    --shadow-sm:
        0 5px 15px rgba(0,0,0,.15);

    --shadow-md:
        0 12px 35px rgba(0,0,0,.25);

    --shadow-lg:
        0 20px 60px rgba(0,0,0,.35);

    --shadow-glow:
        0 0 40px rgba(37,99,235,.35);

    --shadow-card:
        0 20px 50px rgba(0,0,0,.30);

    /* ======================================================
       Border Radius
    ====================================================== */

    --radius-xs:6px;

    --radius-sm:10px;

    --radius-md:16px;

    --radius-lg:22px;

    --radius-xl:30px;

    --radius-2xl:42px;

    --radius-pill:999px;

    /* ======================================================
       Layout
    ====================================================== */

    --container-width:1280px;

    --container-padding:2rem;

    --section-padding:8rem;

    --section-gap:5rem;

    --header-height: 84px;

    /* ======================================================
       Spacing
    ====================================================== */

    --space-xs:.4rem;

    --space-sm:.8rem;

    --space-md:1.5rem;

    --space-lg:2.5rem;

    --space-xl:4rem;

    --space-2xl:6rem;

    /* ======================================================
       Typography Scale
    ====================================================== */

    --font-family:
        "Vazirmatn",
        sans-serif;

    --font-xs:.8rem;

    --font-sm:.95rem;

    --font-base:1rem;

    --font-lg:1.15rem;

    --font-xl:1.35rem;

    --font-2xl:2rem;

    --font-3xl:3rem;

    --font-4xl:4rem;

    --font-5xl:5rem;

    /* ======================================================
       Font Weight
    ====================================================== */

    --fw-light:300;

    --fw-normal:400;

    --fw-medium:500;

    --fw-semibold:600;

    --fw-bold:700;

    --fw-black:800;

    /* ======================================================
       Line Heights
    ====================================================== */

    --lh-tight:1.2;

    --lh-normal:1.6;

    --lh-loose:1.9;

    /* ======================================================
       Animation
    ====================================================== */

    --transition-fast:.2s ease;

    --transition:.35s ease;

    --transition-slow:.6s ease;

    --transition-bounce:
        .5s cubic-bezier(.22,1,.36,1);

    /* ======================================================
       Blur
    ====================================================== */

    --blur-sm:8px;

    --blur-md:16px;

    --blur-lg:28px;

    /* ======================================================
       Z-Index
    ====================================================== */

    --z-background:-1;

    --z-base:1;

    --z-dropdown:100;

    --z-sticky:500;

    --z-header:1000;

    --z-modal:3000;

    --z-tooltip:5000;

}

/* ==========================================================
   Responsive Variables
========================================================== */

@media (max-width:992px){

    :root{

        --section-padding:6rem;

        --container-padding:1.5rem;

        --font-5xl:4rem;

        --font-4xl:3.2rem;

        --font-3xl:2.5rem;

    }

}

@media (max-width:768px){

    :root{

        --section-padding:5rem;

        --container-padding:1.25rem;

        --font-5xl:3rem;

        --font-4xl:2.5rem;

        --font-3xl:2rem;

        --font-2xl:1.6rem;

    }

}