/* =========================================
FILE: variables.css
========================================= */

:root{

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

    --primary-red:#ff2d2d;
    --dark-red:#8b0000;
    --light-red:#ff5a5a;

    --primary-black:#000000;
    --secondary-black:#111111;
    --light-black:#1a1a1a;

    --primary-white:#ffffff;
    --off-white:#f5f5f5;

    --text-gray:#a5a5a5;
    --border-color:rgba(255,255,255,0.08);

    --card-bg:#111111;

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

    --primary-gradient:
    linear-gradient(
        135deg,
        #ff2d2d 0%,
        #b30000 100%
    );

    --dark-gradient:
    linear-gradient(
        135deg,
        #000000 0%,
        #1a0000 100%
    );

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

    --font-primary:'Poppins',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;
    --fs-64:64px;

    /* =====================================
       FONT WEIGHTS
    ===================================== */

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

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

    --space-10:10px;
    --space-15:15px;
    --space-20:20px;
    --space-25:25px;
    --space-30:30px;
    --space-40:40px;
    --space-50:50px;
    --space-60:60px;
    --space-80:80px;
    --space-100:100px;

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

    --radius-10:10px;
    --radius-14:14px;
    --radius-18:18px;
    --radius-24:24px;
    --radius-30:30px;
    --radius-full:999px;

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

    --shadow-sm:
    0 4px 12px rgba(0,0,0,0.08);

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

    --shadow-lg:
    0 20px 50px rgba(0,0,0,0.25);

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

    --transition:
    all 0.3s ease;

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

    --container-width:1400px;

}