@import url('https://fonts.googleapis.com/css?family=Karla&family=Merriweather&display=swap');

$font-family-sans-serif: 'Karla', sans-serif;
$font-family-serif: 'Merriweather', serif;

$enable-responsive-font-sizes: true;

$line-height-base: 1.6;

$font-weight-light: 300;
$font-weight-normal: 400;
$font-weight-bold: 700;

$white: #ffffff;
$gray-100: #f7fafc;
$gray-200: #edf2f7;
$gray-300: #e2e8f0;
$gray-400: #cbd5e0;
$gray-500: #a0aec0;
$gray-600: #718096;
$gray-700: #4a5568;
$gray-800: #2d3748;
$gray-900: #1a202c;
$black: #000000;

$red: rgba(204, 84, 84, 1);
$red-500: rgba(204, 84, 84, 0.2);

$green: rgba(3, 168, 124, 1);
$green-500: rgba(3, 168, 124, 0.6);

$blue: rgb(84, 175, 204);
$blue-500: rgba(158, 213, 237, 0.6);

$box-shadow-sm: 0 1px 2px 0 rgba($black, 0.05);
$box-shadow: 0 1px 3px 0 rgba($black, 0.1), 0 1px 2px 0 rgba($black, 0.06);
$box-shadow-lg: 0 10px 15px -3px rgba($black, 0.1), 0 4px 6px -2px rgba($black, 0.05);

$border-radius: 0.5rem;
$border-radius-sm: 0.4rem;

$custom-select-indicator-color: $gray-500;

$modal-fade-transform: scale(0.8);
$modal-transition: transform 0.2s ease-out;
$modal-content-border-radius: $border-radius;

$body--color: $gray-900;
$body--color--dark: #b2bdc4;

$body--bg: $white;
$body--bg--dark: rgb(38, 50, 56);

$text--muted: $gray-500;
$text--muted--dark: #5f717e;

$list--bg-dark: #5f717e20;