:root {
  --text-primary: #171717;
  --text-secondary: #8e8e8e;
  --text-accent: #ecf0f1;
  --background-darker: #f7f7f7;
  --background-light: #fff;
  --color-warning: rgb(231, 93, 93);
  --color-primary: #122b4e;
  --color-primary-lighter:  #214b84;
  --color-primary-darker:  #0d203a;
  --border-grey: #c0c0c0;
  --color-accent: #1c85ba;
}

.q-button {
  padding: 5px 7px;
  font-weight: bold;
  overflow: hidden;
  border-width: 0;
  outline: none;
  border-radius: 2px;
  box-shadow: 0 1px 4px var(--backgroud-darker);  
  transition: background-color .3s;

  background-color: var(--color-primary);
  color: var(--text-primary);
}

.q-button.primary {
  background-color: var(--color-primary);
  color: var(--text-accent);
}
.q-button.primary:hover, .q-button.primary:focus {
  background-color: var(--color-primary-lighter)
}