/* =========================================================
   TEN ONE RESORT
   Global Design Variables
   variables.css
   ========================================================= */


/* =========================================================
   1. COLOR PALETTE
   ========================================================= */

:root {

    /* -----------------------------------------------------
       Brand Colors
       ----------------------------------------------------- */

    /* Deep forest green - primary brand color */
    --color-primary: #164A3A;

    /* Natural green - secondary brand color */
    --color-primary-light: #3F7655;

    /* Darker green for hover states */
    --color-primary-dark: #0F382B;


    /* -----------------------------------------------------
       Water / Reservoir Colors
       ----------------------------------------------------- */

    /* Soft reservoir blue */
    --color-water: #5FA9B8;

    /* Deeper water blue */
    --color-water-dark: #347B8A;

    /* Very light water tint */
    --color-water-light: #DDEFF2;


    /* -----------------------------------------------------
       Earth / Nature Colors
       ----------------------------------------------------- */

    /* Warm earthy brown */
    --color-earth: #9A7152;

    /* Light sand tone */
    --color-sand: #C7A77A;

    /* Very light natural beige */
    --color-sand-light: #F1E8D8;


    /* -----------------------------------------------------
       Neutral Colors
       ----------------------------------------------------- */

    /* Main page background */
    --color-background: #F7F8F3;

    /* Pure white */
    --color-white: #FFFFFF;

    /* Soft off-white */
    --color-white-soft: #FCFCF8;

    /* Main text */
    --color-text: #26332D;

    /* Secondary text */
    --color-text-light: #65716B;

    /* Muted text */
    --color-text-muted: #89938E;

    /* Dark text */
    --color-text-dark: #18231F;


    /* -----------------------------------------------------
       Borders
       ----------------------------------------------------- */

    --color-border: #DDE4DE;

    --color-border-light: #E9EEE9;

    --color-border-dark: #C8D3CB;


    /* -----------------------------------------------------
       Status Colors
       ----------------------------------------------------- */

    --color-success: #3D8B5A;

    --color-warning: #C89032;

    --color-danger: #C95A52;

    --color-info: #4C8FA0;



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

    /* Main natural gradient */
    --gradient-primary:
        linear-gradient(
            135deg,
            #164A3A 0%,
            #3F7655 100%
        );

    /* Water-inspired gradient */
    --gradient-water:
        linear-gradient(
            135deg,
            #347B8A 0%,
            #5FA9B8 100%
        );

    /* Soft natural background */
    --gradient-natural:
        linear-gradient(
            135deg,
            #F7F8F3 0%,
            #EEF3EC 100%
        );

    /* Hero readability overlay */
    --gradient-hero-overlay:
        linear-gradient(
            90deg,
            rgba(15, 35, 27, 0.72) 0%,
            rgba(15, 35, 27, 0.42) 38%,
            rgba(15, 35, 27, 0.08) 75%,
            rgba(15, 35, 27, 0.18) 100%
        );

    /* Bottom hero overlay */
    --gradient-hero-bottom:
        linear-gradient(
            0deg,
            rgba(10, 24, 18, 0.65) 0%,
            rgba(10, 24, 18, 0.08) 45%,
            rgba(10, 24, 18, 0) 100%
        );



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

    /* Font families */

    --font-heading:
        "Cormorant Garamond",
        Georgia,
        "Times New Roman",
        serif;

    --font-body:
        "Inter",
        Arial,
        Helvetica,
        sans-serif;


    /* -----------------------------------------------------
       Font Sizes
       ----------------------------------------------------- */

    --font-size-xs: 0.85rem;       /* 12px */
    --font-size-sm: 0.93rem;      /* 14px */
    --font-size-base: 1.1rem;        /* 16px */
    --font-size-md: 1.125rem;      /* 18px */
    --font-size-lg: 1.25rem;       /* 20px */
    --font-size-xl: 1.5rem;        /* 24px */
    --font-size-2xl: 2rem;         /* 32px */
    --font-size-3xl: 2.5rem;       /* 40px */
    --font-size-4xl: 3.1rem;         /* 48px */
    --font-size-5xl: 3.75rem;      /* 60px */
    --font-size-6xl: 4.5rem;       /* 72px */
    --font-size-7xl: 5.5rem;       /* 88px */


    /* -----------------------------------------------------
       Font Weights
       ----------------------------------------------------- */

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



    /* =====================================================
       LINE HEIGHTS
       ===================================================== */

    --line-height-tight: 1.1;

    --line-height-heading: 1.2;

    --line-height-normal: 1.5;

    --line-height-relaxed: 1.7;

    --line-height-loose: 1.9;



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

    --space-1: 0.25rem;      /* 4px */
    --space-2: 0.5rem;       /* 8px */
    --space-3: 0.75rem;      /* 12px */
    --space-4: 1rem;         /* 16px */
    --space-5: 1.25rem;      /* 20px */
    --space-6: 1.5rem;       /* 24px */
    --space-7: 1.75rem;      /* 28px */
    --space-8: 2rem;         /* 32px */
    --space-10: 2.5rem;      /* 40px */
    --space-12: 3rem;        /* 48px */
    --space-14: 3.5rem;      /* 56px */
    --space-16: 4rem;        /* 64px */
    --space-20: 5rem;        /* 80px */
    --space-24: 6rem;        /* 96px */
    --space-28: 7rem;        /* 112px */
    --space-32: 8rem;        /* 128px */



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

    /* Main content width */
    --container-width: 1280px;

    /* Large desktop width */
    --container-width-wide: 1440px;

    /* Narrow content width */
    --container-width-narrow: 900px;

    /* Horizontal page padding */
    --container-padding: 1.5rem;

    /* Header height */
    --navbar-height: 88px;

    /* Mobile header height */
    --navbar-height-mobile: 72px;



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

    --radius-xs: 4px;

    --radius-sm: 8px;

    --radius-md: 12px;

    --radius-lg: 18px;

    --radius-xl: 24px;

    --radius-2xl: 32px;

    /* Rounded pill */
    --radius-full: 9999px;



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

    --shadow-xs:
        0 2px 6px rgba(22, 74, 58, 0.06);

    --shadow-sm:
        0 4px 14px rgba(22, 74, 58, 0.08);

    --shadow-md:
        0 10px 28px rgba(22, 74, 58, 0.12);

    --shadow-lg:
        0 18px 45px rgba(22, 74, 58, 0.16);

    --shadow-xl:
        0 25px 60px rgba(22, 74, 58, 0.20);



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

    --transition-fast:
        150ms ease;

    --transition-base:
        250ms ease;

    --transition-slow:
        400ms ease;

    --transition-image:
        800ms cubic-bezier(0.22, 1, 0.36, 1);



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

    --z-negative: -1;

    --z-base: 1;

    --z-content: 10;

    --z-overlay: 20;

    --z-header: 100;

    --z-dropdown: 200;

    --z-modal: 500;

    --z-toast: 800;

    --z-mobile-cta: 900;



    /* =====================================================
       HERO
       ===================================================== */

    /* Hero desktop height */
    --hero-height: 100svh;

    /* Minimum hero height */
    --hero-min-height: 700px;

    /* Hero content maximum width */
    --hero-content-width: 720px;

    /* Hero background position */
    --hero-background-position: center center;

    /* Hero slider transition */
    --hero-slide-duration: 800ms;



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

    --button-height: 52px;

    --button-height-small: 44px;

    --button-height-large: 58px;

    --button-padding-x: 1.5rem;

    --button-radius: var(--radius-full);



    /* =====================================================
       FORMS
       ===================================================== */

    --input-height: 52px;

    --input-radius: var(--radius-md);

    --input-padding-x: 1rem;

    --input-border-width: 1px;



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

    --gallery-gap: 12px;

    --gallery-radius: var(--radius-lg);



    /* =====================================================
       NAVIGATION
       ===================================================== */

    --nav-link-gap: 2rem;

    --nav-mobile-width: 300px;



    /* =====================================================
       ANIMATION
       ===================================================== */

    --ease-standard:
        cubic-bezier(0.4, 0, 0.2, 1);

    --ease-out:
        cubic-bezier(0, 0, 0.2, 1);

    --ease-in:
        cubic-bezier(0.4, 0, 1, 1);

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



    /* =====================================================
       ACCESSIBILITY
       ===================================================== */

    /* Visible focus outline */
    --focus-ring:
        0 0 0 3px rgba(95, 169, 184, 0.35);

    --focus-outline-color: var(--color-water);



    /* =====================================================
       ICON SIZES
       ===================================================== */

    --icon-xs: 14px;

    --icon-sm: 16px;

    --icon-md: 20px;

    --icon-lg: 24px;

    --icon-xl: 32px;

}



