@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');


:root {
    
    --primary-color: #ece0d1;
    --secondary-color: 	#dbc1ac;

    --header-main-bg-color:#fafafa;
    --header-accent-bg-color:#ffce72;
    --font-header-color:#222;
    --font-color:#222;
    --font-hover-color:#e6d5be;
    --accent-color: #FF5722;
    --background-color: #F5F5F5;
    --text-color: #333;
    --text-light: #666;
    --border-color: #E0E0E0;

    --scroll-offset:100px;

    
    --dark-background: #212121;
    --dark-text: #E0E0E0;
    --dark-border: #424242;

    
    --font-primary: 'Montserrat', sans-serif;
    --font-secondary: 'Roboto', sans-serif;
    --font-size-h1: 18pt;
    --font-size-h2: 16pt;
    --font-size-base: 14pt;
    --font-size-lg: 18pt;
    --font-size-sm: 12pt;

    
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;

    
    --border-radius: 8px;
    --box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);

    @media (min-width: 1024px) { 
        --font-size-h1: 28pt;
        --font-size-h2: 24pt;
    }
}



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


ul, ol {
    list-style: none;
}


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


button, input, textarea, select {
    font: inherit;
    border: none;
    outline: none;
    background: none;
}


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


html {
    font-size: var(--font-size-base); 
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    font-family: var(--font-primary);
    line-height: 1.5;
    text-rendering: optimizeLegibility;
    background-color: #fff;
    color: #333;
}


h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
}

h1{			
    font-size: var(--font-size-h1);
    font-weight: 700;	
}
h2{
    font-size: var(--font-size-h2);
    font-weight: 500;
}
h3{
    font-size: var(--font-size-lg);
    font-weight: 700;
}


bold{
    font-size: larger;
    font-weight:bolder;
}

button {
    cursor: pointer;
}

.noscroll{
    overflow: hidden;
}

@keyframes fadeIn {
    from {
        opacity: 0;        
    }

    to {
        opacity: 1;        
    }
}

@keyframes showScale {
    from {
        opacity: 0;
        scale: 70%;
    }

    to {
        opacity: 1;
        scale: 100%;
    }
}

@keyframes showBlur {
    from {
        filter: blur(100px);
    }

    to {
        filter: blur(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}