/* VARIABLES */

:root {
  /* BRAND COLORS - UI COLORS */
  --primary: #0b2e6a;
  --primary-light: #e3f4ff;
  --primary-light-transparency: rgba(227, 244, 255, 0.9);
  --primary-sm: #d8e8f2;
  --primary-medium: #b1d1e5;

  --secondary: #0677bd;

  --ui-black: #212529;
  --ui-black-transparency: rgba(33, 37, 41, 0.5);
  --ui-gray: #9a9a9a;
  --ui-gray-medium: #dbe1eb;
  --ui-gray-800: #535a5f;
  --ui-white: #fff;

  --btn-tab-hover: #0377bc34;

  /* FONT - HEADINGS - BODY TEXTS */
  --primary-font: "Open Sans", sans-serif;
  --secondary-font: "Domine", serif;

  --heading-xs: 1.4rem;
  --heading-sm: 1.4rem;
  --heading-md: 1.4rem;
  --heading-lg: 1.5rem;
  --heading-xl: 2rem;
  --heading-xxl: 2.5rem;

  --heading-color-dflt: var(--primary);

  --body-txt-sm: 12px;
  --body-txt-md: 14px;
  --body-txt-regular: 16px;
  --body-txt-lg: 20px;

  --body-txt-line-height-sm: 20px;
  --body-txt-line-height-md: 22px;
  --body-txt-line-height-regular: 24px;
  --body-txt-line-height-lg: 28px;

  --body-txt-color: var(--ui-black);

  /* MARGINS */
  --gutter-base: 4px;
  --gutter-xs: var(--gutter-base); /* 4px */
  --gutter-sm: calc(var(--gutter-base) * 2); /* 8px */
  --gutter-md: calc(var(--gutter-sm) * 2); /* 16px */
  --gutter-lg: calc(var(--gutter-md) * 2); /* 32px */
  --gutter-xl: calc(var(--gutter-lg) * 2); /* 64px */
  --gutter-xxl: calc(var(--gutter-xl) * 2); /* 128px */

  /* PADDINGS */
  --padding-base: 2px;
  --padding-xs: var(--padding-base); /* 2px */
  --padding-sm: calc(var(--padding-base) * 2); /* 4px */
  --padding-md: calc(var(--padding-sm) * 2); /* 8px */
  --padding-lg: calc(var(--padding-md) * 2); /* 16px */
  --padding-xl: calc(var(--padding-lg) * 2); /* 32px */
  --padding-xxl: calc(var(--padding-xl) * 2); /* 64px */

  /* SHADOWS */
  --box-shdw: 0px 0px 15px 0px rgba(33, 37, 41, 0.1);
  --box-shdw-hvr: 0 3px 6px rgba(33, 37, 41, 0.1);
  --text-shdw: 0 3px 5px rgba(33, 37, 41, 0.5);
  --image-shdw: drop-shadow(1px 1px 2px black)
    drop-shadow(4px 4px 4px rgb(113, 121, 126, 0.7))
    drop-shadow(4px 4px 6px rgb(113, 121, 126, 0.4));

  /* COMPONENTS */
  /* BANNER */
  --banner-border-radius: 12px;

  /* CARD */
  --card-border-radius: 8px;

  /* DEFAULT - REUSABLE */
  --dflt-border-solid: 1px solid var(--primary-sm);
  --dflt-border-solid-transparent: 1px solid transparent;
  --input-border-radius: 10px;

  /* FORM ELEMENTS */
  --form-input-border-solid: 1px solid var(--ui-gray-medium);
  --form-input-border-radius: 4px;

  /* TABLE */
  --table-txt-regular: 18px;
  --table-txt-lg: 20px;
  --table-line-height: normal;
}

/* BREAKPOINTS */

/* viewport-xs - Extra Small screens */
/* CSS Styles for devices with widths smaller than 576px */
@media screen and (max-width: 576px) {
}

/* viewport-sm - Small screens */
/* CSS Styles for devices with widths wider than 576px */
@media screen and (min-width: 576px) {
  :root {
    --heading-xs: 1.3rem;
    --heading-sm: 1.3rem;
    --heading-md: 1.3rem;
  }
}

/* viewport-md - Medium screens */
/* CSS Styles for devices with widths wider than 768px */
@media screen and (min-width: 768px) {
  :root {
    --heading-xs: 0.875rem;
    --heading-sm: 1rem;
    --heading-md: 1.25rem;
  }
}

/* viewport-lg - Large screens */
/* CSS Styles for devices with widths wider than 992px */
@media screen and (min-width: 992px) {
}

/* viewport-xl - Extra Large screens */
/* CSS Styles for devices with widths wider than 1200px */
@media screen and (min-width: 1200px) {
}

/* viewport-xxl - Ultrawide screens */
/* CSS Styles for devices with widths wider than 1400px */
@media screen and (min-width: 1400px) {
}