:root {
  --cream: #e9eceb;
  --black: #171916;
  --yellow: #ffe500;
  --white: #ffffff;
  --field-border: #b8bfbc;
  --gray: #626967;
  --line: #b8bfbc;
}

input,
select,
textarea {
  color: var(--black);
  background: var(--white);
  border-color: var(--field-border);
}

.error {
  display: none;
  margin-top: 16px;
  padding: 14px 16px;
  background: var(--black);
  color: var(--white);
  line-height: 1.4;
  border-left: 4px solid var(--yellow);
}

input::placeholder,
textarea::placeholder {
  color: rgba(23, 25, 22, 0.58);
  opacity: 1;
}

input:focus,
select:focus,
textarea:focus,
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--black);
  outline-offset: 3px;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--black);
  box-shadow: 0 0 0 3px rgba(255, 229, 0, 0.42);
}

input[type="radio"],
input[type="checkbox"] {
  accent-color: var(--yellow);
}

button:hover,
.button:hover,
.join:hover,
.submit:hover {
  filter: brightness(0.96);
}

button:active,
.button:active,
.join:active,
.submit:active {
  transform: translateY(1px);
}

button:disabled,
.button:disabled,
.submit:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  filter: none;
}