/* ==========================================================
   KOKO Enterprise
   Base Styles
   ========================================================== */

/*--------------------------------------------------------------
# Root
--------------------------------------------------------------*/

:root{

    --container:1280px;

    --radius-sm:6px;
    --radius-md:12px;
    --radius-lg:20px;

    --transition:.35s ease;

    --shadow-sm:
        0 6px 20px rgba(0,0,0,.06);

    --shadow-md:
        0 12px 36px rgba(0,0,0,.10);

    --shadow-lg:
        0 20px 60px rgba(0,0,0,.14);

}

/*--------------------------------------------------------------
# Reset
--------------------------------------------------------------*/

*,
*::before,
*::after{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:var(--font-body);
    font-size:16px;
    line-height:1.7;

    color:var(--color-text);

    background:#fff;

    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;

}

/*--------------------------------------------------------------
# Images
--------------------------------------------------------------*/

img{

    display:block;
    max-width:100%;
    height:auto;

}

/*--------------------------------------------------------------
# Links
--------------------------------------------------------------*/

a{

    color:inherit;
    text-decoration:none;
    transition:all var(--transition);

}

/*--------------------------------------------------------------
# Lists
--------------------------------------------------------------*/

ul,
ol{

    list-style:none;

}

/*--------------------------------------------------------------
# Headings
--------------------------------------------------------------*/

h1,
h2,
h3,
h4,
h5,
h6{

    font-family:var(--font-heading);
    font-weight:500;
    line-height:1.15;

    color:var(--color-primary);

}

h1{

    font-size:clamp(3rem,7vw,5.75rem);

}

h2{

    font-size:clamp(2.4rem,5vw,4rem);

}

h3{

    font-size:1.75rem;

}

h4{

    font-size:1.3rem;

}

/*--------------------------------------------------------------
# Paragraphs
--------------------------------------------------------------*/

p{

    margin-bottom:1.5rem;

}

p:last-child{

    margin-bottom:0;

}

/*--------------------------------------------------------------
# Selection
--------------------------------------------------------------*/

::selection{

    background:var(--color-accent);
    color:#fff;

}

/*--------------------------------------------------------------
# Focus
--------------------------------------------------------------*/

:focus-visible{

    outline:2px solid var(--color-accent);
    outline-offset:3px;

}