// Main colors used in the application.
//
// All variables use !default so they can be overriden by applications in
//   app/assets/stylesheets/pwnstyles/_app_vars.scss


// Primary colors used in the app.
$colors: 3 !default;
$main-color1: hsl(240deg, 100%, 50%) !default;
$main-color2: adjust-hue($main-color1, 360 / $colors) !default;
$main-color3: adjust-hue($main-color1, 360 / $colors) !default;
$main-color4: adjust-hue($main-color1, 360 / $colors) !default;
$main-color5: adjust-hue($main-color1, 360 / $colors) !default;

// Header.
$header-background-color: change-color($main-color1,
    $saturation: 60%, $lightness: 95%) !default;
$header-border-color: change-color($main-color1,
    $saturation: 60%, $lightness: 76%) !default;
$header-title-color: change-color($main-color1,
    $saturation: 100%, $lightness: 1%) !default;
$header-text-color: change-color($main-color1,
    $saturation: 60%, $lightness: 21%) !default;
$header-menu-hover-color: change-color($main-color1,
    $saturation: 60%, $lightness: 86%) !default;
$header-menu-hover-text-color: change-color($main-color1,
    $saturation: 60%, $lightness: 0%) !default;

// Footer.
$footer-border-color: change-color($main-color1,
    $saturation: 66%, $lightness: 76%) !default;
$footer-text-color: change-color($main-color1,
    $saturation: 54%, $lightness: 16%) !default;

// Buttons.
$button-base-color: change-color($main-color1, $saturation: 5%) !default;
$button-color: change-color($button-base-color, $lightness: 95%) !default;
$button-text-color: change-color($button-base-color, $lightness: 43%) !default;
$button-border-color: change-color($button-base-color, $lightness: 86%)
                      !default;
$button-hover-text-color: change-color($button-base-color, $lightness: 20%)
                          !default;
$button-hover-border-color: change-color($button-base-color, $lightness: 78%)
                            !default;
$button-active-text-color: change-color($button-base-color, $lightness: 0%)
                           !default;
$button-active-border-color: change-color($button-base-color, $lightness: 78%)
                             !default;

$color-button-base-color: $main-color1 !default;
$color-button-color: change-color($color-button-base-color,
                     $lightness: 36%) !default;
$color-button-text-color: change-color($color-button-base-color,
                          $saturation: 0%, $lightness: 100%) !default;
$color-button-border-color: change-color($color-button-base-color,
                            $saturation: 57%, $lightness: 32%) !default;
$color-button-hover-text-color: $color-button-text-color !default;
$color-button-hover-border-color: change-color($color-button-base-color,
                                  $lightness: 22%) !default;
$color-button-active-text-color: $color-button-text-color !default;
$color-button-active-border-color: change-color($color-button-base-color,
                                   $lightness: 22%) !default;


// Input fields.
$input-base-color: $main-color1 !default;
$input-background-color: change-color($input-base-color,
                         $saturation: 66%, $lightness: 99%) !default;
$input-text-color: change-color($input-base-color,
                   $saturation: 5%, $lightness: 0%) !default;
$input-placeholder-text-color: change-color($input-base-color,
                               $saturation: 5%, $lightness: 55%) !default;

$input-border-color: change-color($input-base-color,
                     $saturation: 5%, $lightness: 85%) !default;
$input-border-top-color: change-color($input-base-color,
                         $saturation: 5%, $lightness: 75%) !default;
$input-hover-border-color: change-color($input-base-color,
                           $saturation: 5%, $lightness: 66%) !default;
$input-hover-shadow-color: change-color($input-base-color,
                           $saturation: 5%, $lightness: 88%) !default;
$input-focus-border-color: change-color($input-base-color,
                           $saturation: 100%, $lightness: 33%) !default;
$input-focus-shadow-color: change-color($input-base-color,
                           $saturation: 66%, $lightness: 88%) !default;

$link-color: change-color($main-color1, $saturation: 60%, $lightness: 40%)
             !default;

// Text.
$text-color: change-color($main-color1, $saturation: 0%, $lightness: 0%)
             !default;
$heading-main-color: change-color($main-color1, $saturation: 50%) !default;
$h1-text-color: change-color($heading-main-color,
    $lightness: 30%) !default;
$h2-text-color: change-color($heading-main-color,
    $lightness: 28%) !default;
$h3-text-color: change-color($heading-main-color,
    $lightness: 26%) !default;
$h4-text-color: change-color($heading-main-color,
    $lightness: 24%) !default;
$h5-text-color: change-color($heading-main-color,
    $lightness: 22%) !default;
$h6-text-color: change-color($heading-main-color,
    $lightness: 20%) !default;

// Tables.
$table-heading-text-color: change-color($main-color1,
    $saturation: 100%, $lightness: 25%) !default;
$table-even-row-background-color: change-color($table-heading-text-color,
    $saturation: 60%, $lightness: 98%) !default;