/* Frontend Light/Dark Same Design Lock
   Keeps the public website identical on mobile/desktop even when the device is in dark mode. */
:root,
html,
body {
  color-scheme: only light !important;
  supported-color-schemes: light !important;
}

html.dark,
body.dark {
  color-scheme: only light !important;
}

html.dark body,
@media (prefers-color-scheme: dark) {
  :root,
  html,
  body {
    color-scheme: only light !important;
    supported-color-schemes: light !important;
  }
}

body {
  background-color: #ffffff;
  color: #1f2937;
}

input,
textarea,
select,
button,
option,
optgroup {
  color-scheme: only light !important;
}

input,
textarea,
select {
  background-color: #ffffff !important;
  color: #111827 !important;
  border-color: #d1d5db;
  -webkit-text-fill-color: #111827;
  caret-color: #111827;
}

input::placeholder,
textarea::placeholder {
  color: #6b7280 !important;
  -webkit-text-fill-color: #6b7280;
}

html.dark .bg-white,
body.dark .bg-white {
  background-color: #ffffff !important;
}

html.dark .text-gray-800,
body.dark .text-gray-800 {
  color: #1f2937 !important;
}

/* Prevent mobile Safari/Chrome from auto darkening form widgets and surfaces. */
@supports (-webkit-touch-callout: none) {
  :root,
  html,
  body,
  input,
  textarea,
  select,
  button {
    color-scheme: only light !important;
  }
}