:root {
  --field-bg: #ffffff;
  --field-text: #17221d;
  --field-border: #66736c;
  --field-placeholder: #59665f;
  --focus-inner: #ffffff;
  --focus-outer: #173b2c;
}

body {
  color-scheme: light;
}

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  width: 100%;
  min-height: 50px;
  padding: 0 14px;
  border: 2px solid var(--field-border);
  border-radius: 10px;
  background: var(--field-bg);
  color: var(--field-text);
  caret-color: var(--field-text);
  font: inherit;
  font-size: 16px;
  -webkit-text-fill-color: var(--field-text);
  opacity: 1;
}

textarea {
  min-height: 120px;
  padding-block: 12px;
  resize: vertical;
}

input::placeholder,
textarea::placeholder {
  color: var(--field-placeholder);
  opacity: 1;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--focus-outer);
  outline: 2px solid var(--focus-inner);
  outline-offset: 0;
  box-shadow: 0 0 0 4px var(--focus-outer);
}

:where(a, button, .button, summary):focus-visible {
  outline: 2px solid var(--focus-inner);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--focus-outer);
}

input[readonly],
textarea[readonly] {
  background: #edf1ee;
  color: #405047;
  -webkit-text-fill-color: #405047;
}

input[type="file"] {
  padding: 6px;
}

input::file-selector-button {
  min-height: 34px;
  margin-right: 12px;
  padding: 0 12px;
  border: 1px solid var(--field-border);
  border-radius: 7px;
  background: #edf1ee;
  color: var(--field-text);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--field-text);
  box-shadow: 0 0 0 1000px var(--field-bg) inset;
}

.field-requirement {
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

.field-requirement.required {
  color: #6f2525;
}

@media (prefers-color-scheme: dark) {
  .authenticated {
    --field-bg: #18231d;
    --field-text: #eef4f0;
    --field-border: #93a299;
    --field-placeholder: #bdc8c1;
    --focus-inner: #111914;
    --focus-outer: #d7ff36;
    color-scheme: dark;
  }

  .authenticated input,
  .authenticated select,
  .authenticated textarea {
    border-color: var(--field-border);
    background: var(--field-bg);
    color: var(--field-text);
  }

  .authenticated input[readonly],
  .authenticated textarea[readonly] {
    background: #223028;
    color: #cbd5cf;
    -webkit-text-fill-color: #cbd5cf;
  }

  .authenticated input::file-selector-button {
    background: #223028;
    color: var(--field-text);
  }

  .authenticated .field-requirement.required {
    color: #ffb4ab;
  }
}