@import url(/css/webfonts.css);

/* Main variables */
:root {
  --font-family: 'Heebo';
  --font-family-backup: 'Arial';

  --color-black: #303030;
  --color-blue: #0069be;
  --color-dark-blue: #1b358f;
  --color-gray: #879196;
  --color-green: #317a64;
  --color-purple: #523a81;
  --color-orange: #ff9736;
  --color-red: #ed4650;
  --color-yellow: #ffeb3b;
  --color-white: #ffffff;

  --Black-50: #ebebeb;
  --Black-100: #d6d6d6;
  --Black-200: #adadad;
  --Black-300: #828282;
  --Black-400: #595959;
  --Black-500: var(--color-black);
  --Black-600: #262626;
  --Black-700: #1c1c1c;
  --Black-800: #141414;
  --Black-900: #0a0a0a;

  --Blue-50: #ebf6ff;
  --Blue-100: #d6edff;
  --Blue-200: #addaff;
  --Blue-300: #70bfff;
  --Blue-400: #249cff;
  --Blue-500: var(--color-blue);
  --Blue-600: #005fad;
  --Blue-700: #005194;
  --Blue-800: #004680;
  --Blue-900: #00325c;

  --Dark-Blue-50: #e1e6f9;
  --Dark-Blue-100: #c7d1f4;
  --Dark-Blue-200: #8ba0e9;
  --Dark-Blue-300: #5372df;
  --Dark-Blue-400: #264aca;
  --Dark-Blue-500: #1b358f;
  --Dark-Blue-600: #162a74;
  --Dark-Blue-700: #101f56;
  --Dark-Blue-800: #0b1438;
  --Dark-Blue-900: #060b1e;

  --Gray-50: #f7f8f8;
  --Gray-100: #eceeee;
  --Gray-200: #d9dcde;
  --Gray-300: #c3c8cb;
  --Gray-400: #a8afb3;
  --Gray-500: var(--color-gray);
  --Gray-600: #778288;
  --Gray-700: #6b757a;
  --Gray-800: #565e62;
  --Gray-900: #404649;

  --Green-50: #edf8f4;
  --Green-100: #dbf0ea;
  --Green-200: #afdfd0;
  --Green-300: #78c9b1;
  --Green-400: #45ab8c;
  --Green-500: var(--color-green);
  --Green-600: #2c6d5a;
  --Green-700: #265f4e;
  --Green-800: #1f4c3f;
  --Green-900: #16372d;

  --Purple-50: #f6f4fa;
  --Purple-100: #ebe6f4;
  --Purple-200: #d4cae7;
  --Purple-300: #baabd9;
  --Purple-400: #957dc5;
  --Purple-500: var(--color-purple);
  --Purple-600: #473371;
  --Purple-700: #412e66;
  --Purple-800: #382858;
  --Purple-900: #1d152e;

  --Orange-50: #fff7f0;
  --Orange-100: #ffefe0;
  --Orange-200: #ffddbd;
  --Orange-300: #ffca99;
  --Orange-400: #ffb36b;
  --Orange-500: var(--color-orange);
  --Orange-600: #ff7b00;
  --Orange-700: #e06c00;
  --Orange-800: #b85900;
  --Orange-900: #854000;

  --Red-50: #fef1f2;
  --Red-100: #fde8e9;
  --Red-200: #facccf;
  --Red-300: #f7b0b5;
  --Red-400: #f3868d;
  --Red-500: var(--color-red);
  --Red-600: #e81725;
  --Red-700: #d11421;
  --Red-800: #ac111b;
  --Red-900: #820d14;

  --Yellow-50: #fffdf0;
  --Yellow-100: #fffce0;
  --Yellow-200: #fff8bd;
  --Yellow-300: #fff59e;
  --Yellow-400: #fff170;
  --Yellow-500: var(--color-yellow);
  --Yellow-600: #ebd300;
  --Yellow-700: #d1bc00;
  --Yellow-800: #ad9c00;
  --Yellow-900: #7a6e00;

  /*
    --color-primary:
      This variable defines the primary system text color used across elements.
      It is typically applied to any element that requires emphasis using the primary color theme.
  */
  --color-primary: var(--color-green);
  /*
   --color-primary-bg-subtle:
      This variable defines the background color used for active or hover states,
      such as when hovering over list items.

      Important:
      Ensure that this color is lighter than the value assigned to --color-primary
      to maintain proper visual contrast.
  */
  --color-primary-bg-subtle: var(--Green-100);

  --checkbox-background-color: var(--color-primary);

  --body-background-color: #fdfeff;

  --element-box-shadow: 0 0 20px 0 #30303014;
  --element-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;

  --element-focus-border-color: var(--Gray-400);
  --element-hover-border-color: var(--Gray-300);

  --element-required-color: var(--color-red);

  --table-header-cells-background-color: #fbfafa;
  --table-header-cells-text-color: var(--text-color);

  --table-header-cells-font-size: 14px;
  --table-header-cells-font-weight: 600;

  --table-tbody-cells-font-size: 14px;
  --table-tbody-cells-font-weight: 400;

  --text-color: var(--color-black);

  --tooltip-color: var(--color-white);
  --tooltip-background-color: var(--color-black);

  --Radius-4: 4px;
  --Radius-6: 6px;
  --Radius-8: 8px;
}

* {
  font-family: var(--font-family), Arial, sans-serif;
  color: var(--text-color);
}

body {
  font-family: var(--font-family), Arial, sans-serif;
  color: var(--text-color);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}