/*
=========================================================
LA DARSENA DELLA VELA
Variables
=========================================================
*/

:root{

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

    --color-primary:#0B4F6C;
    --color-primary-light:#2E6F8E;
    --color-primary-dark:#083B50;

    --color-secondary:#D4AF37;
    --color-secondary-light:#F0D67B;
    --color-secondary-dark:#A88315;

    --color-white:#FFFFFF;
    --color-black:#111111;

    --color-background:#F8F8F8;
    --color-surface:#FFFFFF;

    --color-text:#2B2B2B;
    --color-text-light:#707070;

    --color-border:#E6E6E6;

    --color-success:#3FA96B;
    --color-danger:#D64545;
    --color-warning:#E8A317;

    --overlay-dark:rgba(0,0,0,.55);
    --overlay-light:rgba(255,255,255,.85);

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

    --font-title:"Playfair Display",serif;

    --font-body:"Poppins",sans-serif;

    --font-size-xs:.75rem;
    --font-size-sm:.875rem;
    --font-size-md:1rem;
    --font-size-lg:1.125rem;
    --font-size-xl:1.35rem;
    --font-size-2xl:2rem;
    --font-size-3xl:3rem;
    --font-size-4xl:4.5rem;

    --font-weight-light:300;
    --font-weight-normal:400;
    --font-weight-medium:500;
    --font-weight-semibold:600;
    --font-weight-bold:700;

    --line-height:1.7;

    /* =====================================================
       LAYOUT
    ===================================================== */

    --container:1320px;

    --header-height:90px;

    --section-space:120px;

    --radius-xs:6px;
    --radius-sm:10px;
    --radius-md:18px;
    --radius-lg:28px;
    --radius-xl:40px;
    --radius-round:999px;

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

    --shadow-xs:
        0 3px 8px rgba(0,0,0,.05);

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

    --shadow-md:
        0 20px 50px rgba(0,0,0,.12);

    --shadow-lg:
        0 30px 70px rgba(0,0,0,.18);

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

    --transition-fast:.20s ease;

    --transition:.35s ease;

    --transition-slow:.60s ease;

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

    --z-preloader:99999;

    --z-modal:9000;

    --z-header:8000;

    --z-whatsapp:7000;

    --z-cookie:6500;

    --z-backtotop:6000;

    /* =====================================================
       BUTTONS
    ===================================================== */

    --button-height:56px;

    --button-padding:0 34px;

    /* =====================================================
       INPUTS
    ===================================================== */

    --input-height:58px;

    --input-radius:12px;

    --input-border:1px solid var(--color-border);

    /* =====================================================
       GALLERY
    ===================================================== */

    --gallery-gap:20px;

    --gallery-radius:22px;

    /* =====================================================
       CARDS
    ===================================================== */

    --card-padding:35px;

    --card-radius:24px;

    /* =====================================================
       FOOTER
    ===================================================== */

    --footer-background:#0B1621;

    --footer-text:#E6E6E6;

    /* =====================================================
       BREAKPOINTS
    ===================================================== */

    --desktop-xl:1600px;

    --desktop:1400px;

    --laptop:1200px;

    --tablet:992px;

    --mobile:768px;

    --mobile-small:576px;

}