/* --------- Custom variables ----------- */

/* --------- Bootstrap variables ----------- */

/* This file gets imported into the project under abstracts/variables/_index.scss */
/* Find bootstrap variables: https://rstudio.github.io/bslib/articles/bs4-variables/ */

/* Color system */

$white: #fff;
$gray-100: #f8f9fa;
$gray-200: #e9ecef;
$gray-300: #dee2e6;
$gray-400: #ced4da;
$gray-500: #adb5bd;
$gray-600: #6c757d;
$gray-700: #495057;
$gray-800: #343a40;
$gray-900: #212529;
$black: #000;

$blue: #007bff;
$indigo: #6610f2;
$purple: #6f42c1;
$pink: #e83e8c;
$red: #dc3545;
$orange: #fd7e14;
$yellow: #ffc107;
$green: #28a745;
$teal: #20c997;
$cyan: #17a2b8;

$primary: $red;
$secondary: $gray-600;
$success: $green;
$info: $cyan;
$warning: #ff9a52;
$danger: $red;
$light: $gray-100;
$dark: $gray-800;

/* Typography */

$font-family-sans-serif: "Plus Jakarta Sans", sans-serif;
$font-family-base: $font-family-sans-serif;
$headings-font-family: $font-family-sans-serif;
$font-weight-base: 400;

$font-size-base: rem-calc(14px);
$font-size-lg: $font-size-base * 1.125;
$font-size-sm: $font-size-base * 0.875;
$font-size-xs: $font-size-base * 0.6875;

$font-weight-lighter: 200;
$font-weight-light: 300;
$font-weight-normal: 400;
$font-weight-bold: 700;
$font-weight-bolder: 800;

$h1-font-size: $font-size-base * 2;
$h2-font-size: $font-size-base * 1.75;
$h3-font-size: $font-size-base * 1.5;
$h4-font-size: $font-size-base * 1.25;
$h5-font-size: $font-size-base * 1.125;
$h6-font-size: $font-size-base;

$display1-size: $font-size-base * 2.5;
$display2-size: $font-size-base * 2.25;
$display3-size: $font-size-base * 2;
$display4-size: $font-size-base * 1.75;

$display1-weight: 400;
$display2-weight: 400;
$display3-weight: 400;
$display4-weight: 400;

$text-muted: $gray-600;

$paragraph-margin-bottom: rem-calc(20px);

$headings-margin-bottom: rem-calc(20px);
$headings-font-weight: 700;
$headings-line-height: 1.2;
$headings-color: $gray-900;

/* Spacer */

$spacer: 10px;

/* stylelint-disable-next-line scss/dollar-variable-default */
$spacers: (
    0: 0,
    1: $spacer * 0.5,
    2: $spacer,
    3: $spacer * 2,
    4: $spacer * 3,
    5: $spacer * 4,
    6: $spacer * 5,
);

/* Components */

$border-width: 1px;
$border-color: $gray-300;
$border-radius: 0.4rem;
$border-radius-lg: 0.4rem;
$border-radius-sm: 0.4rem;

$card-border-color: $border-color;
$table-border-color: $border-color;
$input-border-color: $border-color;

$input-focus-border-color: $border-color;
$form-check-input-border: $border-color;

/* Commons */

$body-bg: $white;
$body-color: $gray-900;

/* Custom control */

$custom-checkbox-indicator-border-radius: 4px;

$custom-checkbox-indicator-icon-checked-dark-color: $black;
$custom-checkbox-indicator-icon-checked-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><path fill='#{$custom-checkbox-indicator-icon-checked-dark-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/></svg>");

/* Custom radio color */

$custom-color-control-indicator-size: rem-calc(24px);
$custom-color-control-indicator-size-checked-border-color: $gray-900;
$custom-color-control-indicator-icon-size: rem-calc(18px);

/* Buttons */

$btn-font-weight: 500;

/* Options */

$enable-responsive-font-sizes: true;

/* Grid */

/* Made this more like the breakpoints used in Bootstrap 5 */
$grid-breakpoints: (
    xs: 0,
    sm: 576px,
    md: 768px,
    lg: 992px,
    xl: 1200px,
    xxl: 1400px,
);

$container-max-widths: (
    sm: 540px,
    md: 720px,
    lg: 960px,
    xl: 1140px,
    xxl: 1320px,
);

$grid-columns: 12;
$grid-gutter-width: rem-calc(20px);
$grid-row-columns: 6;

/* Card */

$card-border-radius: $border-radius;
$card-border-width: rem-calc(1px);
$card-inner-border-radius: subtract($card-border-radius, $card-border-width);

/* RFS */

$rfs-breakpoint: 992;
$rfs-breakpoint-unit: px;
$rfs-base-font-size: 12;
$rfs-factor: 5;

/* Forms */

$input-btn-padding-y: rem-calc(8px);
$input-btn-padding-x: rem-calc(16px);

$input-btn-padding-y-sm: rem-calc(4px);
$input-btn-padding-x-sm: rem-calc(8px);

$input-btn-padding-y-lg: rem-calc(14px);
$input-btn-padding-x-lg: rem-calc(20px);

$input-height: rem-calc(50px);

/* Badge */

$badge-padding-y: 0.3em;
$badge-padding-x: 0.55em;

/* Progress */

$progress-bg: $gray-200;
$progress-height: rem-calc(8px);