/*==========================================================
    DESIGN SYSTEM

    T-SCA
==========================================================*/

:root{

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

    --background:#050505;

    --background-secondary:#0C0C0C;

    --surface:#111111;

    --surface-light:#171717;

    --white:#FFFFFF;

    --black:#000000;

    --text:#FFFFFF;

    --text-secondary:#C8C8C8;

    --text-muted:#919191;

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

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

    /* ======================================
       BUTTONS
    ====================================== */

    --primary:#FFFFFF;

    --primary-hover:#E8E8E8;

    --secondary:#181818;

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

    --gradient-dark:

        linear-gradient(

            180deg,

            #050505,

            #111111

        );

    --gradient-light:

        linear-gradient(

            180deg,

            #FFFFFF,

            #D9D9D9

        );

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

    --font:'Inter',sans-serif;

    --fs-xs:12px;

    --fs-sm:14px;

    --fs-md:16px;

    --fs-lg:18px;

    --fs-xl:22px;

    --fs-h3:30px;

    --fs-h2:58px;

    --fs-h1:92px;

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

    --space-8:8px;

    --space-12:12px;

    --space-16:16px;

    --space-20:20px;

    --space-24:24px;

    --space-32:32px;

    --space-40:40px;

    --space-60:60px;

    --space-80:80px;

    --space-120:120px;

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

    --radius-sm:12px;

    --radius-md:18px;

    --radius-lg:24px;

    --radius-xl:32px;

    --radius-pill:999px;

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

    --shadow-sm:

        0 10px 25px rgba(0,0,0,.15);

    --shadow-md:

        0 25px 60px rgba(0,0,0,.28);

    --shadow-lg:

        0 40px 90px rgba(0,0,0,.40);

    /* ======================================
       TRANSITIONS
    ====================================== */

    --transition:

        .35s cubic-bezier(.19,1,.22,1);

}