/* root variables */

:root {
    --slider-bg-color:#fff;
    --main-bgaccent: #111111;
    --primary-color: hsl( from var( --main-bgaccent) h s 20%);
    --secondary-color: hsl(from var(--primary-color) h s 15%);
    --icon-bg-color: #ffffff;

    --berit-main-color: #243c53;
    
    --color-minimum: hsl(from var(--berit-main-color) h s 90% / .1);
    --color-subtle: hsl(from var(--berit-main-color) h s 90% / .2);
    --color-average: hsl(from var(--berit-main-color) h s 90% / .4);
    --color-medium: hsl(from var(--berit-main-color) h s 70% / .7);
    --color-hard: hsl(from var(--berit-main-color) h s 50% / .9);
    --color-harder: hsl(from var(--berit-main-color) h s 40% / 1);



    --font-family: "Roboto", sans-serif;
    --font-size: 16px;
    --spacing-unit: 8px;
    
    --border-radius: 6px;
    --border-radius-lg: 1rem;
    --border-radius-xl: 2rem;
    
    --box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    
    --transition-duration: 0.3s;
    --transition-ease: ease-in-out;

    --sicon-mask: url('/images/icons/icons05/folder-open.svg');
    --menuHeight: 76px;

}

@function --color-variant(--color:var(--berit-main-color), --opacity: 1) {
    @return hsl(from var(--color) h s l / var(--opacity));
}


.light-bg {
    background-color: var(--color-average);
}

.stacked {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
} 
.stacked > * {
    grid-area: 1 / 1;
}