/* PUBLIC GENERAL VARIABLES */
:root { /* TODO: Write documentation */
    
    /* --dd-font-default: 'Figtree', Tahoma, Verdana, sans-serif;  */
    --dd-header-height: 0px;
    --dd-list-controlbar-height: 58px;
    --dd-bottom-controlbar-height: 80px;
    --dd-max-width: 1830px;
    --dd-scrollbar-width: 16px;
    
    --dd-checkbutton-border-radius: 5px;
    /* --dd-button-border-radius: 99px;        */
    --dd-button-border-width: 1px;   
    /* --dd-element-radius: 16px;               */
    /* --dd-window-radius: 40px;               */
    --dd-margin-wide: 60px; 
    --dd-margin-narrow: 30px; 
    --dd-gap: 20px; 
    --dd-color-background: white;
    --dd-color-text: black;
    --dd-color-viewport: #f6f6f6;
    --dd-color-seperator: #d4d4d4;

    /* --dd-color-accent: #ffc864;          */
    /* --dd-color-accent-contrast: black;   */
    
    --dd-color-alternative: #e8e8e8;
    --dd-color-alternative-contrast: black;

    --dd-ui-color: white;
    --dd-ui-color-contrast: black;

    /* TODO: Do we always control the root font size? Should we hardcode the font sizes instead? */
    --dd-font-base-size: 16px;
    --dd-font-extrasmall: calc( 0.75 * var(--dd-font-base-size) );
    --dd-font-small: calc( 0.8125 * var(--dd-font-base-size) );
    --dd-font-semismall: calc( 0.875 * var(--dd-font-base-size) );
    --dd-font-normal: calc( 1 * var(--dd-font-base-size) );
    --dd-font-semilarge: calc( 1.2 * var(--dd-font-base-size) );
    --dd-font-large: calc( 1.4 * var(--dd-font-base-size) );
    --dd-font-extralarge: calc( 1.75 * var(--dd-font-base-size) );
    /* --dd-font-extrasmall: 0.75rem;
    --dd-font-small: 0.8125rem;
    --dd-font-semismall: 0.875rem;
    --dd-font-normal: 1rem;
    --dd-font-semilarge: 1.2rem;
    --dd-font-large: 1.4rem;
    --dd-font-extralarge: 1.75rem; */

    --dd-font-semibold: 500;
    --dd-font-bold: 700;

    --dd-status-color: blue;

    
    --dd-button-height-small: 40px;

    --dd-boligcard-aspect: 130%;

    --dd-animation-time: 0.3s;
    --dd-animation-easing: ease;

    /* FOCUS */
    --dd-focus-color: black;
    --dd-focus-width: 2px;
    --dd-focus-offset: 3px;

    /* LOADING */
    --dd-loading-donut-size: 50px;
    --dd-loading-donut-width: 8px;
    --dd-loading-donut-speed: 1.3s;
}



@media screen AND (max-width:1024px){
    
    :root {

    }
    
}

@media screen AND (max-width:767px){

    :root {
        --dd-margin-narrow: 14px; 
        --dd-scrollbar-width: 0px;
        --dd-button-height-small: 34px;
    }
    
}