@import "mixins.less";


.form {
  .box-sizing(border-box);

  h1, h2 {
    text-align: center;
    color: @darkGrey;
    font-size: 1.5em;
    font-weight: 200;
  }

  input, button {
    .box-sizing(border-box);
    border: 3px solid #eee;
    width: 100%;
    font-size: 1.2em;
    margin: 0.5em 0;
    padding: 1em;
    clear: both;
    -webkit-appearance: none;
    border-radius: 0;
  }

  button {
    background-color: @primary;
    color: #fff;
    border: 0;
    text-transform: uppercase;
    cursor: pointer;
  }

  button:hover, button:active, button:focus {
    background-color: @primaryDark;
  }

  input:focus, button:focus {
    border-color: @primary;
    outline: 0;
  }

  p {
    text-align: center;
  }

  .errors {
    position: relative;

    li {
      color: @errorRed;
      right: 1.5em;
      bottom: 2em;
      position: absolute;
      width: auto;
      display: inline-block;
    }
  }
}

@import "mixins.less";


.form {
  .box-sizing(border-box);

  h1, h2 {
    text-align: center;
    color: @darkGrey;
    font-size: 1.5em;
    font-weight: 200;
  }

  input, button {
    .box-sizing(border-box);
    border: 3px solid #eee;
    width: 100%;
    font-size: 1.2em;
    margin: 0.5em 0;
    padding: 1em;
    clear: both;
    -webkit-appearance: none;
    border-radius: 0;
  }

  button {
    background-color: @primary;
    color: #fff;
    border: 0;
    text-transform: uppercase;
    cursor: pointer;
  }

  button:hover, button:active, button:focus {
    background-color: @primaryDark;
  }

  input:focus, button:focus {
    border-color: @darkGrey;
    outline: 0;
  }

  p {
    text-align: center;
  }

  .errors {
    position: relative;

    li {
      color: @errorRed;
      right: 1.5em;
      bottom: 2em;
      position: absolute;
      width: auto;
      display: inline-block;
    }
  }
}

Use dark grey for input focus border
Use dark grey for input focus border
