/* Override dark mode variables to light theme */
@media (prefers-color-scheme:dark) {
  :root {
    --white: #FFFFFF !important;
    --black: #000000 !important;
    --dark: #141416 !important;
    --gray: #D5D5D5 !important;
    --light: #E0DDD9 !important;
    --lighter: #D5D5D5 !important;
    --lightest: #F0F0F0 !important;
    --page-bg: #FFFFFF !important;
    --color: #754E1A !important;
    --border-color: #E0DDD9 !important;
    --text-color: #141416 !important;
    --text-color-light: #6E737E !important;
    --headings-color: #141416 !important;
    --link-color: #141416 !important;
    --link-color-hover: #a7455e !important;
    --nav-link-color: #141416 !important;
    --nav-link-color-hover: #a7455e !important;
    --backdrop-bg: rgba(255, 255, 255, 0) !important;
    --logo-color: #141416 !important;
    --highlight-color: #FFC700 !important;
    --info-color: #67B1F3 !important;
    --success-color: #00A563 !important;
    --warning-color: #EE4E4E !important;
    --shadow: 0 0 3px 0 rgba(0, 0, 0, .1) !important;
    --shadow-submenu: 0 0 2px 0 rgba(0, 0, 0, .2) !important;
    --code-color: #C84B31 !important;
  }
}

/* Optional: force the body background and text color */
body {
  background-color: var(--page-bg) !important;
  color: var(--text-color) !important;
}