/* ==========================================================
   AURA MIND DESIGN SYSTEM
   Version : 2.0
   ========================================================== */

:root{

    /* ======================================================
       BRAND COLORS
    ====================================================== */

    --primary:#5B5CEB;
    --primary-dark:#4338CA;
    --primary-light:#EEF2FF;

    --secondary:#8B5CF6;
    --accent:#FF8A00;

    --success:#10B981;
    --danger:#EF4444;
    --warning:#F59E0B;
    --info:#0EA5E9;

    /* ======================================================
       NEUTRAL COLORS
    ====================================================== */

    --white:#ffffff;

    --bg:#F7F8FC;
    --surface:#FFFFFF;

    --surface-2:#F9FAFB;
    --surface-3:#F3F4F6;

    --border:#E5E7EB;
    --border-light:#F1F5F9;

    --text:#111827;
    --text-light:#374151;
    --muted:#6B7280;

    /* ======================================================
       GRADIENTS
    ====================================================== */

    --gradient-primary:
        linear-gradient(
            135deg,
            #5B5CEB 0%,
            #8B5CF6 100%
        );

    --gradient-accent:
        linear-gradient(
            135deg,
            #FF8A00,
            #FFB347
        );

    --gradient-soft:
        linear-gradient(
            180deg,
            #FFFFFF,
            #F8FAFC
        );

    /* ======================================================
       TYPOGRAPHY
    ====================================================== */

    --font-family:
        Inter,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    --fs-xs:12px;
    --fs-sm:14px;
    --fs-md:16px;
    --fs-lg:18px;
    --fs-xl:22px;
    --fs-2xl:30px;
    --fs-3xl:42px;
    --fs-4xl:56px;

    --fw-normal:400;
    --fw-medium:500;
    --fw-semibold:600;
    --fw-bold:700;
    --fw-black:800;

    --line-height:1.7;

    /* ======================================================
       SPACING
    ====================================================== */

    --space-1:4px;
    --space-2:8px;
    --space-3:12px;
    --space-4:16px;
    --space-5:20px;
    --space-6:24px;
    --space-7:32px;
    --space-8:40px;
    --space-9:56px;
    --space-10:72px;
    --space-11:96px;

    /* ======================================================
       RADIUS
    ====================================================== */

    --radius-xs:8px;
    --radius-sm:12px;
    --radius-md:18px;
    --radius-lg:24px;
    --radius-xl:32px;
    --radius-pill:999px;

    /* ======================================================
       SHADOWS
    ====================================================== */

    --shadow-sm:
        0 4px 12px rgba(15,23,42,.05);

    --shadow-md:
        0 12px 30px rgba(15,23,42,.08);

    --shadow-lg:
        0 24px 60px rgba(15,23,42,.12);

    --shadow-xl:
        0 35px 80px rgba(15,23,42,.16);

    /* ======================================================
       GLASS
    ====================================================== */

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

    --glass-border:
        rgba(255,255,255,.45);

    --blur:16px;

    /* ======================================================
       CONTAINER
    ====================================================== */

    --container:1320px;
    --container-wide:1440px;

    /* ======================================================
       HEADER
    ====================================================== */

    --header-height:84px;

    /* ======================================================
       ANIMATION
    ====================================================== */

    --speed-fast:.18s;
    --speed:.28s;
    --speed-slow:.45s;

    --ease:cubic-bezier(.4,0,.2,1);

}


/* ==========================================================
   GLOBAL RESET HELPERS
========================================================== */

*,
*::before,
*::after{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:var(--font-family);

    background:var(--bg);

    color:var(--text);

    line-height:var(--line-height);

    -webkit-font-smoothing:antialiased;

    text-rendering:optimizeLegibility;

}

img{

    max-width:100%;

    display:block;

}

a{

    color:inherit;

    text-decoration:none;

    transition:var(--speed);

}

button{

    font:inherit;

}

.container{

    width:min(
        var(--container),
        calc(100% - 40px)
    );

    margin:auto;

}


/* ==========================================================
   COMMON SECTION
========================================================== */

.section{

    padding:80px 0;

}

.section-title{

    font-size:var(--fs-3xl);

    font-weight:var(--fw-black);

    line-height:1.15;

}

.section-subtitle{

    margin-top:16px;

    color:var(--muted);

    font-size:18px;

}


/* ==========================================================
   COMMON CARD
========================================================== */

.card{

    background:var(--surface);

    border:1px solid var(--border);

    border-radius:var(--radius-lg);

    box-shadow:var(--shadow-sm);

}


/* ==========================================================
   COMMON TRANSITION
========================================================== */

.transition{

    transition:
        all
        var(--speed)
        var(--ease);

}