/* Preferência visual da conta. As variáveis ficam no body para vencer os
   valores de cada tela sem duplicar todo o CSS dos formulários. */
html[data-tema="claro"] body {
  --bg: #f4f6f8;
  --surface: #ffffff;
  --sr: #e9edf2;
  --border: #cbd3dc;
  --text: #1d2733;
  --muted: #526275;
  --faint: #718096;
  --gold: #b87908;
  --green: #16804e;
  --red: #c7382d;
  --danger: #c7382d;
  --blue: #2d6faa;
  color-scheme: light;
}

html[data-tema="claro"] body {
  background: var(--bg);
  color: var(--text);
}

html[data-tema="claro"] .site-sidebar {
  background: #ffffff;
  border-color: var(--border);
  box-shadow: 16px 0 42px #0002;
}

html[data-tema="claro"] .site-nav-link.active,
html[data-tema="claro"] .site-nav-link:hover,
html[data-tema="claro"] .mobile-menu-toggle,
html[data-tema="claro"] .sidebar-close {
  background: var(--sr);
}

html[data-tema="claro"] .sidebar-overlay {
  background: #1d273366;
}

html[data-tema="claro"] input,
html[data-tema="claro"] select,
html[data-tema="claro"] textarea {
  color-scheme: light;
  background: var(--sr);
}

html[data-tema="claro"] .overlay {
  background: #1d273366;
}

html[data-tema="claro"] .contas-notice {
  background: var(--sr);
  color: var(--text);
}