:root {
  // Component colors
  --avatar-bg: @control-bg;
  --badge-bg: @muted-color;
  --badge-color: #fff;
  --usercard-bg: @control-bg;
  --hero-bg: @hero-bg;
  --hero-color: @hero-color;

  // Store the current responsive screen mode in a CSS variable, to make it
  // available to the JS code.
  --flarum-screen: none;

  @media @phone { --flarum-screen: phone; }
  @media @tablet { --flarum-screen: tablet; }
  @media @desktop { --flarum-screen: desktop; }
  @media @desktop-hd { --flarum-screen: desktop-hd; }
}