:root {
    /*
     * Fonts
     */
    --font-size-tiny: 10px;
    --font-size-bottom-navigation: 10px;

    /*
     * Colors
     */
    --color-secondary: rgb(192, 192, 192);
    --color-border: rgb(246, 246, 248);
    --color-error: #842029;

    /*
     * Dimensions
     */
    --dim-max-width: 1046px;
    --dim-mobile-header-height: 60px;
    --dim-bottom-nav-height: 64px;
    --dim-drawer-width: 240px;
    --dim-list-item-image-width: 28px;

    /*
     * Safe-area insets exposed as variables so JS can read them.
     * env() can't be read directly via getPropertyValue, but a custom
     * property that resolves to env() can.
     */
    --safe-area-inset-top: env(safe-area-inset-top);
}