/* Definição global de variáveis */
:root {
  --bg: #ffffff; /* Cor de fundo padrão (para tema claro) */
  --text-color: #ffffff; /* Cor do texto padrão (para tema claro) */
  --font-size: 16px; /* Tamanho da fonte padrão */
}

/* Definições específicas para tema claro */
:root[data-theme="light"] {
  --bg: #ffffff; /* Cor de fundo para o tema claro */
  --text-color: #1d1d1d; /* Cor do texto para o tema claro */
}

/* Definições específicas para tema escuro */
:root[data-theme="dark"] {
  --bg: #1d1d1d; /* Cor de fundo para o tema escuro */
  --text-color: #ffffff; /* Cor do texto para o tema escuro */
}

/* Definições de tamanho de fonte */
[data-font="small"] {
  --font-size: 14px;
}

[data-font="medium"] {
  --font-size: 16px;
}

[data-font="large"] {
  --font-size: 18px;
}

body {
  background: var(--bg);
  font-size: var(--font-size);
  font-family: sans-serif;
  transition: all 0.3s;
}

.appearance-menu-wrapper {
  color: var(--text-color);
  position: relative;
  margin-right: 68%;
  border: none;
  font-weight: bold;
}

.appearance-menu-wrapper:hover {
  background-color: #ff7b00;
  border-radius: 6px;
}

#appearance-toggle {
  cursor: pointer;
  padding: 0.5rem;
  background: none;
  color: #ffffff;
}

.appearance-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--bg);
  color: var(--text);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  z-index: 1000;
}

.menu-section p {
  margin: 0 0 0.5rem 0;
  font-weight: bold;
}

.menu-section button {
  display: block;
  margin-bottom: 0.25rem;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
}

.menu-section button:focus {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

.hidden {
  display: none;
}