/* Global base styles & Bootstrap wiring. Notes: Documentation/Frontend/css/base.md */
@import url('../bootstrap/bootstrap.min.css');

@import url('tokens.css');

body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: 1.5;
  color: var(--text);
  background-color: var(--bg-body);
}

a {
  color: var(--color-primary);
  text-decoration: none;
}

a:hover {
  color: var(--color-primary);
  opacity: 0.8;
}

.form-control {
  background-color: var(--bg-form);
  border-color: var(--form-border);
  color: var(--text-inverse);
}

.form-control::placeholder {
  color: var(--text-placeholder);
}

.form-control:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 0.25rem var(--color-primary-alpha);
  color: var(--text-inverse);
}

.input-group-text {
  background-color: var(--form-bg-group);
  border-color: var(--form-border);
  color: var(--form-text-group);
}

.btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

.btn-primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-primary:hover {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover-border);
}

.navbar {
  background-color: var(--bg-navbar);
}