/* =====================================================
   ELITE STORE DESIGN SYSTEM
   Version : 1.0
===================================================== */

:root{

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

    --primary:#2563eb;
    --primary-dark:#1d4ed8;
    --primary-light:#dbeafe;

    --secondary:#0f172a;

    --success:#16a34a;
    --warning:#f59e0b;
    --danger:#dc2626;
    --info:#06b6d4;

    --white:#ffffff;
    --black:#000000;

    /* Gray Scale */

    --gray-50:#f8fafc;
    --gray-100:#f1f5f9;
    --gray-200:#e2e8f0;
    --gray-300:#cbd5e1;
    --gray-400:#94a3b8;
    --gray-500:#64748b;
    --gray-600:#475569;
    --gray-700:#334155;
    --gray-800:#1e293b;
    --gray-900:#0f172a;


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

    --font-primary:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;

    --fs-12:12px;
    --fs-14:14px;
    --fs-16:16px;
    --fs-18:18px;
    --fs-20:20px;
    --fs-24:24px;
    --fs-28:28px;
    --fs-32:32px;
    --fs-40:40px;
    --fs-48:48px;
    --fs-56:56px;


    /* ==========================================
       FONT WEIGHT
    ========================================== */

    --fw-300:300;
    --fw-400:400;
    --fw-500:500;
    --fw-600:600;
    --fw-700:700;
    --fw-800:800;


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

    --space-4:4px;
    --space-8:8px;
    --space-12:12px;
    --space-16:16px;
    --space-20:20px;
    --space-24:24px;
    --space-32:32px;
    --space-40:40px;
    --space-48:48px;
    --space-64:64px;
    --space-80:80px;


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

    --radius-sm:6px;
    --radius-md:10px;
    --radius-lg:16px;
    --radius-xl:24px;
    --radius-round:999px;


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

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

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

    --shadow-lg:0 20px 40px rgba(0,0,0,.12);

    --shadow-xl:0 30px 60px rgba(0,0,0,.18);


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

    --container-width:1320px;


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

    --transition:all .3s ease;

}