@import '~bootstrap/scss/_functions.scss';
@import '~bootstrap/scss/_variables.scss';
@import 'colors';

// Options
$enable-shadows: false;
$enable-print-styles: false;

// Colors
$yiq-contrasted-threshold: 160;
$body-bg: $white;
$body-color: $gray-800;

// Grid
$grid-columns: 12;
$grid-gutter-width: 1rem;

// Fonts
$font-family-base: 'Inter', 'Helvetica', sans-serif;
$headings-font-family: $font-family-base;
$headings-font-weight: 600;
$font-weight-normal: 400;

$font-size-base: 1.3rem;
$lead-font-size: 1.3rem;
$font-size-xl: 1.8rem;
$font-size-lg: 1.6rem;
$font-size-sm: 1.2rem;
$font-size-xs: 1.1rem;

$line-height-base: 1.5;
$line-height-base-sm: 1.5;
$line-height-base-md: 1.5;

$h1-font-size: 4rem;
$h2-font-size: 2.4rem;
$h3-font-size: 1.8rem;
$h4-font-size: 1.6rem;
$h5-font-size: 1.3rem;
$h6-font-size: 1.3rem;

$display1-size: $h1-font-size;
$display2-size: $h2-font-size;
$display3-size: $h3-font-size;
$display4-size: $h4-font-size;

// Media queries
$container-max-widths: (
    xs: 450px,
    sm: 768px,
    md: 1025px,
    lg: 1250px
);

$grid-breakpoints: (
    xs: 0,
    sm: 450px,
    md: 768px,
    lg: 1025px,
    xl: 1250px
);
// Borders
$border-width: 1px;
$border-radius: 0.6rem;
$border-radius-xl: 1.6rem;
$border-radius-lg: 0.45rem;
$border-radius-sm: 0.3rem;
$border-radius-xs: 0.2rem;
// Pagination
$pagination-padding-y: 0.75rem;
$pagination-padding-x: 1rem;
$pagination-padding-y-sm: 0.75rem;
$pagination-padding-x-sm: 0.75rem;
$pagination-padding-y-lg: 0.75rem;
$pagination-padding-x-lg: 1.5rem;
// $pagination-line-height: 1.25rem;
$pagination-hover-color: $black;
$pagination-hover-bg: $light;
$pagination-color: $black;
// Alerts
// Define alert colors, border radius, and padding.
$alert-padding-y: 0.75rem;
$alert-padding-x: 1.25rem;
$alert-margin-bottom: 1rem;
// Buttons + Forms
// Shared variables that are reassigned to `$input-` and `$btn-` specific variables.
$input-btn-padding-y: 0.375rem;
$input-btn-padding-x: 0.75rem;
$input-btn-line-height: $line-height-base;
$input-btn-focus-width: 0.2rem;
$input-btn-focus-color: darken($component-active-bg, 5%);
$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color;
$input-btn-padding-y-sm: 0.25rem;
$input-btn-padding-x-sm: 0.5rem;
$input-btn-line-height-sm: $line-height-sm;
$input-btn-padding-y-lg: 0.5rem;
$input-btn-padding-x-lg: 1rem;
$input-btn-line-height-lg: $line-height-lg;
$input-btn-border-width: $border-width;
// Buttons
// For each of Bootstrap's buttons, define text, background, and border color.
$btn-font-weight: 500;
$btn-padding-y: 0;
$btn-padding-x: 2rem;
$btn-line-height: 3rem;
$btn-padding-y-sm: 0;
$btn-padding-x-sm: 2rem;
$btn-line-height-sm: 2.2rem;
$btn-line-height-sm: 2.8rem;
$btn-padding-y-lg: 0;
$btn-padding-x-lg: 2rem;
$btn-line-height-lg: 4.3rem;
$btn-border-width: $border-width;
$btn-border-radius: 1.6rem;
$btn-border-radius-lg: 2.25rem;
$btn-border-radius-sm: 1.2rem;
$btn-border-radius-sm: 1.5rem;
$btn-box-shadow: inset 0 1px 0 rgba($white, 0.15), 0 1px 1px rgba($black, 0.075);
$btn-focus-width: 1px;
$btn-focus-box-shadow: none;
$btn-disabled-opacity: 0.3;
$btn-link-disabled-color: $gray-600;
$btn-block-spacing-y: 0.5rem;
// Forms
$input-line-height: 3.2rem;
$input-height: 3.2rem;
$input-height-sm: 2.4rem;
$input-height-lg: 4.5rem;
$input-padding-y: 0;
$input-border-width: 1px;
$input-disabled-bg: $gray-200;
$input-disabled-border-color: $gray-400;
$input-disabled-label-color: $gray-400;
$input-box-shadow: none;
$input-focus-box-shadow: none;
// Select
$select-color: $black;
$select-background-color: $secondary;
// Icons
$icon-size-base: 1.6rem;
$icon-size-xsmall: 1rem;
$icon-size-small: 1.2rem;
$icon-size-mlarge: 1.8rem;
$icon-size-large: 2rem;
$icon-size-largest: 3rem;