/* ==========================================================
   UNIKA KIDS UI KIT
========================================================== */

/* ==========================================================
   ROOT
========================================================== */

:root {
    --uk-bg-mint: #eaf6f4;
    --uk-bg-peach: #fff3e7;
    --uk-bg-beige: #fff6e9;
    --uk-bg-pink: #fff0ef;

    --uk-success: #83bfa5;
    --uk-warning: #f1b354;
    --uk-danger: #ed8a62;

    --uk-text-mint: #73bfb3;
    --uk-text-peach: #e9875e;
    --uk-text-brown: #3f302b;
    --uk-text-muted: #6c7a89;

    --uk-white: #fff;
    --uk-radius-sm: 16px;
    --uk-radius-md: 24px;
    --uk-radius-lg: 32px;
    --uk-radius-pill: 999px;

    --uk-shadow-sm: 0 8px 20px rgba(0,0,0,.05);
    --uk-shadow-md: 0 12px 35px rgba(0,0,0,.07);
    --uk-shadow-lg: 0 18px 45px rgba(0,0,0,.09);
}


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

body,
h1, h2, h3, h4, h5, h6 {
    font-family: 'Nunito', sans-serif;
}

body {
    color: var(--uk-text-brown);
}

h1.salsa,
h2.salsa,
.uk-font-salsa {
    font-family: 'Salsa', cursive;
}

.handwritten,
.uk-font-handwritten {
    font-family: 'Caveat', cursive;
}


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

.uk-text-mint { color: var(--uk-text-mint); }
.uk-text-peach { color: var(--uk-text-peach); }
.uk-text-brown { color: var(--uk-text-brown); }
.uk-text-muted { color: var(--uk-text-muted); }
.uk-text-white { color: var(--uk-white); }


/* ==========================================================
   BACKGROUNDS
========================================================== */

.uk-bg-mint { background: var(--uk-bg-mint); }
.uk-bg-peach { background: var(--uk-bg-peach); }
.uk-bg-beige { background: var(--uk-bg-beige); }
.uk-bg-pink { background: var(--uk-bg-pink); }
.uk-bg-white { background: var(--uk-white); }

.uk-bg-success { background: var(--uk-success); }
.uk-bg-warning { background: var(--uk-warning); }
.uk-bg-danger { background: var(--uk-danger); }


/* ==========================================================
   OLD COMPATIBILITY
========================================================== */

.f-brown {
    color: #82573d;
}

.f-grey {
    color: #777;
}


/* ==========================================================
   SECTIONS
========================================================== */

.uk-section {
    padding: 80px 0;
}

.uk-section-sm {
    padding: 50px 0;
}

.uk-section-lg {
    padding: 110px 0;
}

.uk-section-head {
    max-width: 760px;
    margin: 0 auto 48px;
    text-align: center;
}


/* ==========================================================
   LABELS
========================================================== */

.uk-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 8px 18px;

    border-radius: var(--uk-radius-pill);

    font-size: 14px;
    font-weight: 800;
    line-height: 1.2;
}

.uk-label--mint {
    background: var(--uk-bg-mint);
    color: var(--uk-text-mint);
}

.uk-label--peach {
    background: var(--uk-bg-peach);
    color: var(--uk-text-peach);
}

.uk-label--pink {
    background: var(--uk-bg-pink);
    color: var(--uk-danger);
}


/* ==========================================================
   TITLES
========================================================== */

.uk-title {
    margin: 0;

    font-size: clamp(34px, 4vw, 60px);
    line-height: 1.1;
    font-weight: 900;
    letter-spacing: -1px;

    color: var(--uk-text-brown);
}

.uk-title--sm {
    font-size: clamp(28px, 3vw, 42px);
}

.uk-title--lg {
    font-size: clamp(42px, 5vw, 72px);
}

.uk-subtitle {
    max-width: 720px;

    margin: 18px 0 0;

    font-size: 17px;
    line-height: 1.8;

    color: var(--uk-text-muted);
}

.uk-section-head .uk-subtitle {
    margin-left: auto;
    margin-right: auto;
}


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

.uk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    padding: 12px 22px;

    border: 2px solid transparent;
    border-radius: var(--uk-radius-pill);

    font-size: 15px;
    font-weight: 800;
    line-height: 1.2;

    text-decoration: none;

    cursor: pointer;

    transition: .25s ease;
}

.uk-btn:hover {
    text-decoration: none;
}

.uk-btn--primary {
    background: var(--uk-text-peach);
    border-color: var(--uk-text-peach);
    color: #fff;
}

.uk-btn--primary:hover {
    background: #d9774d;
    border-color: #d9774d;
    color: #fff;
    transform: translateY(-2px);
}

.uk-btn--secondary {
    background: #fff;
    border-color: var(--uk-text-mint);
    color: var(--uk-text-mint);
}

.uk-btn--secondary:hover {
    background: var(--uk-text-mint);
    border-color: var(--uk-text-mint);
    color: #fff;
    transform: translateY(-2px);
}

.uk-btn--mint {
    background: var(--uk-text-mint);
    border-color: var(--uk-text-mint);
    color: #fff;
}

.uk-btn--mint:hover {
    background: #62ab9f;
    border-color: #62ab9f;
    color: #fff;
    transform: translateY(-2px);
}

.uk-btn--light {
    background: #fff;
    border-color: #fff;
    color: var(--uk-text-brown);
}

.uk-btn--light:hover {
    background: var(--uk-bg-beige);
    border-color: var(--uk-bg-beige);
    color: var(--uk-text-brown);
    transform: translateY(-2px);
}

.uk-btn--lg {
    padding: 15px 30px;
    font-size: 16px;
}

.uk-btn--sm {
    padding: 9px 17px;
    font-size: 14px;
}


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

.uk-card {
    background: #fff;
    border-radius: var(--uk-radius-lg);
    padding: 32px;
    box-shadow: var(--uk-shadow-sm);
}

.uk-card--soft {
    background: var(--uk-bg-beige);
    box-shadow: none;
}

.uk-card--mint {
    background: var(--uk-bg-mint);
    box-shadow: none;
}

.uk-card--peach {
    background: var(--uk-bg-peach);
    box-shadow: none;
}

.uk-card--pink {
    background: var(--uk-bg-pink);
    box-shadow: none;
}


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

.uk-rounded-sm { border-radius: var(--uk-radius-sm); }
.uk-rounded-md { border-radius: var(--uk-radius-md); }
.uk-rounded-lg { border-radius: var(--uk-radius-lg); }
.uk-rounded-pill { border-radius: var(--uk-radius-pill); }


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

.uk-shadow-sm { box-shadow: var(--uk-shadow-sm); }
.uk-shadow-md { box-shadow: var(--uk-shadow-md); }
.uk-shadow-lg { box-shadow: var(--uk-shadow-lg); }


/* ==========================================================
   EFFECTS
========================================================== */

.uk-hover-up {
    transition: .25s ease;
}

.uk-hover-up:hover {
    transform: translateY(-6px);
}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 991px) {
    .uk-section {
        padding: 64px 0;
    }

    .uk-section-lg {
        padding: 80px 0;
    }
}

@media (max-width: 576px) {
    .uk-section {
        padding: 54px 0;
    }

    .uk-section-sm {
        padding: 40px 0;
    }

    .uk-title {
        letter-spacing: -.5px;
    }

    .uk-btn {
        width: 100%;
    }
}