/* ==========================================================
   KAIROS DESIGNS
   DESIGN SYSTEM v1.0
========================================================== */

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

:root{

    /* Colors */

    --color-primary:#C8A15A;
    --color-primary-dark:#9D7934;

    --color-black:#111111;
    --color-dark:#1B1B1B;

    --color-white:#FFFFFF;
    --color-cream:#F3EEE5;
    --color-bronze:#8B6A3E;

    --color-border:#E8E8E8;

    --color-success:#2E7D32;
    --color-danger:#C62828;


    /* Fonts */

    --font-heading:'Bebas Neue', sans-serif;
    --font-title:'Cinzel', serif;
    --font-body:'Inter', sans-serif;
    --font-scripture:'Cormorant Garamond', serif;


    /* Font Sizes */

    --fs-xs:12px;
    --fs-sm:14px;
    --fs-base:16px;
    --fs-lg:18px;
    --fs-xl:22px;
    --fs-2xl:30px;
    --fs-3xl:42px;
    --fs-4xl:60px;
    --fs-hero:96px;


    /* Font Weights */

    --fw-regular:400;
    --fw-medium:500;
    --fw-semibold:600;
    --fw-bold:700;


    /* Spacing */

    --space-1:4px;
    --space-2:8px;
    --space-3:12px;
    --space-4:16px;
    --space-5:24px;
    --space-6:32px;
    --space-7:48px;
    --space-8:64px;
    --space-9:96px;
    --space-10:128px;


    /* Border Radius */

    --radius-sm:6px;
    --radius-md:10px;
    --radius-lg:16px;
    --radius-xl:24px;
    --radius-round:999px;


    /* Shadows */

    --shadow-sm:0 2px 8px rgba(0,0,0,.08);
    --shadow-md:0 8px 20px rgba(0,0,0,.10);
    --shadow-lg:0 18px 40px rgba(0,0,0,.15);
    --shadow-xl:0 30px 60px rgba(0,0,0,.20);


    /* Animation */

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


    /* Layout */

    --container-width:1360px;

    --header-height:90px;

    --announcement-height:40px;

    --section-spacing:96px;


    /* Z Index */

    --z-dropdown:100;
    --z-sticky:500;
    --z-fixed:800;
    --z-modal:1000;

}


/* ==========================================================
   RESET
========================================================== */

*{

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

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:var(--font-body);
    font-size:var(--fs-base);
    line-height:1.6;

    color:var(--color-black);

    background:var(--color-white);

    overflow-x:hidden;

}


/* ==========================================================
   IMAGES
========================================================== */

img{

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

}


/* ==========================================================
   LINKS
========================================================== */

a{

    text-decoration:none;
    color:inherit;

}


/* ==========================================================
   LISTS
========================================================== */

ul{

    list-style:none;

}


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

.kairos-container{

    width:100%;
    max-width:var(--container-width);

    margin:0 auto;

    padding-left:24px;
    padding-right:24px;

}


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

.kairos-section{

    padding:var(--section-spacing) 0;

}


/* ==========================================================
   FLEX UTILITIES
========================================================== */

.kairos-flex{

    display:flex;

}

.kairos-between{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.kairos-center{

    display:flex;

    justify-content:center;

    align-items:center;

}

.kairos-column{

    display:flex;

    flex-direction:column;

}


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

button{

    cursor:pointer;

    border:none;

    background:none;

    font:inherit;

}


/* ==========================================================
   INPUT RESET
========================================================== */

input,
textarea,
select{

    font:inherit;

    outline:none;

}