// Ref: https://github.com/nuxt-community/vuetify-module#customvariables
//
// The variables you want to modify
// $font-size-root: 20px;

$font-family: "DM Sans";
$body-font-family: "DM Sans";
$heading-font-family: "DM Sans";

$primary-orange: #ee9546;
$primary-light-orange: #f5cda8;
$alert-red: #ef5a5a;
$alert-light-red: #e99e9e;

$Neutrals-600: #232323;
$Neutrals-500: #504f4f;
$Neutrals-400: #9c9c9c;
$Neutrals-300: #cecece;
$Neutrals-200: #e5e5e5;
$Neutrals-100: #f8f8f8;
$Neutrals-0: #fefefe;

.v-application {
  font-family: $body-font-family !important;
  letter-spacing: 0.02em !important;
  .title {
    // To pin point specific classes of some components
    font-family: $body-font-family, sans-serif !important;
  }
  .text-h1 {
    font-family: $body-font-family !important;
  }
  .text-h2 {
    font-family: $body-font-family !important;
  }
  .text-h3 {
    font-family: $body-font-family !important;
  }
  .text-h4 {
    font-family: $body-font-family !important;
  }
  .text-h5 {
    font-family: $body-font-family !important;
  }
  .text-h6 {
    font-family: $body-font-family !important;
  }
  .body-1 {
    font-size: 24px !important;
    font-weight: 500;
    line-height: 31px;
    color: $Neutrals-500;
  }
  .body-2 {
    font-size: 18px !important;
    font-weight: 500;
    line-height: 23px;
    color: $Neutrals-500;
  }
  .body-3 {
    font-size: 16px !important;
    font-weight: 500;
    line-height: 21px;
    color: $Neutrals-500;
  }
  .body-4 {
    font-size: 14px !important;
    font-weight: 500;
    line-height: 18px;
    color: $Neutrals-500;
  }
  .body-5 {
    font-size: 12px !important;
    font-weight: 500;
    line-height: 16px;
    color: $Neutrals-500;
  }
  .caption {
    font-family: $body-font-family !important;
  }
  .logo-title {
    font-family: "Damion" !important;
  }
  .v-btn__content {
    font-family: "DM Sans" !important;
  }
  .tablet .container {
    max-width: 100% !important;
  }
  .phone .container {
    max-width: 100% !important;
  }
  .remove-upper {
    text-transform: none !important;
  }
  .v-navigation-drawer--temporary {
    z-index: 10001;
  }
  ::-webkit-scrollbar {
    width: 3px;
  }
  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #e5e5e5;
  }
}