// ---------------------------------
// CONFIG

@config-primary-color:             #536F90;
@config-secondary-color:           #536F90;

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

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

@primary-hue:                      hue(@primary-color);
@primary-sat:                      saturation(@primary-color);

@secondary-hue:                    hue(@secondary-color);
@secondary-sat:                    saturation(@secondary-color);

// SCHEMES

@body-bg-light:                    #fff;
@body-bg-dark:                     hsl(@secondary-hue, min(20%, @secondary-sat), 10%);

@muted-color-light:                hsl(@secondary-hue, min(20%, @secondary-sat), 50%);
@muted-color-dark:                 hsl(@secondary-hue, min(15%, @secondary-sat), 50%);
@muted-more-color-light:           #aaa;
@muted-more-color-dark:            hsl(@secondary-hue, min(10%, @secondary-sat), 40%);

@link-color:                       saturate(@primary-color, 10%);

@control-bg-light:                 hsl(@secondary-hue, min(50%, @secondary-sat), 93%);
@control-bg-dark:                  hsl(@secondary-hue, min(20%, @secondary-sat), 13%);

@control-color-light:              @muted-color-light;
@control-color-dark:               @muted-color-dark;

@control-danger-bg-light:          #fdd;
@control-danger-bg-dark:           #411;
@control-danger-color-light:       #d66;
@control-danger-color-dark:        #a88;

@text-color-light:                 #111;
@text-color-dark:                  #ddd;

@heading-color-light:              @text-color-light;
@heading-color-dark:               @text-color-dark;

@shadow-color-light:               rgba(0, 0, 0, 0.35);
@shadow-color-dark:                rgba(0, 0, 0, 0.5);

@overlay-bg-light:                 fade(@secondary-color, 90%);
@overlay-bg-dark:                  fade(darken(@body-bg-dark, 5%), 90%);

@code-bg-light:                    darken(@body-bg-light, 3%);
@code-bg-dark:                     darken(@body-bg-dark, 3%);

@code-color-light:                 lighten(@text-color-light, 30%);
@code-color-dark:                  #fff;

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

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

// Header colors depend on whether the header is colored,
// and whether we are on light or dark modes.

@header-bg-light:                      @body-bg-light;
@header-color-light:                   @primary-color;
@header-control-bg-light:              @control-bg-light;
@header-control-color-light:           @control-color-light;

@header-bg-dark:                       @body-bg-dark;
@header-color-dark:                    @primary-color;
@header-control-bg-dark:               @control-bg-dark;
@header-control-color-dark:            @control-color-dark;

@header-bg-colored-light:              @primary-color;
@header-color-colored-light:           @body-bg-light;
@header-control-bg-colored-light:      mix(#000, @header-bg-colored-light, 10%);
@header-control-color-colored-light:   mix(@body-bg-light, @header-bg-colored-light, 60%);

@header-bg-colored-dark:               @primary-color;
@header-color-colored-dark:            @body-bg-dark;
@header-control-bg-colored-dark:       mix(#000, @header-bg-colored-dark, 10%);
@header-control-color-colored-dark:    mix(@body-bg-dark, @header-bg-colored-dark, 60%);

// COMMON COLORS

@control-success-bg:               #B4F1AF;
@control-success-color:            #33722D;
@control-warning-bg:               #fff2ae;
@control-warning-color:            #ad6c00;

@error-color:                      #d83e3e;

@alert-bg:                         #fff2ae;
@alert-color:                      #ad6c00;

@alert-error-bg:                   @error-color;
@alert-error-color:                #fff;

@alert-success-bg:                 #B4F1AF;
@alert-success-color:              #33722D;

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

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

@drawer-width:                     270px;
@pane-width:                       400px;
@header-height:                    52px;
@header-height-phone:              46px;

@border-radius:                    4px;

@zindex-header:                    1000;
@zindex-pane:                      1010;
@zindex-composer:                  1020;
@zindex-dropdown:                  1030;
@zindex-modal-background:          1040;
@zindex-modal:                     1050;
@zindex-alerts:                    1060;
@zindex-tooltip:                   1070;

@expand-side-nav:                  @tablet-up;

// ---------------------------------
// BREAKPOINTS

// We use `-0.02` here to fix an odd rendering glitch with specific operating system UI scaling, and combined
// with specific viewport sizes. This can result in the browser actually being 'between' media queries, which
// breaks our UI. See: https://github.com/flarum/core/issues/2915

@screen-phone-max:                 (@screen-tablet - 0.02);

@screen-small-phone:               320px;
@screen-small-phone-max:           (@screen-small-phone + 0.02);

@screen-tablet:                    768px;
@screen-tablet-max:                (@screen-desktop - 0.02);

@screen-desktop:                   992px;
@screen-desktop-max:               (@screen-desktop-hd - 0.02);

@screen-desktop-hd:                1100px;
@screen-desktop-xl:                1600px;
@screen-desktop-xxl:               2000px;
@screen-desktop-xxxl:              3000px;

@phone:                            ~"(max-width: @{screen-phone-max})";
@small-phone:                      ~"(max-width: @{screen-small-phone-max})";
@tablet:                           ~"(min-width: @{screen-tablet}) and (max-width: @{screen-tablet-max})";
@desktop:                          ~"(min-width: @{screen-desktop}) and (max-width: @{screen-desktop-max})";
@desktop-hd:                       ~"(min-width: @{screen-desktop-hd})";
@desktop-xl:                       ~"(min-width: @{screen-desktop-xl})";
@desktop-xxl:                      ~"(min-width: @{screen-desktop-xxl})";
@desktop-xxxl:                     ~"(min-width: @{screen-desktop-xxxl})";

@tablet-up:                        ~"(min-width: @{screen-tablet})";
@desktop-up:                       ~"(min-width: @{screen-desktop})";

// ---------------------------------
// COMPONENTS

@tooltip-bg:                       rgba(0, 0, 0, 0.9);
@tooltip-color:                    #fff;

@online-user-circle-color:         #7FBA00;