/* Brand Colours
------------------------------------
*/

$brand-primary: #0B58D4 !default;
$brand-secondary: #0062FF !default;
$brand-tertiary: #FFC542 !default;
$brand-primary-light: mix($brand-primary, #fff, 10%);
$brand-primary-dark: mix($brand-primary, #000, 10%);
$body-bg: #fafafa !default;
$body-text:#696974 !default;
$body-silent-text: #E2E2EA;

/* General Colours
------------------------------------
*/
$white: #fff !default;
$black: #000 !default;
$blue: #56AAFF !default;
$indigo: #6610f2 !default;
$purple: #D96DEF !default;
$pink: #e83e8c !default;
$red: #EF4242 !default;
$orange: #F5A623 !default;
$yellow: #FFD655 !default;
$green: #1FD0A3 !default;
$teal: #20c997 !default;
$cyan: #17a2b8 !default;
$navy: #1b1297 !default;
$sky: #48b0f7 !default;
$grey: #B5B5BE !default;

/* Alerts
------------------------------------
*/
$success: $green !default;
$warning: $orange !default;
$link: $blue !default;
$error: $red !default;
$danger:$red !default;
$info: $blue !default;

/* Greys
------------------------------------
*/

$dark: #171725 !default;
$dark-grey: #696974 !default;
$grey: #B5B5BE !default;
$light-grey: #E2E2EA !default;
$light: #F0F0F5 !default;
$line-color: $light-grey !default;

/* Typography
------------------------------------
*/

// Create a Sass map of pre-defined typographic scales, $type-scales, according to the model found on type-scale.com.
$type-scales: (minor-second: 1.067,
  major-second: 1.125,
  minor-third: 1.200,
  major-third: 1.250,
  perfect-fourth: 1.333,
  augmented-fourth: 1.414,
  perfect-fifth: 1.500,
  golden-ratio: 1.618);

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap');
$font-family-heading: 'Inter',
sans-serif !default;
$font-family-body: 'Inter',
sans-serif !default;
$font-weight-light: 300 !default;
$font-weight-regular: 400 !default;
$font-weight-medium: 500 !default;
$font-weight-bold: 700 !default;
$font-size-base: 1rem !default;
$font-weight-base: $font-weight-regular !default;
$line-height-base: 1.5 !default;
$headings-type-scale: major-second !default;
$headings-font-weight: 700 !default;
$headings-line-height: 1.2 !default;
$paragraph-margin-bottom: 1rem !default;
$lead-font-size: $font-size-base * 1.25 !default;
$lead-font-weight: 500 !default;
$small-font-size: 80% !default;
$headings-text:$dark !default;
$headings-margin-bottom:1rem !default;

/* Default Styles
------------------------------------
*/
$border-radius: 4px !default;
$default-content-padding: 16px;
$border-width: 1px !default;
$box-shadow:0 0 6px 0 rgba(0, 0, 0, .2) !default;
// The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255.
$yiq-contrasted-threshold: 200 !default;


/* Responsive Breakpoints
------------------------------------
*/
$grid-breakpoints: (xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px) !default;


/* Link Style
------------------------------------
*/
$link-color: $brand-primary !default;
$link-decoration: none !default;
$link-hover-color: darken($link-color, 15%) !default;


/* Avatar
------------------------------------
*/
$avatar-border-radius: $border-radius !default;

/* Avatar Info
------------------------------------
*/
$avatar-info-title-size: 1rem !default;
$avatar-info-subtitle-size:0.875rem !default;
$avatar-info-subtitle-weight:500 !default;
$avatar-info-subtitle-action:$brand-primary !default;


/* Breadcrumbs
------------------------------------
*/
$breadcrumbs-bg: $light !default;
$breadcrumbs-padding: 0.75rem $default-content-padding !default;
$breadcrumbs-font-size:$font-size-base !default;

/* Buttons
------------------------------------
*/
$btn-border-radius: $border-radius !default;
$button-colors:("primary": $brand-primary,
  "secondary": $brand-secondary,
  "tertiary": $brand-tertiary,
  "success": $success,
  "info": $info,
  "warning": $warning,
  "danger": $danger,
  "light": $light,
  "dark": $dark,
  'dark-grey': $dark-grey) !default;
$enable-button-box-shadows: false !default;
$btn-border-width:$border-width !default;
$btn-font-weight:$font-weight-base !default;

/* Card
------------------------------------
*/

$card-height:null !default;
$card-bg: $white !default;
$card-border-width: $border-width !default;
$card-border-radius: $border-radius !default;
$card-spacer:1rem !default;
$card-box-shadow:0 2px 1px -1px rgba(0, 0, 0, 0.2),
0 1px 1px 0 rgba(0, 0, 0, 0.14),
0 1px 3px 0 rgba(0, 0, 0, 0.12) !default;
$card-border-color: $line-color;


/* Tabs
------------------------------------
*/
$tabs-border-radius:$border-radius !default;

/* Chips
------------------------------------
*/
$chip-bg:$dark-grey !default;
$chip-font-size:20px !default;

/* Progress Bar
------------------------------------
*/
$progress-bar-bg: rgba(100, 100, 100, 0.1) !default;
$progress-bar-border-radius:6px !default;


/* Stepper
------------------------------------
*/
$stepper-bg: rgba(100, 100, 100, 0.1) !default;


/* Table
------------------------------------
*/
$table-border-radius:$border-radius !default;
$table-border-width:$border-width !default;
$table-status-colors:("primary": $brand-primary,
  "secondary": $brand-secondary,
  "tertiary": $brand-tertiary,
  "sucess": $success,
  "info": $info,
  "warning": $warning,
  "danger": $danger,
  "light": $light,
  "dark": $dark,
);


/* Panel
------------------------------------
*/

$panel-height:null !default;
$panel-bg:$white !default;
$panel-border-width: $border-width !default;
$panel-border-radius:$border-radius !default;
$panel-spacer:$default-content-padding !default;
$panel-box-shadow:none !default;
$panel-border-color: $line-color;


/* Panel
------------------------------------
*/

$range-thumb-width:20px !default;
$range-thumb-border:$border-width solid transparent !default;
$range-thumb-box-shadow:$box-shadow !default;
$range-thumb-bg:$white !default;

/* Tooltip
------------------------------------
*/

$tooltip-font-size: 0.875rem;
$tooltip-padding: 0.5rem 0.75rem;
$tooltip-font-weight: $font-weight-base;
$tooltip-bg: $white;
$tooltip-color:$body-text;
$tooltip-border-radius:$border-radius;
$tooltip-box-shadow:$box-shadow !default;
$tooltip-border:null !default;


/* Sidebar
------------------------------------
*/

$sidebar-footer-height:64px;
$sidebar-bg:$white;


/* Topbar
------------------------------------
*/

$topbar-bg:$white;
$topbar-font-size: $font-size-base*1.125 !default;


/* Layout
------------------------------------
*/

$sidebar-width:240px;
$topbar-height:56px;
$mobile-topbar-height:44px;
$tabbar-height:50px;

$sidebar-sm-width:$sidebar-width;
$topbar-sm-height:$topbar-height;
$mobile-topbar-sm-height:$mobile-topbar-height;
$tabbar-sm-height:$tabbar-height;

$sidebar-md-width:$sidebar-width;
$topbar-md-height:$topbar-height;
$mobile-topbar-md-height:$mobile-topbar-height;
$tabbar-md-height:$tabbar-height;

$sidebar-lg-width:320px;
$topbar-lg-height:56px;
$mobile-topbar-lg-height:44px;
$tabbar-lg-height:50px;

$sidebar-xl-width:$sidebar-lg-width;
$topbar-xl-height:$topbar-lg-height;
$mobile-topbar-xl-height:$mobile-topbar-lg-height;
$tabbar-xl-height:$tabbar-lg-height;




/* Form Styles
------------------------------------
*/

$form-border-radius:10px !default;
$form-border-width:$border-width !default;
$form-bg:$white !default;
$form-text: $dark-grey !default;
$form-border-color: $line-color !default;
$form-primary: $brand-primary;
$form-active: $brand-primary;
$form-error: $error;
$form-success: $success;


/* Shimmer
------------------------------------
*/
$shimmer-heading-color: #ccc !default;
$shimmer-body-color: #eee !default;
$shimmer-border-radius: $border-radius !default;
$shimmer-line-height: 15px !default;
$shimmer-spacing: $default-content-padding !default;


/* Shimmer
------------------------------------
*/

$modal-backdrop-opacity:0.5;
$modal-xl: 1140px !default;
$modal-lg: 800px !default;
$modal-md: 500px !default;
$modal-sm: 300px !default;
$modal-border-radius: $border-radius !default;
$modal-content-padding: $default-content-padding !default;
$modal-backdrop-bg: $black !default;
$modal-backdrop-opacity: .5 !default;
$modal-bg:$white;
$modal-box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) !default;


/* Rich Text
-------------------------------------
*/

$richtext-extensions-background-color: rgba(240, 240, 240, 0.5);
$richtext-extensions-icon-color-hover: #ddd;
$richtext-extensions-icon-color-active: #ccc;