/* ==========================================================
   EMERALD MIST THEME
   White + Sage Green Premium Theme
========================================================== */

:root,
.theme-emerald-mist{

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

    --brand-primary:#34a853;
    --brand-secondary:#228b45;
    --brand-accent:#8bcf7b;

    /* ======================================================
       SURFACE
    ====================================================== */

    --surface-primary:#fbfdfb;

    --surface-secondary:#ffffff;

    --surface-tertiary:#eef8f0;

    --surface-gradient:linear-gradient(
        135deg,
        #7ed957 0%,
        #42b883 45%,
        #1d8f6b 100%
    );

    --surface-highlight:linear-gradient(
        135deg,
        #d9f7be,
        #a7e27a
    );

    --surface-dark:#1d4735;

    --surface-glass:rgba(255,255,255,.82);

    /* ======================================================
       TEXT
    ====================================================== */

    --text-primary:#1d3528;

    --text-secondary:#5a6d63;

    --text-muted:#87978e;

    --text-light:#ffffff;

    --text-accent:#2d9d58;

    --border-light:rgba(255,255,255,.22);

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

    --icon-bg:rgba(255,255,255,.15);

    --icon-color:#ffffff;

    --icon-hover-color:#1d3528;

    /* ======================================================
       BUTTON
    ====================================================== */

    --button-primary-bg:linear-gradient(
        135deg,
        #3bb76b,
        #228b45
    );

    --button-primary-hover:linear-gradient(
        135deg,
        #228b45,
        #176d36
    );

    --button-primary-text:#ffffff;

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

    --border-primary:#dcefe2;

    --border-secondary:rgba(52,168,83,.12);

    /* ======================================================
       SHADOW
    ====================================================== */

    --shadow-sm:
        0 6px 15px rgba(34,139,69,.08);

    --shadow-md:
        0 14px 35px rgba(34,139,69,.12);

    --shadow-lg:
        0 25px 60px rgba(34,139,69,.18);

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

    --radius-sm:8px;

    --radius-md:14px;

    --radius-lg:22px;

    /* ======================================================
       SECTION
    ====================================================== */

    --section-feature-bg:var(--surface-gradient);

    --section-primary-bg:var(--surface-primary);

    --section-secondary-bg:var(--surface-tertiary);

    --section-dark-bg:var(--surface-dark);

    --section-glass-bg:var(--surface-glass);

    --radius-section-top:100px 100px 0 0;

    --section-feature-padding:10px 50px 70px;

    --section-overlap:-91px;

    /* ======================================================
       TRANSITION
    ====================================================== */

    --transition:.35s ease;

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

    --space-0:0;
    --space-1:4px;
    --space-2:8px;
    --space-3:12px;
    --space-4:16px;
    --space-5:20px;
    --space-6:24px;
    --space-7:32px;
    --space-8:40px;

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

    --radius-none:0;
    --radius-sm:8px;
    --radius-md:12px;
    --radius-lg:16px;
    --radius-xl:24px;
    --radius-full:9999px;

    /* ======================================================
       NAVBAR
    ====================================================== */

    --navbar-height:76px;
    --navbar-radius:10px;
    --navbar-margin-top:0;
    --navbar-padding:0;
    --navbar-left:50%;
    --navbar-max-width:1400px;

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

    --container-width:1320px;

    --container-padding:0 20px;

    --section-padding:90px;

    /* ======================================================
       DESTINATION TITLE
    ====================================================== */

    --destination-title-color:#ffffff;

    --destination-title-shadow:
        0 2px 10px rgba(0,0,0,.35),
        0 5px 18px rgba(0,0,0,.25);

    --destination-title-size:24px;

    --destination-title-weight:700;

    --destination-title-bottom:20px;

    --destination-title-left:20px;

}