/*
 * Animations or transitions
 */

 @easeInOutBack: cubic-bezier(0.68, -0.55, 0.265, 1.55);

/*
 * Layout
 */

  // Global
  @container-width: 960px;
  @container-width-wide: 1000px;

  // Columns
  @column-margin: 10px;

  @background-color: #2d2d2e;
  @background-color-contrast: #363738;
  @background-color-contrast-high: #686d78;
  @background-color-info: #2861fa;
  @background-color-success: #90d645;
  @background-color-error: #f00;
  @background-color-highlight: rgba(255, 255, 255, 0.1);
  @background-color-selectable: var(--main-color-brand);

  @global-gradient-color-top: spin(lighten(@app-background-color, 1%), 30);
  @global-gradient-color-bottom: desaturate(darken(@app-background-color, 4%), 5%);

  @focus-box-shadow: 0 0 0 1px var(--main-color-brand-highlight);

/*
 * Text
 */

  // Sizes
  @text-base-size: 10px;
  @text-size-1: 1.1rem;
  @text-size-2: 1.2rem;
  @text-size-3: 1.3rem;
  @text-size-4: 1.4rem;
  @text-size-paragraph: 1.3rem;
  @text-size-h1: 2.3rem;
  @text-size-h2: 1.9rem;
  @text-size-h3: 1.7rem;
  @text-size-button: 1.1rem;

  @line-height-paragraph: 1.8rem;
  @line-height-heading: 2.8rem;
  @line-height-selectable: 1.6rem;

  // Color definitions
  @font-family: 'Inter', 'Helvetica', sans-serif;
  @text-color: #aaa;
  @text-color-contrast: var(--text-color-contrast);
  @text-color-contrast-high: @text-color-contrast;
  @text-color-headline: @text-color-contrast;
  @text-color-headline-contrast: @text-color-contrast;
  @text-color-link: var(--main-color-brand);
  @text-color-link-contrast: @text-color-link;
  @text-color-dark: #686868;

  @text-color-info: #5293d8;
  @text-color-success: #26c26a;
  @text-color-warning: #ff982d;
  @text-color-error: #e04747;


/*
 * Buttons
 */

  @button-cursor: pointer;
  @button-text-shadow: 0 -1px 0 fade(#000, 30%);
  @button-box-shadow: inset 0 1px 0 fade(#fff, 7%),
                      0 1px 1px fade(#000, 30%);

  // Sizes
  @button-height: 40px;
  @button-height-small: 22px;
  @button-height-big: 50px;

  // Color definitions
  @button-success-color: var(--main-color-brand);
  @button-danger-color: @background-color-error;


/*
 * Icons
 */

 @icon-color-hover: @text-color-link;
 @icon-color-contrast: @text-color-contrast;
 @icon-color-contrast-hover: @text-color-link-contrast;

 @icon-margin: 10px;


/*
 * Inputs
 */

  @input-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.3);

  // Sizes
  @input-height: 36px;
  @input-height-small: 25px;

  // Colors
  @input-background-error: var(--range-input-background);

  @input-placeholder-color: ~"rgba(var(--text-color-contrast-rgb), 0.4)";
  @input-placeholder-color-disabled: ~"rgba(var(--text-color-contrast-rgb), 0.2)";
  @input-text-color-error: @text-color;

  @input-switch-border-width: 1px;
  @input-switch-background: var(--input-background-color);
  @input-switch-thumb-off: #aaa;
  @input-switch-thumb-on: var(--main-color-brand);

  // Borders
  @input-border-color-disabled: #2e2e2f;
  @input-border-color-focus: var(--main-color-brand-highlight);
  @input-border-color-error: @background-color-error;
  @input-switch-border: var(--input-border-color);
  @input-range-focus-border: 1px solid @input-border-color-focus;

  /*
 * Dropdowns
 */

  @dropdown-box-shadow: 0px 10px 30px 0px rgba(0,0,0,0.2);
  @dropdown-border-color: none;
  @dropdown-footer-background: #404142;
  @dropdown-footer-hover-color: @text-color-contrast;
  @dropdown-item-hover: @text-color-contrast;


/*
 * Tooltips
 */

  @tooltip-background-color: #000;
  @tooltip-background-color-light: @tooltip-background-color;
  @tooltip-text-color: @text-color;
  @tooltip-border-color-light: transparent;


/*
 * Modals
 */

  @base-modal-backdrop-color: rgba(23, 23, 23, 0.8);
  @base-modal-header-border: var(--gray-darkest);

/*
 * App
 */
  @app-background-color: #313233;
  @background-color-selected: @background-color-highlight;
  @background-color-selected-alpha: rgba(28,82,228,.5);


/*
 * Panel
 */
  @inset-panel-background-color: darken(@app-background-color, 10%);
  @tool-panel-background-color: darken(@app-background-color, 6%);


/*
 * Stage
 */
  @stage-overlay-frame: var(--main-color-brand-highlight);
  @stage-overlay-frame-rgb: var(--main-color-brand-highlight-rgb);