:root {
  /*
   * Typography
   * ======================================================================== */

  --font-family-base: 'Inter', sans-serif;

  /*
   * Layout
   * ======================================================================== */

  --max-content-width: 1000px;
  --main-content-width: 720px;
  --login-width: 380px;

  /*
   * Media queries breakpoints
   * ======================================================================== */

  --screen-xs-min: 576px;

  /* Extra small screen / phone */
  --screen-sm-min: 768px;

  /* Small screen / tablet */
  --screen-md-min: 992px;

  /* Medium screen / desktop */
  --screen-lg-min: 1200px;

  /* Large screen / wide desktop */

  /*
   * Colors
   * ======================================================================== */

  --primary-color: #102438;
  --secondary-color: #0f0;
  --warning-color: #faad14;
  --info-color: #000;
  --link-color: #000;
  --error-color: #dc3545;
  --label-color: #777;
  --border-color: #aaa;
  --border-color-dark: #777;
  --button-hover-color: rgba(11, 11, 11, 0.8);
  --button-hover-color-dark: #aaa;
  --bg-color: #f9f9f9;
  --fade-color: #bbb;
  --white-color: #fff;
  --black-color: #000;
  --default-hover: #a99cff;
  --box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);

  /*
   * Form control size
   * ======================================================================== */
  --control-height: 2.5em;
  --control-height-mobile: 3em;
  --label-size: 1em;
  --input-width-small: 60px;
  --border-radius-base: 10px;
  --border-width: 1px;
  --padding-lg: 24px;
}