:root {
    --navbarColor: #314e5e;
    --sidebarColor: #314e5e;

    --navButtonColor: #fff;
    --navButtonBackgroundColorHover: #f80;
    --navButtonColorHover: #fff;
    --navbarTopMenuButtonColor: #fff;
    --navbarTopMenuButtonBackgroundColor: #314e5e;
    --navbarTopMenuButtonBackgroundColorHover: #f80;

    --sidebarMenuButtonBackgroundColor: #314e5e;
    --sidebarMenuButtonBackgroundColorHover: #f80;
    --sidebarMenuButtonColorHover: #fff;

    --sidebarSubItemsBackgroundColor: #efefef;
    --sidebarSubItemBackgroundColorHover: #ddd;
    --sidebarSubItemColor: black;
    --sidebarSubItemColorHover: #fff;
    
    --helpTextColor: grey;

    --dropAreaBorderColor: #232323;

    /* Coming-events date badge — shared between the real card and its loading skeleton,
       which live in separate scoped stylesheets, so the size is defined once here. */
    --coming-events-date-box-size: 3rem; /* 48px */

    /* Height of the fixed app navbar (.selfservice-navbar and its buttons are 50px high in site.css). */
    --selfservice-navbar-height: 3.125rem; /* 50px */

    /* Coming-events list: the month strip sticks flush under the fixed app navbar. Its height is
       shared with whatever has to stay clear of it in another scoped stylesheet. */
    --coming-events-sticky-top: var(--selfservice-navbar-height);
    --coming-events-month-strip-height: 3.75rem; /* 60px */

    /* The month heading sticks under the strip. The clearance is what a card or control scrolled or
       focused into view has to stay below: navbar, strip, heading and 8px of air. */
    --coming-events-month-heading-height: 2.5rem; /* 40px */

    /* The fixed phone menu button is 50px high, 20px above the bottom edge (site.css); 8px of air. */
    --coming-events-menu-button-clearance: 5rem; /* 80px */
    --coming-events-sticky-clearance: calc(var(--coming-events-sticky-top) + var(--coming-events-month-strip-height) + var(--coming-events-month-heading-height) + 0.5rem);
}