/* ==========================================
   GLOBAL VARIABLES
   Site Design System
========================================== */

:root {


    /* ==========================
       Colors
    ========================== */


    --color-primary: #b9783d;

    --color-primary-dark: #9b5620;


    --color-background: #f8f3ed;

    --color-background-soft: #efe4d8;


    --color-white: #ffffff;


    --color-text: #3b2a20;

    --color-text-soft: #66554a;


    --color-dark: #291810;





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


    --font-main:
        Arial,
        Helvetica,
        sans-serif;


    --font-title:
        Georgia,
        serif;



    --font-size-base: 16px;


    --line-height-base: 1.6;





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


    --container-width: 1200px;

    --container-padding: 5%;



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


    --radius-small: 12px;

    --radius-medium: 20px;

    --radius-large: 24px;

    --radius-round: 50%;





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


    --shadow-small:
        0 5px 15px rgba(0,0,0,.10);


    --shadow-medium:
        0 10px 30px rgba(0,0,0,.15);


    --shadow-large:
        0 20px 60px rgba(0,0,0,.18);





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


    --transition-fast:
        .2s ease;


    --transition-base:
        .35s ease;


    --transition-slow:
        .7s ease;



}