:root {
  --ff-body: "mundial", sans-serif;
  --ff-accent: "mundial", sans-serif;
  --fw-normal: 300;
  --fw-bold: 700;
  --block-space: 2rem;

  --box-shadow-1:
    0px 5px 10px rgb(0, 0, 0, 0.18), 0px 22px 18px rgb(0, 0, 0, 0.018),
    0px 100px 80px rgb(0, 0, 0, 0.03);
  --box-shadow-2:
    0px 6px 5px rgb(0, 0, 0, 0.016), 0px 22px 18px rgb(0, 0, 0, 0.024),
    0px 100px 80px rgb(0, 0, 0, 0.04);
}

html,
body {
  background: var(--clr-background);
  color: var(--clr-ink);
  font-family: var(--ff-body);
  line-height: 1.6;
}

label {
  display: block;
  padding-bottom: 0.5rem;
  font-weight: var(--fw-bold);
}

fieldset legend {
  font-weight: var(--fw-bold);
  margin-bottom: 0.5rem;
}

input[type="text"],
input[type="search"],
input[type="datetime-local"],
input[type="number"],
input[type="password"],
input[type="email"],
input[type="date"],
input[type="tel"],
textarea,
select {
  padding: 0.4em 0.6em;
  width: 100%;
  border: 1px solid var(--clr-ink);

  &:focus-visible {
    border: 1px solid var(--clr-selected);
    outline: none;
  }
}

input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  font: inherit;
  color: currentColor;
  width: 1.15em;
  height: 1.15em;
  border: 2px solid var(--clr-ink);
  transform: translateY(-0.075em);
  display: grid;
  place-content: center;
}

input[type="checkbox"]::before {
  content: "";
  width: 0.65em;
  height: 0.65em;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  transform: scale(0);
  transform-origin: bottom left;
  transition: 120ms transform ease-in-out;
  background-color: CanvasText;
}

input[type="checkbox"]:checked::before {
  transform: scale(1);
}

input[type="checkbox"]:focus {
  outline: max(2px, 0.15em) solid currentColor;
  outline-offset: max(2px, 0.15em);
}

input[type="checkbox"]:disabled {
  background-color: var(--clr-separators);
  cursor: not-allowed;
}

a,
button {
  color: var(--clr-accent);
  text-decoration: underline;

  &:hover {
    color: var(--clr-selected);
  }
}

p {
  margin-block: var(--block-space);
}

hr {
  border: none;
  border-bottom: 1px solid var(--clr-separators);
}