.scheme(@mode) {
  @body-bg:                       ~"body-bg-@{mode}";
  @text-color:                    ~"text-color-@{mode}";
  @heading-color:                 ~"heading-color-@{mode}";
  @muted-color:                   ~"muted-color-@{mode}";
  @muted-more-color:              ~"muted-more-color-@{mode}";
  @shadow-color:                  ~"shadow-color-@{mode}";
  @control-bg:                    ~"control-bg-@{mode}";
  @control-color:                 ~"control-color-@{mode}";
  @control-danger-bg:             ~"control-danger-bg-@{mode}";
  @control-danger-color:          ~"control-danger-color-@{mode}";
  @header-bg:                     ~"header-bg-@{mode}";
  @header-color:                  ~"header-color-@{mode}";
  @header-control-bg:             ~"header-control-bg-@{mode}";
  @header-control-color:          ~"header-control-color-@{mode}";
  @header-bg-colored:             ~"header-bg-colored-@{mode}";
  @header-color-colored:          ~"header-color-colored-@{mode}";
  @header-control-bg-colored:     ~"header-control-bg-colored-@{mode}";
  @header-control-color-colored:  ~"header-control-color-colored-@{mode}";
  @overlay-bg:                    ~"overlay-bg-@{mode}";
  @code-bg:                       ~"code-bg-@{mode}";
  @code-color:                    ~"code-color-@{mode}";

  // ---------------------------------
  // COLORS

  --body-bg:                       @@body-bg;
  --body-bg-shaded:                darken(@@body-bg, 3%);
  --body-bg-light:                 lighten(@@body-bg, 5%);
  --body-bg-faded:                 fade(@@body-bg, 93%);
  --text-color:                    @@text-color;
  --heading-color:                 @@heading-color;

  --muted-color:                   @@muted-color;
  --muted-color-light:             lighten(@@muted-color, 10%);
  --muted-color-dark:              darken(@@muted-color, 50%);
  --muted-more-color:              @@muted-more-color;

  --shadow-color:                  @@shadow-color;

  --control-bg:                    @@control-bg;
  --control-bg-light:              lighten(@@control-bg, 3%);
  --control-bg-shaded:             darken(@@control-bg, 4%);
  --control-color:                 @@control-color;
  --control-danger-bg:             @@control-danger-bg;
  --control-danger-color:          @@control-danger-color;
  --control-body-bg-mix:           mix(@@control-bg, @@body-bg, 50%);

  // ---------------------------------
  // COMPONENT COLORS

  --header-bg:                     @@header-bg;
  --header-color:                  @@header-color;
  --header-control-bg:             @@header-control-bg;
  --header-control-color:          @@header-control-color;

  [data-colored-header=true]& {
    --header-bg:                   @@header-bg-colored;
    --header-color:                @@header-color-colored;
    --header-control-bg:           @@header-control-bg-colored;
    --header-control-color:        @@header-control-color-colored;

    .light-contents-vars(@@header-color-colored, @@header-control-bg-colored, @@header-control-color-colored, 'header-colored');
  }

  --overlay-bg:                    @@overlay-bg;
  --code-bg:                       @@code-bg;
  --code-color:                    @@code-color;

  --discussion-title-color:        mix(@@heading-color, @@body-bg, 55%);

  .Button--color-vars(@@control-color, @@control-bg, 'button');
  // Use the YIQ formula (matching the JS isDark utility) rather than luma() to determine
  // button text colour. luma() uses W3C relative luminance which disagrees with YIQ for
  // warm/mid-range colours (e.g. orange reads as dark by luma but bright by YIQ).
  // Pre-compute into a variable to avoid nested parentheses in if(); threshold is 128*1000.
  @primary-button-yiq: red(@primary-color) * 299 + green(@primary-color) * 587 + blue(@primary-color) * 114;
  .Button--color-vars(if(@primary-button-yiq >= 128000, @text-on-light, @text-on-dark), @primary-color, 'button-primary');
  .Button--color-vars(@@control-danger-color, @@control-danger-bg, 'control-danger');
  .Button--color-vars(@@muted-more-color, fade(@@muted-more-color, 30%), 'muted-more');
  .Button--color-vars(@@control-color, @@body-bg, 'button-inverted');

  color-scheme:                    @mode;
}

// ---------------------------------
// Light colors

[data-theme^=light] {
  .scheme(light);

  --control-muted-color:           lighten(@control-color-light, 40%);

  --search-gambit:                 var(--control-bg-shaded);

  // ---------------------------------
  // UTILITIES

  --yiq-threshold: 150;
}

// High contrast

[data-theme=light-hc] {
  @control-color:                  darken(@control-color-light, 20%);
  @muted-color:                    darken(@muted-color-light, 20%);

  --control-color:                 @control-color;
  --control-muted-color:           lighten(@control-color, 20%);

  --muted-color:                   @muted-color;
  --muted-color-light:             lighten(@muted-color, 10%);
  --muted-color-dark:              darken(@muted-color, 50%);
  --muted-more-color:              darken(@muted-more-color-light, 20%);

  --discussion-title-color:        darken(@discussion-title-color-light, 20%);

  .Button--color-vars(@control-color, @control-bg-light, 'button');
  .Button--color-vars(@control-color, @body-bg-light, 'button-inverted');
}

