/* ==========================================================
   LOKIE WEBSITE
   Global Style Foundation
   ========================================================== */


/* ==========================================================
   CSS Variables
   ========================================================== */

:root {
    /* Brand Colors */

    --color-background: #F6F3EE;
    --color-primary: #BFC4C9;
    --color-text: #44484D;
    --color-neutral-light: #E7E2DA;
    --color-neutral: #CFC8BE;
    --color-neutral-dark: #75706A;
    --color-success: #7E9B7A;
    --color-warning: #D6A04B;
    --color-error: #B15D57;
    --color-white: #FFFFFF;
    /* Typography */

    --font-family: "Segoe UI", Inter, Arial, sans-serif;
    /* Container */

    --container-width: 1280px;
    --container-padding: 24px;
    /* Radius */

    --radius-small: 10px;
    --radius-medium: 18px;
    --radius-large: 28px;
    --radius-pill: 999px;
    /* Shadows */

    --shadow-soft: 0 8px 30px rgba(0,0,0,.08);
    --shadow-medium: 0 12px 40px rgba(0,0,0,.12);
    /* Transition */

    --transition-fast: .2s ease;
    --transition-normal: .35s ease;
    --transition-slow: .6s ease;
}



/* ==========================================================
   Reset
   ========================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}



html {
    scroll-behavior: smooth;
}



body {
    background: var(--color-background);
    color: var(--color-text);
    font-family: var(--font-family);
    overflow-x: hidden;
}



/* ==========================================================
   Typography
   ========================================================== */

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.2;
}

p {
    line-height: 1.8;
}



/* ==========================================================
   Images
   ========================================================== */

img {
    display: block;
    max-width: 100%;
}



/* ==========================================================
   Links
   ========================================================== */

a {
    color: inherit;
    text-decoration: none;
}



/* ==========================================================
   Buttons
   ========================================================== */

button {
    border: none;
    outline: none;
    background: none;
    cursor: pointer;
}



/* ==========================================================
   Lists
   ========================================================== */

ul {
    list-style: none;
}



/* ==========================================================
   Layout
   ========================================================== */

.container {
    width: min(100% - (var(--container-padding) * 2), var(--container-width));
    margin-inline: auto;
}



/* ==========================================================
   Sections
   ========================================================== */

section {
    position: relative;
    padding: 100px 0;
}



/* ==========================================================
   Utilities
   ========================================================== */

.hidden {
    display: none !important;
}