/* =========================================================
   SOFTRENIX TECHNOLOGIES
   GLOBAL DESIGN VARIABLES
   Engineering Beyond Boundaries.
========================================================= */

:root {

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

    --color-navy: #07132F;
    --color-navy-light: #0D1E42;

    --color-blue: #086CFF;
    --color-blue-light: #25A4FF;

    --color-white: #FFFFFF;
    --color-off-white: #F5F8FC;

    --color-gray-50: #F8FAFD;
    --color-gray-100: #EEF2F7;
    --color-gray-200: #DDE4EE;
    --color-gray-300: #C5CFDC;

    --color-gray-500: #718096;
    --color-gray-600: #526174;
    --color-gray-700: #344256;
    --color-gray-900: #101828;

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

    --font-heading: "Space Grotesk", sans-serif;
    --font-body: "Inter", sans-serif;

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

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

    --text-xs: 0.72rem;
    --text-sm: 0.82rem;
    --text-base: 1rem;
    --text-lg: 1.15rem;
    --text-xl: 1.35rem;

    --text-2xl: 1.75rem;
    --text-3xl: 2.25rem;
    --text-4xl: 3rem;

    --text-5xl: 4rem;
    --text-6xl: 5rem;
    --text-7xl: 7rem;
    --text-8xl: 9rem;

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

    --container-width: 1440px;
    --container-padding: 5vw;

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

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --space-9: 6rem;
    --space-10: 8rem;
    --space-11: 10rem;
    --space-12: 12rem;

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

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-pill: 999px;

    /* =====================================================
       BORDERS
    ====================================================== */

    --border-light: 1px solid rgba(7, 19, 47, 0.10);
    --border-dark: 1px solid rgba(255, 255, 255, 0.14);

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

    --shadow-sm:
        0 4px 16px rgba(7, 19, 47, 0.06);

    --shadow-md:
        0 12px 40px rgba(7, 19, 47, 0.10);

    --shadow-lg:
        0 24px 80px rgba(7, 19, 47, 0.16);

    /* =====================================================
       MOTION
    ====================================================== */

    --ease-standard:
        cubic-bezier(0.22, 1, 0.36, 1);

    --ease-smooth:
        cubic-bezier(0.16, 1, 0.3, 1);

    --ease-sharp:
        cubic-bezier(0.65, 0, 0.35, 1);

    --duration-fast: 180ms;
    --duration-normal: 350ms;
    --duration-slow: 700ms;

    /* =====================================================
       Z-INDEX SYSTEM
    ====================================================== */

    --z-background: 0;
    --z-content: 10;
    --z-header: 100;
    --z-overlay: 500;
    --z-loader: 1000;

}


/* =========================================================
   RESPONSIVE VARIABLES
========================================================= */

@media (max-width: 1200px) {

    :root {

        --container-padding: 4vw;

        --text-7xl: 6rem;
        --text-8xl: 7.5rem;

    }

}


@media (max-width: 768px) {

    :root {

        --container-padding: 6vw;

        --text-4xl: 2.5rem;
        --text-5xl: 3rem;
        --text-6xl: 3.5rem;
        --text-7xl: 4rem;
        --text-8xl: 4.5rem;

        --space-10: 6rem;
        --space-11: 7rem;
        --space-12: 8rem;

    }

}