/* =========================================================
   VARIABLES.CSS
   HAZLO FACIL TRAVEL
========================================================= */

:root {

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

    --primary: #082B5B;
    --primary-light: #0C63FF;

    --secondary: #C62828;
    --secondary-light: #FF6262;

    --accent: #5AA8FF;
    --accent-light: #8BC5FF;

    --purple: #5C17FF;

    --white: #FFFFFF;
    --black: #000000;

    --text-light: rgba(255,255,255,.82);
    --text-muted: rgba(255,255,255,.62);

    /* =====================================================
       GLASSMORPHISM
    ===================================================== */

    --glass-bg: rgba(255,255,255,.08);

    --glass-bg-hover: rgba(255,255,255,.12);

    --glass-border: rgba(255,255,255,.12);

    --glass-border-light: rgba(255,255,255,.18);

    --blur: blur(20px);

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

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

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

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

    --shadow-blue:
        0 0 25px rgba(90,168,255,.45);

    --shadow-red:
        0 0 25px rgba(255,47,91,.35);

    --shadow-green:
        0 0 25px rgba(37,211,102,.5);

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

    --gradient-primary:
        linear-gradient(
            135deg,
            #0C63FF,
            #FF2F5B
        );

    --gradient-blue:
        linear-gradient(
            135deg,
            #1148FF,
            #0F91FF
        );

    --gradient-red:
        linear-gradient(
            135deg,
            #FF1B1B,
            #FF6262
        );

    --gradient-purple:
        linear-gradient(
            135deg,
            #5C17FF,
            #0FA7FF
        );

    --gradient-dark:
        linear-gradient(
            135deg,
            rgba(1,10,25,.95),
            rgba(2,15,40,.90)
        );

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

    --font-primary:
        'Montserrat',
        sans-serif;

    --font-secondary:
        'Outfit',
        sans-serif;

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

    --fw-light: 300;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extrabold: 800;
    --fw-black: 900;

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

    --radius-sm: 12px;
    --radius-md: 18px;
    --radius-lg: 30px;
    --radius-xl: 40px;
    --radius-full: 999px;

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

    --transition-fast: .2s ease;

    --transition-normal: .4s ease;

    --transition-slow: .7s ease;

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

    --z-video: -3;
    --z-overlay: -2;
    --z-particles: -1;

    --z-normal: 1;

    --z-header: 999;

    --z-floating: 9999;

    --z-loader: 999999;

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

    --section-padding:
        120px 0;

    --container-padding:
        0 15px;

}