// slightly lighten a colour
@function tint($color, $percentage) {
    @return mix(white, $color, $percentage);
}

// slightly darken a colour
@function shade($color, $percentage) {
    @return mix(black, $color, $percentage);
}

// text colours

$color-text:                          #333333 !default;
$color-text-heading:                  #000000 !default;
$color-text-button:                   $color-text !default;
$color-text-button-hover:             $color-text-button !default;
$color-text-button-active:            #000000 !default;
$color-text-button-disabled:          $color-text-button !default;
$color-text-form:                     #000000 !default;
$color-text-form-placeholder:         #999999 !default;
$color-text-footnote:                 #585858 !default;
$color-text-inverse:                  #ffffff !default;

$dark-color-text:                     #ced4da !default;
$dark-color-text-heading:             #ffffff !default;
$dark-color-text-button:              $color-text !default;
$dark-color-text-button-hover:        $color-text-button !default;
$dark-color-text-button-active:       #000000 !default;
$dark-color-text-button-disabled:     $dark-color-text-button !default;
$dark-color-text-form:                #ffffff !default;
$dark-color-text-form-placeholder:    #747b82 !default;
$dark-color-text-footnote:            #c9d1d9 !default;
$dark-color-text-inverse:             #373e45 !default;

// neutral colours

$color-background:                    #ffffff !default;
$color-background-box:                #f7f7f7 !default;
$color-background-form:               #ffffff !default;
$color-background-form-disabled:      #e4e4e4 !default;
$color-gradient-from:                 #eeeeee !default;
$color-gradient-to:                   shade($color-gradient-from, 7%) !default;

$dark-color-background:               #373e45 !default;
$dark-color-background-box:           shade($dark-color-background, 14%) !default;
$dark-color-background-form:          shade($dark-color-background, 28%) !default;
$dark-color-background-form-disabled: shade($dark-color-background, 28%) !default;
$dark-color-gradient-from:            tint($dark-color-background, 10%) !default;
$dark-color-gradient-to:              tint($dark-color-background, 16%) !default;

// accent colours

$color-accent-gradient-from:          #ffda44 !default;
$color-accent-gradient-to:            darken($color-accent-gradient-from, 15%) !default;
$color-highlight-box:                 #fff9e1 !default;
$color-strong-highlight-box:          #ffefaf !default;

$dark-color-highlight-box:            #59563d !default;
$dark-color-strong-highlight-box:     #ac9840 !default;

// border colours

$color-border:                        #cccccc !default;
$color-border-light:                  tint($color-border, 7%) !default;
$color-border-extra-light:            tint($color-border, 14%) !default;
$color-border-dark:                   shade($color-border, 7%) !default;
$color-border-extra-dark:             shade($color-border, 14%) !default;

$dark-color-border:                   tint($dark-color-background, 36%) !default;
$dark-color-border-light:             tint($dark-color-background, 24%) !default;
$dark-color-border-extra-light:       tint($dark-color-background, 12%) !default;
$dark-color-border-dark:              shade($dark-color-background, 12%) !default;
$dark-color-border-extra-dark:        shade($dark-color-background, 75%) !default;

// interaction colours

$color-link:                          #004cbf !default;
$color-link-hover:                    #0066ff !default;
$color-link-focus:                    $color-link-hover !default;
$color-selecting:                     tint($color-link-hover, 80%) !default;
$color-selected:                      tint($color-link-hover, 90%) !default;

$dark-color-link:                     #9cd7ff !default;
$dark-color-link-hover:               tint($dark-color-link, 33%) !default;
$dark-color-link-focus:               $color-accent-gradient-to !default;
$dark-color-link-focus-alt:           #ff9900 !default;
$dark-color-selecting:                #1b2f48 !default;
$dark-color-selected:                 #1c3456 !default;

// button colours

$color-button-gradient-from:          $color-gradient-from !default;
$color-button-gradient-to:            darken($color-button-gradient-from, 6.5%) !default;
$color-button-border:                 darken($color-button-gradient-to, 7%) !default;
$color-button-primary-gradient-from:  lighten($color-accent-gradient-from, 7%) !default;
$color-button-primary-gradient-to:    darken($color-button-primary-gradient-from, 15%) !default;
$color-button-primary-border:         darken($color-button-primary-gradient-to, 7%) !default;
$color-button-selected-gradient-from: tint($color-link-hover, 90%) !default;
$color-button-selected-gradient-to:   tint($color-link-hover, 80%) !default;
$color-button-selected-border:        darken($color-button-selected-gradient-to, 10.5%) !default;

// alert colours

$color-success-text:                  #238c23 !default;
$color-success-background:            #dff0d8 !default;
$color-success-border:                darken($color-success-background, 20%) !default;
$color-warning-text:                  #c88800 !default;
$color-warning-background:            #f8eedc !default;
$color-warning-border:                darken($color-warning-background, 20%) !default;
$color-error-text:                    #ac261d !default;
$color-error-background:              #f2dede !default;
$color-error-border:                  darken($color-error-background, 12%) !default;
$color-info-text:                     #3a87ad !default;
$color-info-background:               #e7f6fc !default;
$color-info-border:                   darken($color-info-background, 12%) !default;

$dark-color-success-text:             #66cc33 !default;
$dark-color-success-background:       #2a4125 !default;
$dark-color-success-border:           rgba($dark-color-success-text, 0.33) !default;
$dark-color-warning-text:             #ffbe3c !default;
$dark-color-warning-background:       #484123 !default;
$dark-color-warning-border:           rgba($dark-color-warning-text, 0.33) !default;
$dark-color-error-text:               #ff3382 !default;
$dark-color-error-background:         #47232a !default;
$dark-color-error-border:             rgba($dark-color-error-text, 0.44) !default;
$dark-color-info-text:                #44aaff !default;
$dark-color-info-background:          #0e304a !default;
$dark-color-info-border:              rgba($dark-color-info-text, 0.38) !default;