/* ==========================================================
   PROJECT TITAN
   Design System
   variables.css
========================================================== */

:root{

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

    --primary:#037FFC;
    --primary-dark:#005FD1;

    --secondary:#00B8FF;

    --navy:#081F3D;

    --dark:#111827;

    --text:#374151;

    --gray:#6B7280;

    --light:#F3F7FB;

    --white:#FFFFFF;

    --border:#E5E7EB;

    --success:#10B981;

    --warning:#F59E0B;

    --danger:#EF4444;

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

    --container:1320px;

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

    --radius-xs:6px;
    --radius-sm:10px;
    --radius-md:16px;
    --radius-lg:24px;
    --radius-xl:40px;

    /*==================================================
        SHADOW
    ==================================================*/

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

    --shadow-md:0 10px 30px rgba(0,0,0,.10);

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

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

    --transition:.35s ease;

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

    --section:120px;

    --section-small:80px;

}