$white: #fff !default;
$gray-100: #f8f8f8 !default;
$gray-200: #e9e9e9 !default;
$gray-300: #dedede !default;
$gray-400: #cccccc !default; // Brand color
$gray-500: #999999 !default; // Brand color
$gray-600: #696969 !default; // Brand color
$gray-700: #494949 !default;
$gray-800: #3c3c3c !default; // Brand color
$gray-900: #212121 !default;

$black: #000 !default;

$primary: #ff0000 !default; // Brand color
$secondary: $gray-500 !default;
$success: #46ec4e !default;
$info: #0000ff !default;
$warning: #ffba00 !default;
$danger: #8b0707 !default; // Brand color
$light: $gray-200 !default;
$dark: #000 !default;

$theme-colors: (
        primary: $primary,
        secondary: $secondary,
        success: $success,
        info: $info,
        warning: $warning,
        danger: $danger,
        light: $light,
        dark: $dark,
);


$brand-grays: () !default;
$brand-grays: map-merge(
  (
    'gray-lighter': $gray-400,
    'gray-light': $gray-500,
    'gray-dark': $gray-600,
    'gray-darker': $gray-800
  ),
  $brand-grays
);

$body-bg: $white !default; // Brand color
$body-color: $black !default; // Brand color
$text-muted: $gray-500 !default;

$component-active-bg: $primary !default;
$component-active-color: color-contrast($component-active-bg) !default;

$table-dark-bg: $gray-800 !default;
$table-dark-border-color: $gray-600 !default;

$enable-rounded: false !default;
$enable-shadows: true !default;
$enable-gradients: false !default;

$font-family-sans-serif:
  'Poppins',
  -apple-system,
  BlinkMacSystemFont,
  'Segoe UI',
  Roboto,
  'Helvetica Neue',
  Arial,
  sans-serif !default;
$font-family-serif: 'Merriweather', Georgia, 'Times New Roman', Times, serif !default;

$headings-font-family: $font-family-sans-serif !default;
$headings-font-weight: 700 !default;

$jumbotron-bg: $gray-200 !default;
$jumbotron-font-family: 'Anton', $font-family-sans-serif !default;
$jumbotron-font-weight: 400 !default;

$fade-bg: $gray-400 !default;
$list-group-bg: transparent !default;

$input-focus-border-color: $secondary !default;
$bs-input-bg: $gray-100 !default;
$input-focus-bg: $white !default;

$btn-font-family: $font-family-sans-serif;
$btn-disabled-opacity: 0.45;

$form-check-input-gutter: 1.5rem !default;

$popover-body-padding-y: 0 !default;
$popover-body-padding-x: 0 !default;
$popover-max-width: 300px !default;

$popover-box-shadow: 0 10px 30px -5px rgba($black, 0.15) !default;
$dropdown-box-shadow: $popover-box-shadow !default;
$dropdown-min-width: 14rem;

$modal-backdrop-bg: $white !default;
$modal-lg: 990px !default;
$modal-content-box-shadow-xs: $popover-box-shadow !default;
$modal-content-box-shadow-sm-up: $popover-box-shadow !default;

$tooltip-max-width: 260px !default;
$tooltip-opacity: 1 !default;

$alert-border-width: 0 !default;

$app-icon-size-scale-base: 20 !default;

$app-icon-size-scale-2xs: 12 !default;
$app-icon-size-scale-xs: 14 !default;
$app-icon-size-scale-sm: 16 !default;
$app-icon-size-scale-md: $app-icon-size-scale-base !default;
$app-icon-size-scale-lg: 24 !default;
$app-icon-size-scale-xl: 32 !default;
$app-icon-size-scale-2xl: 40 !default;

$app-icon-sizes: (
  "2xs" : $app-icon-size-scale-2xs,
  "xs": $app-icon-size-scale-xs,
  "sm": $app-icon-size-scale-sm,
  "md": $app-icon-size-scale-md,
  "lg": $app-icon-size-scale-lg,
  "xl": $app-icon-size-scale-xl,
  "2xl": $app-icon-size-scale-2xl
) !default;

/* Bootstrap variables and functions must be available everywhere */
@import 'node_modules/bootstrap/scss/_functions.scss';
@import 'node_modules/bootstrap/scss/_variables.scss';

/* Get theses variables to make them available in the doc */
$theme-colors: none !default;
$font-family-monospace: none !default;

/* Spacers */
$spacer-xxs: $spacer * 0.25;
$spacer-xs: $spacer * 0.5;
$spacer-sm: $spacer * 0.75;
$spacer-md: $spacer;
$spacer-lg: $spacer * 1.5;
$spacer-xl: $spacer * 2;
$spacer-xxl: $spacer * 3;