// ---------------------------------
// Dark colors

[data-theme^=dark] {
  .scheme(dark);

  --control-muted-color:           darken(@control-color-dark, 25%);

  --search-gambit:                 var(--control-bg-light);

  // ---------------------------------
  // UTILITIES

  --yiq-threshold: 108;
}

// High contrast

[data-theme=dark-hc] {
  @control-color:                  lighten(@control-color-dark, 20%);
  @muted-color:                    lighten(@muted-color-dark, 20%);

  --control-color:                 @control-color;
  --control-muted-color:           darken(@control-color, 20%);

  --muted-color:                   @muted-color;
  --muted-color-light:             darken(@muted-color, 10%);
  --muted-color-dark:              lighten(@muted-color, 50%);
  --muted-more-color:              lighten(@muted-more-color-dark, 20%);

  --discussion-title-color:        lighten(@discussion-title-color-dark, 20%);

  .Button--color-vars(@control-color, @control-bg-dark, 'button');
  .Button--color-vars(@control-color, @body-bg-dark, 'button-inverted');
}

// COMMON LIGHT/DARK HIGH CONTRAST COLORS

[data-theme=dark-hc], [data-theme=light-hc] {
  [data-colored-header=true]& {
    --header-bg: @header-bg-colored-dark;
    --header-color: @header-color-colored-dark;
    --header-control-bg: @header-control-bg-colored-dark;
    --header-control-color: darken(@header-control-color-colored-dark, 15);

    .light-contents-vars(@header-color-colored-dark, @header-control-bg-colored-dark, darken(@header-control-color-colored-dark, 15), 'header-colored');
  }

  --yiq-threshold: 80;
}

// ---------------------------------
// Common light/dark colors

:root {

  --primary-color:                 @primary-color;
  --secondary-color:               @secondary-color;

  --link-color:                    @link-color;

  --control-success-bg:            @control-success-bg;
  --control-success-color:         @control-success-color;
  --control-warning-bg:            @control-warning-bg;
  --control-warning-color:         @control-warning-color;

  --error-color:                   @error-color;

  --text-on-dark:                  @text-on-dark;
  --text-on-light:                 @text-on-light;

  --alert-bg:                      @alert-bg;
  --alert-color:                   @alert-color;
  --alert-error-bg:                @alert-error-bg;
  --alert-error-color:             @alert-error-color;
  --alert-success-bg:              @alert-success-bg;
  --alert-success-color:           @alert-success-color;

  --switch-on-color:               #58a400;
  --switch-off-color:              #d0021b;

  --enabled-color:                 #2ECC40;
  --disabled-color:                #FF4136;

  --validation-error-color:        @validation-error-color;

  --tooltip-bg:                    @tooltip-bg;
  --tooltip-color:                 @tooltip-color;

  --loading-indicator-color:       var(--muted-color);

  --online-user-circle-color:      @online-user-circle-color;
  --discussion-list-item-bg-hover: var(--control-body-bg-mix);

  --avatar-bg:                     var(--control-bg);
  --badge-bg:                      var(--muted-color);
  --badge-color:                   #fff;
  --badge-hidden-bg:               #888;
  --usercard-bg:                   var(--control-bg);
  --hero-bg:                       var(--control-bg);
  --hero-color:                    var(--control-color);

  --pill-bg:                      var(--control-bg);
  --pill-color:                   var(--control-color);
  --pill-bg-alt:                  var(--body-bg);
  --pill-color-alt:               var(--text-color);

  --bubble-bg:                    var(--control-color);
  --bubble-color:                 var(--body-bg);
  --bubble-shadow-color:          var(--body-bg);

  --highlight-color:               #FFE300;

  .light-contents-vars();

  .Button--color-vars(@control-success-color, @control-success-bg, 'control-success');
  .Button--color-vars(@control-warning-color, @control-warning-bg, 'control-warning');

}

:root {

  // ---------------------------------
  // LAYOUT

  --border-radius:                 @border-radius;

  --drawer-width:                  @drawer-width;
  --pane-width:                    @pane-width;
  --header-height:                 @header-height;
  --header-height-phone:           @header-height-phone;

  --zindex-header:                 @zindex-header;
  --zindex-pane:                   @zindex-pane;
  --zindex-composer:               @zindex-composer;
  --zindex-dropdown:               @zindex-dropdown;
  --zindex-modal-background:       @zindex-modal-background;
  --zindex-modal:                  @zindex-modal;
  --zindex-alerts:                 @zindex-alerts;
  --zindex-tooltip:                @zindex-tooltip;

  --app-bottom-padding:             50px;
  --page-bottom-padding:            0px;

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

  --screen-phone-max:              @screen-phone-max;
  --screen-tablet:                 @screen-tablet;
  --screen-tablet-max:             @screen-tablet-max;
  --screen-desktop:                @screen-desktop;
  --screen-desktop-max:            @screen-desktop-max;
  --screen-desktop-hd:             @screen-desktop-hd;

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

  // ---------------------------------
  // COMPONENT LAYOUTS

  --avatar-column-width: 85px;
  --post-padding: 20px;
}