/*--------------------------------------------------------------
PUTUSHART DESIGN SYSTEM
--------------------------------------------------------------*/

:root {

    /*----------------------------------------------------------
    COLORS
    ----------------------------------------------------------*/

    --color-primary: #B88746;
    --color-primary-dark: #9A6F38;

    --color-dark: #2B2B2B;
    --color-black: #111111;

    --color-white: #FFFFFF;

    --color-text: #444444;
    --color-text-light: #777777;

    --color-border: #EAEAEA;

    --color-background: #FFFFFF;

    --color-success: #3BA55D;
    --color-danger: #D9534F;
    --color-warning: #F0AD4E;



    /*----------------------------------------------------------
    TYPOGRAPHY
    ----------------------------------------------------------*/

    --font-primary:
        "Poppins",
        sans-serif;

    --font-heading:
        "Playfair Display",
        serif;

    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-base: 16px;
    --font-size-md: 18px;
    --font-size-lg: 22px;
    --font-size-xl: 32px;
    --font-size-xxl: 48px;



    /*----------------------------------------------------------
    FONT WEIGHT
    ----------------------------------------------------------*/

    --font-light:300;
    --font-regular:400;
    --font-medium:500;
    --font-semibold:600;
    --font-bold:700;



    /*----------------------------------------------------------
    SPACING
    ----------------------------------------------------------*/

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



    /*----------------------------------------------------------
    BORDER RADIUS
    ----------------------------------------------------------*/

    --radius-sm:4px;
    --radius-md:8px;
    --radius-lg:14px;
    --radius-xl:24px;
    --radius-round:999px;



    /*----------------------------------------------------------
    SHADOWS
    ----------------------------------------------------------*/

    --shadow-sm:
        0 2px 8px rgba(0,0,0,.06);

    --shadow-md:
        0 8px 24px rgba(0,0,0,.08);

    --shadow-lg:
        0 16px 48px rgba(0,0,0,.12);



    /*----------------------------------------------------------
    CONTAINER
    ----------------------------------------------------------*/

    --container-width:1320px;



    /*----------------------------------------------------------
    TRANSITIONS
    ----------------------------------------------------------*/

    --transition:
        all .3s ease;

}


/*--------------------------------------------------------------
GLOBAL
--------------------------------------------------------------*/

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

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    margin:0;

    font-family:var(--font-primary);

    font-size:var(--font-size-base);

    color:var(--color-text);

    background:var(--color-background);

    line-height:1.6;

}

img{

    max-width:100%;

    height:auto;

    display:block;

}

a{

    color:inherit;

    text-decoration:none;

    transition:var(--transition);

}

.container{

    width:min(
        var(--container-width),
        92%
    );

    margin-inline:auto;

}