/**
 * Priority to use css varibales:
 *   1. --tb- template variable if exists
 *   2. --bs- bootstrap variable if exists
 *   3. custom variable or literal css value
 */
:root {
  /* Template variables ----------------- */
  --tb-mono-white-rgb: 255, 255, 255;
  --tb-mono-white: rgba(255, 255, 255, 1);
  --tb-mono-black-rgb: 0, 0, 0;
  --tb-mono-black: rgba(0, 0, 0, 1);

  --tb-primary-100: rgba(235, 243, 251, 1);
  --tb-primary-200: rgba(192, 218, 243, 1);
  --tb-primary-300: rgba(154, 196, 237, 1);
  --tb-primary-400: rgba(108, 170, 228, 1);
  --tb-primary-500-rgb: 2, 108, 209;
  --tb-primary-500: rgba(2, 108, 209, 1);
  --tb-primary-600-rgb: 0, 91, 157;
  --tb-primary-600: rgba(0, 91, 157, 1);
  --tb-primary-700: rgba(1, 47, 92, 1);
  --tb-primary-800: rgba(1, 33, 65, 1);
  --tb-primary-900: rgba(0, 20, 39, 1);

  --tb-secondary-100: rgba(243, 244, 245, 1);
  --tb-secondary-200: rgba(218, 220, 222, 1);
  --tb-secondary-300: rgba(196, 200, 203, 1);
  --tb-secondary-400: rgba(170, 175, 180, 1);
  --tb-secondary-500-rgb: 108, 117, 125;
  --tb-secondary-500: rgba(108, 117, 125, 1);
  --tb-secondary-600: rgba(70, 76, 81, 1);
  --tb-secondary-700: rgba(47, 51, 55, 1);
  --tb-secondary-800: rgba(33, 36, 39, 1);
  --tb-secondary-900: rgba(20, 22, 24, 1);

  /* Bootstrap overrides ---------------- */
  /* --bs-body-font-family: "Roboto", sans-serif; */
  --bs-body-font-family: 'Plus Jakarta Sans', Helvetica, sans-serif;
  --bs-body-bg: #fff;
  --bs-body-bg-rgb: 255, 255, 255;

  /* Default link colors */
  --bs-link-color-rgb: var(--tb-primary-500-rgb);
  --bs-link-hover-color-rgb: var(--tb-primary-600-rgb);
  --bs-link-color: var(--tb-primary-500);
  --bs-link-hover-color: var(--tb-primary-600);

  /* 0.875rem = 14px / 16px (1rem) */
  --bs-body-font-size: 0.875rem;

  /* Bootstrap color overrides */
  --bs-gray-50: #F1F1F1;
  --bs-gray-100: #f9f9fa;
  --bs-gray-200: #eaecee;
  --bs-gray-300: #dee1e5;
  --bs-gray-400: #cfd4d9;
  --bs-gray-500: #adb5bd;
  --bs-gray-600: #71767b;
  --bs-gray-700: #4c4f53;
  --bs-gray-800: #36383b;
  --bs-gray-900: #212224;

  --bs-blue: var(--tb-primary-500);

  --bs-secondary-rgb: var(--tb-secondary-500-rgb);
  --bs-secondary: var(--tb-secondary-500);

  --bs-primary-rgb: var(--tb-primary-500-rgb);
  --bs-primary: var(--tb-primary-500);

  --bs-info-rgb: 38, 157, 217;
  --bs-info: rgba(38, 157, 217, 1);

  --bs-warning-rgb: 255, 152, 0;
  --bs-warning: rgba(255, 152, 0, 1);

  --bs-danger-rgb: 233, 73, 73;
  --bs-danger: rgba(233, 73, 73, 1);

  --bs-success-rgb: 76, 175, 80;
  --bs-success: rgba(76, 175, 80, 1);

  --bs-black-rgb: var(--tb-mono-black-rgb);
  --bs-black: var(--tb-mono-black);
  --bs-white-rgb: var(--tb-mono-white-rgb);
  --bs-white: var(--tb-mono-white);

  /* Components variables --------------- */
  --tb-light-border-color: var(--bs-gray-400);
  --tb-checkbox-size: 1.25rem;
  --tb-landing-bg: rgba(245, 249, 252, 1);
  --tb-default-btn-min-width: 12rem;
  --tb-backdrop-color: rgba(0, 0, 0, 1);
  --tb-backdrop-opacity: .5;

  /* Thirdparty ------------------------- */
  /* Mmenu (see ~/vendor/mmenu.css) */
  --mm-navbar-size: 3.5rem;

  /* Swiper (see ~/vendor/swiper-bundle.min.css) */
  --swiper-theme-color: var(--bs-primary);

  /* CSS FC Acre variables */

  /* Colors */
  /* --acre-primary-blue: #1500FF;
  --acre-primary-black: #1E1E1E;
  --acre-primary-white: #FFFFFF;
  --acre-secondary-light: #BFE6FF;
  --acre-secondary-medium: #87E8EE;
  --acre-secondary-dark: #0E1F78;
  --acre-grayscale-light: #F1F1F1;
  --acre-grayscale-medium: #D9D9D9;
  --acre-grayscale-dark: #999999;
  --acre-body-black: #474747;
  --acre-blue-black: #1550FF;
  --acre-error-state: #EC6358;
  --acre-error-state-rgb: 236, 99, 88;
  --acre-state-bg: #FAD8D5;
  --acre-btn-hover: #1100D0; */

  /* Fonts */
  /* --family-title:         'Satoshi', Helvetica, sans-serif;
  --family-body:          'Plus Jakarta Sans', Helvetica, sans-serif; */

  --small-body-font-size: 14px;
  --body-font-size:       16px;
  --title-font-size:      34px;

}