/* ==========================================================================
   theme.css — the profile page's themeable surface.

   The landing page is light-only, but the profile page is themed through a
   handful of custom properties and a single class on <html>. The whole set,
   as found in the site's own stylesheet:

     :root            --bg-color #fff  --bg-color-header #fff  --text-color #242529
                      --overlay-color rgba(0,0,0,.5)  --title-color #242529
                      --marked-color #f6f7f8
     :root.m-mode-dark --bg-color #161618  --bg-color-header #18181a
                      --text-color #f6f7f8  --overlay-color rgba(0,0,0,.6)
                      --title-color #fefefe  --marked-color #242529

   Six properties is the entire dark mode. Everything else on the page either
   keeps its brand colour (blue buttons) or is already a semi-transparent grey
   that reads correctly on both grounds — which is why --of-muted and
   --of-border are reused unchanged below.
   ========================================================================== */

:root {
  --bg-color:        #fff;
  --bg-color-header: #fff;
  --text-color:      #242529;
  --overlay-color:   rgba(0, 0, 0, .5);
  --title-color:     #242529;
  --marked-color:    #f6f7f8;
}

:root.m-mode-dark {
  --bg-color:        #161618;
  --bg-color-header: #18181a;
  --text-color:      #f6f7f8;
  --overlay-color:   rgba(0, 0, 0, .6);
  --title-color:     #fefefe;
  --marked-color:    #242529;
}

/* base.css hard-codes body's colours for the landing page; the profile page
   routes them through the theme instead. Scoped to .p-profile so index.html
   is untouched. */
body.p-profile {
  background: var(--bg-color);
  color: var(--text-color);
}

/* Avatar rings are cut out of the page ground, so they follow the theme too. */
body.p-profile .g-avatar { background-color: var(--bg-color); }

/* The one place the theme switch is visible as a control. */
.l-sidebar__menu__item.m-theme-switch { cursor: pointer; }