/* Configurações Gerais */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  transition: background 0.5s ease, color 0.5s ease;
}
main {
  flex: 1;
}

/* ----------- Variáveis de Cores ----------- */
:root {
  --cor-dark1: #00111a;
  --cor-dark2: #1e2531;
  --cor-texto-dark: #fff;
  --cor-input-dark: #0e1923;
  --cor-borda-dark: #334155;

  --cor-light1: #ffffff;
  --cor-light2: #e0cf9d;
  --cor-texto-light: #111;
  --cor-input-light: #f6f6f6;
  --cor-borda-light: #ccc;

  --cor-acento: #00d9ff;
}

/* ----------- Tema via Bootstrap ----------- */
html[data-bs-theme="dark"] body {
  background: linear-gradient(90deg, var(--cor-dark1), var(--cor-dark2));
  color: var(--cor-texto-dark);
}
html[data-bs-theme="light"] body {
  background: linear-gradient(90deg, var(--cor-light1), var(--cor-light2));
  color: var(--cor-texto-light);
}

/* -------- Campos e Botões -------- */
input, select, textarea {
  appearance: none;
  transition: all 0.3s ease;
}
html[data-bs-theme="dark"] input,
html[data-bs-theme="dark"] select,
html[data-bs-theme="dark"] textarea {
  background-color: var(--cor-input-dark);
  color: var(--cor-texto-dark);
  border: 1px solid var(--cor-borda-dark);
}
html[data-bs-theme="light"] input,
html[data-bs-theme="light"] select,
html[data-bs-theme="light"] textarea {
  background-color: var(--cor-input-light);
  color: var(--cor-texto-light);
  border: 1px solid var(--cor-borda-light);
}
input::placeholder, textarea::placeholder {
  color: #aaa;
}

/* Sol e Lua */
#sol, #lua {
  color: #fff;
}
#sol.glow {
  color: #ffea00 !important;
  text-shadow: 0 0 15px #ffea00 !important;
}
#lua.glow {
  color: #E6BE8A !important;
  text-shadow: 0 0 15px #E6BE8A !important;
}

/* -------- Switch -------- */
/* Cor da bolinha do switch */
.form-check-input {
  border: 1px solid var(--cor-acento);
  background-color: transparent;
  transition: all 0.3s ease;
}
.form-check-input:checked {
  background-color: var(--cor-acento);
  border-color: var(--cor-acento);
}
/* 🔹 Aqui você pode mudar a cor da bolinha quando perder o foco */
.form-check-input:not(:focus) {
  box-shadow: 0 0 4px var(--cor-acento);
}

/* -------- Ajustes globais -------- */
html[data-bs-theme="dark"] .container,
html[data-bs-theme="dark"] section,
html[data-bs-theme="dark"] .card,
html[data-bs-theme="dark"] .bg-light,
html[data-bs-theme="dark"] .bg-white {
  background-color: transparent !important;
  color: var(--cor-texto-dark) !important;
}