/* ==============================
   FONT IMPORTS
   ============================== */

@font-face {
    font-family: 'Lato';
    src: url('Lato-Italic.woff2') format('woff2'),
        url('Lato-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Lato';
    src: url('Lato-Regular.woff2') format('woff2'),
        url('Lato-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lato';
    src: url('Lato-Bold.woff2') format('woff2'),
        url('Lato-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lato';
    src: url('Lato-BoldItalic.woff2') format('woff2'),
        url('Lato-BoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Lato';
    src: url('Lato-BlackItalic.woff2') format('woff2'),
        url('Lato-BlackItalic.woff') format('woff');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Lato';
    src: url('Lato-Black.woff2') format('woff2'),
        url('Lato-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}



/* ==============================
   ROOT VARIABLES
   ============================== */

:root {
  /* Font Family */
  --font-primary: "Lato", sans-serif;

  /* Font Weights */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 900;

  /* Font Sizes (Base: 10px = 1rem) */
  --fs-h1: 3.6rem; /* 36px */
  --fs-h2: 3rem; /* 30px */
  --fs-h3: 2.4rem; /* 24px */
  --fs-h4: 2rem; /* 20px */
  --fs-h5: 1.8rem; /* 18px */
  --fs-h6: 1.6rem; /* 16px */
  --fs-body: 1.6rem; /* 16px */
  --fs-small: 1.4rem; /* 14px */
  --fs-tiny: 1.2rem; /* 12px */

  /* Line Height */
  --lh-tight: .8;
  --lh-normal: 1;
  --lh-loose: 1.4;

  /* Letter Spacing */
  --ls-tight: -0.02rem;
  --ls-normal: 0.03rem;
  --ls-wide: 0.05rem;
}

/* Responsive Scale (Optional) */
@media (max-width: 768px) {
  :root {
    --fs-h1: 3.2rem;
    --fs-h2: 2.6rem;
    --fs-h3: 2.2rem;
    --fs-h4: 1.8rem;
    --fs-h5: 1.6rem;
    --fs-h6: 1.4rem;
    --fs-body: 1.4rem;
  }
}

/* ==============================
   BASE TYPOGRAPHY
   ============================== */

html {
  font-size: 10px; /* 1rem = 10px for easy scaling */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-primary);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-loose);
  letter-spacing: var(--ls-normal);
}

/* ==============================
   HEADINGS
   ============================== */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-primary);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-normal);
  line-height: var(--lh-normal);
  margin: 0 0 1rem;
}

h1 {
  font-size: var(--fs-h1);
}
h2 {
  font-size: var(--fs-h2);
}
h3 {
  font-size: var(--fs-h3);
}
h4 {
  font-size: var(--fs-h4);
}
h5 {
  font-size: var(--fs-h5);
}
h6 {
  font-size: var(--fs-body);;
  font-weight: var(--fw-bold);
}

/* ==============================
   TEXT ELEMENTS
   ============================== */

p {
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  margin-bottom: 1.5rem;
}

small, .error {
  font-size: var(--fs-small);
}

strong, b, th {
  font-weight: var(--fw-bold);
}

table:not(.noTable) {
  td, th,.btn, .form-control, p, span, div, input, textarea, select, .select2, .select2-results__option {
   font-size: var(--fs-small);
 }
}

table:not(.noTable) thead th {
  font-size: var(--fs-body);
}

blockquote {
  font-style: italic;
  font-size: var(--fs-small);;
}

code {
  font-size: var(--fs-small);;
}

/* ==============================
   FORM ELEMENTS
   ============================== */

button, .btn, .form-control,
input,
textarea,
select{
  font-family: var(--font-primary) !important;
  font-size: var(--fs-body);
  line-height: inherit;
}

text, .highcharts-menu-item {
  font-family: var(--font-primary) !important;
  font-size: var(--fs-small) !important;
}

label {
  font-weight: var(--fw-regular);
}

.error, .error-msg, footer {
  font-size: var(--fs-small);
}