:root {
  --text-primary: #171717;
  --text-body: #444;
  --text-secondary: #8e8e8e;
  --text-muted: #767676;
  --text-muted-alt: #6c6c6c;
  --text-on-dark: #fff;
  --text-accent: #ecf0f1;
  --background-darker: #f7f7f7;
  --background-light: #fff;
  --background-muted: #f5f5f5;
  --background-notice: #f9edbe;
  --background-error-soft: #fbdddd;
  --color-warning: rgb(231, 93, 93);
  --color-warning-strong: #ec971f;
  --color-success: #277d27;
  --color-danger: #c9302c;
  --color-primary: #122b4e;
  --color-primary-lighter:  #214b84;
  --color-primary-darker:  #0d203a;
  --color-link: #096898;
  --border-grey: #c0c0c0;
  --border-light: #dedede;
  --color-neutral: #808080;
  --color-accent: #1c85ba;
  --color-info: #31b0d5;
  --color-twitter: #55acee;
  --color-mail: #fe854d;
}

.q-button {
  padding: 5px 7px;
  font-weight: bold;
  overflow: hidden;
  border-width: 0;
  outline: none;
  border-radius: 2px;
  box-shadow: 0 1px 4px var(--background-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)
}