/* =========================================================
   RESPONSIVE VARIABLE OVERRIDES
   ========================================================= */


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1024px) {

    :root {

        --container-padding: 1.25rem;

        --navbar-height: 80px;

        --hero-min-height: 650px;

        --font-size-7xl: 4.5rem;

        --font-size-6xl: 4rem;

        --font-size-5xl: 3.25rem;

        --space-24: 5rem;

        --space-28: 6rem;

        --space-32: 7rem;

    }

}

:root {

    /* Existing fonts */
    --font-heading:
        "Cormorant Garamond",
        Georgia,
        "Times New Roman",
        serif;

    --font-body:
        "Inter",
        Arial,
        Helvetica,
        sans-serif;

    /* New decorative / content fonts */
    --font-script:
        "Allura",
        "Brush Script MT",
        cursive;

    --font-body-strong:
        "Manrope",
        "Inter",
        Arial,
        Helvetica,
        sans-serif;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

    :root {

        --container-padding: 1rem;

        --navbar-height: var(--navbar-height-mobile);

        --hero-min-height: 680px;

        --font-size-7xl: 3.25rem;

        --font-size-6xl: 3rem;

        --font-size-5xl: 2.75rem;

        --font-size-4xl: 2.25rem;

        --font-size-3xl: 2rem;

        --font-size-2xl: 1.75rem;

        --font-size-xl: 1.375rem;

        --space-20: 4rem;

        --space-24: 4.5rem;

        --space-28: 5rem;

        --space-32: 5.5rem;

        --button-height: 50px;

    }

}



/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    :root {

        --container-padding: 0.875rem;

        --hero-min-height: 650px;

        --font-size-7xl: 2.75rem;

        --font-size-6xl: 2.5rem;

        --font-size-5xl: 2.25rem;

        --font-size-4xl: 2rem;

        --space-20: 3.5rem;

        --space-24: 4rem;

        --space-28: 4.5rem;

        --space-32: 5rem;

    }

}