:root {
    --accent-color: rgb(59, 167, 194);
    --background-color: rgb(182, 217, 227);
    --background-color-accent: rgb(227, 240, 244);
    --background-color-dark: hsl(from var(--background-color) h s 60%);
    --background-color-header: var(--accent-color);
    --accent-color-red: #ff4b4b;
    --background-color-red: #f9d3d3;

    --text-font-size-small: 0.75rem;
    --text-font-size-body: 1rem;
    --text-font-size-medium: 1.25rem;
    --text-font-size-large: 1.5rem;
    --text-font-size-xlarge: 2rem;
    --text-font-size-xxlarge: 2.5rem;
    --text-font-size-xxxlarge: 3rem; 

    --text-color-header: white;
    --text-color-body: black;
    --text-color-link: rgb(48, 128, 220);

    --text-font-family-body: Roboto, Arial, Helvetica Neue, Helvetica, sans-serif;
    --text-font-family-display: Roboto Slab, Rockwell, Georgia, Times, Times New Roman, serif;
    --text-font-family-mono: Roboto Mono, Consolas, monaco, monospace;
    
    --text-font-weight-light: 300;
    --text-font-weight-body: 400;
    --text-font-weight-bold: 500;

    --spacing-size-xsmall: 0.25rem;
    --spacing-size-small: 0.5rem;
    --spacing-size-medium: 1rem;
    --spacing-size-large: 1.5rem;
    --spacing-size-xlarge: 2rem;
    --spacing-size-xxlarge: 2.5rem;
    
    --border-size-radius: 0.375rem;

    --shadow-color: rgba(2, 68, 69, 0.5);
    --shadow-popover: 1px 1px 2px var(--shadow-color);

    --logo-size-small: 3rem;
    --logo-size-medium: 6rem;
    --logo-size-large: 12rem;

    --icon-size: 2rem;

    --sidebar-width-collapsed: calc(var(--icon-size) + 2rem);
    --sidebar-width-active: 17rem;

    --transition-duration: 0.5s;
    --transition-duration-sidebar: var(--transition-duration);

    --page-header-height: calc(var(--text-font-size-xxlarge) + var(--spacing-size-medium));
}

body.dark-mode {
    --background-color: rgb(40, 59, 64);
    --background-color-accent: rgb(25, 37, 40);
    --background-color-dark: hsl(from var(--background-color) h s 10%);
    --background-color-header: var(--accent-color);

    --text-color-header: white;
    --text-color-body: white;
    --text-color-link: rgb(48, 128, 220);
}