/* Lato font definitions */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v15/S6uyw4BMUTPHjx4wXiWtFCc.woff2) format('woff2');
}

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: local('Lato Bold'), local('Lato-Bold'), url(https://fonts.gstatic.com/s/lato/v15/S6u9w4BMUTPHh6UVSwiPGQ3q5d0.woff2) format('woff2');
}

/* Mode toggle button styles */
.mode-toggle {
  font-family: 'Lato', Verdana, Helvetica, sans-serif !important;
  color: #333;
  margin: 8px auto;
  padding: 6px 32px;
  text-align: center;
  font-size: 14px;
  width: fit-content;
  font-weight: 600;
}

.mode-btn {
    background: none;
    border: none;
    color: #e6c05f;
    cursor: pointer;
    font-family: inherit;
    font-size: 16px; /* Absolute size: 1.5em × 14px = 21px */
    font-weight: 600;
    padding: 4px 10px 6px;
    margin: 0;
    transition: color 0.2s ease;
}

.mode-btn:last-child {
  margin-left: 5px;
}

.mode-btn:hover {
    color: #ef9f00;
}

.mode-btn.active {
  background-color: #efb237;
  color: #fff;
  border-radius: 0.3rem;
}