/* ==========================================
   Loqta Real Estate
   CSS Variables
========================================== */

:root {

    /* ===============================
       Brand Colors
    =============================== */

    --primary-color: #0B2E59;
    --primary-dark: #072241;
    --primary-light: #1E4E89;

    --secondary-color: #D4A017;
    --secondary-dark: #B8860B;
    --secondary-light: #F3D46A;

    --success-color: #16A34A;
    --success-dark: #15803D;

    --whatsapp-color: #25D366;
    --call-color: #0B2E59;

    /* Social Media */

    --facebook-color: #1877F2;
    --instagram-color: #E4405F;

    --danger-color: #DC2626;
    --warning-color: #F59E0B;

    /* ===============================
       Backgrounds
    =============================== */

    --background-color: #F8F9FA;
    --surface-color: #FFFFFF;
    --section-color: #F3F6FA;

    /* ===============================
       Text
    =============================== */

    --text-color: #1F2937;
    --text-light: #6B7280;
    --text-white: #FFFFFF;

    /* ===============================
       Borders
    =============================== */

    --border-color: #E5E7EB;

    /* ===============================
       Radius
    =============================== */

    --radius-xs: 6px;
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-round: 999px;

    /* ===============================
       Shadows
    =============================== */

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

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

    --shadow-lg: 0 20px 45px rgba(11, 46, 89, .15);

    /* ===============================
       Transition
    =============================== */

    --transition-fast: .2s ease;

    --transition-normal: .35s ease;

    --transition-slow: .5s ease;

    /* ===============================
       Container
    =============================== */

    --container-width: 1200px;

    --container-padding: 20px;

    /* ===============================
       Header
    =============================== */

    --header-height: 82px;

    /* ===============================
       Floating Bar
    =============================== */

    --floating-height: 76px;

    /* ===============================
       Typography
    =============================== */

    --font-family: "Cairo", sans-serif;

    --font-xs: .75rem;

    --font-sm: .875rem;

    --font-md: 1rem;

    --font-lg: 1.15rem;

    --font-xl: 1.45rem;

    --font-2xl: 2rem;

    --font-3xl: 2.6rem;

    /* ===============================
       Font Weight
    =============================== */

    --fw-light: 300;

    --fw-normal: 400;

    --fw-medium: 500;

    --fw-semibold: 600;

    --fw-bold: 700;

    --fw-extrabold: 800;

    --fw-black: 900;

    /* ===============================
       Z-index
    =============================== */

    --z-loader: 9999;

    --z-header: 999;

    --z-floating: 998;

    --z-toast: 1000;

}