// Color system

$blue: #0e3481;
$lg-theme-color: #fff;
$white: #fff;
$black: #333;
$gray-darker: #586069;
$gray-dark: #6a737d;
$gray: #dfe2e5;
$gray-200: #f6f8fa;
$gray-light: #fafbfc;
$blue-dark: #0e3481;
$blue-shade: #5971a7;
$blue-light-shade: #3e7eff;
$blue-light: rgb(17, 93, 246);
$blue-dark-shade: rgb(18, 80, 204);
$body-color: $black;

$primary: $blue;

/** Bootstrap navbar fix (https://git.io/fADqW) */
$navbar-dark-toggler-icon-bg: none;
$navbar-light-toggler-icon-bg: none;
$navbar-toggler-focus-width: 0;
$navbar-light-toggler-border-color: $blue-dark;

// Options
//
// Quickly modify global styling by enabling or disabling optional features.

$enable-responsive-font-sizes: true;

// Grid columns
//
// Set the number of columns and specify the width of the gutters.

$grid-columns: 12;
$grid-gutter-width: 48px;
$grid-row-columns: 6;

// Prefix for :root CSS variables

$variable-prefix: bs-;

// Typography
//
// Font, line-height, and color for body text, headings, and more.

// stylelint-disable value-keyword-case
$font-family-sans-serif: 'Helvetica Now Display', system-ui, -apple-system,
    'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans',
    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
    'Noto Color Emoji';
$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas,
    'Liberation Mono', 'Courier New', monospace;
// stylelint-enable value-keyword-case
$font-family-base: $font-family-sans-serif;
$font-family-code: var(--#{$variable-prefix}font-monospace);

$font-size-base: 1rem; // Assumes the browser default, typically `16px`
$font-size-xl: $font-size-base * 1.375;
$font-size-lg: $font-size-base * 1.25;
$font-size-md: $font-size-base * 1.125;
$font-size-sm: $font-size-base * 0.875;

$font-weight-bold: 500;

$line-height-base: 1.5;

$headings-font-family: 'Helvetica Now Display', $font-family-sans-serif;
$headings-font-weight: 500;
$headings-line-height: 1.3;

// Spacing
//
// Control the default styling of most Bootstrap elements by modifying these
// variables. Mostly focused on spacing.
// You can add more entries to the $spacers map, should you need more variation.

$spacer: 1rem;

// Navbar

$navbar-padding-y: $spacer * 1.5;
$navbar-padding-x: $spacer;
$navbar-nav-link-padding-x: $spacer;
$navbar-toggler-font-size: 1rem;
$navbar-brand-font-size: 1rem;
$navbar-font-size: 1rem;

$navbar-light-color: $blue-dark;
$navbar-light-brand-color: $blue-dark;
$navbar-light-hover-color: $blue-light-shade;
$navbar-light-active-color: $blue-light;

// Alerts
//
// Define alert colors, border radius, and padding.

$alert-padding-y: 1.5rem;
$alert-padding-x: 1rem;
$alert-margin-bottom: 0;
$alert-border-radius: 2px;
$alert-link-font-weight: $headings-font-weight;
$alert-border-width: 0;

$alert-bg-level: 0;
$alert-border-level: 0;
$alert-color-level: 0;

// Links
//
// Style anchor elements.

$link-color: $blue-light;
$link-decoration: none;
$link-shade-percentage: 20%;
$link-hover-color: $blue-dark-shade;
$link-hover-active: $blue-light;
$link-hover-decoration: underline;

$stretched-link-pseudo-element: after;
$stretched-link-z-index: 1;

// typography
$h3-font-size: 1.4rem;

$gutters: (
    0: 0,
    1: $spacer * 0.25,
    2: $spacer * 0.5,
    3: $spacer,
    4: $spacer * 8,
    5: $spacer * 3,
);
