:root {
    /* --------------- PER PROPERTY --------------- */
    /* Fonts */
    --primary-font: "Open Sans", system-ui, sans-serif;  
    --header-font:  "Open Sans", system-ui, sans-serif;
    --h1-font:  "Open Sans", system-ui, sans-serif;

    --font-weight-body: 400;
    --font-weight-header: 300;


    /* Colors */
    --main-color: #3f444b;
    --background-color: #FFF;
    
    --primary-color: #004C97;
    --primary-color-darker: #003972;
    --secondary-color: #f9fafa;
    --tertiary-color: #2a363c;
    
    --success-color: #a2c748;
    --success-color-light: #abcd57;
    --success-color-dark: #8ba93d;
    
    --error-color: red;
    
    --disabled-color: #fffa;
    
    --gray-light: #ddd;
    --gray-medium: #868687;
    --gray-dark: #666;
    

    /* Buttons */
    --btn-text-color: var(--background-color); 
    --btn-background-color: var(--primary-color); 
    --btn-border-color: var(--primary-color-darker);
    --btn-border-radius: .2em;
    --btn-border: 2px solid var(--btn-border-color);

    
    /* Overlays */
    --overlay-dark: rgba(0,0,0,0.5);
    --overlay-light: rgba(0,0,0,0.15);
    --overlay-subtle: rgba(0,0,0,0.05);
    --overlay-white: rgba(255,255,255,0.5);
    --overlay-darkblue: rgba(0, 19, 43, 0.5);
    --overlay-blue: rgba(0, 183, 255, 0.65);

    /* Buttons */
    --btn-padding-block: 0.6em;
    --btn-padding-inline: 2em;
    --btn-padding: var(--btn-padding-block) var(--btn-padding-inline);
    --btn-border-radius: .3em; 
    --btn-border: 2px solid var(--btn-border-color);
    
    --btn-border-left: none;
    --btn-border-top: none;
    --btn-border-right: none;
    --btn-border-bottom: var(--btn-border);

    /* Font sizes */
    --font-size-h1: 3rem;
    --font-size-h2: 2.5rem;
    --font-size-h3: 1.75rem;
    --font-size-h4: 1.25rem;
    --font-size-h5: 1.05rem;
    --font-size-h6: 1rem; 
    --font-size-body: 1rem; 

    /* Line heights */
    --line-height-small: 1.2;
    --line-height-regular: 1.5;
    --line-height-large: 1.6; 

}