/* ==========================================================
   Nine3 Designs
   Variables
========================================================== */

:root {


    /* =====================================
       Brand Colours
    ===================================== */


    --primary:#404A3B;
    --primary-dark:#333C30;
    --primary-light:#566150;

    --accent:#C8A96A;
    --accent-light:#D8BC84;


    --white:#FFFFFF;
    --off-white:#FEF9F3;
    --cream:#F6F1EA;

    --light-grey:#E8E1D8;


    --dark:#2B2B2B;
    --text:#333333;
    --text-light:#666666;



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


    --font-main:"Raleway", sans-serif;
    --font-heading:"Raleway", sans-serif;
    --font-signature:"Allura", cursive;


    --font-size-xs:.85rem;
    --font-size-sm:.95rem;
    --font-size-md:1rem;
    --font-size-lg:1.2rem;
    --font-size-xl:2rem;
    --font-size-xxl:3rem;
    --font-size-display:4.5rem;



    /* =====================================
       Spacing
    ===================================== */


    --space-xs:.5rem;
    --space-sm:1rem;
    --space-md:2rem;
    --space-lg:4rem;
    --space-xl:6rem;
    --space-xxl:8rem;



    /* =====================================
       Border Radius
    ===================================== */


    --radius-sm:8px;
    --radius-md:14px;
    --radius-lg:22px;
    --radius-xl:40px;



    /* =====================================
       Shadows
    ===================================== */


    --shadow-sm:0 5px 15px rgba(0,0,0,.08);
    --shadow-md:0 12px 35px rgba(0,0,0,.12);
    --shadow-lg:0 20px 60px rgba(0,0,0,.20);



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


    --container:1280px;

    --header-height:100px;



    /* =====================================
       Animation
    ===================================== */


    --transition:.3s ease;


}