// Brand colors
$brand-primary: #25537b;
$brand-secondary: #dee2e6;
$brand-success: #66cc66;
$brand-info: #2077b3;
$brand-warning: #fe7f02;
$brand-danger: #e31a1e;
$brand-light: #f8f9fa;
$brand-dark: #2c3143;
$brand-toggle: gold;

// Masthead colors
$masthead-color: $brand-dark;
$masthead-text-color: $brand-light;
$masthead-text-active: lighten($brand-light, 15%);
$masthead-text-hover: $brand-toggle;
$masthead-link-color: transparent;
$masthead-link-hover: transparent;
$masthead-link-active: darken($masthead-color, 10%);

// Text colors
$text-color: $brand-dark;
$text-muted: lighten($text-color, 10%);
$text-light: lighten($text-color, 20%);
$text-shadow: drop-shadow(0 0 0.2rem $brand-dark);

// Light grays for backgrounds
$white: lighten($brand-light, 15%); // body background
$gray-100: $brand-light;
$gray-200: darken($brand-light, 5%); // welcome background
$gray-300: darken($brand-light, 10%);
$border-color: darken($brand-light, 20%);

// Dark grays for foregrounds
$gray-900: $text-color;
$gray-800: $text-muted;
$gray-700: $text-muted;
$gray-600: $text-muted;
$gray-500: darken($brand-light, 30%);
$gray-400: $border-color;
$black: $brand-dark;

// These variables don't actually determine the colors in Bootstrap 4, instead
// they use a map called $theme-colors, so here we override that
$theme-colors: ();
$theme-colors: map-merge(
    (
        "primary": $brand-primary,
        "secondary": $brand-secondary,
        "success": $brand-success,
        "danger": $brand-danger,
        "warning": $brand-warning,
        "info": $brand-info,
        "light": $brand-light,
        "dark": $brand-dark,
    ),
    $theme-colors
);

// This is the default but we need to use it here.
$theme-color-interval: 5% !default;

// Alerts and states
$alert-bg-level: -12 !default;
$alert-border-level: -6 !default;
$alert-color-level: 16 !default;

// These are not Bootstrap styles but are used extensively in Galaxy. This
// duplicated the way that Bootstrap 4 alerts are derived.
$state-warning-text: theme-color-level("warning", $alert-color-level);
$state-warning-bg: theme-color-level("warning", $alert-bg-level);
$state-warning-border: theme-color-level("warning", $alert-border-level);

$state-danger-text: theme-color-level("danger", $alert-color-level);
$state-danger-bg: theme-color-level("danger", $alert-bg-level);
$state-danger-border: theme-color-level("danger", $alert-border-level);

$state-info-text: theme-color-level("info", $alert-color-level);
$state-info-bg: lighten($brand-info, 50%);
$state-info-border: theme-color-level("info", $alert-border-level);

$state-success-text: theme-color-level("success", $alert-color-level);
$state-success-bg: theme-color-level("success", $alert-bg-level);
$state-success-border: theme-color-level("success", $alert-border-level);

// Fonts and sizes
$font-family-sans-serif:
    "Atkinson Hyperlegible",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol";
$font-family-monospace: Monaco, Menlo, Consolas, "Courier New", monospace;
$font-family-base: $font-family-sans-serif;
$font-size-base: 0.85rem; // default 1rem

// Line control
$line-height-base: 1.5; // default 1.5

// Header font sizes
$h1-font-size: $font-size-base * 2; // default 2.5
$h2-font-size: $font-size-base * 1.75; // default 2
$h3-font-size: $font-size-base * 1.5; // default 1.75
$h4-font-size: $font-size-base * 1.25; // default 1.5
$h5-font-size: $font-size-base; // default 1.25
$h6-font-size: $font-size-base * 0.85; // default 1

// Increase contrast of dropdown items
$dropdown-link-hover-color: $brand-light;
$dropdown-link-hover-bg: $brand-primary;

// Color of input elements
$input-color: $text-color;
$input-color-placeholder: $text-muted;

// Galaxy Variables (not used by bootstrap)
$body-bg: $white;

// Masthead
$masthead-height: 2.5rem;
$masthead-logo-height: $masthead-height - 0.5rem;

// Side panels
$panel-bg-color: $brand-light;
$panel-text-color: $text-color;
$panel-header-text-color: $text-color;
$panel-bg-header-color: $panel-bg-color;
$panel-footer-bg-color: $panel-bg-color;
$panel-message-height: 2.5rem;
$panel-width: 18rem;
$panel_header_height: 2.5rem;
$panel_footer_height: 25px;

// Portlets
$portlet-bg-color: $gray-200;
$portlet-focus-color: $brand-info;

// Borders
$border-radius-base: 0.1875rem;
$border-radius-large: 0.3125rem;
$border-radius-extralarge: 0.7rem;
$border-default: 1px solid $border-color;

// Buttons
$btn-default-color: $text-color;
$btn-default-bg: $gray-200;
$btn-default-border: transparent;

// Forms
$form-heading-bg: $panel-bg-color;
$form-border: darken($form-heading-bg, 20%);

// Table
$table-heading-bg: darken($panel-bg-color, 5%);
$table-bg-accent: $panel-bg-color;
$table-border-color: transparent;

// Additional state colors
$state-default-bg: $gray-200;
$state-default-border: $border-color;
$state-running-bg: lighten($brand-warning, 40%);
$state-running-border: $border-color;

// Workflow editor
$workflow-editor-bg: $white;
$workflow-editor-grid-color: lighten($brand-primary, 65%);
$workflow-editor-grid-color-landmark: lighten($brand-primary, 60%);
$workflow-overview-bg: $panel-bg-color;
$workflow-node-width: 12.5rem;

// Margins
$spacer: 1rem;
$margin-v: $spacer * 1.5;
$margin-h: $spacer;